SegrestaFestCloud/resources/assets_old/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 Top Reparti (Barre Orizzontali)
  const topRepartiChartEl = document.querySelector('#topRepartiChart');
  console.log('Top Reparti Chart Element:', topRepartiChartEl);
  console.log('Labels Reparto:', dashboardData.labelsReparto);
  console.log('Dati Reparto:', dashboardData.datiReparto);
  
  if (topRepartiChartEl && dashboardData.labelsReparto && dashboardData.datiReparto &&
      Array.isArray(dashboardData.labelsReparto) && Array.isArray(dashboardData.datiReparto) &&
      dashboardData.labelsReparto.length > 0 && dashboardData.datiReparto.length > 0) {
    // Filtra i dati validi (escludi "Nessun dato")
    const repartiData = dashboardData.labelsReparto
      .map((label, index) => ({
        label: label,
        value: dashboardData.datiReparto[index]
      }))
      .filter(item => item.label !== 'Nessun dato' && item.value > 0)
      .sort((a, b) => b.value - a.value)
      .slice(0, 5);
    
    console.log('Reparti Data processati:', repartiData);
    
    if (repartiData.length === 0) {
      topRepartiChartEl.innerHTML = '<div class="text-center p-4 text-muted">Nessun dato disponibile</div>';
      return;
    }
    
    const topRepartiChartConfig = {
      chart: {
        height: 300,
        type: 'bar',
        toolbar: { show: false }
      },
      colors: [config.colors.primary],
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: '70%',
          borderRadius: 8,
          startingShape: 'rounded',
          endingShape: 'rounded',
          borderRadiusApplication: 'around'
        }
      },
      dataLabels: {
        enabled: true
      },
      series: [{
        name: 'Segnalazioni',
        data: repartiData.map(item => item.value)
      }],
      xaxis: {
        categories: repartiData.map(item => item.label),
        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
        },
        xaxis: {
          lines: {
            show: true
          }
        },
        yaxis: {
          lines: {
            show: false
          }
        }
      },
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      },
      tooltip: {
        theme: 'dark'
      }
    };
    
    try {
      const topRepartiChart = new ApexCharts(topRepartiChartEl, topRepartiChartConfig);
      topRepartiChart.render();
      console.log('Top Reparti Chart renderizzato con successo');
    } catch (error) {
      console.error('Errore nel rendering del grafico Top Reparti:', error);
      topRepartiChartEl.innerHTML = '<div class="text-center p-4 text-danger"><i class="bx bx-error-circle me-2"></i>Errore nel caricamento del grafico</div>';
    }
  } else {
    console.warn('Top Reparti Chart: condizioni non soddisfatte', {
      element: topRepartiChartEl,
      hasLabels: !!dashboardData.labelsReparto,
      hasData: !!dashboardData.datiReparto,
      labelsLength: dashboardData.labelsReparto?.length,
      datiLength: dashboardData.datiReparto?.length
    });
    if (topRepartiChartEl) {
      topRepartiChartEl.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>';
  }
});