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

package/dist/Calendar/CalendarStyles.js

@@ -1,145 +1,70 @@
 import styled from "styled-components";
 export const MainContainer = styled.div `
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
 `;
 export const CalendarContainer = styled.div `
-  width: 268px;
+  font-size: 5px;
+  width: 250px;
   border-radius: 4px;
   overflow: hidden;
-  box-sizing: border-box;
 `;
 export const CalendarHeader = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 4px;
-  padding: 0 2px 6px;
-`;
-export const CalendarHeaderControls = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  flex: 1;
-  min-width: 0;
-`;
-export const CalendarNavButton = styled.button `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: ${(props) => props.theme.palette.text.secondary};
-  cursor: pointer;
-  transition: background 0.2s ease-out;
-
-  &:hover {
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.palette.primary.main};
-    outline-offset: 2px;
-  }
 `;
 export const CalendarGrid = styled.div `
   display: grid;
-  grid-template: repeat(7, auto) / repeat(7, 32px);
-  gap: 3px;
-  justify-content: center;
-  justify-items: center;
+  grid-template: repeat(7, auto) / repeat(7, auto);
 `;
 export const CalendarMonth = styled.div `
   font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 8px 4px;
+  padding: 0.5em 0.25em;
   word-spacing: 5px;
   user-select: none;
-  flex: 1;
-`;
-export const CalendarHeaderSelect = styled.div `
-  .mfui-DropDownMenu {
-    min-width: 0;
-  }
 `;
 export const CalendarCell = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
   text-align: center;
   align-self: center;
   letter-spacing: 0.1rem;
-  min-width: 32px;
-  width: 32px;
-  min-height: 32px;
-  height: 32px;
-  padding: 6px 4px;
+  padding: 7px;
   user-select: none;
   border-radius: 5px;
   border: 1px solid transparent;
-  box-sizing: border-box;
   grid-column: ${({ index = 0 }) => (index % 7) + 1} / span 1;
 `;
 export const CalendarDay = styled(CalendarCell) `
   font-weight: bold;
-  font-size: 11px;
+  font-size: 10px;
   border-radius: 0px;
   color: ${(props) => props.theme.palette.text.secondary};
-  min-height: 24px;
 `;
 export const CalendarDate = styled(CalendarCell) `
   font-weight: ${(props) => (props.inMonth ? 500 : 300)};
-  font-size: 11px;
-  line-height: 1.1;
+  font-size: 10px;
   cursor: pointer;
 
   color: ${({ inMonth, theme }) => inMonth ? theme.palette.text.primary : theme.palette.text.secondary};
-  background: transparent;
-  opacity: ${({ inMonth }) => (inMonth ? 1 : 0.65)};
   grid-row: ${({ index }) => Math.floor((index || 0) / 7) + 2} / span 1;
   transition: all 0.2s ease-out;
   border-radius: 5px;
   &:hover {
     background: ${({ theme }) => theme.palette.action.hover};
-    opacity: 1;
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.palette.primary.main};
-    outline-offset: 1px;
   }
 
   &[data-disabled="true"] {
-    cursor: not-allowed;
-    color: ${({ theme }) => theme.palette.text.secondary};
-
-    opacity: 0.62;
-    font-weight: 500;
-    text-decoration: line-through;
-    text-decoration-thickness: 1px;
-
-    &:hover {
-      background: transparent;
-      opacity: 0.62;
-    }
+    pointer-events: none;
+    color: ${({ theme }) => theme.palette.text.disabled};
   }
 `;
 export const HighlightedCalendarDate = styled(CalendarDate) `
   color: white !important;
   background: ${(props) => props.theme.palette.primary.main} !important;
   border: 1px solid ${(props) => props.theme.palette.primary.main} !important;
-  font-weight: 700;
-  opacity: 1;
   position: relative;
