@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.8.1

package/dist/Charts/ChartUtils/chartSizing.js

@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useState } from "react";
+const toDimensionStyle = (dimension) => {
+    if (dimension == null || typeof dimension === "number")
+        return undefined;
+    return dimension;
+};
+const toNumericDimension = (dimension, fallback) => typeof dimension === "number" && Number.isFinite(dimension)
+    ? dimension
+    : fallback;
+const getElementSize = (element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+        width: Math.max(Math.round(rect.width || element.clientWidth || 0), 0),
+        height: Math.max(Math.round(rect.height || element.clientHeight || 0), 0),
+    };
+};
+export const useChartResponsiveSize = (ref, { width, height, responsive = false, aspectRatio, defaultWidth, defaultHeight, minWidth, minHeight, }) => {
+    const resolvedWidthInput = width !== null && width !== void 0 ? width : (responsive ? "100%" : defaultWidth);
+    const resolvedHeightInput = height !== null && height !== void 0 ? height : defaultHeight;
+    const shouldMeasureWidth = responsive || typeof resolvedWidthInput === "string";
+    const shouldMeasureHeight = typeof resolvedHeightInput === "string";
+    const shouldMeasure = shouldMeasureWidth || shouldMeasureHeight;
+    const [measuredSize, setMeasuredSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (!shouldMeasure)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        const updateSize = () => {
+            const nextSize = getElementSize(element);
+            setMeasuredSize((currentSize) => currentSize.width === nextSize.width &&
+                currentSize.height === nextSize.height
+                ? currentSize
+                : nextSize);
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateSize);
+            return () => window.removeEventListener("resize", updateSize);
+        }
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref, shouldMeasure]);
+    return useMemo(() => {
+        const fallbackWidth = toNumericDimension(resolvedWidthInput, defaultWidth);
+        const fallbackHeight = toNumericDimension(resolvedHeightInput, defaultHeight);
+        const measuredWidth = shouldMeasureWidth && measuredSize.width > 0
+            ? measuredSize.width
+            : fallbackWidth;
+        const safeWidth = Math.max(measuredWidth, minWidth);
+        const resolvedAspectRatio = aspectRatio != null && Number.isFinite(aspectRatio) && aspectRatio > 0
+            ? aspectRatio
+            : null;
+        const measuredHeight = height == null && resolvedAspectRatio != null
+            ? safeWidth / resolvedAspectRatio
+            : shouldMeasureHeight && measuredSize.height > 0
+                ? measuredSize.height
+                : fallbackHeight;
+        return {
+            width: Math.max(Math.round(safeWidth), minWidth),
+            height: Math.max(Math.round(measuredHeight), minHeight),
+            widthStyle: toDimensionStyle(resolvedWidthInput),
+            heightStyle: toDimensionStyle(resolvedHeightInput),
+            fillAvailableWidth: responsive || typeof resolvedWidthInput === "string",
+        };
+    }, [
+        aspectRatio,
+        defaultHeight,
+        defaultWidth,
+        height,
+        measuredSize.height,
+        measuredSize.width,
+        minHeight,
+        minWidth,
+        resolvedHeightInput,
+        resolvedWidthInput,
+        responsive,
+        shouldMeasureHeight,
+        shouldMeasureWidth,
+    ]);
+};

package/dist/Charts/ChartUtils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./chartColors";
 export * from "./chartExport";
 export * from "./chartMath";
+export * from "./chartSizing";

package/dist/Charts/ChartUtils/index.js

@@ -1,3 +1,4 @@
 export * from "./chartColors";
 export * from "./chartExport";
 export * from "./chartMath";
+export * from "./chartSizing";

package/dist/Charts/HeatMap/HeatMap.js

