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

package/dist/LineChart/LineChart.js

@@ -1,491 +0,0 @@
-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 { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { useTheme } from "styled-components";
-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, StyledChartFrame, StyledChartScroller, StyledContainer, StyledEmptyState, StyledGridLine, StyledHoverTarget, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendLine, StyledLegendValue, StyledLine, StyledPoint, StyledSvg, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, StyledValueLabel, } from "./LineChart.styled";
-export const LineChart = (_a) => {
-    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, 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", "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 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 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]);
-    useEffect(() => {
-        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]);
-    useEffect(() => {
-        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: _jsx(StyledChartFrame, { ref: chartFrameRef, children: _jsxs(StyledSvg, { 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 default LineChart;

package/dist/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;

package/dist/LineChart/LineChart.lib.js

@@ -1,132 +0,0 @@
-import { area, curveLinear, curveMonotoneX, curveNatural, curveStep, line, } from "d3-shape";
-import { useMemo } from "react";
-import { useTheme } from "styled-components";
-import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors, } from "../ChartUtils";
-export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors };
-export const getPointKey = (datum, index) => { var _a; return (_a = datum.id) !== null && _a !== void 0 ? _a : `${String(datum.x)}-${index}`; };
-export const getSeriesKey = (series, index) => {
-    var _a;
-    return (_a = series.id) !== null && _a !== void 0 ? _a : (typeof series.label === "string" || typeof series.label === "number"
-        ? `${series.label}-${index}`
-        : `series-${index}`);
-};
-export const useThemeColor = (lineColor) => {
-    const theme = useTheme();
-    return useMemo(() => lineColor !== null && lineColor !== void 0 ? lineColor : theme.palette.primary.main, [lineColor, theme.palette.primary.main]);
-};
-export const useThemeColors = (colors) => {
-    const theme = useTheme();
-    return useMemo(() => (colors === null || colors === void 0 ? void 0 : colors.length)
-        ? colors
-        : [
-            theme.palette.primary.main,
-            theme.alert.info.color,
-            theme.alert.success.color,
-            theme.alert.warning.color,
-            theme.alert.error.color,
-            theme.palette.fourth.main,
-            theme.button.text.secondary,
-        ], [colors, theme]);
-};
-export const getSeriesLabelText = (label, fallback) => {
-    if (typeof label === "string" || typeof label === "number") {
-        return String(label);
-    }
-    return fallback;
-};
-export const parseLineChartXValue = (value) => {
-    if (value instanceof Date) {
-        return Number.isFinite(value.getTime()) ? value : null;
-    }
-    if (typeof value === "number") {
-        return Number.isFinite(value) ? value : null;
-    }
-    if (typeof value !== "string")
-        return null;
-    const trimmed = value.trim();
-    if (!trimmed)
-        return null;
-    const numeric = Number(trimmed);
-    if (!Number.isNaN(numeric) && trimmed === String(numeric)) {
-        return numeric;
-    }
-    const timestamp = Date.parse(trimmed);
-    if (!Number.isNaN(timestamp)) {
-        return new Date(timestamp);
-    }
-    return trimmed;
-};
-export const resolveXAxisType = (points, xAxisType) => {
-    var _a;
-    if (xAxisType !== "auto")
-        return xAxisType;
-    const firstValue = (_a = points[0]) === null || _a === void 0 ? void 0 : _a.parsedX;
-    if (firstValue instanceof Date)
-        return "time";
-    if (typeof firstValue === "number")
-        return "linear";
-    return "point";
-};
-export const getDefaultMargin = (showXAxisLabels, showYAxisLabels, showLabels) => ({
-    top: showLabels ? 24 : 16,
-    right: showLabels ? 52 : 20,
-    bottom: showXAxisLabels ? 42 : 18,
-    left: showYAxisLabels ? 56 : 18,
-});
-export const mergeChartMargin = (margin, showXAxisLabels, showYAxisLabels, showLabels) => {
-    var _a, _b, _c, _d;
-    const defaults = getDefaultMargin(showXAxisLabels, showYAxisLabels, showLabels);
-    return {
-        top: (_a = margin === null || margin === void 0 ? void 0 : margin.top) !== null && _a !== void 0 ? _a : defaults.top,
-        right: (_b = margin === null || margin === void 0 ? void 0 : margin.right) !== null && _b !== void 0 ? _b : defaults.right,
-        bottom: (_c = margin === null || margin === void 0 ? void 0 : margin.bottom) !== null && _c !== void 0 ? _c : defaults.bottom,
-        left: (_d = margin === null || margin === void 0 ? void 0 : margin.left) !== null && _d !== void 0 ? _d : defaults.left,
-    };
-};
-export const getValueDomain = (values, minValue, maxValue) => {
-    const actualMin = values.length ? Math.min(...values) : 0;
-    const actualMax = values.length ? Math.max(...values) : 0;
-    const resolvedMin = minValue !== null && minValue !== void 0 ? minValue : actualMin;
-    const resolvedMax = maxValue !== null && maxValue !== void 0 ? maxValue : actualMax;
-    if (resolvedMin === resolvedMax) {
-        if (resolvedMin === 0)
-            return [0, 1];
-        return [resolvedMin - 1, resolvedMax + 1];
-    }
-    return [resolvedMin, resolvedMax];
-};
-export const getCurveFactory = (curve) => {
-    switch (curve) {
-        case "linear":
-            return curveLinear;
-        case "step":
-            return curveStep;
-        case "natural":
-            return curveNatural;
-        case "monotone":
-        default:
-            return curveMonotoneX;
-    }
-};
-export const buildLinePath = (points, getX, getY, curve) => line()
-    .defined((point) => Number.isFinite(point.y))
-    .x(getX)
-    .y(getY)
-    .curve(getCurveFactory(curve))(points);
-export const buildAreaPath = (points, getX, getY, y0, curve) => area()
-    .defined((point) => Number.isFinite(point.y))
-    .x(getX)
-    .y0(y0)
-    .y1(getY)
-    .curve(getCurveFactory(curve))(points);
-export const measureSvgPath = (path) => {
-    if (!path)
-        return 0;
-    try {
-        return path.getTotalLength();
-    }
-    catch (_a) {
-        return 0;
-    }
-};
-export const normalizeTickValue = (value) => Math.abs(value) < 1e-9 ? 0 : value;