// AreaChart - Based on Tremor Raw LineChart pattern with gradient area fills
"use client";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from "react";
import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Dot, Label, Legend as RechartsLegend, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
import { useOnWindowResize } from "../Utils/UseWindowOnResize";
import { AvailableChartColors, constructCategoryColors, getColorClassName, getColorHex, } from "../Utils/ChartColors";
import { cx } from "../Utils/Cx";
import { getYAxisDomain } from "../Utils/GetYAxisDomain";
import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
import ChartCurve from "../../Types/ChartCurve";
const LegendItem = ({ name, color, onClick, activeLegend, }) => {
    const hasOnValueChange = Boolean(onClick);
    return (React.createElement("li", { className: cx("group inline-flex flex-nowrap items-center gap-1.5 whitespace-nowrap rounded px-2 py-1 transition", hasOnValueChange
            ? "cursor-pointer hover:bg-gray-100"
            : "cursor-default"), onClick: (e) => {
            e.stopPropagation();
            onClick === null || onClick === void 0 ? void 0 : onClick(name, color);
        } },
        React.createElement("span", { className: cx("h-[3px] w-3.5 shrink-0 rounded-full", getColorClassName(color, "bg"), activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100"), "aria-hidden": true }),
        React.createElement("p", { className: cx("truncate whitespace-nowrap text-xs", "text-gray-700", hasOnValueChange && "group-hover:text-gray-900", activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100") }, name)));
};
const ScrollButton = ({ icon, onClick, disabled, }) => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const Icon = icon;
    const [isPressed, setIsPressed] = React.useState(false);
    const intervalRef = React.useRef(null);
    React.useEffect(() => {
        if (isPressed) {
            intervalRef.current = setInterval(() => {
                onClick === null || onClick === void 0 ? void 0 : onClick();
            }, 300);
        }
        else {
            clearInterval(intervalRef.current);
        }
        return () => {
            return clearInterval(intervalRef.current);
        };
    }, [isPressed, onClick]);
    React.useEffect(() => {
        if (disabled) {
            clearInterval(intervalRef.current);
            setIsPressed(false);
        }
    }, [disabled]);
    return (React.createElement("button", { type: "button", className: cx("group inline-flex size-5 items-center truncate rounded transition", disabled
            ? "cursor-not-allowed text-gray-400"
            : "cursor-pointer text-gray-700 hover:bg-gray-100 hover:text-gray-900"), disabled: disabled, onClick: (e) => {
            e.stopPropagation();
            onClick === null || onClick === void 0 ? void 0 : onClick();
        }, onMouseDown: (e) => {
            e.stopPropagation();
            setIsPressed(true);
        }, onMouseUp: (e) => {
            e.stopPropagation();
            setIsPressed(false);
        } },
        React.createElement(Icon, { className: "size-full", "aria-hidden": "true" })));
};
const Legend = React.forwardRef((props, ref) => {
    const { categories, colors = AvailableChartColors, className, onClickLegendItem, activeLegend, enableLegendSlider = false } = props, other = __rest(props, ["categories", "colors", "className", "onClickLegendItem", "activeLegend", "enableLegendSlider"]);
    const scrollableRef = React.useRef(null);
    const scrollButtonsRef = React.useRef(null);
    const [hasScroll, setHasScroll] = React.useState(null);
    const [isKeyDowned, setIsKeyDowned] = React.useState(null);
    const intervalRef = React.useRef(null);
    const checkScroll = React.useCallback(() => {
        const scrollable = scrollableRef === null || scrollableRef === void 0 ? void 0 : scrollableRef.current;
        if (!scrollable) {
            return;
        }
        const hasLeftScroll = scrollable.scrollLeft > 0;
        const hasRightScroll = scrollable.scrollWidth - scrollable.clientWidth > scrollable.scrollLeft;
        setHasScroll({ left: hasLeftScroll, right: hasRightScroll });
    }, [setHasScroll]);
    const scrollToTest = React.useCallback((direction) => {
        var _a, _b;
        const element = scrollableRef === null || scrollableRef === void 0 ? void 0 : scrollableRef.current;
        const scrollButtons = scrollButtonsRef === null || scrollButtonsRef === void 0 ? void 0 : scrollButtonsRef.current;
        const scrollButtonsWith = (_a = scrollButtons === null || scrollButtons === void 0 ? void 0 : scrollButtons.clientWidth) !== null && _a !== void 0 ? _a : 0;
        const width = (_b = element === null || element === void 0 ? void 0 : element.clientWidth) !== null && _b !== void 0 ? _b : 0;
        if (element && enableLegendSlider) {
            element.scrollTo({
                left: direction === "left"
                    ? element.scrollLeft - width + scrollButtonsWith
                    : element.scrollLeft + width - scrollButtonsWith,
                behavior: "smooth",
            });
            setTimeout(() => {
                checkScroll();
            }, 400);
        }
    }, [enableLegendSlider, checkScroll]);
    React.useEffect(() => {
        const keyDownHandler = (key) => {
            if (key === "ArrowLeft") {
                scrollToTest("left");
            }
            else if (key === "ArrowRight") {
                scrollToTest("right");
            }
        };
        if (isKeyDowned) {
            keyDownHandler(isKeyDowned);
            intervalRef.current = setInterval(() => {
                keyDownHandler(isKeyDowned);
            }, 300);
        }
        else {
            clearInterval(intervalRef.current);
        }
        return () => {
            return clearInterval(intervalRef.current);
        };
    }, [isKeyDowned, scrollToTest]);
    const keyDown = (e) => {
        e.stopPropagation();
        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
            e.preventDefault();
            setIsKeyDowned(e.key);
        }
    };
    const keyUp = (e) => {
        e.stopPropagation();
        setIsKeyDowned(null);
    };
    React.useEffect(() => {
        const scrollable = scrollableRef === null || scrollableRef === void 0 ? void 0 : scrollableRef.current;
        if (enableLegendSlider) {
            checkScroll();
            scrollable === null || scrollable === void 0 ? void 0 : scrollable.addEventListener("keydown", keyDown);
            scrollable === null || scrollable === void 0 ? void 0 : scrollable.addEventListener("keyup", keyUp);
        }
        return () => {
            scrollable === null || scrollable === void 0 ? void 0 : scrollable.removeEventListener("keydown", keyDown);
            scrollable === null || scrollable === void 0 ? void 0 : scrollable.removeEventListener("keyup", keyUp);
        };
    }, [checkScroll, enableLegendSlider]);
    return (React.createElement("ol", Object.assign({ ref: ref, className: cx("relative overflow-hidden", className) }, other),
        React.createElement("div", { ref: scrollableRef, tabIndex: 0, className: cx("flex h-full", enableLegendSlider
                ? (hasScroll === null || hasScroll === void 0 ? void 0 : hasScroll.right) || (hasScroll === null || hasScroll === void 0 ? void 0 : hasScroll.left)
                    ? "snap-mandatory items-center overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
                    : ""
                : "flex-wrap") }, categories.map((category, index) => {
            return (React.createElement(LegendItem, { key: `item-${index}`, name: category, color: colors[index], 
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                onClick: onClickLegendItem, activeLegend: activeLegend }));
        })),
        enableLegendSlider && ((hasScroll === null || hasScroll === void 0 ? void 0 : hasScroll.right) || (hasScroll === null || hasScroll === void 0 ? void 0 : hasScroll.left)) ? (React.createElement(React.Fragment, null,
            React.createElement("div", { ref: scrollButtonsRef, className: cx("absolute bottom-0 right-0 top-0 flex h-full items-center justify-center pr-1", "bg-white") },
                React.createElement(ScrollButton, { icon: RiArrowLeftSLine, onClick: () => {
                        setIsKeyDowned(null);
                        scrollToTest("left");
                    }, disabled: !(hasScroll === null || hasScroll === void 0 ? void 0 : hasScroll.left) }),
                React.createElement(ScrollButton, { icon: RiArrowRightSLine, onClick: () => {
                        setIsKeyDowned(null);
                        scrollToTest("right");
                    }, disabled: !(hasScroll === null || hasScroll === void 0 ? void 0 : hasScroll.right) })))) : null));
});
Legend.displayName = "Legend";
/* eslint-enable react/no-unused-prop-types */
const ChartLegend = (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
{ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
    const legendRef = React.useRef(null);
    useOnWindowResize(() => {
        var _a;
        const calculateHeight = (height) => {
            return height ? Number(height) + 15 : 60;
        };
        setLegendHeight(calculateHeight((_a = legendRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight));
    });
    const legendPayload = payload.filter((item) => {
        return item.type !== "none";
    });
    const paddingLeft = legendPosition === "left" && yAxisWidth ? yAxisWidth - 8 : 0;
    return (React.createElement("div", { ref: legendRef, style: { paddingLeft: paddingLeft }, className: cx("flex items-center", { "justify-center": legendPosition === "center" }, { "justify-start": legendPosition === "left" }, { "justify-end": legendPosition === "right" }) },
        React.createElement(Legend, { categories: legendPayload.map((entry) => {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                return entry.value;
            }), colors: legendPayload.map((entry) => {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                return categoryColors.get(entry.value);
            }), onClickLegendItem: onClick, activeLegend: activeLegend, enableLegendSlider: enableLegendSlider })));
};
const ChartTooltip = ({ active, payload, label, valueFormatter, }) => {
    if (active && payload && payload.length) {
        const legendPayload = payload.filter((item) => {
            return item.type !== "none";
        });
        return (React.createElement("div", { className: cx("rounded-md border text-sm shadow-md", "border-gray-200", "bg-white") },
            React.createElement("div", { className: cx("border-b border-inherit px-4 py-2") },
                React.createElement("p", { className: cx("font-medium", "text-gray-900") }, label)),
            React.createElement("div", { className: cx("space-y-1 px-4 py-2") }, legendPayload.map(({ value, category, color }, index) => {
                return (React.createElement("div", { key: `id-${index}`, className: "flex items-center justify-between space-x-8" },
                    React.createElement("div", { className: "flex items-center space-x-2" },
                        React.createElement("span", { "aria-hidden": "true", className: cx("h-[3px] w-3.5 shrink-0 rounded-full", getColorClassName(color, "bg")) }),
                        React.createElement("p", { className: cx("whitespace-nowrap text-right", "text-gray-700") }, category)),
                    React.createElement("p", { className: cx("whitespace-nowrap text-right font-medium tabular-nums", "text-gray-900") }, valueFormatter(value))));
            }))));
    }
    return null;
};
const AreaChart = React.forwardRef((props, ref) => {
    var _a, _b, _c;
    const { data = [], categories = [], index, colors = AvailableChartColors, valueFormatter = (value) => {
        return value.toString();
    }, startEndOnly = false, showXAxis = true, showYAxis = true, showGridLines = true, yAxisWidth = 56, intervalType = "equidistantPreserveStart", showTooltip = true, showLegend = true, autoMinValue = false, minValue, maxValue, allowDecimals = true, connectNulls = false, className, onValueChange, enableLegendSlider = false, tickGap = 5, xAxisLabel, yAxisLabel, legendPosition = "right", tooltipCallback, customTooltip } = props, other = __rest(props, ["data", "categories", "index", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "showGridLines", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "autoMinValue", "minValue", "maxValue", "allowDecimals", "connectNulls", "className", "onValueChange", "enableLegendSlider", "tickGap", "xAxisLabel", "yAxisLabel", "legendPosition", "tooltipCallback", "customTooltip"]);
    const CustomTooltip = customTooltip;
    const paddingValue = (!showXAxis && !showYAxis) || (startEndOnly && !showYAxis) ? 0 : 20;
    const [legendHeight, setLegendHeight] = React.useState(60);
    const [activeDot, setActiveDot] = React.useState(undefined);
    const [activeLegend, setActiveLegend] = React.useState(undefined);
    const categoryColors = constructCategoryColors(categories, colors);
    const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
    const hasOnValueChange = Boolean(onValueChange);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const prevActiveRef = React.useRef(undefined);
    const prevLabelRef = React.useRef(undefined);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    function onDotClick(itemData, event) {
        event.stopPropagation();
        if (!hasOnValueChange) {
            return;
        }
        if ((itemData.index === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) &&
            itemData.dataKey === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey)) ||
            (hasOnlyOneValueForKey(data, itemData.dataKey) &&
                activeLegend &&
                activeLegend === itemData.dataKey)) {
            setActiveLegend(undefined);
            setActiveDot(undefined);
            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
        }
        else {
            setActiveLegend(itemData.dataKey);
            setActiveDot({
                index: itemData.index,
                dataKey: itemData.dataKey,
            });
            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(Object.assign({ eventType: "dot", categoryClicked: itemData.dataKey }, itemData.payload));
        }
    }
    function onCategoryClick(dataKey) {
        if (!hasOnValueChange) {
            return;
        }
        if ((dataKey === activeLegend && !activeDot) ||
            (hasOnlyOneValueForKey(data, dataKey) &&
                activeDot &&
                activeDot.dataKey === dataKey)) {
            setActiveLegend(undefined);
            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
        }
        else {
            setActiveLegend(dataKey);
            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
                eventType: "category",
                categoryClicked: dataKey,
            });
        }
        setActiveDot(undefined);
    }
    return (React.createElement("div", Object.assign({ ref: ref, className: cx("h-80 w-full", className) }, other),
        React.createElement(ResponsiveContainer, null,
            React.createElement(RechartsAreaChart, { data: data, syncId: ((_a = props.syncid) === null || _a === void 0 ? void 0 : _a.toString()) || "", onClick: hasOnValueChange && (activeLegend || activeDot)
                    ? () => {
                        setActiveDot(undefined);
                        setActiveLegend(undefined);
                        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
                    }
                    : () => { }, margin: {
                    bottom: (xAxisLabel
                        ? 40
                        : showXAxis
                            ? 24
                            : 8),
                    left: (yAxisLabel ? 20 : 0),
                    right: (yAxisLabel ? 5 : 8),
                    top: 5,
                } },
                React.createElement("defs", null, categories.map((category, i) => {
                    const colorKey = colors[i % colors.length] ||
                        "blue";
                    const hex = getColorHex(colorKey);
                    return (React.createElement("linearGradient", { key: category, id: `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`, x1: "0", y1: "0", x2: "0", y2: "1" },
                        React.createElement("stop", { offset: "0%", stopColor: hex, stopOpacity: 0.2 }),
                        React.createElement("stop", { offset: "100%", stopColor: hex, stopOpacity: 0.01 })));
                })),
                showGridLines ? (React.createElement(CartesianGrid, { className: cx("stroke-gray-100"), strokeDasharray: "3 3", horizontal: true, vertical: false })) : null,
                React.createElement(XAxis, { padding: { left: paddingValue, right: paddingValue }, hide: !showXAxis, dataKey: index, interval: startEndOnly ? "preserveStartEnd" : intervalType, tick: {
                        transform: "translate(0, 6)",
                        fontSize: 10,
                        fontWeight: 500,
                    }, ticks: startEndOnly
                        ? [
                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                            data[0][index],
                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                            data[data.length - 1][index],
                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        ]
                        : undefined, fill: "", stroke: "", className: cx("tabular-nums", "fill-gray-500"), tickLine: false, axisLine: false, minTickGap: tickGap }, xAxisLabel && (React.createElement(Label, { position: "insideBottom", offset: -20, className: "fill-gray-800 text-sm font-medium" }, xAxisLabel))),
                React.createElement(YAxis, { width: yAxisWidth, hide: !showYAxis, axisLine: false, tickLine: false, type: "number", domain: yAxisDomain, tick: {
                        transform: "translate(-4, 0)",
                        fontSize: 10,
                        fontWeight: 500,
                    }, fill: "", stroke: "", className: cx("tabular-nums", "fill-gray-500"), tickFormatter: valueFormatter, allowDecimals: allowDecimals }, yAxisLabel && (React.createElement(Label, { position: "insideLeft", style: { textAnchor: "middle" }, angle: -90, offset: -15, className: "fill-gray-800 text-sm font-medium" }, yAxisLabel))),
                React.createElement(Tooltip, { wrapperStyle: { outline: "none" }, isAnimationActive: true, animationDuration: 100, cursor: { stroke: "#d1d5db", strokeWidth: 1 }, offset: 20, position: { y: 0 }, 
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    content: ({ active, payload, label }) => {
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        const cleanPayload = payload
                            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                payload.map((item) => {
                                    return {
                                        category: item.dataKey,
                                        value: item.value,
                                        index: item.payload[index],
                                        color: categoryColors.get(item.dataKey),
                                        type: item.type,
                                        payload: item.payload,
                                    };
                                })
                            : [];
                        if (tooltipCallback &&
                            (active !== prevActiveRef.current ||
                                label !== prevLabelRef.current)) {
                            tooltipCallback({ active, payload: cleanPayload, label });
                            prevActiveRef.current = active;
                            prevLabelRef.current = label;
                        }
                        return showTooltip && active ? (CustomTooltip ? (React.createElement(CustomTooltip, { active: active, payload: cleanPayload, label: label })) : (React.createElement(ChartTooltip, { active: active, payload: cleanPayload, label: label, valueFormatter: valueFormatter }))) : null;
                    } }),
                showLegend ? (React.createElement(RechartsLegend, { verticalAlign: "top", height: legendHeight, 
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    content: ({ payload }) => {
                        return ChartLegend({ payload }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange
                            ? (clickedLegendItem) => {
                                return onCategoryClick(clickedLegendItem);
                            }
                            : undefined, enableLegendSlider, legendPosition, yAxisWidth);
                    } })) : null,
                props.anomalyBandLowerKey && props.anomalyBandUpperKey ? (React.createElement(Area, { key: "__anomaly_band__", name: "Expected range", type: props.curve || ChartCurve.MONOTONE, 
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    dataKey: (d) => {
                        const low = Number(d[props.anomalyBandLowerKey]);
                        const high = Number(d[props.anomalyBandUpperKey]);
                        if (!Number.isFinite(low) || !Number.isFinite(high)) {
                            return null;
                        }
                        return [low, high];
                    }, stroke: "#94a3b8", strokeOpacity: 0.3, strokeWidth: 1, strokeDasharray: "3 3", fill: "#94a3b8", fillOpacity: 0.12, isAnimationActive: false, connectNulls: false, activeDot: false, dot: false, legendType: "none" })) : null,
                categories.map((category) => {
                    const gradientId = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
                    const colorKey = categoryColors.get(category);
                    const hex = getColorHex(colorKey);
                    return (React.createElement(Area, { key: category, name: category, type: props.curve || ChartCurve.MONOTONE, dataKey: category, stroke: hex, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", fill: `url(#${gradientId})`, fillOpacity: 1, strokeOpacity: activeDot || (activeLegend && activeLegend !== category)
                            ? 0.3
                            : 1, isAnimationActive: false, connectNulls: connectNulls, 
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        activeDot: (dotProps) => {
                            const { cx: cxCoord, cy: cyCoord, stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth, dataKey, } = dotProps;
                            return (React.createElement(Dot, { className: cx("stroke-white", onValueChange ? "cursor-pointer" : "", getColorClassName(categoryColors.get(dataKey), "fill")), cx: cxCoord, cy: cyCoord, r: 5, fill: "", stroke: stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth: strokeWidth, 
                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                onClick: (_, event) => {
                                    return onDotClick(dotProps, event);
                                } }));
                        }, 
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        dot: (dotProps) => {
                            const { stroke, strokeLinecap: slc, strokeLinejoin: slj, strokeWidth, cx: cxCoord, cy: cyCoord, dataKey, index: dotIndex, } = dotProps;
                            if ((hasOnlyOneValueForKey(data, category) &&
                                !(activeDot ||
                                    (activeLegend && activeLegend !== category))) ||
                                ((activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) === dotIndex &&
                                    (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) === category)) {
                                return (React.createElement(Dot, { key: dotIndex, cx: cxCoord, cy: cyCoord, r: 5, stroke: stroke, fill: "", strokeLinecap: slc, strokeLinejoin: slj, strokeWidth: strokeWidth, className: cx("stroke-white", onValueChange ? "cursor-pointer" : "", getColorClassName(categoryColors.get(dataKey), "fill")) }));
                            }
                            return React.createElement(React.Fragment, { key: dotIndex });
                        } }));
                }), (_b = props.referenceLines) === null || _b === void 0 ? void 0 :
                _b.map((refLine, refIndex) => {
                    return (React.createElement(ReferenceLine, { key: `ref-${refIndex}`, y: refLine.value, stroke: refLine.color, strokeDasharray: refLine.strokeDasharray || "4 4", strokeWidth: 1.5 }, refLine.label && (React.createElement(Label, { value: refLine.label, position: "insideTopRight", fill: refLine.color, fontSize: 11, fontWeight: 500 }))));
                }), (_c = props.formattedExemplarPoints) === null || _c === void 0 ? void 0 :
                _c.map((exemplar, exemplarIndex) => {
                    return (React.createElement(ReferenceDot, { key: `exemplar-${exemplarIndex}`, x: exemplar.formattedX, y: exemplar.y, r: 5, fill: "#7c3aed", stroke: "#ffffff", strokeWidth: 2, style: { cursor: "pointer" }, onClick: () => {
                            var _a;
                            (_a = props.onExemplarClick) === null || _a === void 0 ? void 0 : _a.call(props, exemplar.original);
                        } },
                        React.createElement(Label, { value: "E", position: "center", fill: "#ffffff", fontSize: 8, fontWeight: 700 })));
                })))));
});
AreaChart.displayName = "AreaChart";
export { AreaChart };
//# sourceMappingURL=AreaChart.js.map