import products dinamically

src/components/CLineChart/CLineChart.ts

@@ -7,16 +7,12 @@ import { useGlobalStore } from '@store/globalStore'
 import { useI18n } from '@/boot/i18n'
 import { useQuasar } from 'quasar'
 
-import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+import { Chart, ChartItem, ChartConfiguration } from 'chart.js/auto'
 
-import { BarChart, useBarChart } from 'vue-chart-3'
-
-
-Chart.register(...registerables)
 
 export default defineComponent({
-  name: 'CBarChart',
-  components: { BarChart },
+  name: 'CLineChart',
+  components: {},
   props: {
     mydata: { required: false, default: [] },
     title: { required: false, default: false },
@@ -25,6 +21,7 @@ export default defineComponent({
     bordercolor: { required: false, default: 'red' },
     mycolors: { required: false, default: null },
     offset: { required: false, default: 0 },
+    showMedia: { required: false, default: false }
   },
   setup(props, { emit }) {
 
@@ -35,48 +32,44 @@ export default defineComponent({
 
     const myarrlabel = ref(<any>[])
     const myarrdata = ref(<any>[])
+    const myarrdataLine = ref(<any>[])
     const myarrbg = ref(<any>[])
     const myarrsum = ref(<any>[])
 
-    // @ts-ignore
-    const chartData = computed<ChartData<'bar'>>(() => ({
-      labels: myarrlabel.value,
+
+    const chartDataLine = ref({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
       datasets: [
-        /*{
-          label: 'Totali',
-          data: myarrsum.value,
-          backgroundColor: tools.colourNameToHex('green'),
-        },*/
         {
-          label: props.title,
-          data: myarrdata.value,
-          borderColor: tools.colourNameToHex('red'),
-          backgroundColor: myarrbg.value,
-          fill: true,
-        },
-      ],
-    }))
-
-    const options = computed<ChartOptions<'bar'>>(() => ({
-      bar: {
-      },
-      interaction: {
-        intersect: false
-      },
-      scales: {
-        y: {
-          beginAtZero: true
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
         }
-      }
-    }))
-
-    const { barChartProps, barChartRef } = useBarChart({
-      chartData,
-      options,
+      ]
     })
 
+    const chartOptionsLine = ref({
+      responsive: true,
+      maintainAspectRatio: false
+    })
+
+    function calcolaMedia(myarray: any, periodi: number) {
+      if (myarray.length === 0 || myarray.length < periodi) {
+        return 0; // Se l'array è vuoto o più corto del numero di periodi, la media è 0.
+      }
+
+      const somma = myarray.slice(-periodi).reduce((accumulator: number, currentValue: number) => accumulator + currentValue, 0);
+      return somma / periodi;
+    }
+
+    function getRecordByDate(mydata: any, currentDate: Date) {
+      const targetDate = currentDate.toISOString().split('T')[0];
+      return mydata.find((record: any) => record._id === targetDate);
+    }
+
     function mounted() {
       myarrdata.value = []
+      myarrdataLine.value = []
       myarrbg.value = []
       myarrlabel.value = []
       myarrsum.value = []
@@ -91,27 +84,119 @@ export default defineComponent({
 
       let num = 1
 
-      for (rec of props.mydata) {
-        if (props.sum) {
-          somma += rec.count
-        } else {
-          somma = rec.count
+      let mostraggtutti = true
+
+      if (mostraggtutti) {
+        let num = 1;
+        let strstartDate: any = props.mydata[0]
+
+        let startDate = new Date(strstartDate._id); // Data di inizio da props
+        let endDate = new Date(); // Data di fine da props
+        let currentDate = new Date(startDate);
+
+        // console.log('startDate', startDate, 'endDate', endDate)
+
+        while (currentDate <= endDate) {
+          let dataPresente = getRecordByDate(props.mydata, currentDate)
+
+          let count = dataPresente ? dataPresente.count : 0;
+
+          let day = currentDate.toISOString().split('T')[0].split('-');
+          let mydate = day[2] + '/' + day[1];
+
+          myarrlabel.value.push(mydate);
+          myarrdata.value.push(count);
+
+          let media = calcolaMedia(myarrdata.value, 30);
+          myarrdataLine.value.push(media ? media : undefined);
+
+          if (currentDate === endDate) {
+            myarrbg.value.push(tools.colourNameToHex('green'));
+          } else {
+            myarrbg.value.push(tools.colourNameToHex(props.color));
+          }
+
+          myarrsum.value.push(somma);
+
+          num++;
+          currentDate.setDate(currentDate.getDate() + 1); // Passa al giorno successivo
         }
 
-        let day = rec._id.split('-')
-        ind = day[2] + '/' + day[1]
-        //myarrlabel.value.push(rec._id)
-        myarrlabel.value.push(ind)
-        myarrdata.value.push(rec.count)
-        if (num === props.mydata.length) {
-          myarrbg.value.push(tools.colourNameToHex('green'))
-        } else {
-          myarrbg.value.push(tools.colourNameToHex(props.color))
+      } else {
+
+        for (rec of props.mydata) {
+          if (props.sum) {
+            somma += rec.count
+          } else {
+            somma = rec.count
+          }
+
+          let day = rec._id.split('-')
+          ind = day[2] + '/' + day[1]
+
+          //myarrlabel.value.push(rec._id)
+          myarrlabel.value.push(ind)
+          myarrdata.value.push(rec.count)
+          let media = calcolaMedia(myarrdata.value, 14)
+          myarrdataLine.value.push(media ? media : undefined)
+          if (num === props.mydata.length) {
+            myarrbg.value.push(tools.colourNameToHex('green'))
+          } else {
+            myarrbg.value.push(tools.colourNameToHex(props.color))
+          }
+          myarrsum.value.push(somma)
+          num++
+          // ind++
         }
-        myarrsum.value.push(somma)
-        num++
-        // ind++
       }
+
+      const chartData: any = {
+        labels: myarrlabel.value,
+        datasets: [
+          {
+            type: 'bar',
+            label: props.title,
+            data: myarrdata.value,
+            borderColor: tools.colourNameToHex('red'),
+            backgroundColor: myarrbg.value,
+            fill: true,
+          },
+        ],
+      }
+
+      const media = {
+        type: 'line',
+        label: 'Media',
+        data: myarrdataLine.value,
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgb(255, 99, 132)',
+        fill: true,
+      }
+
+      if (props.showMedia)
+        chartData.datasets.push(media)
+
+      const configBar: ChartConfiguration = {
+        type: 'bar',
+        data: chartData,
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          },
+          interaction: {
+            intersect: false
+          },
+        },
+      };
+
+      const canvasTag = <ChartItem>document.getElementById('myChart')
+
+      const myChart = new Chart(
+        canvasTag,
+        configBar)
+
     }
 
     function getoffset() {
@@ -124,11 +209,6 @@ export default defineComponent({
       tools,
       getoffset,
       q,
-      options,
-      barChartProps,
-      barChartRef,
-      myarrdata,
-      myarrlabel,
     }
   },
 })