deyvisonwanderley
23bdaa184a
- Introduced new system metrics tracking with the ability to save and retrieve metrics such as CPU usage, memory usage, and network latency. - Added alert configuration functionality, allowing users to set thresholds for metrics and receive notifications via email or chat. - Updated the sidebar component to include a new "Monitorar SGSE" card for real-time system monitoring. - Enhanced the package dependencies with `papaparse` and `svelte-chartjs` for improved data handling and charting capabilities. - Updated the schema to support new tables for system metrics and alert configurations.
103 lines
2.7 KiB
Svelte
103 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount, onDestroy } from 'svelte';
|
|
import { Chart, registerables } from 'chart.js';
|
|
|
|
Chart.register(...registerables);
|
|
|
|
type Props = {
|
|
data: any;
|
|
title?: string;
|
|
height?: number;
|
|
};
|
|
|
|
let { data, title = '', height = 300 }: Props = $props();
|
|
|
|
let canvas: HTMLCanvasElement;
|
|
let chart: Chart | null = null;
|
|
|
|
onMount(() => {
|
|
if (canvas) {
|
|
const ctx = canvas.getContext('2d');
|
|
if (ctx) {
|
|
chart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
labels: {
|
|
color: '#a6adbb',
|
|
font: {
|
|
size: 12,
|
|
family: "'Inter', sans-serif",
|
|
},
|
|
usePointStyle: true,
|
|
padding: 15,
|
|
generateLabels: (chart) => {
|
|
const datasets = chart.data.datasets;
|
|
return chart.data.labels!.map((label, i) => ({
|
|
text: `${label}: ${datasets[0].data[i]}${typeof datasets[0].data[i] === 'number' ? '%' : ''}`,
|
|
fillStyle: datasets[0].backgroundColor![i] as string,
|
|
hidden: false,
|
|
index: i
|
|
}));
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
display: !!title,
|
|
text: title,
|
|
color: '#e5e7eb',
|
|
font: {
|
|
size: 16,
|
|
weight: 'bold',
|
|
family: "'Inter', sans-serif",
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
titleColor: '#fff',
|
|
bodyColor: '#fff',
|
|
borderColor: '#570df8',
|
|
borderWidth: 1,
|
|
padding: 12,
|
|
callbacks: {
|
|
label: function(context: any) {
|
|
return `${context.label}: ${context.parsed}%`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 1000,
|
|
easing: 'easeInOutQuart'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
$effect(() => {
|
|
if (chart && data) {
|
|
chart.data = data;
|
|
chart.update('none');
|
|
}
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (chart) {
|
|
chart.destroy();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div style="height: {height}px;" class="flex items-center justify-center">
|
|
<canvas bind:this={canvas}></canvas>
|
|
</div>
|
|
|