SegrestaFestCloud/resources/assets/js/dashboards-manutenzioni.js

/**
 * Dashboard Manutenzioni
 */

'use strict';

document.addEventListener('DOMContentLoaded', function (e) {
  let cardColor, headingColor, legendColor, labelColor, shadeColor, borderColor, fontFamily;
  cardColor = config.colors.cardColor;
  headingColor = config.colors.headingColor;
  legendColor = config.colors.bodyColor;
  labelColor = config.colors.textMuted;
  borderColor = config.colors.borderColor;
  fontFamily = config.fontFamily;

  // Verifica se i dati della dashboard sono disponibili
  let dashboardData;
  if (typeof window.dashboardData !== 'undefined') {
    dashboardData = window.dashboardData;
  } else if (typeof dashboardData !== 'undefined') {
    dashboardData = dashboardData;
  } else {
    console.warn('Dashboard data non disponibile');
    return;
  }

  // Debug: mostra i dati nella console
  console.log('Dashboard Data:', dashboardData);

  // Grafico Segnalazioni nel Tempo
  const segnalazioniTempoChartEl = document.querySelector('#segnalazioniTempoChart');
  const hasValidTempoData =
    dashboardData.labelsTempo &&
    dashboardData.datiTempo &&
    Array.isArray(dashboardData.labelsTempo) &&
    Array.isArray(dashboardData.datiTempo) &&
    dashboardData.labelsTempo.length > 0 &&
    dashboardData.datiTempo.length > 0 &&
    !dashboardData.labelsTempo.includes('Nessun dato') &&
    dashboardData.datiTempo.some(val => val > 0);

  if (segnalazioniTempoChartEl && hasValidTempoData) {
    const segnalazioniTempoChartConfig = {
      chart: {
        height: 350,
        type: 'line',
        toolbar: { show: false },
        zoom: { enabled: false }
      },
      colors: [config.colors.primary],
      stroke: {
        curve: 'smooth',
        width: 3
      },
      series: [
        {
          name: 'Segnalazioni',
          data: dashboardData.datiTempo
        }
      ],
      xaxis: {
        categories: dashboardData.labelsTempo,
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        padding: {
          top: -20,
          bottom: -10,
          left: 0
        }
      },
      tooltip: {
        theme: 'dark'
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      }
    };
    const segnalazioniTempoChart = new ApexCharts(segnalazioniTempoChartEl, segnalazioniTempoChartConfig);
    segnalazioniTempoChart.render();
  } else if (segnalazioniTempoChartEl) {
    segnalazioniTempoChartEl.innerHTML =
      '<div class="text-center p-4 text-muted"><i class="bx bx-info-circle me-2"></i>Nessun dato disponibile per questo periodo</div>';
    console.log('Segnalazioni nel Tempo: dati non validi', dashboardData.labelsTempo, dashboardData.datiTempo);
  }

  // Grafico Distribuzione per Stato (Torta)
  const distribuzioneStatoChartEl = document.querySelector('#distribuzioneStatoChart');
  if (
    distribuzioneStatoChartEl &&
    dashboardData.labelsStato &&
    dashboardData.datiStato &&
    Array.isArray(dashboardData.labelsStato) &&
    Array.isArray(dashboardData.datiStato) &&
    dashboardData.labelsStato.length > 0 &&
    dashboardData.datiStato.length > 0 &&
    !dashboardData.labelsStato.includes('Nessun dato')
  ) {
    const distribuzioneStatoChartConfig = {
      chart: {
        height: 350,
        type: 'donut'
      },
      labels: dashboardData.labelsStato,
      series: dashboardData.datiStato,
      colors: [config.colors.primary, config.colors.warning, config.colors.info, config.colors.success],
      legend: {
        position: 'bottom',
        labels: {
          colors: headingColor,
          useSeriesColors: false,
          fontSize: '13px',
          fontFamily: fontFamily
        }
      },
      plotOptions: {
        pie: {
          donut: {
            size: '75%'
          }
        }
      }
    };
    const distribuzioneStatoChart = new ApexCharts(distribuzioneStatoChartEl, distribuzioneStatoChartConfig);
    distribuzioneStatoChart.render();
  } else if (distribuzioneStatoChartEl) {
    distribuzioneStatoChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }

  // Grafico Distribuzione per Priorità (Barre)
  const distribuzionePrioritaChartEl = document.querySelector('#distribuzionePrioritaChart');
  if (
    distribuzionePrioritaChartEl &&
    dashboardData.labelsPriorita &&
    dashboardData.datiPriorita &&
    Array.isArray(dashboardData.labelsPriorita) &&
    Array.isArray(dashboardData.datiPriorita) &&
    dashboardData.labelsPriorita.length > 0 &&
    dashboardData.datiPriorita.length > 0 &&
    !dashboardData.labelsPriorita.includes('Nessun dato')
  ) {
    const distribuzionePrioritaChartConfig = {
      chart: {
        height: 300,
        type: 'bar',
        toolbar: { show: false }
      },
      colors: [config.colors.danger, config.colors.warning, config.colors.info, config.colors.success],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 8,
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadiusApplication: 'around'
        }
      },
      dataLabels: {
        enabled: false
      },
      series: [
        {
          name: 'Segnalazioni',
          data: dashboardData.datiPriorita
        }
      ],
      xaxis: {
        categories: dashboardData.labelsPriorita,
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        padding: {
          top: -20,
          bottom: -10,
          left: 0
        }
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      }
    };
    const distribuzionePrioritaChart = new ApexCharts(distribuzionePrioritaChartEl, distribuzionePrioritaChartConfig);
    distribuzionePrioritaChart.render();
  } else if (distribuzionePrioritaChartEl) {
    distribuzionePrioritaChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }

  // Grafico Segnalazioni per Reparto (Barre)
  const segnalazioniRepartoChartEl = document.querySelector('#segnalazioniRepartoChart');
  if (
    segnalazioniRepartoChartEl &&
    dashboardData.labelsReparto &&
    dashboardData.datiReparto &&
    Array.isArray(dashboardData.labelsReparto) &&
    Array.isArray(dashboardData.datiReparto) &&
    dashboardData.labelsReparto.length > 0 &&
    dashboardData.datiReparto.length > 0 &&
    !dashboardData.labelsReparto.includes('Nessun dato')
  ) {
    const segnalazioniRepartoChartConfig = {
      chart: {
        height: 300,
        type: 'bar',
        toolbar: { show: false }
      },
      colors: [config.colors.primary],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 8,
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadiusApplication: 'around'
        }
      },
      dataLabels: {
        enabled: false
      },
      series: [
        {
          name: 'Segnalazioni',
          data: dashboardData.datiReparto
        }
      ],
      xaxis: {
        categories: dashboardData.labelsReparto,
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          },
          rotate: -45,
          rotateAlways: true
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        padding: {
          top: -20,
          bottom: -10,
          left: 0
        }
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      }
    };
    const segnalazioniRepartoChart = new ApexCharts(segnalazioniRepartoChartEl, segnalazioniRepartoChartConfig);
    segnalazioniRepartoChart.render();
  } else if (segnalazioniRepartoChartEl) {
    segnalazioniRepartoChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }

  // Grafico Top Manutentori (Barre Orizzontali)
  const topManutentoriChartEl = document.querySelector('#topManutentoriChart');
  if (
    topManutentoriChartEl &&
    dashboardData.labelsManutentori &&
    dashboardData.datiManutentori &&
    Array.isArray(dashboardData.labelsManutentori) &&
    Array.isArray(dashboardData.datiManutentori) &&
    dashboardData.labelsManutentori.length > 0 &&
    dashboardData.datiManutentori.length > 0 &&
    !dashboardData.labelsManutentori.includes('Nessun dato')
  ) {
    const topManutentoriChartConfig = {
      chart: {
        height: 300,
        type: 'bar',
        toolbar: { show: false }
      },
      colors: [config.colors.success],
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: '70%',
          borderRadius: 8,
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadiusApplication: 'around'
        }
      },
      dataLabels: {
        enabled: true
      },
      series: [
        {
          name: 'Segnalazioni Risolte',
          data: dashboardData.datiManutentori
        }
      ],
      xaxis: {
        categories: dashboardData.labelsManutentori,
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          }
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        padding: {
          top: -20,
          bottom: -10,
          left: 0
        }
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      }
    };
    const topManutentoriChart = new ApexCharts(topManutentoriChartEl, topManutentoriChartConfig);
    topManutentoriChart.render();
  } else if (topManutentoriChartEl) {
    topManutentoriChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }

  // Grafico Costi per Reparto (Barre)
  const costiRepartoChartEl = document.querySelector('#costiRepartoChart');
  if (
    costiRepartoChartEl &&
    dashboardData.labelsCostiReparto &&
    dashboardData.datiCostiReparto &&
    Array.isArray(dashboardData.labelsCostiReparto) &&
    Array.isArray(dashboardData.datiCostiReparto) &&
    dashboardData.labelsCostiReparto.length > 0 &&
    dashboardData.datiCostiReparto.length > 0 &&
    !dashboardData.labelsCostiReparto.includes('Nessun dato')
  ) {
    const costiRepartoChartConfig = {
      chart: {
        height: 350,
        type: 'bar',
        toolbar: { show: false }
      },
      colors: [config.colors.warning],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 8,
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadiusApplication: 'around'
        }
      },
      dataLabels: {
        enabled: false
      },
      series: [
        {
          name: 'Costi (€)',
          data: dashboardData.datiCostiReparto
        }
      ],
      xaxis: {
        categories: dashboardData.labelsCostiReparto,
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          },
          rotate: -45,
          rotateAlways: true
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          },
          formatter: function (val) {
            return '€' + val.toFixed(2);
          }
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        padding: {
          top: -20,
          bottom: -10,
          left: 0
        }
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return '€' + val.toFixed(2);
          }
        }
      }
    };
    const costiRepartoChart = new ApexCharts(costiRepartoChartEl, costiRepartoChartConfig);
    costiRepartoChart.render();
  } else if (costiRepartoChartEl) {
    costiRepartoChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }

  // Grafico Distribuzione per Tipo (Torta)
  const distribuzioneTipoChartEl = document.querySelector('#distribuzioneTipoChart');
  if (
    distribuzioneTipoChartEl &&
    dashboardData.labelsTipo &&
    dashboardData.datiTipo &&
    Array.isArray(dashboardData.labelsTipo) &&
    Array.isArray(dashboardData.datiTipo) &&
    dashboardData.labelsTipo.length > 0 &&
    dashboardData.datiTipo.length > 0 &&
    !dashboardData.labelsTipo.includes('Nessun dato')
  ) {
    const distribuzioneTipoChartConfig = {
      chart: {
        height: 300,
        type: 'donut'
      },
      labels: dashboardData.labelsTipo,
      series: dashboardData.datiTipo,
      colors: [
        config.colors.primary,
        config.colors.success,
        config.colors.warning,
        config.colors.info,
        config.colors.danger
      ],
      legend: {
        position: 'bottom',
        labels: {
          colors: headingColor,
          useSeriesColors: false,
          fontSize: '13px',
          fontFamily: fontFamily
        }
      },
      plotOptions: {
        pie: {
          donut: {
            size: '75%'
          }
        }
      }
    };
    const distribuzioneTipoChart = new ApexCharts(distribuzioneTipoChartEl, distribuzioneTipoChartConfig);
    distribuzioneTipoChart.render();
  } else if (distribuzioneTipoChartEl) {
    distribuzioneTipoChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }

  // Grafico Costi per Tipo (Barre)
  const costiTipoChartEl = document.querySelector('#costiTipoChart');
  if (
    costiTipoChartEl &&
    dashboardData.labelsCostiTipo &&
    dashboardData.datiCostiTipo &&
    Array.isArray(dashboardData.labelsCostiTipo) &&
    Array.isArray(dashboardData.datiCostiTipo) &&
    dashboardData.labelsCostiTipo.length > 0 &&
    dashboardData.datiCostiTipo.length > 0 &&
    !dashboardData.labelsCostiTipo.includes('Nessun dato')
  ) {
    const costiTipoChartConfig = {
      chart: {
        height: 350,
        type: 'bar',
        toolbar: { show: false }
      },
      colors: [config.colors.success],
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 8,
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadiusApplication: 'around'
        }
      },
      dataLabels: {
        enabled: false
      },
      series: [
        {
          name: 'Costi (€)',
          data: dashboardData.datiCostiTipo
        }
      ],
      xaxis: {
        categories: dashboardData.labelsCostiTipo,
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          },
          rotate: -45,
          rotateAlways: true
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        labels: {
          style: {
            fontSize: '13px',
            fontFamily: fontFamily,
            colors: labelColor
          },
          formatter: function (val) {
            return '€' + val.toFixed(2);
          }
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 4,
        padding: {
          top: -20,
          bottom: -10,
          left: 0
        }
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return '€' + val.toFixed(2);
          }
        }
      }
    };
    const costiTipoChart = new ApexCharts(costiTipoChartEl, costiTipoChartConfig);
    costiTipoChart.render();
  } else if (costiTipoChartEl) {
    costiTipoChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
  }
});