import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
import { useTheme } from "styled-components";
import { chartColors } from "../../style/theme";
import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
/**
 * Sparkline is a simple dynamically sized area chart.
 * Used to show trends in data over time.
 */
export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }) {
    var _a;
    const data = useMemo(() => {
        const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
        return dataMdp.map(([x, y]) => ({ x, y }));
    }, [serie.data]);
    const color = (_a = serie.color) !== null && _a !== void 0 ? _a : chartColors.lineColor1;
    const strokeGridColor = useTheme().border;
    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false }), yAxisType === 'percentage' && _jsx(YAxis, { domain: [0, 100], hide: true })] }) }));
}
