@monolith-forensics/monolith-ui 1.8.1 → 1.9.0

package/dist/Charts/LineChart/LineChart.js

@@ -1,548 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { scaleLinear, scalePoint, scaleTime } from "d3-scale";
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { useTheme } from "styled-components";
-import { ChartExportControl } from "../ChartPrimitives";
-import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
-import { buildAreaPath, buildLinePath, clamp, easeOutCubic, formatDefaultValue, getGradientStops, getPointKey, getSeriesKey, getSeriesLabelText, getValueDomain, measureSvgPath, mergeChartMargin, normalizeTickValue, parseLineChartXValue, resolveXAxisType, useThemeColor, useThemeColors, } from "./LineChart.lib";
-import { StyledArea, StyledAxisLine, StyledAxisText, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledEmptyState, StyledGridLine, StyledHoverTarget, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendLine, StyledLegendValue, StyledLine, StyledPoint, StyledSvg, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, StyledValueLabel, } from "./LineChart.styled";
-const LineChartInner = (_a, ref) => {
-    var _b, _c, _d;
-    var { data, series, seriesLabel = "Series", width, height, responsive = false, aspectRatio, minWidth = 240, minHeight = 200, margin, xAxisType = "auto", curve = "monotone", lineColor, colors, colorGradient, lineWidth = 2.5, lineOpacity = 1, lineDasharray, showArea = false, areaColor, areaOpacity = 0.14, showPoints = false, pointRadius = 3, activePointRadius = 4, pointColor, pointBorderColor, pointBorderWidth = 1.5, pointOpacity = 1, yMin, yMax, xTickCount = 6, yTickCount = 5, showGridLines = true, showAxisLines = true, showXAxisLabels = true, showYAxisLabels = true, showLegend = false, showLabels = false, emptyLabel = "No data", ariaLabel = "Line chart", animateOnRender = false, animationDuration = 720, showExportButton = false, exportFileName = "line-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, xValueFormatter, xTickFormatter, yTickFormatter, labelFormatter, tooltipFormatter, onPointClick, className } = _a, props = __rest(_a, ["data", "series", "seriesLabel", "width", "height", "responsive", "aspectRatio", "minWidth", "minHeight", "margin", "xAxisType", "curve", "lineColor", "colors", "colorGradient", "lineWidth", "lineOpacity", "lineDasharray", "showArea", "areaColor", "areaOpacity", "showPoints", "pointRadius", "activePointRadius", "pointColor", "pointBorderColor", "pointBorderWidth", "pointOpacity", "yMin", "yMax", "xTickCount", "yTickCount", "showGridLines", "showAxisLines", "showXAxisLabels", "showYAxisLabels", "showLegend", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "xValueFormatter", "xTickFormatter", "yTickFormatter", "labelFormatter", "tooltipFormatter", "onPointClick", "className"]);
-    const descriptionId = useId();
-    const gradientBaseId = useId();
-    const theme = useTheme();
-    const containerRef = useRef(null);
-    const chartSizeRef = useRef(null);
-    const chartFrameRef = useRef(null);
-    const svgRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const linePathRefs = useRef({});
-    const [activePointKey, setActivePointKey] = useState(null);
-    const [activeSeriesKey, setActiveSeriesKey] = useState(null);
-    const [activeTooltip, setActiveTooltip] = useState(null);
-    const [tooltipSize, setTooltipSize] = useState({ width: 0, height: 0 });
-    const [animationProgress, setAnimationProgress] = useState(animateOnRender ? 0 : 1);
-    const [lineLengths, setLineLengths] = useState({});
-    const themeLineColor = useThemeColor(lineColor);
-    const themeColors = useThemeColors(colors);
-    const resolvedMargin = mergeChartMargin(margin, showXAxisLabels, showYAxisLabels, showLabels);
-    const chartSize = useChartResponsiveSize(chartSizeRef, {
-        width,
-        height,
-        responsive,
-        aspectRatio,
-        defaultWidth: 720,
-        defaultHeight: 320,
-        minWidth: Math.max(minWidth, 1),
-        minHeight: Math.max(minHeight, 1),
-    });
-    const safeWidth = chartSize.width;
-    const safeHeight = chartSize.height;
-    const plotWidth = Math.max(safeWidth - resolvedMargin.left - resolvedMargin.right, 1);
-    const plotHeight = Math.max(safeHeight - resolvedMargin.top - resolvedMargin.bottom, 1);
-    const resolvedGlobalLineWidth = Math.max(lineWidth, 1);
-    const resolvedGlobalLineOpacity = clamp(lineOpacity, 0, 1);
-    const resolvedGlobalAreaOpacity = clamp(areaOpacity, 0, 1);
-    const resolvedGlobalPointRadius = Math.max(pointRadius, 0);
-    const resolvedGlobalActivePointRadius = Math.max(activePointRadius, resolvedGlobalPointRadius);
-    const resolvedPointOpacity = clamp(pointOpacity, 0, 1);
-    const resolvedExportBackgroundColor = exportBackgroundColor !== null && exportBackgroundColor !== void 0 ? exportBackgroundColor : theme.palette.background.paper;
-    useImperativeHandle(ref, () => ({
-        getSvgElement: () => svgRef.current,
-        downloadImage: (request) => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
-            yield downloadChartImage({
-                rootElement: containerRef.current,
-                svg: svgRef.current,
-                format: (_a = request === null || request === void 0 ? void 0 : request.format) !== null && _a !== void 0 ? _a : "svg",
-                fileName: (_b = request === null || request === void 0 ? void 0 : request.fileName) !== null && _b !== void 0 ? _b : exportFileName,
-                scale: (_c = request === null || request === void 0 ? void 0 : request.scale) !== null && _c !== void 0 ? _c : exportScale,
-                backgroundColor: (_d = request === null || request === void 0 ? void 0 : request.backgroundColor) !== null && _d !== void 0 ? _d : resolvedExportBackgroundColor,
-            });
-        }),
-        copyImage: (request) => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c;
-            return copyChartImage({
-                rootElement: containerRef.current,
-                svg: svgRef.current,
-                format: (_a = request === null || request === void 0 ? void 0 : request.format) !== null && _a !== void 0 ? _a : "png",
-                scale: (_b = request === null || request === void 0 ? void 0 : request.scale) !== null && _b !== void 0 ? _b : exportScale,
-                backgroundColor: (_c = request === null || request === void 0 ? void 0 : request.backgroundColor) !== null && _c !== void 0 ? _c : resolvedExportBackgroundColor,
-            });
-        }),
-    }), [exportFileName, exportScale, resolvedExportBackgroundColor]);
-    const isMultiSeries = ((_b = series === null || series === void 0 ? void 0 : series.length) !== null && _b !== void 0 ? _b : 0) > 0;
-    const normalizedInputSeries = useMemo(() => {
-        if (series === null || series === void 0 ? void 0 : series.length) {
-            return series.map((seriesItem, seriesIndex) => {
-                const fallbackLabel = `Series ${seriesIndex + 1}`;
-                return {
-                    key: getSeriesKey(seriesItem, seriesIndex),
-                    label: seriesItem.label,
-                    labelText: getSeriesLabelText(seriesItem.label, fallbackLabel),
-                    sourceSeries: seriesItem,
-                    color: seriesItem.color,
-                    colorGradient: seriesItem.colorGradient,
-                    lineDasharray: seriesItem.lineDasharray,
-                    lineWidth: seriesItem.lineWidth,
-                    lineOpacity: seriesItem.lineOpacity,
-                    showArea: seriesItem.showArea,
-                    areaColor: seriesItem.areaColor,
-                    areaOpacity: seriesItem.areaOpacity,
-                    showPoints: seriesItem.showPoints,
-                    pointColor: seriesItem.pointColor,
-                    pointRadius: seriesItem.pointRadius,
-                    activePointRadius: seriesItem.activePointRadius,
-                    data: seriesItem.data,
-                };
-            });
-        }
-        if (data === null || data === void 0 ? void 0 : data.length) {
-            return [
-                {
-                    key: "series-0",
-                    label: seriesLabel,
-                    labelText: getSeriesLabelText(seriesLabel, "Series"),
-                    data,
-                },
-            ];
-        }
-        return [];
-    }, [data, series, seriesLabel]);
-    const parsedSeriesInput = useMemo(() => {
-        const seriesEntries = normalizedInputSeries.map((inputSeries, seriesIndex) => {
-            const parsedPoints = inputSeries.data
-                .map((datum, pointIndex) => {
-                const parsedX = parseLineChartXValue(datum.x);
-                if (parsedX == null || !Number.isFinite(datum.y))
-                    return null;
-                return Object.assign(Object.assign({}, datum), { key: `${String(inputSeries.key)}-${getPointKey(datum, pointIndex)}`, index: pointIndex, parsedX, xType: "point", seriesKey: inputSeries.key, seriesIndex, seriesLabel: inputSeries.label, seriesLabelText: inputSeries.labelText, seriesColor: "" });
-            })
-                .filter(Boolean);
-            return Object.assign(Object.assign({}, inputSeries), { points: parsedPoints });
-        });
-        const allPoints = seriesEntries.flatMap((entry) => entry.points);
-        return {
-            resolvedXAxisType: resolveXAxisType(allPoints, xAxisType),
-            seriesEntries,
-        };
-    }, [normalizedInputSeries, xAxisType]);
-    const resolvedSeries = useMemo(() => {
-        return parsedSeriesInput.seriesEntries
-            .map((seriesEntry, seriesIndex) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            const resolvedColor = (_a = seriesEntry.color) !== null && _a !== void 0 ? _a : (normalizedInputSeries.length === 1
-                ? themeLineColor
-                : themeColors[seriesIndex % themeColors.length]);
-            const resolvedGradientStops = getGradientStops((_b = seriesEntry.colorGradient) !== null && _b !== void 0 ? _b : (normalizedInputSeries.length === 1 ? colorGradient : undefined));
-            const resolvedPointRadius = Math.max((_c = seriesEntry.pointRadius) !== null && _c !== void 0 ? _c : resolvedGlobalPointRadius, 0);
-            const resolvedActivePointRadius = Math.max((_d = seriesEntry.activePointRadius) !== null && _d !== void 0 ? _d : resolvedGlobalActivePointRadius, resolvedPointRadius);
-            const points = seriesEntry.points
-                .map((point) => (Object.assign(Object.assign({}, point), { xType: parsedSeriesInput.resolvedXAxisType, seriesColor: resolvedColor })))
-                .sort((left, right) => {
-                if (parsedSeriesInput.resolvedXAxisType === "point") {
-                    return left.index - right.index;
-                }
-                const leftValue = left.parsedX instanceof Date
-                    ? left.parsedX.getTime()
-                    : Number(left.parsedX);
-                const rightValue = right.parsedX instanceof Date
-                    ? right.parsedX.getTime()
-                    : Number(right.parsedX);
-                return leftValue - rightValue;
-            });
-            return {
-                key: seriesEntry.key,
-                label: seriesEntry.label,
-                labelText: seriesEntry.labelText,
-                color: resolvedColor,
-                gradientStops: resolvedGradientStops,
-                lineDasharray: (_e = seriesEntry.lineDasharray) !== null && _e !== void 0 ? _e : lineDasharray,
-                lineWidth: Math.max((_f = seriesEntry.lineWidth) !== null && _f !== void 0 ? _f : resolvedGlobalLineWidth, 1),
-                lineOpacity: clamp((_g = seriesEntry.lineOpacity) !== null && _g !== void 0 ? _g : resolvedGlobalLineOpacity, 0, 1),
-                showArea: (_h = seriesEntry.showArea) !== null && _h !== void 0 ? _h : showArea,
-                areaColor: (_k = (_j = seriesEntry.areaColor) !== null && _j !== void 0 ? _j : areaColor) !== null && _k !== void 0 ? _k : resolvedColor,
-                areaOpacity: clamp((_l = seriesEntry.areaOpacity) !== null && _l !== void 0 ? _l : resolvedGlobalAreaOpacity, 0, 1),
-                showPoints: (_m = seriesEntry.showPoints) !== null && _m !== void 0 ? _m : showPoints,
-                pointColor: (_p = (_o = seriesEntry.pointColor) !== null && _o !== void 0 ? _o : pointColor) !== null && _p !== void 0 ? _p : resolvedColor,
-                pointRadius: resolvedPointRadius,
-                activePointRadius: resolvedActivePointRadius,
-                sourceSeries: seriesEntry.sourceSeries,
-                points,
-            };
-        })
-            .filter((seriesEntry) => seriesEntry.points.length > 0);
-    }, [
-        areaColor,
-        colorGradient,
-        lineDasharray,
-        normalizedInputSeries.length,
-        parsedSeriesInput.resolvedXAxisType,
-        parsedSeriesInput.seriesEntries,
-        pointColor,
-        resolvedGlobalActivePointRadius,
-        resolvedGlobalAreaOpacity,
-        resolvedGlobalLineOpacity,
-        resolvedGlobalLineWidth,
-        resolvedGlobalPointRadius,
-        showArea,
-        showPoints,
-        themeColors,
-        themeLineColor,
-    ]);
-    const allPoints = useMemo(() => resolvedSeries.flatMap((seriesEntry) => seriesEntry.points), [resolvedSeries]);
-    const resolvedXAxisType = parsedSeriesInput.resolvedXAxisType;
-    const resolvedPointBorderColor = pointBorderColor !== null && pointBorderColor !== void 0 ? pointBorderColor : theme.palette.background.paper;
-    const timeScale = useMemo(() => {
-        if (resolvedXAxisType !== "time")
-            return null;
-        const timeValues = allPoints
-            .map((point) => point.parsedX instanceof Date ? point.parsedX.getTime() : null)
-            .filter((value) => value != null);
-        const min = Math.min(...timeValues);
-        const max = Math.max(...timeValues);
-        const scale = scaleTime()
-            .domain([new Date(min), new Date(max === min ? min + 1 : max)])
-            .range([0, plotWidth]);
-        scale.nice(Math.max(xTickCount, 2));
-        return scale;
-    }, [allPoints, plotWidth, resolvedXAxisType, xTickCount]);
-    const linearScale = useMemo(() => {
-        if (resolvedXAxisType !== "linear")
-            return null;
-        const numericValues = allPoints.map((point) => Number(point.parsedX));
-        const min = Math.min(...numericValues);
-        const max = Math.max(...numericValues);
-        const scale = scaleLinear()
-            .domain([min, max === min ? min + 1 : max])
-            .range([0, plotWidth]);
-        scale.nice(Math.max(xTickCount, 2));
-        return scale;
-    }, [allPoints, plotWidth, resolvedXAxisType, xTickCount]);
-    const pointScale = useMemo(() => {
-        if (resolvedXAxisType !== "point")
-            return null;
-        const domain = Array.from(new Set(allPoints.map((point) => String(point.parsedX))));
-        return scalePoint()
-            .domain(domain)
-            .range([0, plotWidth])
-            .padding(0.4);
-    }, [allPoints, plotWidth, resolvedXAxisType]);
-    const yScale = useMemo(() => {
-        const scale = scaleLinear()
-            .domain(getValueDomain(allPoints.map((point) => point.y), yMin, yMax))
-            .range([plotHeight, 0]);
-        if (yMin == null || yMax == null) {
-            scale.nice(Math.max(yTickCount, 2));
-        }
-        return scale;
-    }, [allPoints, plotHeight, yMax, yMin, yTickCount]);
-    const getPointX = useCallback((point) => {
-        var _a, _b, _c;
-        if (resolvedXAxisType === "time") {
-            return (_a = timeScale === null || timeScale === void 0 ? void 0 : timeScale(point.parsedX)) !== null && _a !== void 0 ? _a : 0;
-        }
-        if (resolvedXAxisType === "linear") {
-            return (_b = linearScale === null || linearScale === void 0 ? void 0 : linearScale(Number(point.parsedX))) !== null && _b !== void 0 ? _b : 0;
-        }
-        return (_c = pointScale === null || pointScale === void 0 ? void 0 : pointScale(String(point.parsedX))) !== null && _c !== void 0 ? _c : 0;
-    }, [linearScale, pointScale, resolvedXAxisType, timeScale]);
-    const getPointY = useCallback((point) => yScale(point.y), [yScale]);
-    const renderedSeries = useMemo(() => resolvedSeries.map((seriesEntry, seriesIndex) => (Object.assign(Object.assign({}, seriesEntry), { gradientId: `${gradientBaseId}-${seriesIndex}`, linePath: buildLinePath(seriesEntry.points, getPointX, getPointY, curve), areaPath: seriesEntry.showArea
-            ? buildAreaPath(seriesEntry.points, getPointX, getPointY, plotHeight, curve)
-            : null }))), [curve, getPointX, gradientBaseId, plotHeight, resolvedSeries]);
-    const renderedSeriesKey = useMemo(() => renderedSeries
-        .map((seriesEntry) => {
-        var _a, _b;
-        return `${String(seriesEntry.key)}:${(_a = seriesEntry.linePath) !== null && _a !== void 0 ? _a : ""}:${(_b = seriesEntry.areaPath) !== null && _b !== void 0 ? _b : ""}`;
-    })
-        .join("|"), [renderedSeries]);
-    useLayoutEffect(() => {
-        const nextLineLengths = {};
-        renderedSeries.forEach((seriesEntry) => {
-            var _a;
-            nextLineLengths[String(seriesEntry.key)] = measureSvgPath((_a = linePathRefs.current[String(seriesEntry.key)]) !== null && _a !== void 0 ? _a : null);
-        });
-        setLineLengths((currentLineLengths) => {
-            const currentKeys = Object.keys(currentLineLengths);
-            const nextKeys = Object.keys(nextLineLengths);
-            if (currentKeys.length !== nextKeys.length) {
-                return nextLineLengths;
-            }
-            for (const key of nextKeys) {
-                if (currentLineLengths[key] !== nextLineLengths[key]) {
-                    return nextLineLengths;
-                }
-            }
-            return currentLineLengths;
-        });
-    }, [renderedSeries, renderedSeriesKey]);
-    useLayoutEffect(() => {
-        var _a;
-        if (!animateOnRender ||
-            renderedSeries.every((seriesEntry) => !seriesEntry.linePath)) {
-            setAnimationProgress(1);
-            return;
-        }
-        const prefersReducedMotion = typeof window !== "undefined" &&
-            ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
-        if (prefersReducedMotion) {
-            setAnimationProgress(1);
-            return;
-        }
-        let animationFrame = 0;
-        let startTime = null;
-        const safeDuration = Math.max(animationDuration, 0);
-        setAnimationProgress(0);
-        const runAnimation = (timestamp) => {
-            if (startTime == null)
-                startTime = timestamp;
-            const elapsed = timestamp - startTime;
-            const progress = safeDuration === 0
-                ? 1
-                : easeOutCubic(clamp(elapsed / safeDuration, 0, 1));
-            setAnimationProgress(progress);
-            if (progress < 1) {
-                animationFrame = window.requestAnimationFrame(runAnimation);
-            }
-        };
-        animationFrame = window.requestAnimationFrame(runAnimation);
-        return () => {
-            window.cancelAnimationFrame(animationFrame);
-        };
-    }, [animateOnRender, animationDuration, renderedSeriesKey]);
-    const xTicks = useMemo(() => {
-        var _a;
-        if (resolvedXAxisType === "time" && timeScale) {
-            return timeScale.ticks(Math.max(xTickCount, 2));
-        }
-        if (resolvedXAxisType === "linear" && linearScale) {
-            return linearScale
-                .ticks(Math.max(xTickCount, 2))
-                .map((tick) => normalizeTickValue(tick));
-        }
-        const domain = (_a = pointScale === null || pointScale === void 0 ? void 0 : pointScale.domain()) !== null && _a !== void 0 ? _a : [];
-        if (domain.length <= Math.max(xTickCount, 2))
-            return domain;
-        const step = Math.ceil(domain.length / Math.max(xTickCount, 2));
-        return domain.filter((_, index) => index % step === 0);
-    }, [linearScale, pointScale, resolvedXAxisType, timeScale, xTickCount]);
-    const yTicks = useMemo(() => Array.from(new Set(yScale
-        .ticks(Math.max(yTickCount, 2))
-        .map((tick) => normalizeTickValue(tick)))), [yScale, yTickCount]);
-    const formatValue = (datum, sourceSeries) => {
-        var _a;
-        return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(datum.y, datum, sourceSeries)) !== null && _a !== void 0 ? _a : formatDefaultValue(datum.y);
-    };
-    const formatXValue = (datum, sourceSeries) => {
-        var _a;
-        return (_a = xValueFormatter === null || xValueFormatter === void 0 ? void 0 : xValueFormatter(datum.x, datum, sourceSeries)) !== null && _a !== void 0 ? _a : (datum.x instanceof Date ? datum.x.toLocaleDateString() : String(datum.x));
-    };
-    const formatXTick = (value) => {
-        var _a;
-        return (_a = xTickFormatter === null || xTickFormatter === void 0 ? void 0 : xTickFormatter(value)) !== null && _a !== void 0 ? _a : (value instanceof Date
-            ? new Intl.DateTimeFormat(undefined, {
-                month: "short",
-                day: "numeric",
-            }).format(value)
-            : String(value));
-    };
-    const formatYTick = (value) => { var _a; return (_a = yTickFormatter === null || yTickFormatter === void 0 ? void 0 : yTickFormatter(value)) !== null && _a !== void 0 ? _a : formatDefaultValue(value); };
-    const findNearestPoint = (clientX, clientY) => {
-        if (!chartFrameRef.current)
-            return null;
-        const chartRect = chartFrameRef.current.getBoundingClientRect();
-        const localX = clamp(clientX - chartRect.left - resolvedMargin.left, 0, plotWidth);
-        const localY = clamp(clientY - chartRect.top - resolvedMargin.top, 0, plotHeight);
-        let nearestPoint = null;
-        let nearestDistance = Number.POSITIVE_INFINITY;
-        for (const point of allPoints) {
-            const pointX = getPointX(point);
-            const pointY = getPointY(point);
-            const dx = pointX - localX;
-            const dy = pointY - localY;
-            const distance = dx * dx + dy * dy * 0.18;
-            if (distance < nearestDistance) {
-                nearestDistance = distance;
-                nearestPoint = point;
-            }
-        }
-        return nearestPoint;
-    };
-    const updateActivePointFromEvent = (event, triggerTooltip) => {
-        const nearestPoint = findNearestPoint(event.clientX, event.clientY);
-        if (!nearestPoint)
-            return;
-        setActivePointKey(nearestPoint.key);
-        if (!triggerTooltip)
-            return;
-        setActiveTooltip({
-            pointKey: nearestPoint.key,
-            x: resolvedMargin.left + getPointX(nearestPoint),
-            y: resolvedMargin.top + getPointY(nearestPoint),
-        });
-    };
-    const activePoint = (showTooltips || showPoints || onPointClick) && activePointKey != null
-        ? allPoints.find((point) => point.key === activePointKey)
-        : null;
-    const highlightedSeriesKey = (_c = activeSeriesKey !== null && activeSeriesKey !== void 0 ? activeSeriesKey : activePoint === null || activePoint === void 0 ? void 0 : activePoint.seriesKey) !== null && _c !== void 0 ? _c : null;
-    const activeSeries = activePoint
-        ? renderedSeries.find((seriesEntry) => seriesEntry.key === activePoint.seriesKey)
-        : null;
-    const tooltipStyle = useMemo(() => {
-        if (!activeTooltip ||
-            !containerRef.current ||
-            !chartFrameRef.current ||
-            !activePoint) {
-            return null;
-        }
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const chartRect = chartFrameRef.current.getBoundingClientRect();
-        const chartLeft = chartRect.left - containerRect.left;
-        const chartTop = chartRect.top - containerRect.top;
-        const minLeft = chartLeft + 8;
-        const maxLeft = chartLeft + chartRect.width - tooltipSize.width - 8;
-        const minTop = chartTop + 8;
-        const maxTop = chartTop + chartRect.height - tooltipSize.height - 8;
-        return {
-            left: clamp(activeTooltip.x + 14, minLeft, Math.max(minLeft, maxLeft)),
-            top: clamp(activeTooltip.y - tooltipSize.height / 2, minTop, Math.max(minTop, maxTop)),
-        };
-    }, [activePoint, activeTooltip, tooltipSize.height, tooltipSize.width]);
-    useEffect(() => {
-        if (!activePoint || !tooltipRef.current) {
-            setTooltipSize({ width: 0, height: 0 });
-            return;
-        }
-        setTooltipSize({
-            width: tooltipRef.current.offsetWidth,
-            height: tooltipRef.current.offsetHeight,
-        });
-    }, [activePoint]);
-    const description = allPoints
-        .map((point) => `${point.seriesLabelText}, ${formatXValue(point, activeSeries === null || activeSeries === void 0 ? void 0 : activeSeries.sourceSeries)}: ${formatDefaultValue(point.y)}`)
-        .join(", ");
-    const shouldAnimateStroke = animateOnRender && animationProgress < 1;
-    const shouldShowDataLabels = showLabels && allPoints.length <= 24;
-    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartScroller, { ref: chartSizeRef, "$width": chartSize.widthStyle, "$height": chartSize.heightStyle, children: allPoints.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsxs(StyledChartFrame, { ref: chartFrameRef, children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeWidth, height: safeHeight, viewBox: `0 0 ${safeWidth} ${safeHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), _jsx("defs", { children: renderedSeries
-                                        .filter((seriesEntry) => { var _a; return (_a = seriesEntry.gradientStops) === null || _a === void 0 ? void 0 : _a.length; })
-                                        .map((seriesEntry) => {
-                                        var _a;
-                                        return (_jsx("linearGradient", { id: seriesEntry.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: ((_a = seriesEntry.gradientStops) !== null && _a !== void 0 ? _a : []).map((stop, index) => {
-                                                var _a, _b;
-                                                return (_jsx("stop", { offset: `${((_a = seriesEntry.gradientStops) !== null && _a !== void 0 ? _a : []).length === 1
-                                                        ? 100
-                                                        : (index /
-                                                            (((_b = seriesEntry.gradientStops) !== null && _b !== void 0 ? _b : []).length -
-                                                                1)) *
-                                                            100}%`, stopColor: stop }, `${stop}-${index}`));
-                                            }) }, seriesEntry.gradientId));
-                                    }) }), showGridLines &&
-                                    yTicks.map((tick) => (_jsx(StyledGridLine, { x1: resolvedMargin.left, x2: resolvedMargin.left + plotWidth, y1: resolvedMargin.top + yScale(tick), y2: resolvedMargin.top + yScale(tick) }, `grid-y-${tick}`))), showAxisLines && (_jsxs(_Fragment, { children: [_jsx(StyledAxisLine, { x1: resolvedMargin.left, x2: resolvedMargin.left, y1: resolvedMargin.top, y2: resolvedMargin.top + plotHeight }), _jsx(StyledAxisLine, { x1: resolvedMargin.left, x2: resolvedMargin.left + plotWidth, y1: resolvedMargin.top + plotHeight, y2: resolvedMargin.top + plotHeight })] })), showYAxisLabels &&
-                                    yTicks.map((tick) => (_jsx(StyledAxisText, { x: resolvedMargin.left - 10, y: resolvedMargin.top + yScale(tick), textAnchor: "end", dominantBaseline: "middle", children: formatYTick(tick) }, `tick-y-${tick}`))), showXAxisLabels &&
-                                    xTicks.map((tick, index) => {
-                                        var _a, _b, _c;
-                                        const x = resolvedXAxisType === "time"
-                                            ? ((_a = timeScale === null || timeScale === void 0 ? void 0 : timeScale(tick)) !== null && _a !== void 0 ? _a : 0)
-                                            : resolvedXAxisType === "linear"
-                                                ? ((_b = linearScale === null || linearScale === void 0 ? void 0 : linearScale(tick)) !== null && _b !== void 0 ? _b : 0)
-                                                : ((_c = pointScale === null || pointScale === void 0 ? void 0 : pointScale(String(tick))) !== null && _c !== void 0 ? _c : 0);
-                                        return (_jsx(StyledAxisText, { x: resolvedMargin.left + x, y: resolvedMargin.top + plotHeight + 20, textAnchor: "middle", children: formatXTick(tick) }, `tick-x-${index}`));
-                                    }), _jsxs("g", { transform: `translate(${resolvedMargin.left}, ${resolvedMargin.top})`, children: [_jsx(StyledHoverTarget, { x: 0, y: 0, width: plotWidth, height: plotHeight, onMouseEnter: (event) => {
-                                                if (!showTooltips && !showPoints && !onPointClick)
-                                                    return;
-                                                updateActivePointFromEvent(event, showTooltips);
-                                            }, onMouseMove: (event) => {
-                                                if (!showTooltips && !showPoints && !onPointClick)
-                                                    return;
-                                                updateActivePointFromEvent(event, showTooltips);
-                                            }, onMouseLeave: () => {
-                                                setActivePointKey(null);
-                                                setActiveTooltip(null);
-                                            }, onClick: (event) => {
-                                                if (!onPointClick)
-                                                    return;
-                                                const nearestPoint = findNearestPoint(event.clientX, event.clientY);
-                                                const nearestSeries = nearestPoint
-                                                    ? renderedSeries.find((seriesEntry) => seriesEntry.key === nearestPoint.seriesKey)
-                                                    : null;
-                                                if (nearestPoint) {
-                                                    onPointClick(event, nearestPoint, nearestSeries === null || nearestSeries === void 0 ? void 0 : nearestSeries.sourceSeries);
-                                                }
-                                            } }), renderedSeries.map((seriesEntry) => {
-                                            var _a, _b;
-                                            const gradientReference = ((_a = seriesEntry.gradientStops) === null || _a === void 0 ? void 0 : _a.length)
-                                                ? `url(#${seriesEntry.gradientId})`
-                                                : seriesEntry.color;
-                                            const lineLength = (_b = lineLengths[String(seriesEntry.key)]) !== null && _b !== void 0 ? _b : 0;
-                                            const isSeriesActive = highlightedSeriesKey === seriesEntry.key;
-                                            const isSeriesDimmed = highlightedSeriesKey != null && !isSeriesActive;
-                                            return (_jsxs("g", { children: [seriesEntry.showArea && seriesEntry.areaPath && (_jsx(StyledArea, { d: seriesEntry.areaPath, fill: gradientReference !== null && gradientReference !== void 0 ? gradientReference : seriesEntry.areaColor, fillOpacity: seriesEntry.areaOpacity *
-                                                            animationProgress *
-                                                            (isSeriesDimmed ? 0.28 : isSeriesActive ? 1.08 : 1), style: {
-                                                            filter: isSeriesActive
-                                                                ? "brightness(1.08) saturate(1.06)"
-                                                                : undefined,
-                                                            opacity: isSeriesDimmed ? 0.7 : 1,
-                                                        } })), seriesEntry.linePath && (_jsx(StyledLine, { "$active": isSeriesActive, "$dimmed": isSeriesDimmed, ref: (node) => {
-                                                            linePathRefs.current[String(seriesEntry.key)] =
-                                                                node;
-                                                        }, d: seriesEntry.linePath, stroke: gradientReference, strokeWidth: isSeriesActive
-                                                            ? seriesEntry.lineWidth + 0.8
-                                                            : seriesEntry.lineWidth, strokeOpacity: seriesEntry.lineOpacity, strokeDasharray: shouldAnimateStroke && lineLength > 0
-                                                            ? `${lineLength} ${lineLength}`
-                                                            : seriesEntry.lineDasharray, strokeDashoffset: shouldAnimateStroke && lineLength > 0
-                                                            ? lineLength * (1 - animationProgress)
-                                                            : 0 }))] }, seriesEntry.key));
-                                        }), (showPoints || activePoint != null) &&
-                                            renderedSeries.map((seriesEntry) => seriesEntry.points.map((point) => {
-                                                var _a;
-                                                const isActive = activePointKey === point.key;
-                                                const shouldRender = seriesEntry.showPoints || isActive;
-                                                if (!shouldRender)
-                                                    return null;
-                                                return (_jsx(StyledPoint, { "$active": isActive, cx: getPointX(point), cy: getPointY(point), r: isActive
-                                                        ? seriesEntry.activePointRadius
-                                                        : seriesEntry.pointRadius, fill: (_a = point.color) !== null && _a !== void 0 ? _a : seriesEntry.pointColor, fillOpacity: resolvedPointOpacity, stroke: resolvedPointBorderColor, strokeWidth: pointBorderWidth, tabIndex: 0, "aria-label": `${point.seriesLabelText}, ${formatXValue(point, seriesEntry.sourceSeries)}: ${formatDefaultValue(point.y)}`, onFocus: () => setActivePointKey(point.key), onBlur: () => setActivePointKey(null), onMouseEnter: () => setActivePointKey(point.key), onMouseLeave: () => {
-                                                        if (!showTooltips)
-                                                            setActivePointKey(null);
-                                                    }, onClick: (event) => onPointClick === null || onPointClick === void 0 ? void 0 : onPointClick(event, point, seriesEntry.sourceSeries), onKeyDown: (event) => {
-                                                        if (event.key !== "Enter" && event.key !== " ")
-                                                            return;
-                                                        event.preventDefault();
-                                                        onPointClick === null || onPointClick === void 0 ? void 0 : onPointClick(event, point, seriesEntry.sourceSeries);
-                                                    } }, point.key));
-                                            })), shouldShowDataLabels &&
-                                            renderedSeries.map((seriesEntry) => seriesEntry.points.map((point) => {
-                                                var _a;
-                                                return (_jsx(StyledValueLabel, { x: getPointX(point), y: getPointY(point) - 10, textAnchor: "middle", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(point, point.index, seriesEntry.sourceSeries)) !== null && _a !== void 0 ? _a : formatValue(point, seriesEntry.sourceSeries) }, `label-${point.key}`));
-                                            }))] })] })] })) }), activeTooltip && activePoint && activeSeries && tooltipStyle && (_jsx(StyledTooltip, { ref: tooltipRef, style: tooltipStyle, children: tooltipFormatter ? (tooltipFormatter(activePoint, activePoint.index, activeSeries.sourceSeries)) : (_jsxs(_Fragment, { children: [_jsxs(StyledTooltipHeader, { children: [_jsx(StyledTooltipSwatch, { "$color": (_d = activePoint.color) !== null && _d !== void 0 ? _d : activeSeries.pointColor }), _jsx(StyledTooltipLabel, { children: formatXValue(activePoint, activeSeries.sourceSeries) })] }), _jsxs(StyledTooltipMeta, { children: [_jsx("span", { children: activePoint.seriesLabel }), _jsx("span", { children: formatValue(activePoint, activeSeries.sourceSeries) })] })] })) })), showLegend && (_jsx(StyledLegend, { children: renderedSeries.map((seriesEntry) => {
-                    const latestPoint = seriesEntry.points[seriesEntry.points.length - 1];
-                    if (!latestPoint)
-                        return null;
-                    return (_jsxs(StyledLegendItem, { "$active": highlightedSeriesKey === seriesEntry.key, tabIndex: 0, onMouseEnter: () => setActiveSeriesKey(seriesEntry.key), onMouseLeave: () => setActiveSeriesKey(null), onFocus: () => setActiveSeriesKey(seriesEntry.key), onBlur: () => setActiveSeriesKey(null), children: [_jsx(StyledLegendLine, { "$color": seriesEntry.color }), _jsx(StyledLegendLabel, { children: seriesEntry.label }), _jsx(StyledLegendValue, { children: formatValue(latestPoint, seriesEntry.sourceSeries) })] }, `legend-${seriesEntry.key}`));
-                }) }))] })));
-};
-export const LineChart = forwardRef(LineChartInner);
-export default LineChart;

