@evergis/react 4.0.101 → 4.0.102

package/dist/components/Dashboard/componentTypes.d.ts

@@ -154,7 +154,7 @@ export interface CameraContainerConfig extends Omit<ConfigContainerChild, "optio
 export interface CameraContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: CameraContainerConfig;
 }
-export type ChartContainerOptions = Pick<ConfigOptions, "twoColumns" | "hideEmpty" | "width" | "height" | "chartFill">;
+export type ChartContainerOptions = Pick<ConfigOptions, "twoColumns" | "hideEmpty" | "width" | "height" | "fill">;
 export interface ChartAliasChild extends Omit<ConfigContainerChild, "id"> {
     id: "alias";
 }

package/dist/components/Dashboard/components/Chart/FillContext.d.ts

@@ -0,0 +1,15 @@
+/** Значение контекста вписывания тела графика в контейнер (`options.fill` контейнера Chart). */
+export interface FillContextValue {
+    /** Вписать тело графика в контейнер: по ширине всегда, по высоте — при заданной высоте (object-fit: contain). */
+    fill: boolean;
+    /** У контейнера ограниченная высота ⇒ можно фитить по высоте (иначе только по ширине). */
+    fitHeight: boolean;
+}
+/**
+ * Контекст вписывания графика (`options.fill` контейнера Chart).
+ *
+ * Компонент `Chart` рендерится через `renderElement({ id: "chart" })` и получает только дочерний
+ * узел `{ id: "chart" }` — опции контейнера до него не доходят. `ChartContainer` оборачивает
+ * график в провайдер этого контекста, а `Chart` читает значение через `useContext`.
+ */
+export declare const FillContext: import('react').Context<FillContextValue>;

package/dist/components/Dashboard/components/Chart/styled.d.ts

@@ -15,6 +15,7 @@ export declare const PieChartCenter: import('styled-components').StyledComponent
 export declare const ChartWrapperContainer: import('styled-components').StyledComponent<"div", any, {
     column: boolean;
 }, never>;
+export declare const ChartFillMeasure: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Tooltip: import('styled-components').StyledComponent<"div", any, {
     transform?: CSSProperties["transform"];
 }, never>;

package/dist/components/Dashboard/containers/EditContainer/styled.d.ts

@@ -2,9 +2,11 @@ export declare const CheckboxWrapper: import('styled-components').StyledComponen
     fontColor?: string;
     big?: boolean;
     column?: boolean;
+    $fill?: boolean;
 }, never>;
 export declare const ChipsWrapper: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
     fontColor?: string;
     big?: boolean;
     column?: boolean;
+    $fill?: boolean;
 }, never>;

package/dist/components/Dashboard/containers/styled.d.ts

@@ -2,13 +2,16 @@ export declare const ContainerAlias: import('styled-components').StyledComponent
     hasBottomMargin?: boolean;
 }, never>;
 export declare const ContainerAliasIcon: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const ContainerChart: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
+export declare const ContainerChart: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    $fill?: boolean;
+}, never>;
 export declare const ContainerLegend: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const ContainerUnits: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ContainerValue: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
     fontColor?: string;
     big?: boolean;
     column?: boolean;
+    $fill?: boolean;
 }, never>;
 export declare const ContainerIcon: import('styled-components').StyledComponent<"span", any, import('@evergis/uilib-gl').IIconProps & {
     $fontColor?: string;

package/dist/components/Dashboard/hooks/index.d.ts

@@ -25,7 +25,7 @@ export * from './useHideIfEmptyDataSource';
 export * from './useProjectDashboardInit';
 export * from './useRelatedDataSourceAttributes';
 export * from './useRenderElement';
-export * from './useResizeWidth';
+export * from './useResizeBox';
 export * from './useShownOtherItems';
 export * from './useUpdateDataSource';
 export * from './useWidgetConfig';

package/dist/components/Dashboard/hooks/useResizeBox.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+/** Измеренный content-box наблюдаемого элемента: обе оси в пикселях либо `undefined` до первого замера. */
+export interface ResizeBox {
+    width?: number;
+    height?: number;
+}
+/**
+ * Измеряет фактические ширину и высоту DOM-элемента и обновляет их на любой ресайз (ResizeObserver).
+ *
+ * Возвращает `[ref, box]`, где `box` — `{ width, height }` в пикселях (content-box) либо пустой объект,
+ * пока элемент ещё не измерен. Используется для «резинового» графика: d3-графикам нужны конкретные
+ * пиксельные размеры, а не CSS `100%`, а для вписывания (fit) нужны обе оси.
+ *
+ * `enabled: false` полностью отключает наблюдение — обычные (не fill) графики не измеряются
+ * и не вызывают лишних ре-рендеров.
+ */
+export declare const useResizeBox: (enabled: boolean) => [RefObject<HTMLDivElement>, ResizeBox];

package/dist/components/Dashboard/types.d.ts

@@ -162,8 +162,8 @@ export interface ConfigLayoutOptions {
     cornerRadius?: number;
     column?: boolean;
     twoColumns?: boolean;
-    /** Растянуть график контейнера Chart на всю ширину контейнера (график любого типа). */
-    chartFill?: boolean;
+    /** Вписать график контейнера Chart в контейнер: по ширине всегда, по высоте — при заданной высоте (object-fit: contain). */
+    fill?: boolean;
     /** Горизонтальное выравнивание содержимого заголовка контейнера. */
     align?: Alignment;
     /** Выравнивание детей контейнера по поперечной оси. В ряду по умолчанию `center`. */
@@ -187,6 +187,10 @@ export interface MarkdownTagTypography {
     fontSize?: FontSizeToken | string;
     lineHeight?: string;
     fontWeight?: number | string;
+    /** Отступ снизу — задаёт расстояние до следующего блока (между тегами). */
+    marginBottom?: string;
+    /** Отступ сверху — задаёт расстояние до предыдущего блока (между тегами). */
+    marginTop?: string;
 }
 /**
  * Пер-тег типографика markdown-виджета. Отсутствующий тег или свойство —

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;
   }
@@ -7632,30 +7655,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) => {
@@ -7777,6 +7803,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 +7831,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")};
   }
@@ -8423,6 +8469,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 +8483,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 +8510,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 +11517,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 +12751,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 })] }));
 }));
@@ -14034,10 +14089,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 +14128,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 +14240,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;
+            // Вне fill chartHeight — высота самой полосы, и обёртка честно становится выше на строку
+            // итога. В fill chartHeight — уже ВСЯ доступная высота ячейки, поэтому строку итога надо
+            // вычесть из неё (обёртка остаётся ровно по ячейке), а не прибавить сверху — иначе тело
+            // вылезает за нижнюю границу на STACK_BAR_TOTAL_HEIGHT.
+            const stackBarHeight = showTotal && !fitsHeight ? chartHeight + STACK_BAR_TOTAL_HEIGHT : chartHeight;
             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 }) }));
         }
         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 +14288,10 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         defaultColor,
         formatFilterColor,
         chartWidth,
+        chartHeight,
+        fitsHeight,
+        pieSide,
+        fill,
         barWidth,
         showLabels,
         padding,
@@ -14241,7 +14319,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 }) => {
@@ -15298,7 +15380,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;