-  box-shadow:
-    inset 0 0 0 1px ${(props) => props.theme.palette.primary.main},
-    0 4px 10px ${(props) => `${props.theme.palette.primary.main}33`};
   ::before {
     content: "";
     position: absolute;
@@ -151,112 +76,72 @@ export const HighlightedCalendarDate = styled(CalendarDate) `
 `;
 export const TodayCalendarDate = styled(HighlightedCalendarDate) `
   color: ${(props) => props.theme.palette.text.primary} !important;
-  background: ${(props) => `${props.theme.palette.primary.main}14`} !important;
-  border: 1px dashed ${(props) => props.theme.palette.primary.main} !important;
-  box-shadow: none;
-  font-weight: 600;
+  background: transparent !important;
   ::after {
     content: "";
     position: absolute;
-    left: 50%;
-    bottom: 3px;
-    width: 4px;
-    height: 4px;
-    border-radius: 999px;
-    background: ${(props) => props.theme.palette.primary.main};
-    transform: translateX(-50%);
+    right: 0;
+    bottom: 0;
+    border-bottom: 0.75em solid #06c;
+    border-left: 0.75em solid transparent;
+    border-top: 0.75em solid transparent;
   }
   :hover {
     color: ${(props) => props.theme.palette.text.primary} !important;
-    background: ${(props) => `${props.theme.palette.primary.main}20`} !important;
+    background: ${(props) => props.theme.palette.action.hover} !important;
   }
 `;
 export const TimeContainer = styled.div `
-  position: relative;
-  flex: 0 0 132px;
   font-size: 12px;
-  width: 132px;
-  height: auto;
-  box-sizing: border-box;
+  width: 150px;
+  height: 100%;
   border: 1px solid ${(props) => props.theme.palette.divider};
+  border-left: none;
   border-radius: 4px;
-  background: ${(props) => props.theme.palette.input.background};
   overflow: hidden;
 `;
 export const TimePickerContainer = styled.div `
   display: flex;
-  height: 238px;
+  height: 100%;
 `;
 export const TimeHeader = styled.div `
-  box-sizing: border-box;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
   text-align: center;
-  padding: 6px 5px;
-  line-height: 1.25;
+  padding: 5px;
+  line-height: 2.3;
   height: 40px;
   user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-`;
-export const TimeHeaderValue = styled.span `
-  color: ${(props) => props.theme.palette.text.primary};
 `;
-export const TimeZoneBadge = styled.span `
-  padding: 2px 5px;
-  border-radius: 4px;
-  background: ${(props) => props.theme.palette.action.hover};
-  color: ${(props) => props.theme.palette.text.secondary};
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1;
-  text-transform: uppercase;
+export const TimeHourSelect = styled.div `
+  border-right: 1px solid ${(props) => props.theme.palette.divider};
+  width: 50%;
+  height: 250px;
+  overflow-y: auto;
 `;
-export const TimeSelectList = styled.div `
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
+export const TimeMinuteSelect = styled.div `
+  width: 50%;
+  height: 250px;
   overflow-y: auto;
 `;
 export const TimeItem = styled.div `
   font-weight: 500;
-  font-size: 11px;
+  font-size: 10px;
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
-  padding: 6px 5px;
+  padding: 5px;
   user-select: none;
   cursor: pointer;
   transition: all 0.2s ease-out;
-  border-radius: 4px;
-  margin: 1px 4px;
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
-
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.palette.primary.main};
-    outline-offset: -2px;
-  }
-
-  &[data-disabled="true"] {
-    cursor: not-allowed;
-    color: ${({ theme }) => theme.palette.text.secondary};
-    opacity: 0.62;
-    text-decoration: line-through;
-
-    &:hover {
-      background: transparent;
-    }
-  }
 `;
 export const TimeItemActive = styled(TimeItem) `
   background: ${(props) => props.theme.palette.primary.main};
   color: white;
-  font-weight: 700;
   &:hover {
     background: ${(props) => props.theme.palette.primary.main};
   }
@@ -276,9 +161,4 @@ export const NoValueButton = styled.button `
   :hover {
     background: ${(props) => props.theme.palette.action.hover};
   }
-
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.palette.primary.main};
-    outline-offset: 2px;
-  }
 `;

package/dist/Calendar/calendarHelpers.d.ts

@@ -8,10 +8,7 @@ export declare const HOURS12: {
     value: number;
     label: string;
 }[];
-export declare const MINUTES: {
-    value: number;
-    label: string;
-}[];
+export declare const MINUTES: (string | number)[];
 export declare const WEEK_DAYS: {
     Sunday: string;
     Monday: string;
@@ -38,8 +35,7 @@ export declare const CALENDAR_MONTHS: {
 };
 export declare const CALENDAR_WEEKS = 6;
 export declare const zeroPad: (value: number, length: number) => string;
-export declare const createLocalDate: (year: number, month: number, day: number) => Date;
-export declare const getMonthDays: (month?: number, year?: number) => 28 | 30 | 29 | 31;
+export declare const getMonthDays: (month?: number, year?: number) => 28 | 29 | 30 | 31;
 export declare const getMonthFirstDay: (month?: number, year?: number) => number;
 export declare const isDate: (date: Date) => boolean;
 export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;

package/dist/Calendar/calendarHelpers.js

@@ -12,25 +12,20 @@ export const HOURS24 = [...new Array(24)].map((n, index) => {
 });
 export const HOURS12 = [
     ...[...new Array(12)].map((n, index) => {
-        const displayHour = index === 0 ? 12 : index;
         return {
             value: index,
-            label: displayHour < 10 ? `0${displayHour} AM` : `${displayHour} AM`,
+            label: index < 10 ? `0${index} AM` : `${index} AM`,
         };
     }),
     ...[...new Array(12)].map((n, index) => {
-        const displayHour = index === 0 ? 12 : index;
         return {
             value: index + 12,
-            label: displayHour < 10 ? `0${displayHour} PM` : `${displayHour} PM`,
+            label: index < 10 ? `0${index} PM` : `${index} PM`,
         };
     }),
 ];
 export const MINUTES = new Array(60).fill(0).map((n, index) => {
-    return {
-        value: index,
-        label: index < 10 ? `0${index}` : `${index}`,
-    };
+    return index < 10 ? `0${index}` : index;
 });
 export const WEEK_DAYS = {
     Sunday: "Su",
@@ -63,13 +58,10 @@ export const CALENDAR_WEEKS = 6;
 export const zeroPad = (value, length) => {
     return `${value}`.padStart(length, "0");
 };
-export const createLocalDate = (year, month, day) => {
-    return new Date(year, month - 1, day);
-};
 // (int) Number days in a month for a given year from 28 - 31
 export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
     const months30 = [4, 6, 9, 11];
-    const leapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+    const leapYear = year % 4 === 0;
     return month === 2
         ? leapYear
             ? 29
@@ -81,7 +73,7 @@ export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
 // (int) First day of the month for a given year from 1 - 7
 // 1 => Sunday, 7 => Saturday
 export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
-    return createLocalDate(year, month, 1).getDay() + 1;
+    return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
 };
 // (bool) Checks if a value is a date - this is just a simple check
 export const isDate = (date) => {

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;