import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
import React, { useEffect, useMemo, } from "react";
import ChartCurve from "../Types/ChartCurve";
import DataPointUtil from "../Utils/DataPoint";
import XAxisUtil from "../Utils/XAxis";
import NoDataMessage from "../ChartGroup/NoDataMessage";
export const AreaChartPalette = [
    "blue",
    "emerald",
    "violet",
    "amber",
    "cyan",
    "pink",
    "lime",
    "fuchsia",
    "indigo",
    "rose",
];
const AreaChartElement = (props) => {
    const [records, setRecords] = React.useState([]);
    const bandLower = props.anomalyBandLowerSeriesName;
    const bandUpper = props.anomalyBandUpperSeriesName;
    /*
     * The band's lower/upper series share the data array but should not
     * be drawn as standalone lines in the legend — recharts renders them
     * as the shaded fill instead.
     */
    const categories = props.data
        .map((item) => {
        return item.seriesName;
    })
        .filter((name) => {
        return name !== bandLower && name !== bandUpper;
    });
    useEffect(() => {
        const records = DataPointUtil.getChartDataPoints({
            seriesPoints: props.data || [],
            xAxis: props.xAxis,
            yAxis: props.yAxis,
        });
        setRecords(records);
    }, [props.data]);
    // Format exemplar x values to match the chart's x-axis labels
    const formattedExemplars = useMemo(() => {
        if (!props.exemplarPoints || props.exemplarPoints.length === 0) {
            return [];
        }
        const formatter = XAxisUtil.getFormatter({
            xAxisMax: props.xAxis.options.max,
            xAxisMin: props.xAxis.options.min,
        });
        return props.exemplarPoints.map((exemplar) => {
            return {
                formattedX: formatter(exemplar.x),
                y: exemplar.y,
                original: exemplar,
            };
        });
    }, [props.exemplarPoints, props.xAxis]);
    const className = props.heightInPx ? `` : "h-80";
    const style = props.heightInPx
        ? { height: `${props.heightInPx}px` }
        : {};
    const hasNoData = !props.data ||
        props.data.length === 0 ||
        props.data.every((series) => {
            return series.data.length === 0;
        });
    /*
     * Translate yAxis.options.min/max into recharts inputs. "auto" maps to
     * autoMinValue=true (or maxValue omitted) so recharts zooms to the
     * data range instead of pinning the floor at 0.
     */
    const yAxisMinOption = props.yAxis.options.min;
    const yAxisMaxOption = props.yAxis.options.max;
    const autoMinValue = yAxisMinOption === "auto";
    const minValueProp = typeof yAxisMinOption === "number" ? { minValue: yAxisMinOption } : {};
    const maxValueProp = typeof yAxisMaxOption === "number" ? { maxValue: yAxisMaxOption } : {};
    return (React.createElement("div", { className: "relative" },
        React.createElement(AreaChart, Object.assign({ className: className, style: style, data: records, tickGap: 30, index: "Time", categories: categories, colors: AreaChartPalette, valueFormatter: props.yAxis.options.formatter || undefined, showTooltip: true, showLegend: props.showLegend !== false, connectNulls: true, curve: props.curve || ChartCurve.MONOTONE, syncid: props.sync ? props.syncid : undefined, yAxisWidth: 64, autoMinValue: autoMinValue }, minValueProp, maxValueProp, { onValueChange: () => { }, referenceLines: props.referenceLines, formattedExemplarPoints: formattedExemplars.length > 0 ? formattedExemplars : undefined, onExemplarClick: props.onExemplarClick, anomalyBandLowerKey: bandLower, anomalyBandUpperKey: bandUpper })),
        hasNoData && React.createElement(NoDataMessage, null)));
};
export default AreaChartElement;
//# sourceMappingURL=AreaChart.js.map