sgse-app/apps/web/src/lib/components/chamados/SlaChart.svelte

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { Chart, registerables } from 'chart.js';

  Chart.register(...registerables);

  type Props = {
    dadosSla: {
      statusSla: {
        dentroPrazo: number;
        proximoVencimento: number;
        vencido: number;
        semPrazo: number;
      };
      porPrioridade: {
        baixa: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
        media: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
        alta: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
        critica: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
      };
      taxaCumprimento: number;
      totalComPrazo: number;
      atualizadoEm: number;
    };
    height?: number;
  };

  let { dadosSla, height = 400 }: Props = $props();
  
  let canvas: HTMLCanvasElement;
  let chart: Chart | null = null;

  function prepararDados() {
    const prioridades = ['Baixa', 'Média', 'Alta', 'Crítica'];
    const cores = {
      dentroPrazo: 'rgba(34, 197, 94, 0.8)', // verde
      proximoVencimento: 'rgba(251, 191, 36, 0.8)', // amarelo
      vencido: 'rgba(239, 68, 68, 0.8)', // vermelho
    };

    return {
      labels: prioridades,
      datasets: [
        {
          label: 'Dentro do Prazo',
          data: [
            dadosSla.porPrioridade.baixa.dentroPrazo,
            dadosSla.porPrioridade.media.dentroPrazo,
            dadosSla.porPrioridade.alta.dentroPrazo,
            dadosSla.porPrioridade.critica.dentroPrazo,
          ],
          backgroundColor: cores.dentroPrazo,
          borderColor: 'rgba(34, 197, 94, 1)',
          borderWidth: 2,
        },
        {
          label: 'Próximo ao Vencimento',
          data: [
            dadosSla.porPrioridade.baixa.proximoVencimento,
            dadosSla.porPrioridade.media.proximoVencimento,
            dadosSla.porPrioridade.alta.proximoVencimento,
            dadosSla.porPrioridade.critica.proximoVencimento,
          ],
          backgroundColor: cores.proximoVencimento,
          borderColor: 'rgba(251, 191, 36, 1)',
          borderWidth: 2,
        },
        {
          label: 'Vencido',
          data: [
            dadosSla.porPrioridade.baixa.vencido,
            dadosSla.porPrioridade.media.vencido,
            dadosSla.porPrioridade.alta.vencido,
            dadosSla.porPrioridade.critica.vencido,
          ],
          backgroundColor: cores.vencido,
          borderColor: 'rgba(239, 68, 68, 1)',
          borderWidth: 2,
        },
      ],
    };
  }

  onMount(() => {
    if (canvas) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        const chartData = prepararDados();
        chart = new Chart(ctx, {
          type: 'bar',
          data: chartData,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: true,
                position: 'top',
                labels: {
                  color: '#a6adbb',
                  font: {
                    size: 12,
                    family: "'Inter', sans-serif",
                  },
                  usePointStyle: true,
                  padding: 15,
                }
              },
              tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.9)',
                titleColor: '#fff',
                bodyColor: '#fff',
                borderColor: '#570df8',
                borderWidth: 1,
                padding: 12,
                callbacks: {
                  label: function(context) {
                    const label = context.dataset.label || '';
                    const value = context.parsed.y;
                    const prioridade = context.label;
                    return `${label}: ${value} chamado(s)`;
                  }
                }
              }
            },
            scales: {
              x: {
                stacked: true,
                grid: {
                  color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                  color: '#a6adbb',
                  font: {
                    size: 11,
                    weight: '500',
                  }
                }
              },
              y: {
                stacked: true,
                beginAtZero: true,
                grid: {
                  color: 'rgba(255, 255, 255, 0.05)',
                },
                ticks: {
                  color: '#a6adbb',
                  font: {
                    size: 11,
                  },
                  stepSize: 1,
                }
              }
            },
            animation: {
              duration: 800,
              easing: 'easeInOutQuart'
            }
          }
        });
      }
    }
  });

  $effect(() => {
    if (chart && dadosSla) {
      const chartData = prepararDados();
      chart.data = chartData;
      chart.update('active');
    }
  });

  onDestroy(() => {
    if (chart) {
      chart.destroy();
    }
  });
</script>

<div style="height: {height}px; position: relative;">
  <canvas bind:this={canvas}></canvas>
</div>