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>