@@ -22,14 +22,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
 import { buildHeatMapCells, clamp, easeOutCubic, formatDefaultValue, formatDefaultWeekdayLabel, getHeatMapColor, getHeatMapDateRange, getMonthLabels, } from "./HeatMap.lib";
 import { StyledCell, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledLegend, StyledLegendCell, StyledLegendScale, StyledMonthLabel, StyledSvg, StyledTooltip, StyledTooltipHeader, StyledTooltipMeta, StyledTooltipSwatch, StyledWeekdayLabel, } from "./HeatMap.styled";
 const HeatMapInner = (_a, ref) => {
-    var { data, startDate, endDate, cellSize = 12, cellGap = 4, cellRadius = 2, emptyColor, colors, minValue = 0, maxValue, weekStartsOn = 0, showMonthLabels = true, showWeekdayLabels = true, showLegend = true, animateOnRender = false, animationDuration = 350, animationStagger = 1, showExportButton = false, exportFileName = "heat-map", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, ariaLabel = "Heat map", valueFormatter, monthLabelFormatter, weekdayLabelFormatter, tooltipFormatter, onCellClick, className } = _a, props = __rest(_a, ["data", "startDate", "endDate", "cellSize", "cellGap", "cellRadius", "emptyColor", "colors", "minValue", "maxValue", "weekStartsOn", "showMonthLabels", "showWeekdayLabels", "showLegend", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "ariaLabel", "valueFormatter", "monthLabelFormatter", "weekdayLabelFormatter", "tooltipFormatter", "onCellClick", "className"]);
+    var { data, width, responsive = false, startDate, endDate, cellSize = 12, minCellSize = 6, cellGap = 4, cellRadius = 2, emptyColor, colors, minValue = 0, maxValue, weekStartsOn = 0, showMonthLabels = true, showWeekdayLabels = true, showLegend = true, animateOnRender = false, animationDuration = 350, animationStagger = 1, showExportButton = false, exportFileName = "heat-map", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, ariaLabel = "Heat map", valueFormatter, monthLabelFormatter, weekdayLabelFormatter, tooltipFormatter, onCellClick, className } = _a, props = __rest(_a, ["data", "width", "responsive", "startDate", "endDate", "cellSize", "minCellSize", "cellGap", "cellRadius", "emptyColor", "colors", "minValue", "maxValue", "weekStartsOn", "showMonthLabels", "showWeekdayLabels", "showLegend", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "ariaLabel", "valueFormatter", "monthLabelFormatter", "weekdayLabelFormatter", "tooltipFormatter", "onCellClick", "className"]);
     const descriptionId = useId();
     const theme = useTheme();
     const containerRef = useRef(null);
+    const chartSizeRef = useRef(null);
     const svgRef = useRef(null);
     const [activeCellKey, setActiveCellKey] = useState(null);
     const [activeTooltip, setActiveTooltip] = useState(null);
@@ -73,12 +74,12 @@ const HeatMapInner = (_a, ref) => {
         .map((datum) => datum.value)
         .filter((value) => Number.isFinite(value));
     const resolvedMaxValue = maxValue !== null && maxValue !== void 0 ? maxValue : Math.max(...values, minValue, 1);
-    const safeCellSize = Math.max(cellSize, 1);
+    const preferredCellSize = Math.max(cellSize, 1);
+    const safeMinCellSize = Math.max(minCellSize, 1);
     const safeCellGap = Math.max(cellGap, 0);
     const safeCellRadius = Math.max(cellRadius, 0);
     const labelWidth = showWeekdayLabels ? 28 : 0;
     const monthLabelHeight = showMonthLabels ? 18 : 0;
-    const step = safeCellSize + safeCellGap;
     const cells = useMemo(() => buildHeatMapCells({
         data,
         startDate: resolvedStartDate,
@@ -100,8 +101,28 @@ const HeatMapInner = (_a, ref) => {
         weekStartsOn,
     ]);
     const weekCount = cells.length > 0 ? Math.max(...cells.map((cell) => cell.weekIndex)) + 1 : 1;
-    const width = labelWidth + weekCount * step - safeCellGap;
-    const height = monthLabelHeight + 7 * step - safeCellGap;
+    const preferredStep = preferredCellSize + safeCellGap;
+    const preferredWidth = labelWidth + weekCount * preferredStep - safeCellGap;
+    const preferredHeight = monthLabelHeight + 7 * preferredStep - safeCellGap;
+    const chartSize = useChartResponsiveSize(chartSizeRef, {
+        width,
+        responsive,
+        defaultWidth: preferredWidth,
+        defaultHeight: preferredHeight,
+        minWidth: 1,
+        minHeight: 1,
+    });
+    const shouldFitWidth = responsive || width != null;
+    const targetCellSize = (chartSize.width - labelWidth + safeCellGap) / weekCount - safeCellGap;
+    const safeCellSize = shouldFitWidth
+        ? Math.max(targetCellSize, safeMinCellSize)
+        : preferredCellSize;
+    const step = safeCellSize + safeCellGap;
+    const chartWidth = labelWidth + weekCount * step - safeCellGap;
+    const chartHeight = monthLabelHeight + 7 * step - safeCellGap;
+    const chartWidthStyle = typeof width === "number" && Number.isFinite(width)
+        ? `${chartSize.width}px`
+        : chartSize.widthStyle;
     const formatValue = (cell) => { var _a; return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(cell.value, cell.datum)) !== null && _a !== void 0 ? _a : formatDefaultValue(cell.value); };
     const getCellFill = (cell) => {
         if (!cell.datum)
@@ -172,7 +193,7 @@ const HeatMapInner = (_a, ref) => {
         const elapsed = animationElapsed - index * safeAnimationStagger;
         return easeOutCubic(clamp(elapsed / safeAnimationDuration, 0, 1));
     };
-    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [_jsx(StyledChartScroller, { children: _jsxs(StyledChartFrame, { 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: width, height: height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), showMonthLabels &&
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartScroller, { ref: chartSizeRef, "$width": chartWidthStyle, children: _jsxs(StyledChartFrame, { 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: chartWidth, height: chartHeight, viewBox: `0 0 ${chartWidth} ${chartHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), showMonthLabels &&
                                     monthLabels.map((monthLabel) => (_jsx(StyledMonthLabel, { x: labelWidth + monthLabel.weekIndex * step, y: 10, children: monthLabel.label }, `${monthLabel.label}-${monthLabel.weekIndex}`))), showWeekdayLabels &&
                                     Array.from({ length: 7 }, (_, dayIndex) => {
                                         var _a;

package/dist/Charts/HeatMap/HeatMap.styled.d.ts

@@ -1,6 +1,10 @@
 import { StyledChartActions } from "../ChartPrimitives";
-export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAvailableWidth: boolean;
+}>> & string;
+export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+}>> & string;
 export declare const StyledChartFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export { StyledChartActions };
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;

package/dist/Charts/HeatMap/HeatMap.styled.js

@@ -9,16 +9,19 @@ export const StyledContainer = styled.div `
   display: inline-flex;
   flex-direction: column;
   gap: 10px;
+  width: ${({ $fillAvailableWidth }) => $fillAvailableWidth ? "100%" : "fit-content"};
   max-width: 100%;
   color: ${({ theme }) => theme.palette.text.primary};
   overflow: visible;
 `;
 export const StyledChartScroller = styled.div `
   display: flex;
+  width: ${({ $width }) => $width !== null && $width !== void 0 ? $width : "auto"};
   max-width: 100%;
   overflow-x: auto;
   overflow-y: visible;
   padding-bottom: 2px;
+  box-sizing: border-box;
 `;
 export const StyledChartFrame = styled.div `
   position: relative;

package/dist/Charts/HeatMap/HeatMap.types.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import type { ChartExportOptions } from "../ChartUtils";
+import type { ChartDimension, ChartExportOptions } from "../ChartUtils";
 export type HeatMapDatum<TData = unknown> = {
     /** Date represented by this cell. ISO yyyy-mm-dd strings are recommended. */
     date: Date | string;
@@ -31,12 +31,18 @@ export type HeatMapTooltipState = {
 export type HeatMapProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & ChartExportOptions & {
     /** Values rendered by the heatmap. Missing dates render as empty cells. */
     data: HeatMapDatum<TData>[];
+    /** Target heatmap width in pixels or any CSS length measured from the chart frame. */
+    width?: ChartDimension;
+    /** Measures the chart frame and resizes cells to fit the available width. Defaults to false. */
+    responsive?: boolean;
     /** First date to render. Defaults to the earliest date in data. */
     startDate?: Date | string;
     /** Last date to render. Defaults to the latest date in data. */
     endDate?: Date | string;
     /** Size of each square cell in pixels. Defaults to 12. */
     cellSize?: number;
+    /** Minimum rendered cell size in pixels when responsive sizing is active. Defaults to 6. */
+    minCellSize?: number;
     /** Gap between cells in pixels. Defaults to 4. */
     cellGap?: number;
     /** Cell corner radius in pixels. Defaults to 2. */

package/dist/Charts/LineChart/LineChart.js

@@ -23,16 +23,17 @@ import { scaleLinear, scalePoint, scaleTime } from "d3-scale";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { useTheme } from "styled-components";
 import { ChartExportControl } from "../ChartPrimitives";
-import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, } from "../ChartUtils";
+import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
 import { buildAreaPath, buildLinePath, clamp, easeOutCubic, formatDefaultValue, getGradientStops, getPointKey, getSeriesKey, getSeriesLabelText, getValueDomain, measureSvgPath, mergeChartMargin, normalizeTickValue, parseLineChartXValue, resolveXAxisType, useThemeColor, useThemeColors, } from "./LineChart.lib";
 import { StyledArea, StyledAxisLine, StyledAxisText, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledEmptyState, StyledGridLine, StyledHoverTarget, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendLine, StyledLegendValue, StyledLine, StyledPoint, StyledSvg, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, StyledValueLabel, } from "./LineChart.styled";
 const LineChartInner = (_a, ref) => {
     var _b, _c, _d;
-    var { data, series, seriesLabel = "Series", width = 720, height = 320, margin, xAxisType = "auto", curve = "monotone", lineColor, colors, colorGradient, lineWidth = 2.5, lineOpacity = 1, lineDasharray, showArea = false, areaColor, areaOpacity = 0.14, showPoints = false, pointRadius = 3, activePointRadius = 4, pointColor, pointBorderColor, pointBorderWidth = 1.5, pointOpacity = 1, yMin, yMax, xTickCount = 6, yTickCount = 5, showGridLines = true, showAxisLines = true, showXAxisLabels = true, showYAxisLabels = true, showLegend = false, showLabels = false, emptyLabel = "No data", ariaLabel = "Line chart", animateOnRender = false, animationDuration = 720, showExportButton = false, exportFileName = "line-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, xValueFormatter, xTickFormatter, yTickFormatter, labelFormatter, tooltipFormatter, onPointClick, className } = _a, props = __rest(_a, ["data", "series", "seriesLabel", "width", "height", "margin", "xAxisType", "curve", "lineColor", "colors", "colorGradient", "lineWidth", "lineOpacity", "lineDasharray", "showArea", "areaColor", "areaOpacity", "showPoints", "pointRadius", "activePointRadius", "pointColor", "pointBorderColor", "pointBorderWidth", "pointOpacity", "yMin", "yMax", "xTickCount", "yTickCount", "showGridLines", "showAxisLines", "showXAxisLabels", "showYAxisLabels", "showLegend", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "xValueFormatter", "xTickFormatter", "yTickFormatter", "labelFormatter", "tooltipFormatter", "onPointClick", "className"]);
+    var { data, series, seriesLabel = "Series", width, height, responsive = false, aspectRatio, minWidth = 240, minHeight = 200, margin, xAxisType = "auto", curve = "monotone", lineColor, colors, colorGradient, lineWidth = 2.5, lineOpacity = 1, lineDasharray, showArea = false, areaColor, areaOpacity = 0.14, showPoints = false, pointRadius = 3, activePointRadius = 4, pointColor, pointBorderColor, pointBorderWidth = 1.5, pointOpacity = 1, yMin, yMax, xTickCount = 6, yTickCount = 5, showGridLines = true, showAxisLines = true, showXAxisLabels = true, showYAxisLabels = true, showLegend = false, showLabels = false, emptyLabel = "No data", ariaLabel = "Line chart", animateOnRender = false, animationDuration = 720, showExportButton = false, exportFileName = "line-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, xValueFormatter, xTickFormatter, yTickFormatter, labelFormatter, tooltipFormatter, onPointClick, className } = _a, props = __rest(_a, ["data", "series", "seriesLabel", "width", "height", "responsive", "aspectRatio", "minWidth", "minHeight", "margin", "xAxisType", "curve", "lineColor", "colors", "colorGradient", "lineWidth", "lineOpacity", "lineDasharray", "showArea", "areaColor", "areaOpacity", "showPoints", "pointRadius", "activePointRadius", "pointColor", "pointBorderColor", "pointBorderWidth", "pointOpacity", "yMin", "yMax", "xTickCount", "yTickCount", "showGridLines", "showAxisLines", "showXAxisLabels", "showYAxisLabels", "showLegend", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "xValueFormatter", "xTickFormatter", "yTickFormatter", "labelFormatter", "tooltipFormatter", "onPointClick", "className"]);
     const descriptionId = useId();
     const gradientBaseId = useId();
     const theme = useTheme();
     const containerRef = useRef(null);
+    const chartSizeRef = useRef(null);
     const chartFrameRef = useRef(null);
     const svgRef = useRef(null);
     const tooltipRef = useRef(null);
@@ -46,8 +47,18 @@ const LineChartInner = (_a, ref) => {
     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 chartSize = useChartResponsiveSize(chartSizeRef, {
+        width,
+        height,
+        responsive,
+        aspectRatio,
+        defaultWidth: 720,
+        defaultHeight: 320,
+        minWidth: Math.max(minWidth, 1),
+        minHeight: Math.max(minHeight, 1),
+    });
+    const safeWidth = chartSize.width;
+    const safeHeight = chartSize.height;
     const plotWidth = Math.max(safeWidth - resolvedMargin.left - resolvedMargin.right, 1);
     const plotHeight = Math.max(safeHeight - resolvedMargin.top - resolvedMargin.bottom, 1);
     const resolvedGlobalLineWidth = Math.max(lineWidth, 1);
@@ -207,7 +218,7 @@ const LineChartInner = (_a, ref) => {
         if (resolvedXAxisType !== "time")
             return null;
         const timeValues = allPoints
-            .map((point) => (point.parsedX instanceof Date ? point.parsedX.getTime() : null))
+            .map((point) => point.parsedX instanceof Date ? point.parsedX.getTime() : null)
             .filter((value) => value != null);
         const min = Math.min(...timeValues);
         const max = Math.max(...timeValues);
@@ -289,7 +300,8 @@ const LineChartInner = (_a, ref) => {
     }, [renderedSeries, renderedSeriesKey]);
     useLayoutEffect(() => {
         var _a;
-        if (!animateOnRender || renderedSeries.every((seriesEntry) => !seriesEntry.linePath)) {
+        if (!animateOnRender ||
+            renderedSeries.every((seriesEntry) => !seriesEntry.linePath)) {
             setAnimationProgress(1);
             return;
         }
@@ -307,7 +319,9 @@ const LineChartInner = (_a, ref) => {
             if (startTime == null)
                 startTime = timestamp;
             const elapsed = timestamp - startTime;
-            const progress = safeDuration === 0 ? 1 : easeOutCubic(clamp(elapsed / safeDuration, 0, 1));
+            const progress = safeDuration === 0
+                ? 1
+                : easeOutCubic(clamp(elapsed / safeDuration, 0, 1));
             setAnimationProgress(progress);
             if (progress < 1) {
                 animationFrame = window.requestAnimationFrame(runAnimation);
@@ -337,7 +351,10 @@ const LineChartInner = (_a, ref) => {
     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 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));
@@ -428,7 +445,7 @@ const LineChartInner = (_a, ref) => {
         .join(", ");
     const shouldAnimateStroke = animateOnRender && animationProgress < 1;
     const shouldShowDataLabels = showLabels && allPoints.length <= 24;
-    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [allPoints.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsx(StyledChartScroller, { children: _jsxs(StyledChartFrame, { ref: chartFrameRef, children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeWidth, height: safeHeight, viewBox: `0 0 ${safeWidth} ${safeHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), _jsx("defs", { children: renderedSeries
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartScroller, { ref: chartSizeRef, "$width": chartSize.widthStyle, "$height": chartSize.heightStyle, children: allPoints.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsxs(StyledChartFrame, { ref: chartFrameRef, children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeWidth, height: safeHeight, viewBox: `0 0 ${safeWidth} ${safeHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), _jsx("defs", { children: renderedSeries
                                         .filter((seriesEntry) => { var _a; return (_a = seriesEntry.gradientStops) === null || _a === void 0 ? void 0 : _a.length; })
                                         .map((seriesEntry) => {
                                         var _a;
@@ -437,7 +454,8 @@ const LineChartInner = (_a, ref) => {
                                                 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)) *
+                                                            (((_b = seriesEntry.gradientStops) !== null && _b !== void 0 ? _b : []).length -
+                                                                1)) *
                                                             100}%`, stopColor: stop }, `${stop}-${index}`));
                                             }) }, seriesEntry.gradientId));
                                     }) }), showGridLines &&
@@ -446,10 +464,10 @@ const LineChartInner = (_a, ref) => {
                                     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
+                                            ? ((_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;
+                                                ? ((_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)
@@ -488,7 +506,8 @@ const LineChartInner = (_a, ref) => {
                                                                 : undefined,
                                                             opacity: isSeriesDimmed ? 0.7 : 1,
                                                         } })), seriesEntry.linePath && (_jsx(StyledLine, { "$active": isSeriesActive, "$dimmed": isSeriesDimmed, ref: (node) => {
-                                                            linePathRefs.current[String(seriesEntry.key)] = 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
@@ -518,7 +537,7 @@ const LineChartInner = (_a, ref) => {
                                             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) => {
+                                            }))] })] })] })) }), 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;

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

@@ -1,6 +1,11 @@
 import { StyledChartActions } from "../ChartPrimitives";
-export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAvailableWidth: boolean;
+}>> & string;
+export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+    $height?: string;
+}>> & string;
 export declare const StyledChartFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export { StyledChartActions };
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;

package/dist/Charts/LineChart/LineChart.styled.js

@@ -10,7 +10,7 @@ export const StyledContainer = styled.div `
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 20px;
-  width: fit-content;
+  width: ${({ $fillAvailableWidth }) => $fillAvailableWidth ? "100%" : "fit-content"};
   max-width: 100%;
   color: ${({ theme }) => theme.palette.text.primary};
   box-sizing: border-box;
@@ -18,10 +18,13 @@ export const StyledContainer = styled.div `
 `;
 export const StyledChartScroller = styled.div `
   display: flex;
+  width: ${({ $width }) => $width !== null && $width !== void 0 ? $width : "auto"};
+  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : "auto"};
   max-width: 100%;
   overflow-x: auto;
   overflow-y: visible;
   padding-bottom: 2px;
+  box-sizing: border-box;
 `;
 export const StyledChartFrame = styled.div `
   position: relative;
@@ -120,6 +123,7 @@ export const StyledEmptyState = styled.div `
   justify-content: center;
   width: ${({ $width }) => $width}px;
   height: ${({ $height }) => $height}px;
+  box-sizing: border-box;
   border: 1px dashed ${({ theme }) => theme.palette.divider};
   border-radius: 8px;
   background: linear-gradient(

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

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import type { ChartExportOptions } from "../ChartUtils";
+import type { ChartDimension, ChartExportOptions } from "../ChartUtils";
 export type LineChartDatum<TData = unknown> = {
     /** Stable identifier for the point. Falls back to x and index when omitted. */
     id?: string | number;
@@ -104,10 +104,18 @@ export type LineChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & C
     series?: LineChartSeries<TData>[];
     /** Label used for the single-line variant in legend and tooltip context. */
     seriesLabel?: React.ReactNode;
-    /** SVG width in pixels. Defaults to 720. */
-    width?: number;
-    /** SVG height in pixels. Defaults to 320. */
-    height?: number;
+    /** SVG width in pixels or any CSS length measured from the chart frame. Defaults to 720. */
+    width?: ChartDimension;
+    /** SVG height in pixels or any CSS length measured from the chart frame. Defaults to 320. */
+    height?: ChartDimension;
+    /** Measures the chart frame and fits the SVG width to its available space. Defaults to false. */
+    responsive?: boolean;
+    /** Calculates height from resolved width when height is omitted. */
+    aspectRatio?: number;
+    /** Minimum rendered SVG width in pixels. Defaults to 240. */
+    minWidth?: number;
+    /** Minimum rendered SVG height in pixels. Defaults to 200. */
+    minHeight?: number;
     /** Partial chart margin overrides. Defaults are based on visible labels. */
     margin?: Partial<LineChartMargin>;
     /** X-axis scale type. Defaults to "auto". */

package/dist/Charts/PieChart/PieChart.js

@@ -23,15 +23,16 @@ import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, use
 import { arc, pie } from "d3-shape";
 import { useTheme } from "styled-components";
 import { ChartExportControl } from "../ChartPrimitives";
-import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, } from "../ChartUtils";
+import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
 import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getSliceKey, useThemeColors, } from "./PieChart.lib";
 import { StyledCenter, StyledCenterLabel, StyledCenterPanel, StyledCenterValue, StyledChartActions, StyledChartWrap, StyledContainer, StyledEmptyState, StyledLabel, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendMeta, StyledLegendPercent, StyledLegendValue, StyledSlice, StyledSvg, StyledSwatch, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, } from "./PieChart.styled";
 const PieChartInner = (_a, ref) => {
     var _b, _c;
-    var { data, size = 220, innerRadius = 58, outerRadius, cornerRadius = 1, padAngle = 0.004, colors, colorGradient, sliceOpacity = 1, sliceBorderColor, sliceBorderWidth = 1, sliceBorderOpacity = 1, sliceBorderLineJoin = "round", showLegend = true, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLegendPercentages = true, showLabels = false, centerLabel, centerValue, emptyLabel = "No data", ariaLabel = "Pie chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showExportButton = false, exportFileName = "pie-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, labelFormatter, tooltipFormatter, onSliceClick, onLegendItemClick, className } = _a, props = __rest(_a, ["data", "size", "innerRadius", "outerRadius", "cornerRadius", "padAngle", "colors", "colorGradient", "sliceOpacity", "sliceBorderColor", "sliceBorderWidth", "sliceBorderOpacity", "sliceBorderLineJoin", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLegendPercentages", "showLabels", "centerLabel", "centerValue", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "labelFormatter", "tooltipFormatter", "onSliceClick", "onLegendItemClick", "className"]);
+    var { data, size, responsive = false, minSize = 120, innerRadius, outerRadius, cornerRadius = 1, padAngle = 0.004, colors, colorGradient, sliceOpacity = 1, sliceBorderColor, sliceBorderWidth = 1, sliceBorderOpacity = 1, sliceBorderLineJoin = "round", showLegend = true, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLegendPercentages = true, showLabels = false, centerLabel, centerValue, emptyLabel = "No data", ariaLabel = "Pie chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showExportButton = false, exportFileName = "pie-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, labelFormatter, tooltipFormatter, onSliceClick, onLegendItemClick, className } = _a, props = __rest(_a, ["data", "size", "responsive", "minSize", "innerRadius", "outerRadius", "cornerRadius", "padAngle", "colors", "colorGradient", "sliceOpacity", "sliceBorderColor", "sliceBorderWidth", "sliceBorderOpacity", "sliceBorderLineJoin", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLegendPercentages", "showLabels", "centerLabel", "centerValue", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "labelFormatter", "tooltipFormatter", "onSliceClick", "onLegendItemClick", "className"]);
     const descriptionId = useId();
     const theme = useTheme();
     const containerRef = useRef(null);
+    const chartSizeRef = useRef(null);
     const svgRef = useRef(null);
     const [activeSliceKey, setActiveSliceKey] = useState(null);
     const [activeTooltip, setActiveTooltip] = useState(null);
@@ -39,7 +40,21 @@ const PieChartInner = (_a, ref) => {
     const themeColors = useThemeColors(colors);
     const validData = useMemo(() => data.filter((datum) => Number.isFinite(datum.value) && datum.value > 0), [data]);
     const total = useMemo(() => validData.reduce((sum, datum) => sum + datum.value, 0), [validData]);
-    const radius = outerRadius !== null && outerRadius !== void 0 ? outerRadius : Math.max(size / 2 - 6, 0);
+    const chartSize = useChartResponsiveSize(chartSizeRef, {
+        width: size,
+        responsive,
+        aspectRatio: 1,
+        defaultWidth: 220,
+        defaultHeight: 220,
+        minWidth: Math.max(minSize, 1),
+        minHeight: Math.max(minSize, 1),
+    });
+    const safeSize = Math.min(chartSize.width, chartSize.height);
+    const radius = outerRadius !== null && outerRadius !== void 0 ? outerRadius : Math.max(safeSize / 2 - 6, 0);
+    const shouldScaleDefaultInnerRadius = innerRadius == null && (responsive || typeof size === "string");
+    const defaultInnerRadius = shouldScaleDefaultInnerRadius
+        ? Math.max(radius * (58 / 104), 0)
+        : 58;
     const resolvedSliceOpacity = clamp(sliceOpacity, 0, 1);
     const resolvedSliceBorderWidth = Math.max(sliceBorderWidth, 0);
     const resolvedSliceBorderOpacity = clamp(sliceBorderOpacity, 0, 1);
@@ -69,7 +84,7 @@ const PieChartInner = (_a, ref) => {
             });
         }),
     }), [exportFileName, exportScale, resolvedExportBackgroundColor]);
-    const resolvedInnerRadius = Math.min(innerRadius, radius - 1);
+    const resolvedInnerRadius = Math.max(Math.min(innerRadius !== null && innerRadius !== void 0 ? innerRadius : defaultInnerRadius, radius - 1), 0);
     const centerPanelDiameter = Math.max(resolvedInnerRadius * 1.62, 52);
     const labelRadius = resolvedInnerRadius > 0
         ? resolvedInnerRadius + (radius - resolvedInnerRadius) / 2
@@ -155,35 +170,35 @@ const PieChartInner = (_a, ref) => {
     const activeTooltipSlice = showTooltips && activeTooltip
         ? slices.find((slice, index) => getSliceKey(slice.data, index) === activeTooltip.sliceKey)
         : null;
-    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [slices.length === 0 ? (_jsx(StyledEmptyState, { "$size": size, children: emptyLabel })) : (_jsxs(StyledChartWrap, { 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: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: slices
-                                    .map((slice) => `${slice.data.label}: ${formatDefaultValue(slice.data.value)}`)
-                                    .join(", ") }), _jsx("g", { transform: `translate(${size / 2}, ${size / 2})`, children: slices.map((slice, index) => {
-                                    var _a;
-                                    const sliceKey = getSliceKey(slice.data, index);
-                                    const sliceAnimationProgress = getSliceAnimationProgress(index);
-                                    const animatedSlice = Object.assign(Object.assign({}, slice), { startAngle: animationStartAngle +
-                                            (slice.startAngle - animationStartAngle) *
-                                                sliceAnimationProgress, endAngle: animationStartAngle +
-                                            (slice.endAngle - animationStartAngle) *
-                                                sliceAnimationProgress });
-                                    const path = arcGenerator(animatedSlice);
-                                    const labelPosition = labelArcGenerator.centroid(slice);
-                                    const percent = Math.round(slice.percent * 100);
-                                    return (_jsxs("g", { children: [_jsx(StyledSlice, { "$active": activeSliceKey === sliceKey, d: path !== null && path !== void 0 ? path : undefined, fill: slice.color, fillOpacity: resolvedSliceOpacity, stroke: resolvedSliceBorderColor, strokeWidth: resolvedSliceBorderWidth, strokeOpacity: resolvedSliceBorderOpacity, strokeLinejoin: sliceBorderLineJoin, tabIndex: 0, onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onMouseEnter: (event) => {
-                                                    setActiveSliceKey(sliceKey);
-                                                    updateTooltipPosition(event, sliceKey);
-                                                }, onMouseMove: (event) => updateTooltipPosition(event, sliceKey), onMouseLeave: () => {
-                                                    setActiveSliceKey(null);
-                                                    setActiveTooltip(null);
-                                                }, onClick: (event) => onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data), onKeyDown: (event) => {
-                                                    if (event.key !== "Enter" && event.key !== " ")
-                                                        return;
-                                                    event.preventDefault();
-                                                    onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data);
-                                                }, "aria-label": `${slice.data.label}: ${formatDefaultValue(slice.data.value)}, ${percent}%` }), showLabels &&
-                                                slice.percent >= 0.05 &&
-                                                sliceAnimationProgress >= 0.92 && (_jsx(StyledLabel, { x: labelPosition[0], y: labelPosition[1], textAnchor: "middle", dominantBaseline: "central", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(slice.data, slice.percent)) !== null && _a !== void 0 ? _a : `${percent}%` }))] }, sliceKey));
-                                }) })] }), (centerLabel != null || centerValue != null) && (_jsx(StyledCenter, { children: _jsxs(StyledCenterPanel, { "$diameter": centerPanelDiameter, children: [centerValue != null && (_jsx(StyledCenterValue, { children: centerValue })), centerLabel != null && (_jsx(StyledCenterLabel, { children: centerLabel }))] }) }))] })), shouldShowLegend && (_jsx(StyledLegend, { children: slices.map((slice, index) => {
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartWrap, { ref: chartSizeRef, "$width": chartSize.widthStyle, "$height": chartSize.heightStyle, children: slices.length === 0 ? (_jsx(StyledEmptyState, { "$size": safeSize, children: emptyLabel })) : (_jsxs(_Fragment, { 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: safeSize, height: safeSize, viewBox: `0 0 ${safeSize} ${safeSize}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: slices
+                                        .map((slice) => `${slice.data.label}: ${formatDefaultValue(slice.data.value)}`)
+                                        .join(", ") }), _jsx("g", { transform: `translate(${safeSize / 2}, ${safeSize / 2})`, children: slices.map((slice, index) => {
+                                        var _a;
+                                        const sliceKey = getSliceKey(slice.data, index);
+                                        const sliceAnimationProgress = getSliceAnimationProgress(index);
+                                        const animatedSlice = Object.assign(Object.assign({}, slice), { startAngle: animationStartAngle +
+                                                (slice.startAngle - animationStartAngle) *
+                                                    sliceAnimationProgress, endAngle: animationStartAngle +
+                                                (slice.endAngle - animationStartAngle) *
+                                                    sliceAnimationProgress });
+                                        const path = arcGenerator(animatedSlice);
+                                        const labelPosition = labelArcGenerator.centroid(slice);
+                                        const percent = Math.round(slice.percent * 100);
+                                        return (_jsxs("g", { children: [_jsx(StyledSlice, { "$active": activeSliceKey === sliceKey, d: path !== null && path !== void 0 ? path : undefined, fill: slice.color, fillOpacity: resolvedSliceOpacity, stroke: resolvedSliceBorderColor, strokeWidth: resolvedSliceBorderWidth, strokeOpacity: resolvedSliceBorderOpacity, strokeLinejoin: sliceBorderLineJoin, tabIndex: 0, onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onMouseEnter: (event) => {
+                                                        setActiveSliceKey(sliceKey);
+                                                        updateTooltipPosition(event, sliceKey);
+                                                    }, onMouseMove: (event) => updateTooltipPosition(event, sliceKey), onMouseLeave: () => {
+                                                        setActiveSliceKey(null);
+                                                        setActiveTooltip(null);
+                                                    }, onClick: (event) => onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data), onKeyDown: (event) => {
+                                                        if (event.key !== "Enter" && event.key !== " ")
+                                                            return;
+                                                        event.preventDefault();
+                                                        onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data);
+                                                    }, "aria-label": `${slice.data.label}: ${formatDefaultValue(slice.data.value)}, ${percent}%` }), showLabels &&
+                                                    slice.percent >= 0.05 &&
+                                                    sliceAnimationProgress >= 0.92 && (_jsx(StyledLabel, { x: labelPosition[0], y: labelPosition[1], textAnchor: "middle", dominantBaseline: "central", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(slice.data, slice.percent)) !== null && _a !== void 0 ? _a : `${percent}%` }))] }, sliceKey));
+                                    }) })] }), (centerLabel != null || centerValue != null) && (_jsx(StyledCenter, { children: _jsxs(StyledCenterPanel, { "$diameter": centerPanelDiameter, children: [centerValue != null && (_jsx(StyledCenterValue, { children: centerValue })), centerLabel != null && (_jsx(StyledCenterLabel, { children: centerLabel }))] }) }))] })) }), shouldShowLegend && (_jsx(StyledLegend, { children: slices.map((slice, index) => {
                     const sliceKey = getSliceKey(slice.data, index);
                     return (_jsxs(StyledLegendItem, { "$active": activeSliceKey === sliceKey, "$showSwatch": showLegendSwatches, "$showLabel": showLegendLabels, "$showMeta": showLegendMeta, tabIndex: 0, onMouseEnter: () => setActiveSliceKey(sliceKey), onMouseLeave: () => setActiveSliceKey(null), onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onClick: (event) => onLegendItemClick === null || onLegendItemClick === void 0 ? void 0 : onLegendItemClick(event, slice.data), onKeyDown: (event) => {
                             if (event.key !== "Enter" && event.key !== " ")