@monolith-forensics/monolith-ui 1.9.3-dev.0 → 1.9.3-dev.1

package/dist/Charts/BarChart/BarChart.js

@@ -23,15 +23,16 @@ 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 { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, useChartResponsiveSize, } from "../ChartUtils";
 import { clamp, easeOutCubic, formatDefaultValue, getBandPadding, getBarKey, getCategoryKey, getGradientColor, getGradientColorFromStops, getGradientStops, getRoundedBarPath, getSeriesKey, getSeriesLabelText, getValueDomain, mergeChartMargin, normalizeTickValue, useThemeColors, } from "./BarChart.lib";
 import { StyledAxisLine, StyledAxisText, StyledBar, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledEmptyState, StyledGridLine, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendValue, StyledSvg, StyledSwatch, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipList, StyledTooltipMeta, StyledTooltipRow, StyledTooltipSwatch, StyledTooltipValue, StyledValueLabel, } from "./BarChart.styled";
 const BarChartInner = (_a, ref) => {
     var _b, _c, _d;
-    var { data, series, width = 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"]);
+    var { data, series, width, height, responsive = false, aspectRatio, minWidth = 180, minHeight = 180, orientation = "vertical", seriesLayout = "grouped", margin, barGap = 10, groupBarGap, maxBarThickness, barRadius = 3, colors, colorGradient, barOpacity = 1, barBorderColor, barBorderWidth = 1, barBorderOpacity = 1, minValue, maxValue, valueTickCount = 5, showGridLines = true, showAxisLines = true, showCategoryAxisLabels = true, showValueAxisLabels = true, showLegend = false, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLabels = false, emptyLabel = "No data", ariaLabel = "Bar chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showExportButton = false, exportFileName = "bar-chart", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, valueFormatter, categoryLabelFormatter, tickFormatter, labelFormatter, tooltipFormatter, onBarClick, onLegendItemClick, onSeriesLegendItemClick, className } = _a, props = __rest(_a, ["data", "series", "width", "height", "responsive", "aspectRatio", "minWidth", "minHeight", "orientation", "seriesLayout", "margin", "barGap", "groupBarGap", "maxBarThickness", "barRadius", "colors", "colorGradient", "barOpacity", "barBorderColor", "barBorderWidth", "barBorderOpacity", "minValue", "maxValue", "valueTickCount", "showGridLines", "showAxisLines", "showCategoryAxisLabels", "showValueAxisLabels", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLabels", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "valueFormatter", "categoryLabelFormatter", "tickFormatter", "labelFormatter", "tooltipFormatter", "onBarClick", "onLegendItemClick", "onSeriesLegendItemClick", "className"]);
     const descriptionId = useId();
     const theme = useTheme();
     const containerRef = useRef(null);
+    const chartSizeRef = useRef(null);
     const chartFrameRef = useRef(null);
     const svgRef = useRef(null);
     const tooltipRef = useRef(null);
@@ -69,8 +70,18 @@ const BarChartInner = (_a, ref) => {
             },
         ];
     }, [data, series]);
-    const safeWidth = Math.max(width, 180);
-    const safeHeight = Math.max(height, 180);
+    const chartSize = useChartResponsiveSize(chartSizeRef, {
+        width,
+        height,
+        responsive,
+        aspectRatio,
+        defaultWidth: 640,
+        defaultHeight: 320,
+        minWidth: Math.max(minWidth, 1),
+        minHeight: Math.max(minHeight, 1),
+    });
+    const safeWidth = chartSize.width;
+    const safeHeight = chartSize.height;
     const safeBarRadius = Math.max(barRadius, 0);
     const safeBarGap = Math.max(barGap, 0);
     const safeGroupBarGap = Math.max(groupBarGap !== null && groupBarGap !== void 0 ? groupBarGap : barGap, 0);
