"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ServerMetricsChart = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const react_chartjs_2_1 = require("react-chartjs-2");
const chart_js_1 = require("chart.js");
// Register ChartJS components
chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.Title, chart_js_1.Tooltip, chart_js_1.Legend);
const ServerMetricsChart = ({ metrics, height = 40, width = 120, }) => {
    // Prepare data for the chart
    const data = {
        labels: ['CPU', 'Memory', 'Connections', 'Latency'],
        datasets: [
            {
                label: 'Resource Usage',
                data: [
                    metrics.resourceUsage.cpu,
                    metrics.resourceUsage.memory,
                    metrics.activeConnections,
                    metrics.averageLatency,
                ],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.5)',
                tension: 0.4,
            },
        ],
    };
    // Chart options
    const options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                callbacks: {
                    label: (context) => {
                        const labels = ['CPU Usage', 'Memory Usage', 'Active Connections', 'Avg Latency'];
                        const values = context.raw;
                        const units = ['%', '%', 'conn', 'ms'];
                        return `${labels[context.dataIndex]}: ${values.toFixed(1)}${units[context.dataIndex]}`;
                    },
                },
            },
        },
        scales: {
            x: {
                display: false,
            },
            y: {
                display: false,
                min: 0,
                max: 100,
            },
        },
        elements: {
            point: {
                radius: 0,
            },
            line: {
                borderWidth: 2,
            },
        },
        interaction: {
            intersect: false,
            mode: 'index',
        },
    };
    // Tooltip content
    const tooltipContent = ((0, jsx_runtime_1.jsxs)(react_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontWeight: "bold", mb: 1, children: "Server Metrics" }), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: ["CPU: ", metrics.resourceUsage.cpu.toFixed(1), "%"] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: ["Memory: ", metrics.resourceUsage.memory.toFixed(1), "%"] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: ["Connections: ", metrics.activeConnections] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: ["Latency: ", metrics.averageLatency.toFixed(1), "ms"] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: ["Requests/min: ", metrics.requestsPerMinute] })] }));
    return ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: tooltipContent, placement: "top", hasArrow: true, bg: "gray.700", color: "white", p: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { h: height, w: width, children: (0, jsx_runtime_1.jsx)(react_chartjs_2_1.Line, { data: data, options: options }) }) }));
};
exports.ServerMetricsChart = ServerMetricsChart;
exports.default = exports.ServerMetricsChart;
//# sourceMappingURL=ServerMetricsChart.js.map