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

package/dist/Charts/BarChart/BarChart.js

@@ -0,0 +1,549 @@
+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, } 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 = 640, height = 320, 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", "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 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 safeWidth = Math.max(width, 180);
+    const safeHeight = Math.max(height, 180);
+    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 }, props, { children: [bars.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 }), 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

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