@@ -286,8 +297,7 @@ const BarChartInner = (_a, ref) => {
     }, [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;
+    const totalAnimationDuration = safeAnimationDuration + Math.max(bars.length - 1, 0) * safeAnimationStagger;
     useEffect(() => {
         var _a;
         if (!animateOnRender || bars.length === 0) {
@@ -329,7 +339,10 @@ const BarChartInner = (_a, ref) => {
         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 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;
@@ -354,10 +367,10 @@ const BarChartInner = (_a, ref) => {
         });
     };
     const activeTooltipBar = showTooltips && activeTooltip
-        ? (_c = bars.find((bar) => bar.key === activeTooltip.barKey)) !== null && _c !== void 0 ? _c : null
+        ? ((_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
+        ? ((_d = categories.find((category) => category.key === activeTooltipBar.categoryKey)) !== null && _d !== void 0 ? _d : null)
         : null;
     const tooltipStyle = useMemo(() => {
         if (!activeTooltip ||
@@ -410,7 +423,7 @@ const BarChartInner = (_a, ref) => {
             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 &&
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className, "$fillAvailableWidth": chartSize.fillAvailableWidth }, props, { children: [_jsx(StyledChartScroller, { ref: chartSizeRef, "$width": chartSize.widthStyle, "$height": chartSize.heightStyle, children: bars.length === 0 ? (_jsx(StyledEmptyState, { "$width": safeWidth, "$height": safeHeight, children: emptyLabel })) : (_jsxs(StyledChartFrame, { ref: chartFrameRef, children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: safeWidth, height: safeHeight, viewBox: `0 0 ${safeWidth} ${safeHeight}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), showGridLines &&
                                     tickValues.map((tick) => {
                                         const tickPosition = valueScale(tick);
                                         return orientation === "vertical" ? (_jsx(StyledGridLine, { x1: resolvedMargin.left, x2: resolvedMargin.left + plotWidth, y1: resolvedMargin.top + tickPosition, y2: resolvedMargin.top + tickPosition }, `grid-${tick}`)) : (_jsx(StyledGridLine, { x1: resolvedMargin.left + tickPosition, x2: resolvedMargin.left + tickPosition, y1: resolvedMargin.top, y2: resolvedMargin.top + plotHeight }, `grid-${tick}`));
@@ -434,7 +447,8 @@ const BarChartInner = (_a, ref) => {
                                         const endPosition = valueScale(bar.valueEnd);
                                         const animatedStartPosition = zeroPosition +
                                             (startPosition - zeroPosition) * animationProgress;
-                                        const animatedEndPosition = zeroPosition + (endPosition - zeroPosition) * animationProgress;
+                                        const animatedEndPosition = zeroPosition +
+                                            (endPosition - zeroPosition) * animationProgress;
                                         const x = orientation === "vertical"
                                             ? resolvedMargin.left +
                                                 categoryBandStart +
@@ -528,7 +542,7 @@ const BarChartInner = (_a, ref) => {
                                                 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
+                                    })] })] })) }), 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 !== " ")
@@ -537,13 +551,13 @@ const BarChartInner = (_a, ref) => {
                             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}`)))
+                        }, 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))) }))] })));
+                        }, 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.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/BarChart/BarChart.styled.js

@@ -11,7 +11,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;
@@ -19,10 +19,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;
@@ -93,6 +96,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/BarChart/BarChart.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 BarChartDatum<TData = unknown> = {
     /** Stable identifier for the bar. Falls back to label and index when omitted. */
     id?: string | number;
@@ -86,10 +86,18 @@ export type BarChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & Ch
     data?: BarChartDatum<TData>[];
     /** Multi-series bar data. Takes precedence over data when provided. */
     series?: BarChartSeries<TData>[];
-    /** SVG width in pixels. Defaults to 640. */
-    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 640. */
+    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 180. */
+    minWidth?: number;
+    /** Minimum rendered SVG height in pixels. Defaults to 180. */
+    minHeight?: number;
     /** Bar layout direction. Defaults to "vertical". */
     orientation?: BarChartOrientation;
     /** Multi-series layout mode. Defaults to "grouped". */

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

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+export type ChartDimension = number | string;
+export type ChartResponsiveSizeOptions = {
+    width?: ChartDimension;
+    height?: ChartDimension;
+    responsive?: boolean;
+    aspectRatio?: number;
+    defaultWidth: number;
+    defaultHeight: number;
+    minWidth: number;
+    minHeight: number;
+};
+export type ResolvedChartSize = {
+    width: number;
+    height: number;
+    widthStyle?: string;
+    heightStyle?: string;
+    fillAvailableWidth: boolean;
+};
+export declare const useChartResponsiveSize: (ref: RefObject<HTMLElement | null>, { width, height, responsive, aspectRatio, defaultWidth, defaultHeight, minWidth, minHeight, }: ChartResponsiveSizeOptions) => ResolvedChartSize;

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. */