@evergis/react 4.0.101 → 4.0.103

package/dist/index.js

@@ -102,7 +102,30 @@ const ChartWrapperContainer = styled.div.withConfig({ displayName: "ChartWrapper
   position: relative;
   width: 100%;
 `;
-const Tooltip = styled.div.withConfig({ displayName: "Tooltip", componentId: "sc-2prpr" }) `
+/*
+ * fill-режим: обёртка забирает всю доступную ячейку (её высоту задаёт флекс-цепочка, а не контент графика),
+ * на неё вешается ref для ResizeObserver — меряем обе оси без цикла. Плоский div (не Flex uilib), как соседний
+ * ChartWrapperContainer, чтобы ref гарантированно дошёл до DOM-узла. Тело графика центрируется внутри.
+ */
+const ChartFillMeasure = styled.div.withConfig({ displayName: "ChartFillMeasure", componentId: "sc-1r4oerb" }) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+
+  /* SVG по умолчанию inline, поэтому под ним остаётся зазор базовой линии (~4px при line-height
+     18.4px): вне fill его скрывал запас высоты, а тело, точно заполнившее ячейку, из-за него
+     вылезает за нижнюю границу. Блочный SVG зазора не даёт. */
+  svg {
+    display: block;
+  }
+`;
+const Tooltip = styled.div.withConfig({ displayName: "Tooltip", componentId: "sc-1va8cy3" }) `
   position: relative;
   border-radius: 0.25rem;
   background-color: rgba(28, 33, 48);
@@ -195,7 +218,7 @@ const LineChartStyles = styled.createGlobalStyle `
     fill: ${({ theme: { palette } }) => palette.textDisabled};
   }
 `;
-const StyledBarChart = styled(charts.BarChart).withConfig({ displayName: "StyledBarChart", componentId: "sc-1i0hrvl" }) `
+const StyledBarChart = styled(charts.BarChart).withConfig({ displayName: "StyledBarChart", componentId: "sc-1l1kx80" }) `
   .domain {
     display: none;
   }
@@ -3383,6 +3406,8 @@ const ALIGNMENTS = ["left", "center", "right"];
 const ALIGN_ITEMS = ["flex-start", "center", "flex-end", "stretch", "baseline"];
 /** Масштабирование изображения внутри своего бокса (CSS `object-fit`). */
 const OBJECT_FITS = ["cover", "contain", "fill", "none", "scale-down"];
+/** Поведение контента, выходящего за бокс контейнера (CSS `overflow`). */
+const OVERFLOWS = ["visible", "hidden", "scroll", "auto"];
 /** Режим отображения коллекций. */
 const VIEW_MODES = ["grid", "list"];
 exports.ContainerTemplate = void 0;
@@ -3497,6 +3522,13 @@ const BASE_CONTAINER_STYLE = {
 const StackBarContainer = styled(uilibGl.Flex).withConfig({ displayName: "StackBarContainer", componentId: "sc-stc97k" }) `
   flex-wrap: nowrap;
   width: 100%;
+
+  ${({ $fill }) => $fill &&
+    styled.css `
+      /* fill: полоса забирает остаток высоты обёртки (вся ячейка минус шапка с итогом). */
+      flex: 1 1 auto;
+      min-height: 0;
+    `}
 `;
 const StackBarHeader = styled(uilibGl.Flex).withConfig({ displayName: "StackBarHeader", componentId: "sc-8mc354" }) `
   justify-content: space-between;
@@ -3506,7 +3538,8 @@ const StackBarHeader = styled(uilibGl.Flex).withConfig({ displayName: "StackBarH
 const StackBarSection = styled.div.withConfig({ displayName: "StackBarSection", componentId: "sc-i3gdu" }) `
   cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
   width: ${({ $width }) => $width}%;
-  height: ${({ $height }) => ($height ? `${$height}px` : "0.5rem")};
+  /* В fill толщину полосы задаёт растянутый контейнер, а не options.height элемента chart. */
+  height: ${({ $fill, $height }) => ($fill ? "100%" : $height ? `${$height}px` : "0.5rem")};
   margin: 0 0.5px;
   background-color: ${({ $color }) => $color};
   opacity: ${({ hasAnyFilter, isFiltered }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
@@ -7632,30 +7665,33 @@ const useRenderElement = (type = exports.WidgetType.Dashboard, elementConfig) =>
     ]);
 };
 
+/** Пустой бокс на отключённом пути — стабильная ссылка, чтобы не плодить ре-рендеры. */
+const EMPTY_BOX = {};
 /**
- * Измеряет фактическую ширину DOM-элемента и обновляет её на любой ресайз (ResizeObserver).
+ * Измеряет фактические ширину и высоту DOM-элемента и обновляет их на любой ресайз (ResizeObserver).
  *
- * Возвращает `[ref, width]`, где `width` — число пикселей либо `undefined`, пока элемент ещё
- * не измерен. Используется для «резинового» графика: d3-графикам нужна конкретная пиксельная
- * ширина, а не CSS `100%`.
+ * Возвращает `[ref, box]`, где `box` — `{ width, height }` в пикселях (content-box) либо пустой объект,
+ * пока элемент ещё не измерен. Используется для «резинового» графика: d3-графикам нужны конкретные
+ * пиксельные размеры, а не CSS `100%`, а для вписывания (fit) нужны обе оси.
  *
  * `enabled: false` полностью отключает наблюдение — обычные (не fill) графики не измеряются
  * и не вызывают лишних ре-рендеров.
  */
-const useResizeWidth = (enabled) => {
+const useResizeBox = (enabled) => {
     const ref = React.useRef(null);
-    const [width, setWidth] = React.useState();
+    const [box, setBox] = React.useState(EMPTY_BOX);
     React.useEffect(() => {
         const node = ref.current;
         if (!enabled || !node)
             return;
         const observer = new ResizeObserver(([entry]) => {
-            setWidth(entry.contentRect.width);
+            const { width, height } = entry.contentRect;
+            setBox({ width, height });
         });
         observer.observe(node);
         return () => observer.disconnect();
     }, [enabled]);
-    return [ref, enabled ? width : undefined];
+    return [ref, enabled ? box : EMPTY_BOX];
 };
 
 const useShownOtherItems = (options) => {
@@ -7701,13 +7737,13 @@ const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerPar
  */
 const useWrapperSize = ({ elementConfig, defaults }) => {
     const { id, style, templateName, options } = elementConfig || {};
-    const { width, height } = options || {};
+    const { width, height, overflow } = options || {};
     return React.useMemo(() => ({
         id,
         "data-templatename": templateName,
         style,
-        $sizeCss: getWrapperSizeStyle({ style, width, height, defaults, defaultWidth: FILL_SIZE }),
-    }), [id, templateName, style, width, height, defaults]);
+        $sizeCss: getWrapperSizeStyle({ style, width, height, overflow, defaults, defaultWidth: FILL_SIZE }),
+    }), [id, templateName, style, width, height, overflow, defaults]);
 };
 
 const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
@@ -7777,6 +7813,19 @@ const ContainerChart = styled(uilibGl.Flex).withConfig({ displayName: "Container
     justify-content: center;
     width: 100%;
   }
+
+  /* fill: слот забирает остаток высоты ячейки (под слотами title/alias/legend) и центрирует тело графика. */
+  ${({ $fill }) => $fill &&
+    styled.css `
+      flex: 1 1 auto;
+      min-height: 0;
+      align-items: center;
+      justify-content: center;
+
+      > * {
+        height: 100%;
+      }
+    `}
 `;
 const ContainerLegend = styled(uilibGl.Flex).withConfig({ displayName: "ContainerLegend", componentId: "sc-z1n1s8" }) ``;
 const ContainerUnits = styled.div.withConfig({ displayName: "ContainerUnits", componentId: "sc-1vurgy9" }) `
@@ -7792,6 +7841,13 @@ const ContainerValue = styled(uilibGl.Flex).withConfig({ displayName: "Container
   font-size: ${({ big }) => (big ? 1.5 : 1)}rem;
   color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textPrimary};
 
+  /* fill: строка со слотом chart+legend забирает остаток высоты Container'а (гейт — только у Chart-контейнера). */
+  ${({ $fill }) => $fill &&
+    styled.css `
+      flex: 1 1 auto;
+      min-height: 0;
+    `}
+
   > * {
     width: ${({ column }) => (column ? "100%" : "auto")};
   }
@@ -7898,15 +7954,16 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
 };
 
 const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) => {
-    const { width, height } = elementConfig?.options || {};
+    const { width, height, overflow } = elementConfig?.options || {};
     const templateName = elementConfig?.templateName;
     const renderBody = React.useCallback(({ id, value, style, hasUnits, render }) => (jsxRuntime.jsxs(Container, { id: id, isColumn: true, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({
             style,
             width,
             height,
+            overflow,
             defaults: BASE_CONTAINER_STYLE,
             defaultWidth: FILL_SIZE,
-        }), children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, templateName]);
+        }), children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -7917,9 +7974,9 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
 });
 
 const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const { width, height } = elementConfig?.options || {};
