adding vue component

package.json

@@ -31,7 +31,9 @@
     "typescript": "^4.7.2",
     "vue-loader": "^17.0.0",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+      "chart.js": "^4.2.1",
+      "vue-chartjs": "^5.2.0"
   },
   "dependencies": {
     "@fullcalendar/core": "^6.1.4",

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

@@ -1,7 +1,7 @@
 <template>
    <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
    <div v-else id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
-      
+
       <div class="mbloc col col-sm-6 col-lg-4">
          <div class="custom1">
             <ul class="list-unstyled">
@@ -38,8 +38,11 @@
             </ul>
          </div>
       </div>
-      
-      <!--
+       <div class="mbloc col col-sm-6 col-lg-4">
+           <div class="custom2">
+               <MyWidget :chart-data="chartData" />
+           </div>
+       </div>
       <div class="mbloc col col-sm-6 col-lg-4">
          <div class="custom2">
             Mon dashboard personnalisé
@@ -55,22 +58,29 @@
             Mon dashboard personnalisé
          </div>
       </div>
-      -->
 
    </div>
 </template>
 
 <script>
+
+import MyWidget from './MyWidget.vue'
 import { mapGetters } from "vuex";
 import Masonry from 'masonry-layout/masonry';
 
+
+
 export default {
    name: "MyCustoms",
+    components:{
+       MyWidget
+    },
    data() {
       return {
          counterClass: {
             counter: true   //hack to pass class 'counter' in i18n-t
-         }
+         },
+          chartData: null,
       }
    },
    computed: {
@@ -82,8 +92,20 @@ 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>
 
 <style lang="scss" scoped>
@@ -98,4 +120,4 @@ span.counter {
       background-color: unset;
    }
 }
-</style>
+</style>

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

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