"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MetricChart = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const recharts_1 = require("recharts");
const react_2 = require("@chakra-ui/react");
const MetricChart = ({ data, yAxisLabel, height = 300, color = '#3182ce', showGrid = true, showLegend = false, tooltipFormatter, }) => {
    const gridColor = (0, react_2.useColorModeValue)('gray.200', 'gray.700');
    const textColor = (0, react_2.useColorModeValue)('gray.600', 'gray.300');
    // Format data for the chart
    const chartData = (0, react_1.useMemo)(() => data.map((point) => ({
        timestamp: new Date(point.timestamp).toLocaleTimeString(),
        value: point.value,
    })), [data]);
    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: height, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: chartData, margin: { top: 5, right: 30, left: 20, bottom: 5 }, children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3", stroke: gridColor }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: "timestamp", stroke: textColor, tick: { fill: textColor }, tickLine: { stroke: textColor } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { stroke: textColor, tick: { fill: textColor }, tickLine: { stroke: textColor }, label: yAxisLabel
                        ? { value: yAxisLabel, angle: -90, position: 'insideLeft', fill: textColor }
                        : undefined }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { contentStyle: {
                        backgroundColor: (0, react_2.useColorModeValue)('white', 'gray.800'),
                        border: '1px solid',
                        borderColor: gridColor,
                    }, formatter: tooltipFormatter }), showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {}), (0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: "value", stroke: color, strokeWidth: 2, dot: false, activeDot: { r: 4 }, isAnimationActive: false })] }) }));
};
exports.MetricChart = MetricChart;
exports.default = exports.MetricChart;
//# sourceMappingURL=MetricChart.js.map