+    const { width, height, overflow } = elementConfig?.options || {};
     const templateName = elementConfig?.templateName;
-    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({ style, width, height, defaultWidth: FILL_SIZE }), children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, templateName]);
+    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({ style, width, height, overflow, defaultWidth: FILL_SIZE }), children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -8301,6 +8358,15 @@ const BarChartContainer = styled.div.withConfig({ displayName: "BarChartContaine
 const AnyChartWrapper = styled.div.withConfig({ displayName: "AnyChartWrapper", componentId: "sc-1txgly0" }) `
   width: 100%;
   height: ${({ height }) => height}px;
+
+  ${({ $fill }) => $fill &&
+    styled.css `
+      /* fill: обёртке задана ВСЯ доступная высота ячейки, поэтому тело внутри забирает её остаток
+         флексом (полоса stack тянется под строкой итога), а не вычисляется арифметикой. */
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    `}
 `;
 const BarChartWrapper = styled(AnyChartWrapper).withConfig({ displayName: "BarChartWrapper", componentId: "sc-98mm1q" }) `
   width: 100%;
@@ -8423,6 +8489,10 @@ const ChartContainerWrapper = styled(uilibGl.FlexSpan).withConfig({ displayName:
   /* Заданная высота контейнера достаётся телу графика — за вычетом заголовка. */
   ${({ $sizeCss }) => !!$sizeCss?.height &&
     styled.css `
+      /* Раздача высоты требует, чтобы обёртка была flex-колонкой (FlexSpan сам по себе не flex),
+         иначе Container с flex:1 1 auto не растянется на заданную высоту, а fill-график не впишется по высоте. */
+      display: flex;
+
       > ${Container} {
         flex: 1 1 auto;
         min-height: 0;
@@ -8433,17 +8503,19 @@ const ChartContainerWrapper = styled(uilibGl.FlexSpan).withConfig({ displayName:
 `;
 
 /**
- * Флаг «растянуть график на всю ширину контейнера» (`options.chartFill` контейнера Chart).
+ * Контекст вписывания графика (`options.fill` контейнера Chart).
  *
  * Компонент `Chart` рендерится через `renderElement({ id: "chart" })` и получает только дочерний
  * узел `{ id: "chart" }` — опции контейнера до него не доходят. `ChartContainer` оборачивает
- * график в провайдер этого контекста, а `Chart` читает флаг через `useContext`.
+ * график в провайдер этого контекста, а `Chart` читает значение через `useContext`.
  */
-const ChartFillContext = React.createContext(false);
+const FillContext = React.createContext({ fill: false, fitHeight: false });
 
 const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderElement }) => {
     const { options, children } = elementConfig || {};
-    const { twoColumns, hideEmpty, chartFill } = options || {};
+    const { twoColumns, hideEmpty, height } = options || {};
+    const fill = options?.fill;
+    const fillContextValue = React.useMemo(() => ({ fill: !!fill, fitHeight: !!fill && height != null }), [fill, height]);
     const aliasElement = children.find(child => child.id === "alias");
     const chartElement = children.find(child => child.id === "chart");
     const legendElement = children.find(child => child.id === "legend");
@@ -8458,7 +8530,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(ChartContainerWrapper, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { children: jsxRuntime.jsx(ChartFillContext.Provider, { value: !!chartFill, children: renderElement({ id: "chart" }) }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
+    return (jsxRuntime.jsxs(ChartContainerWrapper, { ...root, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: renderElement({ id: "chart" }) }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
@@ -11465,6 +11537,8 @@ const tagTypography = (tag) => ({ $typography }) => {
     ${style.fontSize && `font-size: ${style.fontSize};`}
     ${style.lineHeight && `line-height: ${style.lineHeight};`}
     ${style.fontWeight != null && `font-weight: ${style.fontWeight};`}
+    ${style.marginTop && `margin-top: ${style.marginTop};`}
+    ${style.marginBottom && `margin-bottom: ${style.marginBottom};`}
   `;
 };
 const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper", componentId: "sc-1iv8z8a" }) `
@@ -12697,7 +12771,8 @@ const ChartLoading = ({ column }) => (jsxRuntime.jsx(uilibGl.Flex, { position: "
 
 const ContainerLoading = () => (jsxRuntime.jsx(uilibGl.Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1.5, mono: true }) }));
 
-// forwardRef — чтобы Chart мог измерить фактическую ширину обёртки (fill-режим, useResizeWidth).
+// forwardRef сохранён для совместимости; в fill-режиме ResizeObserver меряет внешнюю обёртку
+// ChartFillMeasure (см. Chart/index.tsx), а не сам ChartWrapper.
 const ChartWrapper = React.memo(React.forwardRef(({ width, height, column, loading, children }, ref) => {
     return (jsxRuntime.jsxs(ChartWrapperContainer, { ref: ref, column: column, style: { width, height }, children: [loading && jsxRuntime.jsx(ChartLoading, { column: column }), jsxRuntime.jsx(uilibGl.Flex, { opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: children })] }));
 }));
@@ -13853,13 +13928,17 @@ const omitKeys = (source, keys = []) => {
  * конфликтующие внутренние дефолты обёртки, а контент лишается возможности её распирать
  * (`min-width`/`min-height: 0`). Для fill-высоты добавляется `flex: 1 1 auto` — в колонке
  * контейнер забирает остаток ячейки под заголовком, а не переполняет её на его высоту.
+ *
+ * `overflow` уходит в CSS как есть и ничем не подменяется: не задан — работает браузерный
+ * `visible`, то есть контент крупнее бокса вытекает на соседние слоты.
  */
-const getWrapperSizeStyle = ({ style, width: widthOption, height, defaults, defaultWidth, }) => {
+const getWrapperSizeStyle = ({ style, width: widthOption, height, overflow, defaults, defaultWidth, }) => {
     // Ширина по умолчанию (контейнеры передают FILL_SIZE): явный `options.width` её перекрывает.
     const width = widthOption ?? defaultWidth;
     const hasWidth = width != null;
     const hasHeight = height != null;
-    if (!hasWidth && !hasHeight) {
+    const hasOverflow = overflow != null;
+    if (!hasWidth && !hasHeight && !hasOverflow) {
         return defaults;
     }
     const fillWidth = isFillSize(width);
@@ -13868,13 +13947,18 @@ const getWrapperSizeStyle = ({ style, width: widthOption, height, defaults, defa
         ...(fillWidth ? FILL_WIDTH_CONFLICTS : []),
         ...(fillHeight ? FILL_HEIGHT_CONFLICTS : []),
     ];
-    const sizeKeys = [...(hasWidth ? ["width"] : []), ...(hasHeight ? ["height"] : [])];
+    const sizeKeys = [
+        ...(hasWidth ? ["width"] : []),
+        ...(hasHeight ? ["height"] : []),
+        ...(hasOverflow ? ["overflow"] : []),
+    ];
     return {
         ...omitKeys(defaults, conflicts),
         // `options` перекрывают одноимённые поля `style` — приоритет тот же, что был у inline-варианта.
         ...omitKeys(style, sizeKeys),
         ...(hasWidth && { width, ...(fillWidth && { minWidth: 0 }) }),
         ...(hasHeight && { height, ...(fillHeight && { minHeight: 0, flex: "1 1 auto" }) }),
+        ...(hasOverflow && { overflow }),
     };
 };
 
@@ -14007,7 +14091,7 @@ const tooltipValueFromRelatedFeatures = (t, value, relatedAttributes, layerInfo)
     return formatChartRelatedValue(t, value, layerInfo, relatedAttributes);
 };
 
-const StackBar = ({ data, filterName, type, alias, options, renderElement, renderTooltip }) => {
+const StackBar = ({ data, filterName, type, alias, options, fill, renderElement, renderTooltip }) => {
     const { height, showTotal, cornerRadius, groupTooltip } = options || {};
     const { t } = useGlobalContext();
     const { hasAnyFilter, isFiltered, onFilter } = useWidgetFilters(type, filterName, data?.[0]?.items);
@@ -14021,11 +14105,11 @@ const StackBar = ({ data, filterName, type, alias, options, renderElement, rende
     const visibleItems = React.useMemo(() => items?.filter(({ value }) => Number(value) > 0), [items]);
     const getWidth = React.useCallback(value => ((Number(value) / total) * 100).toFixed(2), [total]);
     const renderGroupTooltip = React.useMemo(() => (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(ChartTooltipTable, { cellPadding: 0, cellSpacing: 0, children: visibleItems?.map(({ name, value, color }, index) => (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { children: jsxRuntime.jsxs(ChartTooltip, { alignItems: "center", children: [jsxRuntime.jsx(ChartTooltipColor, { "$color": color }), jsxRuntime.jsx(ChartTooltipName, { children: name })] }) }), jsxRuntime.jsx("td", { children: formatValue(value) })] }, index))) }) })), [visibleItems, formatValue]);
-    const renderItem = React.useCallback(({ name, value, color }, ref) => (jsxRuntime.jsx(StackBarSection, { ref: ref, "$width": getWidth(value), "$height": height, "$color": color, cornerRadius: cornerRadius, hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: filterName ? () => onFilter(name) : undefined })), [cornerRadius, filterName, getWidth, hasAnyFilter, height, isFiltered, onFilter]);
+    const renderItem = React.useCallback(({ name, value, color }, ref) => (jsxRuntime.jsx(StackBarSection, { ref: ref, "$width": getWidth(value), "$height": height, "$fill": fill, "$color": color, cornerRadius: cornerRadius, hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: filterName ? () => onFilter(name) : undefined })), [cornerRadius, fill, filterName, getWidth, hasAnyFilter, height, isFiltered, onFilter]);
     const renderItems = React.useMemo(() => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: visibleItems?.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: groupTooltip ? (renderItem(item)) : (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderTooltip([item]), children: ref => renderItem(item, ref) }) })) }, index))) })), [groupTooltip, visibleItems, renderItem, renderTooltip]);
     if (!total)
         return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alias || showTotal) && (jsxRuntime.jsxs(StackBarHeader, { children: [jsxRuntime.jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxRuntime.jsxs(StackBarTotal, { children: [jsxRuntime.jsx(StackBarValue, { children: formatValue(total) }), !!units && jsxRuntime.jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => jsxRuntime.jsx(StackBarContainer, { ref: ref, children: renderItems }) })) : (jsxRuntime.jsx(StackBarContainer, { children: renderItems }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alias || showTotal) && (jsxRuntime.jsxs(StackBarHeader, { children: [jsxRuntime.jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxRuntime.jsxs(StackBarTotal, { children: [jsxRuntime.jsx(StackBarValue, { children: formatValue(total) }), !!units && jsxRuntime.jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => (jsxRuntime.jsx(StackBarContainer, { ref: ref, "$fill": fill, children: renderItems })) })) : (jsxRuntime.jsx(StackBarContainer, { "$fill": fill, children: renderItems }))] }));
 };
 
 const Chart = React.memo(({ config, element, elementConfig, type, renderElement }) => {
@@ -14034,10 +14118,10 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     const primaryColor = palette.primary;
     const { t } = useGlobalContext();
     const { expandedContainers, attributes, dataSources } = useWidgetContext(type);
-    // chartFill контейнера: график тянется на всю ширину. Ширину измеряем реально (ResizeObserver),
-    // т.к. d3-графики (и useChartChange для line) требуют пиксельное число, а не CSS "100%".
-    const fill = React.useContext(ChartFillContext);
-    const [chartRef, measuredWidth] = useResizeWidth(fill);
+    // fill контейнера: вписываем тело графика в контейнер. Размеры ячейки измеряем реально (ResizeObserver),
+    // т.к. d3-графики (и useChartChange для line) требуют пиксельные числа, а не CSS "100%".
+    const { fill, fitHeight } = React.useContext(FillContext);
+    const [chartRef, { width: measuredWidth, height: measuredHeight }] = useResizeBox(fill);
     const { id, options, children } = element || {};
     const { column, markers: configMarkers, showLabels, showMarkers, showTotal, totalWord: configTotalWord, totalAttribute, expandable, expanded, chartType, relatedDataSources, defaultColor, dotSnapping, } = options || {};
     const isLineChart = chartType === "line";
@@ -14073,11 +14157,19 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     const chartWidth = fill
         ? measuredWidth ?? DEFAULT_CHART_WIDTH
         : toPxNumber(width) ?? DEFAULT_CHART_WIDTH;
+    // Фит по высоте включается только при заданной высоте контейнера (fitHeight) и уже измеренной
+    // ячейке; иначе — прежняя фикс. высота options.height. Флаг важен и ниже: он различает два
+    // смысла chartHeight — «высота тела» (вне fill) и «вся доступная высота» (в fill).
+    const fitsHeight = React.useMemo(() => !!(fill && fitHeight && measuredHeight), [fill, fitHeight, measuredHeight]);
+    // fill по высоте: тянем тело графика на измеренную доступную высоту ячейки (content-box минус слоты).
+    const chartHeight = React.useMemo(() => (fitsHeight && measuredHeight ? measuredHeight : height), [fitsHeight, measuredHeight, height]);
+    // Круглый график вписываем по короткой стороне (object-fit: contain), центрируя в ячейке.
+    const pieSide = React.useMemo(() => (fitsHeight && measuredHeight ? Math.min(chartWidth, measuredHeight) : chartWidth), [fitsHeight, measuredHeight, chartWidth]);
     const [customize] = useChartChange({
         dataSources: config.dataSources,
         chartId: elementConfig?.id,
         width: chartWidth,
-        height,
+        height: chartHeight,
         fontColor,
         relatedAttributes,
         defaultColor: primaryColor,
@@ -14177,26 +14269,37 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
                 .flat()
                 .map(({ values }) => values)
                 .flat();
-            return (jsxRuntime.jsxs(AnyChartWrapper, { height: height, children: [jsxRuntime.jsx(LineChartStyles, {}), jsxRuntime.jsx(charts.LineChart, { data: lineChartData, labels: labels, markers: markers, width: chartWidth, height: height, xAxisPadding: 15, yAxisPadding: 0, min: Math.min(...chartValues), customYAxisSelection: yAxis => {
+            return (jsxRuntime.jsxs(AnyChartWrapper, { height: chartHeight, children: [jsxRuntime.jsx(LineChartStyles, {}), jsxRuntime.jsx(charts.LineChart, { data: lineChartData, labels: labels, markers: markers, width: chartWidth, height: chartHeight, xAxisPadding: 15, yAxisPadding: 0, min: Math.min(...chartValues), customYAxisSelection: yAxis => {
                             if (isHidedY) {
                                 yAxis.remove();
                             }
                         }, customYAxis: yAxis => yAxis.ticks(4), renderTooltip: renderLineChartTooltip, customize: customize, dotSnapping: dotSnapping, dynamicTooltipEnable: true, stackedTooltip: true, tooltipClassName: "dashboardLineChartTooltip", drawGridX: !isHidedY, margin: margin })] }));
         }
         if (isStackBar) {
-            const stackBarHeight = showTotal ? height + STACK_BAR_TOTAL_HEIGHT : height;
-            return (jsxRuntime.jsx(AnyChartWrapper, { height: stackBarHeight, children: jsxRuntime.jsx(StackBar, { data: data, filterName: filterName, type: type, alias: elementConfig?.children?.find(child => child.id === "alias"), options: options, renderTooltip: renderPieChartTooltip, renderElement: renderElement }) }));
+            // Вне fill chartHeight — высота самой полосы, и обёртка честно становится выше на строку
+            // итога. В fill chartHeight — уже ВСЯ доступная высота ячейки: обёртка занимает её целиком,
+            // а полоса забирает остаток под шапкой флексом ($fill), поэтому прибавлять/вычитать
+            // STACK_BAR_TOTAL_HEIGHT не нужно — иначе тело вылезло бы за нижнюю границу.
+            const stackBarHeight = showTotal && !fitsHeight ? chartHeight + STACK_BAR_TOTAL_HEIGHT : chartHeight;
+            return (jsxRuntime.jsx(AnyChartWrapper, { height: stackBarHeight, "$fill": fitsHeight, children: jsxRuntime.jsx(StackBar, { data: data, filterName: filterName, type: type, alias: elementConfig?.children?.find(child => child.id === "alias"), options: options, fill: fitsHeight, renderTooltip: renderPieChartTooltip, renderElement: renderElement }) }));
         }
         if (isPieChart) {
-            return (jsxRuntime.jsx(AnyChartWrapper, { height: height, children: jsxRuntime.jsx(charts.PieChart, { data: (data[0]?.items
+            return (jsxRuntime.jsx(AnyChartWrapper, { height: fill ? pieSide : height, children: jsxRuntime.jsx(charts.PieChart, { data: (data[0]?.items
                         ?.filter(({ value }) => !isEmptyValue(value))
                         ?.map(item => ({
                         ...item,
                         color: formatFilterColor(item.name, item.color, defaultColor),
-                    })) || []), width: chartWidth, height: chartWidth, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && (jsxRuntime.jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) })) }) }));
+                    })) || []), width: pieSide, height: pieSide, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && (jsxRuntime.jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) })) }) }));
         }
         const barChartData = getDataFromFilterItems(data[0]?.items);
-        return (jsxRuntime.jsx(BarChartWrapper, { height: height + margin.bottom, children: jsxRuntime.jsx(BarChartContainer, { children: jsxRuntime.jsx(StyledBarChart, { data: barChartData, colors: getColorsFromFilterItems(data[0]?.items, defaultColor, formatFilterColor), minValue: getMinValueFromFilterItems(data[0]?.items), markers: markers, width: chartWidth, height: height, barWidth: barWidth, barPadding: padding, customYAxisLeft: customYAxisLeft, customXAxisBottom: xAxisBottom => customXAxisBottom(xAxisBottom, barChartData), customYAxis: axis => !showLabels && axis.remove(), customBars: ({ bars }) => {
+        // Тот же случай, что у stack: обёртка выше тела на подписи оси X (margin.bottom). В fill
+        // chartHeight — вся доступная высота, поэтому подписи вычитаем из неё, а не прибавляем.
+        // BAR_CHART_FOOTER_MARGIN — это внешний margin-bottom самой BarChartWrapper: в её height он
+        // не входит, но место в ячейке занимает, поэтому его тоже вычитаем.
+        const barBodyHeight = fitsHeight
+            ? chartHeight - margin.bottom - BAR_CHART_FOOTER_MARGIN
+            : chartHeight;
+        return (jsxRuntime.jsx(BarChartWrapper, { height: barBodyHeight + margin.bottom, children: jsxRuntime.jsx(BarChartContainer, { children: jsxRuntime.jsx(StyledBarChart, { data: barChartData, colors: getColorsFromFilterItems(data[0]?.items, defaultColor, formatFilterColor), minValue: getMinValueFromFilterItems(data[0]?.items), markers: markers, width: chartWidth, height: barBodyHeight, barWidth: barWidth, barPadding: padding, customYAxisLeft: customYAxisLeft, customXAxisBottom: xAxisBottom => customXAxisBottom(xAxisBottom, barChartData), customYAxis: axis => !showLabels && axis.remove(), customBars: ({ bars }) => {
                         bars.attr("rx", radius);
                         bars.attr("ry", radius);
                     }, margin: margin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined }) }) }));
@@ -14214,6 +14317,10 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         defaultColor,
         formatFilterColor,
         chartWidth,
+        chartHeight,
+        fitsHeight,
+        pieSide,
+        fill,
         barWidth,
         showLabels,
         padding,
@@ -14241,7 +14348,11 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     ]);
     if (!isVisibleContainer(id, expandable, expanded, expandedContainers))
         return null;
-    return (jsxRuntime.jsx(ChartWrapper, { ref: chartRef, width: width, height: isStackBar ? "auto" : isPieChart ? (fill ? chartWidth : width) : height, column: column, loading: loading, children: renderChart }));
+    const chartBody = (jsxRuntime.jsx(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : chartHeight, column: column, loading: loading, children: renderChart }));
+    if (!fill)
+        return chartBody;
+    // fill: тело центрируется в измеряемой обёртке, ref которой питает ResizeObserver обеими осями.
+    return jsxRuntime.jsx(ChartFillMeasure, { ref: chartRef, children: chartBody });
 });
 
 const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }) => {
@@ -15097,6 +15208,7 @@ exports.NO_CONTENT_VALUE = NO_CONTENT_VALUE;
 exports.NUMERIC_ATTRIBUTE_TYPES = NUMERIC_ATTRIBUTE_TYPES;
 exports.NoLiveSnapshotContainer = NoLiveSnapshotContainer;
 exports.OBJECT_FITS = OBJECT_FITS;
+exports.OVERFLOWS = OVERFLOWS;
 exports.OneColumnContainer = OneColumnContainer;
 exports.POLL_SUBTASK_INTERVAL_MS = POLL_SUBTASK_INTERVAL_MS;
 exports.POLL_SUBTASK_TIMEOUT_MS = POLL_SUBTASK_TIMEOUT_MS;
@@ -15298,7 +15410,7 @@ exports.useRedrawLayer = useRedrawLayer;
 exports.useRelatedDataSourceAttributes = useRelatedDataSourceAttributes;
 exports.useRemoteTask = useRemoteTask;
 exports.useRenderElement = useRenderElement;
-exports.useResizeWidth = useResizeWidth;
+exports.useResizeBox = useResizeBox;
 exports.useSavePrototypeBuilder = useSavePrototypeBuilder;
 exports.useServerNotificationsContext = useServerNotificationsContext;
 exports.useShownOtherItems = useShownOtherItems;