Chart demo updates

doc/chart/ComboDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -204,6 +206,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/DoughnutDoc.vue

@@ -9,13 +9,13 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
             chartData: null,
-            chartOptions: {
+            chartOptions: null,
-                cutout: '60%'
-            },
             code: {
                 basic: `
 <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
@@ -99,10 +99,17 @@ const setChartData = () => {
     },
     mounted() {
         this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
-            const documentStyle = getComputedStyle(document.body);
+            const documentStyle = getComputedStyle(document.documentElement);
 
             return {
                 labels: ['A', 'B', 'C'],
@@ -114,6 +121,21 @@ const setChartData = () => {
                     }
                 ]
             };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--text-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            cutout: '60%',
+                            color: textColor
+                        }
+                    }
+                }
+            };
         }
     }
 };

doc/chart/HorizontalBarDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -194,6 +196,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
@@ -230,7 +238,7 @@ const setChartOptions = () => {
                 plugins: {
                     legend: {
                         labels: {
-                            fontColor: textColor
+                            color: textColor
                         }
                     }
                 },

doc/chart/LineDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -186,6 +188,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/LineStylesDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -204,6 +206,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/MultiAxisDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -222,6 +224,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/PieChartDoc.vue

@@ -9,19 +9,13 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
             chartData: null,
-            chartOptions: {
+            chartOptions: null,
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            },
             code: {
                 basic: `
 <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
@@ -117,10 +111,17 @@ const setChartData = () => {
     },
     mounted() {
         this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
-            const documentStyle = getComputedStyle(document.body);
+            const documentStyle = getComputedStyle(document.documentElement);
 
             return {
                 labels: ['A', 'B', 'C'],
@@ -132,6 +133,21 @@ const setChartData = () => {
                     }
                 ]
             };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--text-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            usePointStyle: true,
+                            color: textColor
+                        }
+                    }
+                }
+            };
         }
     }
 };

doc/chart/PolarAreaDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -152,6 +154,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/RadarDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -168,6 +170,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/StackedBarDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -206,6 +208,12 @@ const setChartOptions = () =>  {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {

doc/chart/VerticalBarDoc.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -192,6 +194,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
@@ -227,7 +235,7 @@ const setChartOptions = () => {
                 plugins: {
                     legend: {
                         labels: {
-                            fontColor: textColor
+                            color: textColor
                         }
                     }
                 },