@monolith-forensics/monolith-ui 1.8.0 → 1.8.1-dev.0

package/dist/Charts/LineChart/LineChart.js

@@ -0,0 +1,529 @@
+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, } 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 = 720, height = 320, 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", "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 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 safeWidth = Math.max(width, 240);
+    const safeHeight = Math.max(height, 200);
+    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 }, props, { children: [allPoints.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsx(StyledChartScroller, { children: _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

@@ -0,0 +1,24 @@
+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;