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.
116 lines
2.7 KiB
Svelte
116 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;
|
|
horizontal?: boolean;
|
|
};
|
|
|
|
let { data, title = '', height = 300, horizontal = false }: 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: horizontal ? 'bar' : 'bar',
|
|
data: data,
|
|
options: {
|
|
indexAxis: horizontal ? 'y' : 'x',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top',
|
|
labels: {
|
|
color: '#a6adbb',
|
|
font: {
|
|
size: 12,
|
|
family: "'Inter', sans-serif",
|
|
},
|
|
usePointStyle: true,
|
|
padding: 15,
|
|
}
|
|
},
|
|
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,
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.05)',
|
|
},
|
|
ticks: {
|
|
color: '#a6adbb',
|
|
font: {
|
|
size: 11,
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.05)',
|
|
},
|
|
ticks: {
|
|
color: '#a6adbb',
|
|
font: {
|
|
size: 11,
|
|
}
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 750,
|
|
easing: 'easeInOutQuart'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
$effect(() => {
|
|
if (chart && data) {
|
|
chart.data = data;
|
|
chart.update('none');
|
|
}
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (chart) {
|
|
chart.destroy();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div style="height: {height}px;">
|
|
<canvas bind:this={canvas}></canvas>
|
|
</div>
|
|
|