@monolith-forensics/monolith-ui 1.8.1 → 1.9.0

package/dist/Charts/BarChart/BarChart.js

@@ -1,563 +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 { scaleBand, scaleLinear } from "d3-scale";
-import { forwardRef, useEffect, useId, useImperativeHandle, 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 { clamp, easeOutCubic, formatDefaultValue, getBandPadding, getBarKey, getCategoryKey, getGradientColor, getGradientColorFromStops, getGradientStops, getRoundedBarPath, getSeriesKey, getSeriesLabelText, getValueDomain, mergeChartMargin, normalizeTickValue, useThemeColors, } from "./BarChart.lib";
-import { StyledAxisLine, StyledAxisText, StyledBar, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledEmptyState, StyledGridLine, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendValue, StyledSvg, StyledSwatch, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipList, StyledTooltipMeta, StyledTooltipRow, StyledTooltipSwatch, StyledTooltipValue, StyledValueLabel, } from "./BarChart.styled";
-const BarChartInner = (_a, ref) => {
-    var _b, _c, _d;
-    var { data, series, width, height, responsive = false, aspectRatio, minWidth = 180, minHeight = 180, orientation = "vertical", seriesLayout = "grouped", margin, barGap = 10, groupBarGap, maxBarThickness, barRadius = 3, colors, colorGradient, barOpacity = 1, barBorderColor, barBorderWidth = 1, barBorderOpacity = 1, minValue, maxValue, valueTickCount = 5, showGridLines = true, showAxisLines = true, showCategoryAxisLabels = true, showValueAxisLabels = true, showLegend = false, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLabels = false, emptyLabel = "No data", ariaLabel = "Bar chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showExportButton = false, exportFileName = "bar-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, categoryLabelFormatter, tickFormatter, labelFormatter, tooltipFormatter, onBarClick, onLegendItemClick, onSeriesLegendItemClick, className } = _a, props = __rest(_a, ["data", "series", "width", "height", "responsive", "aspectRatio", "minWidth", "minHeight", "orientation", "seriesLayout", "margin", "barGap", "groupBarGap", "maxBarThickness", "barRadius", "colors", "colorGradient", "barOpacity", "barBorderColor", "barBorderWidth", "barBorderOpacity", "minValue", "maxValue", "valueTickCount", "showGridLines", "showAxisLines", "showCategoryAxisLabels", "showValueAxisLabels", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "categoryLabelFormatter", "tickFormatter", "labelFormatter", "tooltipFormatter", "onBarClick", "onLegendItemClick", "onSeriesLegendItemClick", "className"]);
-    const descriptionId = 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 [activeBarKey, setActiveBarKey] = useState(null);
-    const [activeSeriesKey, setActiveSeriesKey] = useState(null);
-    const [activeTooltip, setActiveTooltip] = useState(null);
-    const [tooltipSize, setTooltipSize] = useState({ width: 0, height: 0 });
-    const [animationElapsed, setAnimationElapsed] = useState(animateOnRender ? 0 : Number.POSITIVE_INFINITY);
-    const themeColors = useThemeColors(colors);
-    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),
-                    color: seriesItem.color,
-                    colorGradient: seriesItem.colorGradient,
-                    sourceSeries: seriesItem,
-                    data: seriesItem.data.filter((datum) => Number.isFinite(datum.value)),
-                };
-            });
-        }
-        return [
-            {
-                key: "series-0",
-                label: "Series",
-                labelText: "Series",
-                color: undefined,
-                colorGradient: undefined,
-                sourceSeries: undefined,
-                data: (data !== null && data !== void 0 ? data : []).filter((datum) => Number.isFinite(datum.value)),
-            },
-        ];
-    }, [data, series]);
-    const chartSize = useChartResponsiveSize(chartSizeRef, {
-        width,
-        height,
-        responsive,
-        aspectRatio,
-        defaultWidth: 640,
-        defaultHeight: 320,
-        minWidth: Math.max(minWidth, 1),
-        minHeight: Math.max(minHeight, 1),
-    });
-    const safeWidth = chartSize.width;
-    const safeHeight = chartSize.height;
-    const safeBarRadius = Math.max(barRadius, 0);
-    const safeBarGap = Math.max(barGap, 0);
-    const safeGroupBarGap = Math.max(groupBarGap !== null && groupBarGap !== void 0 ? groupBarGap : barGap, 0);
-    const safeMaxBarThickness = maxBarThickness != null ? Math.max(maxBarThickness, 1) : undefined;
-    const resolvedBarOpacity = clamp(barOpacity, 0, 1);
-    const resolvedBarBorderWidth = Math.max(barBorderWidth, 0);
-    const resolvedBarBorderOpacity = clamp(barBorderOpacity, 0, 1);
-    const resolvedBarBorderColor = barBorderColor !== null && barBorderColor !== void 0 ? barBorderColor : theme.palette.divider;
-    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 resolvedMargin = mergeChartMargin(orientation, margin, showCategoryAxisLabels, showValueAxisLabels, showLabels);
-    const plotWidth = Math.max(safeWidth - resolvedMargin.left - resolvedMargin.right, 1);
-    const plotHeight = Math.max(safeHeight - resolvedMargin.top - resolvedMargin.bottom, 1);
-    const resolvedChart = useMemo(() => {
-        const categorySeedMap = new Map();
-        normalizedInputSeries.forEach((seriesEntry) => {
-            seriesEntry.data.forEach((datum) => {
-                const categoryKey = getCategoryKey(datum);
-                if (!categorySeedMap.has(categoryKey)) {
-                    categorySeedMap.set(categoryKey, {
-                        key: categoryKey,
-                        label: datum.label,
-                        representativeDatum: datum,
-                        index: categorySeedMap.size,
-                    });
-                }
-            });
-        });
-        const categorySeeds = Array.from(categorySeedMap.values());
-        const resolvedSeries = normalizedInputSeries.map((seriesEntry, seriesIndex) => {
-            var _a, _b, _c;
-            const dataByCategory = new Map();
-            seriesEntry.data.forEach((datum, datumIndex) => {
-                dataByCategory.set(getCategoryKey(datum), {
-                    datum,
-                    index: datumIndex,
-                });
-            });
-            const colorStops = getGradientStops(seriesEntry.colorGradient);
-            const gradientPreviewColor = getGradientColorFromStops(colorStops, Math.max(Math.floor((seriesEntry.data.length - 1) / 2), 0), Math.max(seriesEntry.data.length, 1));
-            return {
-                key: seriesEntry.key,
-                label: seriesEntry.label,
-                labelText: seriesEntry.labelText,
-                color: (_c = (_b = (_a = seriesEntry.color) !== null && _a !== void 0 ? _a : gradientPreviewColor) !== null && _b !== void 0 ? _b : getGradientColor(colorGradient, seriesIndex, normalizedInputSeries.length)) !== null && _c !== void 0 ? _c : themeColors[seriesIndex % themeColors.length],
-                colorStops,
-                index: seriesIndex,
-                totalValue: seriesEntry.data.reduce((sum, datum) => sum + datum.value, 0),
-                sourceSeries: seriesEntry.sourceSeries,
-                dataByCategory,
-            };
-        });
-        let renderIndex = 0;
-        const allBars = [];
-        const categories = categorySeeds.map((category) => {
-            let positiveTotal = 0;
-            let negativeTotal = 0;
-            const categoryBars = [];
-            resolvedSeries.forEach((seriesEntry) => {
-                var _a, _b;
-                const seriesDatum = seriesEntry.dataByCategory.get(category.key);
-                if (!seriesDatum)
-                    return;
-                const datum = seriesDatum.datum;
-                let valueStart = 0;
-                let valueEnd = datum.value;
-                if (isMultiSeries && seriesLayout === "stacked") {
-                    if (datum.value >= 0) {
-                        valueStart = positiveTotal;
-                        positiveTotal += datum.value;
-                        valueEnd = positiveTotal;
-                    }
-                    else {
-                        valueStart = negativeTotal;
-                        negativeTotal += datum.value;
-                        valueEnd = negativeTotal;
-                    }
-                }
-                const barKey = `${String(seriesEntry.key)}-${String(getBarKey(datum, seriesDatum.index))}-${category.key}`;
-                const color = (_b = (_a = datum.color) !== null && _a !== void 0 ? _a : getGradientColorFromStops(seriesEntry.colorStops, seriesDatum.index, Math.max(seriesEntry.dataByCategory.size, 1))) !== null && _b !== void 0 ? _b : seriesEntry.color;
-                const resolvedBar = Object.assign(Object.assign({}, datum), { key: barKey, keyString: String(barKey), color, index: seriesDatum.index, renderIndex, seriesKey: seriesEntry.key, seriesIndex: seriesEntry.index, seriesLabel: seriesEntry.label, seriesLabelText: seriesEntry.labelText, categoryKey: category.key, categoryLabel: category.label, valueStart,
-                    valueEnd, sourceSeries: seriesEntry.sourceSeries });
-                renderIndex += 1;
-                categoryBars.push(resolvedBar);
-                allBars.push(resolvedBar);
-            });
-            return {
-                key: category.key,
-                label: category.label,
-                index: category.index,
-                representativeDatum: category.representativeDatum,
-                bars: categoryBars,
-                positiveTotal,
-                negativeTotal,
-            };
-        });
-        return {
-            bars: allBars,
-            categories,
-            series: resolvedSeries.map((_a) => {
-                var { colorStops: _colorStops, dataByCategory: _dataByCategory } = _a, seriesEntry = __rest(_a, ["colorStops", "dataByCategory"]);
-                return seriesEntry;
-            }),
-        };
-    }, [
-        colorGradient,
-        isMultiSeries,
-        normalizedInputSeries,
-        seriesLayout,
-        themeColors,
-    ]);
-    const bars = resolvedChart.bars;
-    const categories = resolvedChart.categories;
-    const resolvedSeries = resolvedChart.series;
-    const { inner: categoryPaddingInner, outer: categoryPaddingOuter } = useMemo(() => getBandPadding(safeBarGap, orientation === "vertical" ? plotWidth : plotHeight, categories.length), [categories.length, orientation, plotHeight, plotWidth, safeBarGap]);
-    const categoryScale = useMemo(() => scaleBand()
-        .domain(categories.map((category) => category.key))
-        .range(orientation === "vertical" ? [0, plotWidth] : [0, plotHeight])
-        .paddingInner(categoryPaddingInner)
-        .paddingOuter(categoryPaddingOuter), [
-        categories,
-        categoryPaddingInner,
-        categoryPaddingOuter,
-        orientation,
-        plotHeight,
-        plotWidth,
-    ]);
-    const groupScale = useMemo(() => {
-        if (!isMultiSeries || seriesLayout !== "grouped")
-            return null;
-        const { inner, outer } = getBandPadding(safeGroupBarGap, categoryScale.bandwidth(), resolvedSeries.length);
-        return scaleBand()
-            .domain(resolvedSeries.map((seriesEntry) => String(seriesEntry.key)))
-            .range([0, categoryScale.bandwidth()])
-            .paddingInner(inner)
-            .paddingOuter(outer);
-    }, [
-        categoryScale,
-        isMultiSeries,
-        resolvedSeries,
-        safeGroupBarGap,
-        seriesLayout,
-    ]);
-    const domainValues = useMemo(() => {
-        if (isMultiSeries && seriesLayout === "stacked") {
-            return categories.flatMap((category) => [
-                category.negativeTotal,
-                category.positiveTotal,
-            ]);
-        }
-        return bars.map((bar) => bar.value);
-    }, [bars, categories, isMultiSeries, seriesLayout]);
-    const valueScale = useMemo(() => {
-        const scale = scaleLinear()
-            .domain(getValueDomain(domainValues, minValue, maxValue))
-            .range(orientation === "vertical" ? [plotHeight, 0] : [0, plotWidth]);
-        if (minValue == null || maxValue == null) {
-            scale.nice(Math.max(valueTickCount, 2));
-        }
-        return scale;
-    }, [
-        domainValues,
-        maxValue,
-        minValue,
-        orientation,
-        plotHeight,
-        plotWidth,
-        valueTickCount,
-    ]);
-    const zeroPosition = valueScale(0);
-    const tickValues = useMemo(() => Array.from(new Set(valueScale
-        .ticks(Math.max(valueTickCount, 2))
-        .map((tick) => normalizeTickValue(tick)))), [valueScale, valueTickCount]);
-    const stackTerminalBarKeys = useMemo(() => {
-        const nextKeys = new Set();
-        if (!isMultiSeries || seriesLayout !== "stacked") {
-            return nextKeys;
-        }
-        categories.forEach((category) => {
-            const positiveBars = category.bars.filter((bar) => bar.value > 0);
-            const negativeBars = category.bars.filter((bar) => bar.value < 0);
-            const topBar = positiveBars[positiveBars.length - 1];
-            const bottomBar = negativeBars[negativeBars.length - 1];
-            if (topBar)
-                nextKeys.add(String(topBar.key));
-            if (bottomBar)
-                nextKeys.add(String(bottomBar.key));
-        });
-        return nextKeys;
-    }, [categories, isMultiSeries, seriesLayout]);
-    const safeAnimationDuration = Math.max(animationDuration, 0);
-    const safeAnimationStagger = Math.max(animationStagger, 0);
-    const totalAnimationDuration = safeAnimationDuration + Math.max(bars.length - 1, 0) * safeAnimationStagger;
-    useEffect(() => {
-        var _a;
-        if (!animateOnRender || bars.length === 0) {
-            setAnimationElapsed(Number.POSITIVE_INFINITY);
-            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) {
-            setAnimationElapsed(Number.POSITIVE_INFINITY);
-            return;
-        }
-        let animationFrame = 0;
-        let startTime = null;
-        setAnimationElapsed(0);
-        const runAnimation = (timestamp) => {
-            if (startTime == null)
-                startTime = timestamp;
-            const elapsed = timestamp - startTime;
-            setAnimationElapsed(elapsed);
-            if (elapsed < totalAnimationDuration) {
-                animationFrame = window.requestAnimationFrame(runAnimation);
-            }
-        };
-        animationFrame = window.requestAnimationFrame(runAnimation);
-        return () => {
-            window.cancelAnimationFrame(animationFrame);
-        };
-    }, [
-        animateOnRender,
-        bars.length,
-        safeAnimationDuration,
-        safeAnimationStagger,
-        totalAnimationDuration,
-    ]);
-    const getBarAnimationProgress = (index) => {
-        if (!animateOnRender || safeAnimationDuration === 0)
-            return 1;
-        const elapsed = animationElapsed - index * safeAnimationStagger;
-        return easeOutCubic(clamp(elapsed / safeAnimationDuration, 0, 1));
-    };
-    const formatValue = (datum, sourceSeries) => {
-        var _a;
-        return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(datum.value, datum, sourceSeries)) !== null && _a !== void 0 ? _a : formatDefaultValue(datum.value);
-    };
-    const formatCategoryLabel = (category) => {
-        var _a, _b;
-        return (_b = categoryLabelFormatter === null || categoryLabelFormatter === void 0 ? void 0 : categoryLabelFormatter(category.representativeDatum, category.index, (_a = category.bars[0]) === null || _a === void 0 ? void 0 : _a.sourceSeries)) !== null && _b !== void 0 ? _b : category.label;
-    };
-    const formatTick = (value) => { var _a; return (_a = tickFormatter === null || tickFormatter === void 0 ? void 0 : tickFormatter(value)) !== null && _a !== void 0 ? _a : formatDefaultValue(value); };
-    const formatSeriesValue = (seriesEntry) => {
-        var _a;
-        const totalDatum = {
-            label: seriesEntry.labelText,
-            value: seriesEntry.totalValue,
-        };
-        return ((_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(seriesEntry.totalValue, totalDatum, seriesEntry.sourceSeries)) !== null && _a !== void 0 ? _a : formatDefaultValue(seriesEntry.totalValue));
-    };
-    const updateTooltipPosition = (event, barKey) => {
-        if (!showTooltips || !containerRef.current)
-            return;
-        const containerRect = containerRef.current.getBoundingClientRect();
-        setActiveTooltip({
-            barKey,
-            x: event.clientX - containerRect.left,
-            y: event.clientY - containerRect.top,
-        });
-    };
-    const activeTooltipBar = showTooltips && activeTooltip
-        ? ((_c = bars.find((bar) => bar.key === activeTooltip.barKey)) !== null && _c !== void 0 ? _c : null)
-        : null;
-    const activeTooltipCategory = isMultiSeries && activeTooltipBar
-        ? ((_d = categories.find((category) => category.key === activeTooltipBar.categoryKey)) !== null && _d !== void 0 ? _d : null)
-        : null;
-    const tooltipStyle = useMemo(() => {
-        if (!activeTooltip ||
-            !containerRef.current ||
-            !chartFrameRef.current ||
-            !activeTooltipBar) {
-            return null;
-        }
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const chartFrameRect = chartFrameRef.current.getBoundingClientRect();
-        const chartFrameLeft = chartFrameRect.left - containerRect.left;
-        const chartFrameTop = chartFrameRect.top - containerRect.top;
-        const minLeft = chartFrameLeft + 8;
-        const maxLeft = chartFrameLeft + chartFrameRect.width - tooltipSize.width - 8;
-        const minTop = chartFrameTop + 8;
-        const maxTop = chartFrameTop + chartFrameRect.height - tooltipSize.height - 8;
-        return {
-            left: clamp(activeTooltip.x + 12, minLeft, Math.max(minLeft, maxLeft)),
-            top: clamp(activeTooltip.y - tooltipSize.height / 2, minTop, Math.max(minTop, maxTop)),
-            transform: "none",
-        };
-    }, [activeTooltip, activeTooltipBar, tooltipSize.height, tooltipSize.width]);
-    const shouldShowLegend = showLegend &&
-        (isMultiSeries ? resolvedSeries.length > 0 : bars.length > 0) &&
-        (showLegendSwatches || showLegendLabels || showLegendValues);
-    const description = useMemo(() => {
-        if (isMultiSeries) {
-            return categories
-                .map((category) => {
-                const seriesValues = category.bars
-                    .map((bar) => `${bar.seriesLabelText}: ${formatDefaultValue(bar.value)}`)
-                    .join(", ");
-                return `${category.label}: ${seriesValues}`;
-            })
-                .join(". ");
-        }
-        return bars
-            .map((bar) => `${bar.label}: ${formatDefaultValue(bar.value)}`)
-            .join(", ");
-    }, [bars, categories, isMultiSeries]);
-    useEffect(() => {
-        if (!tooltipRef.current ||
-            !activeTooltipBar ||
-            (isMultiSeries && !activeTooltipCategory)) {
-            setTooltipSize({ width: 0, height: 0 });
-            return;
-        }
-        setTooltipSize({
-            width: tooltipRef.current.offsetWidth,
-            height: tooltipRef.current.offsetHeight,
-        });
-    }, [activeTooltipBar, activeTooltipCategory, isMultiSeries]);
-    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: bars.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 }), showGridLines &&
-                                    tickValues.map((tick) => {
-                                        const tickPosition = valueScale(tick);
-                                        return orientation === "vertical" ? (_jsx(StyledGridLine, { x1: resolvedMargin.left, x2: resolvedMargin.left + plotWidth, y1: resolvedMargin.top + tickPosition, y2: resolvedMargin.top + tickPosition }, `grid-${tick}`)) : (_jsx(StyledGridLine, { x1: resolvedMargin.left + tickPosition, x2: resolvedMargin.left + tickPosition, y1: resolvedMargin.top, y2: resolvedMargin.top + plotHeight }, `grid-${tick}`));
-                                    }), showAxisLines && (_jsx(_Fragment, { children: orientation === "vertical" ? (_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 + zeroPosition, y2: resolvedMargin.top + zeroPosition })] })) : (_jsxs(_Fragment, { children: [_jsx(StyledAxisLine, { x1: resolvedMargin.left, x2: resolvedMargin.left + plotWidth, y1: resolvedMargin.top + plotHeight, y2: resolvedMargin.top + plotHeight }), _jsx(StyledAxisLine, { x1: resolvedMargin.left + zeroPosition, x2: resolvedMargin.left + zeroPosition, y1: resolvedMargin.top, y2: resolvedMargin.top + plotHeight })] })) })), showValueAxisLabels &&
-                                    tickValues.map((tick) => {
-                                        const tickPosition = valueScale(tick);
-                                        return orientation === "vertical" ? (_jsx(StyledAxisText, { x: resolvedMargin.left - 10, y: resolvedMargin.top + tickPosition, textAnchor: "end", dominantBaseline: "middle", children: formatTick(tick) }, `value-tick-${tick}`)) : (_jsx(StyledAxisText, { x: resolvedMargin.left + tickPosition, y: resolvedMargin.top + plotHeight + 18, textAnchor: "middle", children: formatTick(tick) }, `value-tick-${tick}`));
-                                    }), categories.map((category) => {
-                                    var _a;
-                                    const categoryBandStart = (_a = categoryScale(category.key)) !== null && _a !== void 0 ? _a : 0;
-                                    return category.bars.map((bar) => {
-                                        var _a, _b, _c;
-                                        const groupBandStart = (_a = groupScale === null || groupScale === void 0 ? void 0 : groupScale(String(bar.seriesKey))) !== null && _a !== void 0 ? _a : 0;
-                                        const groupBandWidth = (_b = groupScale === null || groupScale === void 0 ? void 0 : groupScale.bandwidth()) !== null && _b !== void 0 ? _b : categoryScale.bandwidth();
-                                        const thickness = safeMaxBarThickness
-                                            ? Math.min(groupBandWidth, safeMaxBarThickness)
-                                            : groupBandWidth;
-                                        const thicknessOffset = (groupBandWidth - thickness) / 2;
-                                        const animationProgress = getBarAnimationProgress(bar.renderIndex);
-                                        const startPosition = valueScale(bar.valueStart);
-                                        const endPosition = valueScale(bar.valueEnd);
-                                        const animatedStartPosition = zeroPosition +
-                                            (startPosition - zeroPosition) * animationProgress;
-                                        const animatedEndPosition = zeroPosition +
-                                            (endPosition - zeroPosition) * animationProgress;
-                                        const x = orientation === "vertical"
-                                            ? resolvedMargin.left +
-                                                categoryBandStart +
-                                                groupBandStart +
-                                                thicknessOffset
-                                            : resolvedMargin.left +
-                                                Math.min(animatedStartPosition, animatedEndPosition);
-                                        const y = orientation === "vertical"
-                                            ? resolvedMargin.top +
-                                                Math.min(animatedStartPosition, animatedEndPosition)
-                                            : resolvedMargin.top +
-                                                categoryBandStart +
-                                                groupBandStart +
-                                                thicknessOffset;
-                                        const barWidth = orientation === "vertical"
-                                            ? thickness
-                                            : Math.abs(animatedEndPosition - animatedStartPosition);
-                                        const barHeight = orientation === "vertical"
-                                            ? Math.abs(animatedEndPosition - animatedStartPosition)
-                                            : thickness;
-                                        const isStackTerminal = seriesLayout !== "stacked" ||
-                                            stackTerminalBarKeys.has(String(bar.key));
-                                        const path = getRoundedBarPath({
-                                            x,
-                                            y,
-                                            width: barWidth,
-                                            height: barHeight,
-                                            radius: isStackTerminal ? safeBarRadius : 0,
-                                            orientation,
-                                            value: bar.value,
-                                        });
-                                        const isPositive = bar.value >= 0;
-                                        const outerValuePosition = valueScale(bar.valueEnd);
-                                        const valueLabelX = orientation === "vertical"
-                                            ? resolvedMargin.left +
-                                                categoryBandStart +
-                                                groupBandStart +
-                                                thicknessOffset +
-                                                thickness / 2
-                                            : resolvedMargin.left +
-                                                (isPositive
-                                                    ? Math.max(outerValuePosition, zeroPosition) + 8
-                                                    : Math.min(outerValuePosition, zeroPosition) - 8);
-                                        const valueLabelY = orientation === "vertical"
-                                            ? resolvedMargin.top +
-                                                (isPositive
-                                                    ? Math.min(outerValuePosition, zeroPosition) - 8
-                                                    : Math.max(outerValuePosition, zeroPosition) + 14)
-                                            : resolvedMargin.top +
-                                                categoryBandStart +
-                                                groupBandStart +
-                                                thicknessOffset +
-                                                thickness / 2;
-                                        const shouldShowValueLabel = showLabels &&
-                                            animationProgress >= 0.92 &&
-                                            (seriesLayout !== "stacked" || isStackTerminal);
-                                        const isActive = activeBarKey === bar.key ||
-                                            (isMultiSeries && activeSeriesKey === bar.seriesKey);
-                                        return (_jsxs("g", { children: [_jsx(StyledBar, { "$active": isActive, d: path || undefined, fill: bar.color, fillOpacity: resolvedBarOpacity, stroke: resolvedBarBorderColor, strokeWidth: resolvedBarBorderWidth, strokeOpacity: resolvedBarBorderOpacity, tabIndex: 0, "aria-label": isMultiSeries
-                                                        ? `${bar.seriesLabelText}, ${bar.categoryLabel}: ${formatDefaultValue(bar.value)}`
-                                                        : `${bar.label}: ${formatDefaultValue(bar.value)}`, onFocus: () => {
-                                                        setActiveBarKey(bar.key);
-                                                        setActiveSeriesKey(bar.seriesKey);
-                                                    }, onBlur: () => {
-                                                        setActiveBarKey(null);
-                                                        setActiveSeriesKey(null);
-                                                    }, onMouseEnter: (event) => {
-                                                        setActiveBarKey(bar.key);
-                                                        setActiveSeriesKey(bar.seriesKey);
-                                                        updateTooltipPosition(event, bar.key);
-                                                    }, onMouseMove: (event) => updateTooltipPosition(event, bar.key), onMouseLeave: () => {
-                                                        setActiveBarKey(null);
-                                                        setActiveSeriesKey(null);
-                                                        setActiveTooltip(null);
-                                                    }, onClick: (event) => onBarClick === null || onBarClick === void 0 ? void 0 : onBarClick(event, bar, bar.sourceSeries), onKeyDown: (event) => {
-                                                        if (event.key !== "Enter" && event.key !== " ")
-                                                            return;
-                                                        event.preventDefault();
-                                                        onBarClick === null || onBarClick === void 0 ? void 0 : onBarClick(event, bar, bar.sourceSeries);
-                                                    } }), shouldShowValueLabel && (_jsx(StyledValueLabel, { x: valueLabelX, y: valueLabelY, textAnchor: orientation === "vertical"
-                                                        ? "middle"
-                                                        : isPositive
-                                                            ? "start"
-                                                            : "end", dominantBaseline: orientation === "vertical" ? "middle" : "central", children: (_c = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(bar, bar.index, bar.sourceSeries)) !== null && _c !== void 0 ? _c : formatValue(bar, bar.sourceSeries) }))] }, bar.key));
-                                    });
-                                }), showCategoryAxisLabels &&
-                                    categories.map((category) => {
-                                        var _a, _b;
-                                        return orientation === "vertical" ? (_jsx(StyledAxisText, { x: resolvedMargin.left +
-                                                ((_a = categoryScale(category.key)) !== null && _a !== void 0 ? _a : 0) +
-                                                categoryScale.bandwidth() / 2, y: resolvedMargin.top + plotHeight + 20, textAnchor: "middle", children: formatCategoryLabel(category) }, `category-${category.key}`)) : (_jsx(StyledAxisText, { x: resolvedMargin.left - 10, y: resolvedMargin.top +
-                                                ((_b = categoryScale(category.key)) !== null && _b !== void 0 ? _b : 0) +
-                                                categoryScale.bandwidth() / 2, textAnchor: "end", dominantBaseline: "middle", children: formatCategoryLabel(category) }, `category-${category.key}`));
-                                    })] })] })) }), activeTooltip && activeTooltipBar && tooltipStyle && (_jsx(StyledTooltip, { ref: tooltipRef, style: tooltipStyle, children: tooltipFormatter ? (tooltipFormatter(activeTooltipBar, activeTooltipBar.index, activeTooltipBar.sourceSeries)) : isMultiSeries && activeTooltipCategory ? (_jsxs(_Fragment, { children: [_jsx(StyledTooltipHeader, { children: _jsx(StyledTooltipLabel, { children: activeTooltipCategory.label }) }), _jsxs(StyledTooltipMeta, { children: [formatDefaultValue(activeTooltipCategory.bars.reduce((sum, bar) => sum + bar.value, 0)), " ", "total"] }), _jsx(StyledTooltipList, { children: activeTooltipCategory.bars.map((bar) => (_jsxs(StyledTooltipRow, { children: [_jsx(StyledTooltipSwatch, { "$color": bar.color }), _jsx(StyledTooltipLabel, { children: bar.seriesLabel }), _jsx(StyledTooltipValue, { children: formatValue(bar, bar.sourceSeries) })] }, `tooltip-${bar.key}`))) })] })) : (_jsxs(_Fragment, { children: [_jsxs(StyledTooltipHeader, { children: [_jsx(StyledTooltipSwatch, { "$color": activeTooltipBar.color }), _jsx(StyledTooltipLabel, { children: activeTooltipBar.label })] }), _jsx(StyledTooltipMeta, { children: formatValue(activeTooltipBar, activeTooltipBar.sourceSeries) })] })) })), shouldShowLegend && (_jsx(StyledLegend, { children: isMultiSeries
-                    ? resolvedSeries.map((seriesEntry) => (_jsxs(StyledLegendItem, { "$active": activeSeriesKey === seriesEntry.key, "$showSwatch": showLegendSwatches, "$showLabel": showLegendLabels, "$showValue": showLegendValues, tabIndex: 0, onMouseEnter: () => setActiveSeriesKey(seriesEntry.key), onMouseLeave: () => setActiveSeriesKey(null), onFocus: () => setActiveSeriesKey(seriesEntry.key), onBlur: () => setActiveSeriesKey(null), onClick: (event) => seriesEntry.sourceSeries &&
-                            (onSeriesLegendItemClick === null || onSeriesLegendItemClick === void 0 ? void 0 : onSeriesLegendItemClick(event, seriesEntry.sourceSeries)), onKeyDown: (event) => {
-                            if (event.key !== "Enter" && event.key !== " ")
-                                return;
-                            event.preventDefault();
-                            if (seriesEntry.sourceSeries) {
-                                onSeriesLegendItemClick === null || onSeriesLegendItemClick === void 0 ? void 0 : onSeriesLegendItemClick(event, seriesEntry.sourceSeries);
-                            }
-                        }, children: [showLegendSwatches && (_jsx(StyledSwatch, { "$color": seriesEntry.color })), showLegendLabels && (_jsx(StyledLegendLabel, { children: seriesEntry.label })), showLegendValues && (_jsx(StyledLegendValue, { children: formatSeriesValue(seriesEntry) }))] }, `legend-${seriesEntry.key}`)))
-                    : bars.map((bar) => (_jsxs(StyledLegendItem, { "$active": activeBarKey === bar.key, "$showSwatch": showLegendSwatches, "$showLabel": showLegendLabels, "$showValue": showLegendValues, tabIndex: 0, onMouseEnter: () => setActiveBarKey(bar.key), onMouseLeave: () => setActiveBarKey(null), onFocus: () => setActiveBarKey(bar.key), onBlur: () => setActiveBarKey(null), onClick: (event) => onLegendItemClick === null || onLegendItemClick === void 0 ? void 0 : onLegendItemClick(event, bar), onKeyDown: (event) => {
-                            if (event.key !== "Enter" && event.key !== " ")
-                                return;
-                            event.preventDefault();
-                            onLegendItemClick === null || onLegendItemClick === void 0 ? void 0 : onLegendItemClick(event, bar);
-                        }, children: [showLegendSwatches && _jsx(StyledSwatch, { "$color": bar.color }), showLegendLabels && (_jsx(StyledLegendLabel, { children: bar.label })), showLegendValues && (_jsx(StyledLegendValue, { children: formatValue(bar, bar.sourceSeries) }))] }, bar.key))) }))] })));
-};
-export const BarChart = forwardRef(BarChartInner);
-export default BarChart;

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