package/dist/Charts/LineChart/LineChart.lib.d.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors } from "../ChartUtils";
-import { LineChartCurve, LineChartDatum, LineChartMargin, LineChartSeries, LineChartXAxisType, ResolvedLinePoint } from "./LineChart.types";
-export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors };
-export declare const getPointKey: (datum: LineChartDatum<unknown>, index: number) => string | number;
-export declare const getSeriesKey: (series: Pick<LineChartSeries<unknown>, "id" | "label">, index: number) => string | number;
-export declare const useThemeColor: (lineColor?: string) => string;
-export declare const useThemeColors: (colors?: string[]) => string[];
-export declare const getSeriesLabelText: (label: ReactNode, fallback: string) => string;
-export declare const parseLineChartXValue: (value: Date | number | string) => Date | number | string | null;
-export declare const resolveXAxisType: <TData>(points: ResolvedLinePoint<TData>[], xAxisType: LineChartXAxisType) => "time" | "linear" | "point";
-export declare const getDefaultMargin: (showXAxisLabels: boolean, showYAxisLabels: boolean, showLabels: boolean) => LineChartMargin;
-export declare const mergeChartMargin: (margin: Partial<LineChartMargin> | undefined, showXAxisLabels: boolean, showYAxisLabels: boolean, showLabels: boolean) => {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};
-export declare const getValueDomain: (values: number[], minValue?: number, maxValue?: number) => [number, number];
-export declare const getCurveFactory: (curve: LineChartCurve) => import("d3-shape").CurveFactory;
-export declare const buildLinePath: <TData>(points: ResolvedLinePoint<TData>[], getX: (point: ResolvedLinePoint<TData>) => number, getY: (point: ResolvedLinePoint<TData>) => number, curve: LineChartCurve) => string | null;
-export declare const buildAreaPath: <TData>(points: ResolvedLinePoint<TData>[], getX: (point: ResolvedLinePoint<TData>) => number, getY: (point: ResolvedLinePoint<TData>) => number, y0: number, curve: LineChartCurve) => string | null;
-export declare const measureSvgPath: (path: SVGPathElement | null) => number;
-export declare const normalizeTickValue: (value: number) => number;