fix vue component

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

@@ -40,7 +40,7 @@
       </div>
        <div class="mbloc col col-sm-6 col-lg-4">
            <div class="custom2">
-               <MyWidget :chart-data="chartData" />
+               <MyWidget />
            </div>
        </div>
       <div class="mbloc col col-sm-6 col-lg-4">
@@ -80,7 +80,6 @@ export default {
          counterClass: {
             counter: true   //hack to pass class 'counter' in i18n-t
          },
-          chartData: null,
       }
    },
    computed: {
@@ -92,18 +91,6 @@ export default {
    mounted() {
       const elem = document.querySelector('#dashboards');
       const masonry = new Masonry(elem, {});
-      this.chartData = {
-          labels: ['Label 1', 'Label 2', 'Label 3'],
-          datasets: [
-              {
-                  label: 'Dataset 1',
-                  data: [10, 20, 30],
-                  backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
-                  borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
-                  borderWidth: 1,
-              },
-          ],
-      };
    },
 };
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWidget.vue

@@ -1,10 +1,8 @@
 <template>
-    <div>
-        <canvas ref="chartCanvas"></canvas>
-    </div>
+    <Bar :data="data" :options="options" />
 </template>
 
-<script>
+<script lang="ts">
 import {
     Chart as ChartJS,
     Title,
@@ -15,29 +13,17 @@ import {
     LinearScale
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
-ChartJS.register(Title, Tooltip,Legend, BarElement, CategoryScale, LinearScale)
+import * as chartConfig from './js/chartConfig'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 export default {
-    props: ['chartData'],
-    mounted(){
-        this.renderChart();
+    name: 'MyWidget',
+    components: {
+        Bar
     },
-    methods: {
-        renderChart() {
-            const ctx = this.$refs.chartCanvas.getContext('2d');
-            new ChartJS(ctx, {
-                type: 'bar',
-                data: this.chartData,
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: true
-
-                },
-            });
-        },
-    },
-};
+    data() {
+        return chartConfig
+    }
+}
 </script>
-<style scoped>
-
-</style>