@@ -1,31 +0,0 @@
-import { ReactNode } from "react";
-import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientColorFromStops, getGradientStops, mixColors } from "../ChartUtils";
-import { BarChartDatum, BarChartMargin, BarChartOrientation, BarChartSeries } from "./BarChart.types";
-export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientColorFromStops, getGradientStops, mixColors, };
-export declare const getBarKey: (datum: BarChartDatum<unknown>, index: number) => string | number;
-export declare const getSeriesKey: (series: BarChartSeries<unknown>, index: number) => string | number;
-export declare const getSeriesLabelText: (label: ReactNode, fallbackLabel: string) => string;
-export declare const getCategoryKey: (datum: BarChartDatum<unknown>) => string;
-export declare const useThemeColors: (colors?: string[]) => string[];
-export declare const getBandPadding: (barGap: number, span: number, count: number) => {
-    inner: number;
-    outer: number;
-};
-export declare const getValueDomain: (values: number[], minValue?: number, maxValue?: number) => [number, number];
-export declare const getDefaultMargin: (orientation: BarChartOrientation, showCategoryAxisLabels: boolean, showValueAxisLabels: boolean, showLabels: boolean) => BarChartMargin;
-export declare const mergeChartMargin: (orientation: BarChartOrientation, margin: Partial<BarChartMargin> | undefined, showCategoryAxisLabels: boolean, showValueAxisLabels: boolean, showLabels: boolean) => {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};
-export declare const normalizeTickValue: (value: number) => number;
-export declare const getRoundedBarPath: ({ x, y, width, height, radius, orientation, value, }: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    radius: number;
-    orientation: BarChartOrientation;
-    value: number;
-}) => string;