myprojplanet_vite/src/components/CLineChart/CLineChart.ts

import Vue, { computed, defineComponent, onMounted, ref } from 'vue'

import { tools } from '../../store/Modules/tools'
import { useUserStore } from '@store/UserStore'
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@store/globalStore'
import { useI18n } from 'vue-i18n'
import { useQuasar } from 'quasar'

import type { ChartItem, ChartConfiguration } from 'chart.js';
import { Chart, BarController, BarElement, LineController, LinearScale, CategoryScale, PointElement, LineElement, Title } from 'chart.js';


export default defineComponent({
  name: 'CLineChart',
  components: {},
  props: {
    mydata: { required: false, default: [] },
    title: { required: false, default: false },
    sum: { required: false, default: false },
    color: { required: false, default: 'red' },
    bordercolor: { required: false, default: 'red' },
    mycolors: { required: false, default: null },
    offset: { required: false, default: 0 },
    showMedia: { required: false, default: false }
  },
  setup(props, { emit }) {

    const userStore = useUserStore()
    const globalStore = useGlobalStore()
    const { t } = useI18n()
    const q = useQuasar()

    const myarrlabel = ref(<any>[])
    const myarrdata = ref(<any>[])
    const myarrdataLine = ref(<any>[])
    const myarrbg = ref(<any>[])
    const myarrsum = ref(<any>[])


    const chartDataLine = ref({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    })

    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() {
      Chart.register(BarController, BarElement,
        LineController, LinearScale, CategoryScale, PointElement, LineElement, Title);

      myarrdata.value = []
      myarrdataLine.value = []
      myarrbg.value = []
      myarrlabel.value = []
      myarrsum.value = []

      let somma = 0
      if (props.sum)
        somma = props.offset

      let rec: any

      let ind = ''

      let num = 1

      const mostraggtutti = true

      if (mostraggtutti) {
        let num = 1;
        const strstartDate: any = props.mydata[0]

        const startDate = new Date(strstartDate._id); // Data di inizio da props
        const endDate = new Date(); // Data di fine da props
        const currentDate = new Date(startDate);

        // console.log('startDate', startDate, 'endDate', endDate)

        while (currentDate <= endDate) {
          const dataPresente = getRecordByDate(props.mydata, currentDate)

          const count = dataPresente ? dataPresente.count : 0;

          const day = currentDate.toISOString().split('T')[0].split('-');
          const mydate = day[2] + '/' + day[1];

          myarrlabel.value.push(mydate);
          myarrdata.value.push(count);

          const 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
        }

      } else {

        for (rec of props.mydata) {
          if (props.sum) {
            somma += rec.count
          } else {
            somma = rec.count
          }

          const day = rec._id.split('-')
          ind = day[2] + '/' + day[1]

          //myarrlabel.value.push(rec._id)
          myarrlabel.value.push(ind)
          myarrdata.value.push(rec.count)
          const 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++
        }
      }

      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 && myarrdataLine.value)
        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() {
      return props.offset
    }

    onMounted(mounted)

    return {
      tools,
      getoffset,
    }
  },
})