@evergis/react 4.0.153 → 4.0.154

package/dist/react.esm.js

@@ -3356,6 +3356,46 @@ const MAX_CHART_WIDTH = 300;
 const DEFAULT_CHART_ANGLE = 4;
 const DEFAULT_CHART_HEIGHT = 90;
 const STACK_BAR_TOTAL_HEIGHT = 20;
+/** Высота строки текста подписи оси (шрифт 10px) — по макету. */
+const AXIS_TITLE_LINE_HEIGHT = 12;
+/** Зазор между подписью оси и значениями шкалы — по макету. */
+const AXIS_TITLE_GAP = 4;
+/**
+ * Поле SVG графика под выступ крайних делений шкалы значений.
+ *
+ * d3 центрирует подпись деления на его линии (`dy: 0.32em`), поэтому у крайнего деления половина подписи
+ * выходит за поле графика. Если поле вплотную к краю SVG, половина оказывается за SVG, и её срезает
+ * обёртка: у линейного графика в fill — `ChartFillMeasure` (`overflow: hidden`), у барчарта всегда —
+ * `BarChartContainer` (`overflow-x: hidden`, отчего и по вертикали содержимое не `visible`).
+ */
+const Y_AXIS_LABEL_OVERHANG = 6;
+/** Зазор от строки горизонтальных подписей осей до верхней линии сетки — по макету. */
+const AXIS_TITLE_TOP_GRID_GAP = 9;
+/** Число делений шкал линейного графика; у левой и правой шкал оно общее, чтобы совпадала сетка. */
+const LINE_CHART_Y_TICKS = 4;
+/**
+ * Высота строки горизонтальных подписей осей (`axis.titlePosition: "top"`). Вместе с верхним полем SVG
+ * (Y_AXIS_LABEL_OVERHANG) даёт строку текста и 9px до верхней линии сетки: деление центрировано на
+ * линии и выступает над ней на ~5px, так что между подписью и значением шкалы остаются те же 4px,
+ * что и у вертикальной подписи.
+ */
+const AXIS_TITLE_TOP_HEIGHT = AXIS_TITLE_LINE_HEIGHT + AXIS_TITLE_TOP_GRID_GAP - Y_AXIS_LABEL_OVERHANG;
+/**
+ * Пустая полоса под подписями оси X внутри SVG линейного графика: под ось зарезервировано
+ * LINE_CHART_LABEL_MARGIN (20px), а подписи сдвинуты вниз на +16px, поэтому строка подписи
+ * (шрифт d3 10px) кончается примерно в 14px от низа SVG.
+ */
+const LINE_CHART_X_LABELS_BLANK = 14;
+/** Зазор между подписями оси X и подписью самой оси — по макету. */
+const X_AXIS_TITLE_GAP = 4;
+/** Зазор между подписью оси X и легендой, идущей отдельной строкой, — по макету. */
+const X_AXIS_TITLE_LEGEND_GAP = 8;
+/** Выравнивание подписи оси X → `justify-content` строки-подвала графика. */
+const CHART_AXIS_ALIGN_JUSTIFY = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
 const FILTER_PREFIX = "%";
 /** Имя системного геометрического фильтра — выделение, нарисованное пользователем на карте. */
 const GEOMETRY_FILTER_NAME = "geometry";
@@ -3465,7 +3505,76 @@ const CONTAINER_BODY_FILL_STYLE = {
  */
 const CONTAINERS_GROUP_DEFAULTS = { boxSizing: "border-box" };
 
-const ChartTooltipTable = styled.table.withConfig({ displayName: "ChartTooltipTable", componentId: "sc-1fk3ts5" }) `
+/** Обёртка линейного графика: строка горизонтальных подписей над телом, вертикальные — по бокам. */
+const LineChartLayout = styled.div.withConfig({ displayName: "LineChartLayout", componentId: "sc-gmzloe" }) `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+`;
+const LineChartRow = styled.div.withConfig({ displayName: "LineChartRow", componentId: "sc-dxzi1m" }) `
+  display: flex;
+  flex: 1 1 auto;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 0;
+`;
+/**
+ * Тело линейного графика между вертикальными подписями осей. Забирает всю оставшуюся ширину строки —
+ * её и измеряем, чтобы отдать d3 пиксельную ширину: подписи бывают в одну и в две строки.
+ */
+const LineChartBody = styled.div.withConfig({ displayName: "LineChartBody", componentId: "sc-1sbsc7u" }) `
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+const AxisTitlesRow = styled.div.withConfig({ displayName: "AxisTitlesRow", componentId: "sc-1hskx6f" }) `
+  display: flex;
+  flex: 0 0 ${AXIS_TITLE_TOP_HEIGHT}px;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.5rem;
+  height: ${AXIS_TITLE_TOP_HEIGHT}px;
+  min-width: 0;
+`;
+const AxisTitleText = styled.div.withConfig({ displayName: "AxisTitleText", componentId: "sc-9shs4l" }) `
+  font-size: 0.625rem;
+  line-height: ${AXIS_TITLE_LINE_HEIGHT}px;
+  color: ${({ $color, theme: { palette } }) => $color || palette.iconDisabled};
+`;
+const AxisTitleTop = styled(AxisTitleText).withConfig({ displayName: "AxisTitleTop", componentId: "sc-pv3dgm" }) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+/**
+ * Колонка вертикальной подписи оси: ширина — по тексту (одна или две строки) плюс зазор до значений
+ * шкалы. Вертикальные отступы колонки повторяют поля SVG, поэтому подпись центрируется по полю
+ * графика, а не по всей высоте вместе с подписями оси X.
+ */
+const AxisTitleSideColumn = styled.div.withConfig({ displayName: "AxisTitleSideColumn", componentId: "sc-11nmkfu" }) `
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: ${({ $plotTop }) => $plotTop}px 0 ${({ $plotBottom }) => $plotBottom}px;
+  ${({ $side }) => ($side === "left" ? "padding-right" : "padding-left")}: ${AXIS_TITLE_GAP}px;
+`;
+/**
+ * Сам текст вертикальной подписи. Поворот вынесен на внутренний элемент: повёрнутая целиком колонка
+ * перенесла бы зазор до шкалы на внешнюю сторону. Левая подпись читается снизу вверх, правая — сверху
+ * вниз, как на макете.
+ */
+const AxisTitleSide = styled(AxisTitleText).withConfig({ displayName: "AxisTitleSide", componentId: "sc-lretfl" }) `
+  max-height: 100%;
+  overflow: hidden;
+  text-align: center;
+  writing-mode: vertical-rl;
+  transform: ${({ $side }) => ($side === "left" ? "rotate(180deg)" : "none")};
+`;
+const ChartTooltipTable = styled.table.withConfig({ displayName: "ChartTooltipTable", componentId: "sc-1j0a1z" }) `
   td {
     padding: 0;
   }
@@ -3474,7 +3583,7 @@ const ChartTooltipTable = styled.table.withConfig({ displayName: "ChartTooltipTa
     padding-bottom: 0.375rem;
   }
 `;
-const ChartTooltip = styled(Flex).withConfig({ displayName: "ChartTooltip", componentId: "sc-1iyyyv7" }) `
+const ChartTooltip = styled(Flex).withConfig({ displayName: "ChartTooltip", componentId: "sc-1ps09qa" }) `
   flex-wrap: nowrap;
   background: rgb(48, 69, 79);
   border-radius: 0.25rem;
@@ -3484,26 +3593,26 @@ const ChartTooltip = styled(Flex).withConfig({ displayName: "ChartTooltip", comp
     margin-bottom: 0.25rem;
   }
 `;
-const ChartTooltipLabel = styled.div.withConfig({ displayName: "ChartTooltipLabel", componentId: "sc-gl0qxz" }) `
+const ChartTooltipLabel = styled.div.withConfig({ displayName: "ChartTooltipLabel", componentId: "sc-1chgokj" }) `
   margin-right: 0.25rem;
 `;
-const ChartTooltipColor = styled.div.withConfig({ displayName: "ChartTooltipColor", componentId: "sc-tmvvbh" }) `
+const ChartTooltipColor = styled.div.withConfig({ displayName: "ChartTooltipColor", componentId: "sc-1un94mw" }) `
   width: 0.625rem;
   height: 0.625rem;
   background-color: ${({ $color }) => $color};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.smallest};
   margin-right: 0.25rem;
 `;
-const ChartLegendColor$1 = styled.div.withConfig({ displayName: "ChartLegendColor", componentId: "sc-l66k4q" }) `
+const ChartLegendColor$1 = styled.div.withConfig({ displayName: "ChartLegendColor", componentId: "sc-sw1cfw" }) `
   width: 0.5rem;
   height: 0.5rem;
   background-color: ${({ $color }) => $color};
   border-radius: 0.125rem;
 `;
-const ChartLegendValue = styled.div.withConfig({ displayName: "ChartLegendValue", componentId: "sc-1d7z775" }) `
+const ChartLegendValue = styled.div.withConfig({ displayName: "ChartLegendValue", componentId: "sc-1s1kjum" }) `
   opacity: 0.65;
 `;
-const ChartTooltipRow = styled(Flex).withConfig({ displayName: "ChartTooltipRow", componentId: "sc-ih1uc5" }) `
+const ChartTooltipRow = styled(Flex).withConfig({ displayName: "ChartTooltipRow", componentId: "sc-ftllia" }) `
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -3515,11 +3624,11 @@ const ChartTooltipRow = styled(Flex).withConfig({ displayName: "ChartTooltipRow"
     margin-right: 0.25rem;
   }
 `;
-const ChartTooltipName = styled.div.withConfig({ displayName: "ChartTooltipName", componentId: "sc-sm4g0t" }) `
+const ChartTooltipName = styled.div.withConfig({ displayName: "ChartTooltipName", componentId: "sc-16ov53z" }) `
   margin-right: 1rem;
   opacity: 0.65;
 `;
-const PieChartCenter = styled.div.withConfig({ displayName: "PieChartCenter", componentId: "sc-1le93jy" }) `
+const PieChartCenter = styled.div.withConfig({ displayName: "PieChartCenter", componentId: "sc-5m536c" }) `
   position: absolute;
   top: 50%;
   left: 50%;
@@ -3528,7 +3637,7 @@ const PieChartCenter = styled.div.withConfig({ displayName: "PieChartCenter", co
   font-weight: bold;
   font-size: 1.5rem;
 `;
-const ChartWrapperContainer = styled.div.withConfig({ displayName: "ChartWrapperContainer", componentId: "sc-1f4x9zv" }) `
+const ChartWrapperContainer = styled.div.withConfig({ displayName: "ChartWrapperContainer", componentId: "sc-1ixngl" }) `
   position: relative;
   width: 100%;
 `;
@@ -3537,7 +3646,7 @@ const ChartWrapperContainer = styled.div.withConfig({ displayName: "ChartWrapper
  * на неё вешается ref для ResizeObserver — меряем обе оси без цикла. Плоский div (не Flex uilib), как соседний
  * ChartWrapperContainer, чтобы ref гарантированно дошёл до DOM-узла. Тело графика центрируется внутри.
  */
-const ChartFillMeasure = styled.div.withConfig({ displayName: "ChartFillMeasure", componentId: "sc-1r4oerb" }) `
+const ChartFillMeasure = styled.div.withConfig({ displayName: "ChartFillMeasure", componentId: "sc-3rqqmt" }) `
   position: relative;
   display: flex;
   align-items: center;
@@ -3555,7 +3664,7 @@ const ChartFillMeasure = styled.div.withConfig({ displayName: "ChartFillMeasure"
     display: block;
   }
 `;
-const Tooltip = styled.div.withConfig({ displayName: "Tooltip", componentId: "sc-1va8cy3" }) `
+const Tooltip = styled.div.withConfig({ displayName: "Tooltip", componentId: "sc-k91v0" }) `
   position: relative;
   border-radius: 0.25rem;
   background-color: rgba(28, 33, 48);
@@ -3660,7 +3769,7 @@ const LineChartStyles = createGlobalStyle `
     fill: ${({ theme: { palette } }) => palette.textDisabled};
   }
 `;
-const StyledBarChart = styled(BarChart$1).withConfig({ displayName: "StyledBarChart", componentId: "sc-1l1kx80" }) `
+const StyledBarChart = styled(BarChart$1).withConfig({ displayName: "StyledBarChart", componentId: "sc-16gz38d" }) `
   .domain {
     display: none;
   }
@@ -4548,6 +4657,79 @@ const getAttributeConfigurationByName = (attributes, name) => {
     return attributes[name];
 };
 
+const EMPTY_AXIS = {};
+const warnedLegacySources = new Set();
+// Сборщик консьюмера подставляет `process.env.NODE_ENV` строкой, поэтому выражение должно быть
+// ровно таким — без `typeof process` и без `?.`. Сам `process` webpack 5 в браузер не завозит:
+// проверка `typeof process` отключила бы предупреждения и в dev. Консьюмер без сборщика получит
+// ReferenceError — он гасится, и предупреждений просто нет.
+const isDevEnvironment = (() => {
+    try {
+        return process.env.NODE_ENV !== "production";
+    }
+    catch {
+        return false;
+    }
+})();
+/**
+ * Один раз на источник сообщает, что конфиг остался на устаревшей плоской форме.
+ *
+ * Без такого маркера момент «легаси закончилось» не наступает никогда, и временный слой
+ * совместимости становится постоянным.
+ */
+const warnLegacyAxis = ({ dataSourceName, attributeName }) => {
+    if (!isDevEnvironment)
+        return;
+    const key = `${dataSourceName ?? "?"}:${attributeName ?? "?"}`;
+    if (warnedLegacySources.has(key))
+        return;
+    warnedLegacySources.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`[Dashboard] Источник "${key}" использует устаревшие поля оси (chartAxis/axisColor/hideAxis). ` +
+        "Перепишите их в объект axis: { type, side, color, title, hide }. " +
+        "Слой совместимости временный.");
+};
+/**
+ * Настройки оси источника.
+ *
+ * Читает `axis`, а при его отсутствии собирает объект из устаревших плоских полей
+ * `chartAxis` / `axisColor` / `hideAxis`. Заданный `axis` имеет приоритет: узел, который уже
+ * правили в редакторе, не должен откатываться к старым значениям.
+ */
+const resolveAxis = (source) => {
+    if (!source)
+        return EMPTY_AXIS;
+    const { axis, chartAxis, axisColor, hideAxis } = source;
+    if (axis)
+        return axis;
+    if (chartAxis === undefined && axisColor === undefined && hideAxis === undefined)
+        return EMPTY_AXIS;
+    warnLegacyAxis(source);
+    return {
+        type: chartAxis === "x" ? "x" : "y",
+        color: axisColor,
+        hide: hideAxis,
+    };
+};
+/**
+ * Источник питает ось значений.
+ *
+ * Отсутствие `axis.type` означает `"y"`: конфиг без явного типа — самый частый случай,
+ * и раньше такой источник молча выпадал из графика.
+ */
+const isValueAxis = (source) => (resolveAxis(source).type ?? "y") === "y";
+/** Сторона оси; отсутствие `axis.side` означает `"left"`. */
+const getAxisSide = (source) => resolveAxis(source).side ?? "left";
+/** Источник выводится на правой оси. */
+const isRightAxis = (source) => getAxisSide(source) === "right";
+/**
+ * Запись описывает ось чарта, а не источник фильтра.
+ *
+ * `BarChartFilter` собирает `relatedConfig` вручную и осей не задаёт — ему нужна исходная палитра,
+ * а не растянутая под число элементов.
+ */
+const hasAxisConfig = ({ axis, chartAxis }) => axis !== undefined || chartAxis !== undefined;
+
 const getAttributesConfiguration = (layer) => {
     const layerAttributeConfiguration = layer?.configuration?.attributesConfiguration ?? {};
     const { geometryAttribute, idAttribute } = layerAttributeConfiguration;
@@ -4572,7 +4754,7 @@ const getAttributesConfiguration = (layer) => {
 
 const formatChartRelatedValue = (t, value, layerInfo, relatedAttributes) => {
     const layerDefinition = getAttributesConfiguration(layerInfo);
-    const relatedAxis = relatedAttributes.find(({ chartAxis }) => chartAxis === "y");
+    const relatedAxis = relatedAttributes.find(isValueAxis);
     const attribute = getAttributeConfigurationByName(layerDefinition.attributes, relatedAxis?.attributeName);
     return attribute
         ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat })
@@ -5417,11 +5599,11 @@ const getAttributeValue = (element, attributes) => {
     return typeof value === "string" && maxLength && maxLength < value.length ? (jsx(TextTrim, { maxLength: maxLength, wordBreak: wordBreak, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
 };
 
-const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
+const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(isValueAxis);
 
 const getChartFilterName = (relatedDataSources) => {
     const relatedAttributes = relatedDataSources || [];
-    const axes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
+    const axes = relatedAttributes.filter(isValueAxis);
     return axes?.[0]?.filterName;
 };
 
@@ -7051,6 +7233,96 @@ const useFetchImageWithAuth = (url) => {
     return isExternal ? url : blobUrl;
 };
 
+/**
+ * Оси значений линейного графика и атрибуты, по `stringFormat` которых форматируются деления.
+ *
+ * У левой и правой осей это разные атрибуты, поэтому они резолвятся по отдельности: иначе на
+ * правой оси окажутся единицы измерения левой.
+ */
+const useChartAxisAttributes = ({ dataSources, relatedAttributes }) => {
+    const { layerInfos, dataSources: fetchedDataSources } = useWidgetContext();
+    const axes = useMemo(() => (relatedAttributes || []).filter(isValueAxis), [relatedAttributes]);
+    const strokeColors = useMemo(() => axes.map(related => resolveAxis(related).color), [axes]);
+    const leftAxis = useMemo(() => axes.find(related => !isRightAxis(related)) ?? axes[0] ?? relatedAttributes?.[0], [axes, relatedAttributes]);
+    const rightAxis = useMemo(() => axes.find(isRightAxis), [axes]);
+    const resolveAxisAttribute = useCallback((related) => {
+        if (!related)
+            return undefined;
+        const layerInfo = getDataSourceLayerInfo({
+            layerInfos,
+            configDataSource: dataSources?.find(({ name }) => name === related.dataSourceName),
+            fetchedDataSource: getDataSource(related.dataSourceName, fetchedDataSources),
+        });
+        return getLayerInfoAttribute(layerInfo, related.attributeName);
+    }, [dataSources, fetchedDataSources, layerInfos]);
+    const leftAxisAttribute = useMemo(() => resolveAxisAttribute(leftAxis), [resolveAxisAttribute, leftAxis]);
+    const rightAxisAttribute = useMemo(() => resolveAxisAttribute(rightAxis), [resolveAxisAttribute, rightAxis]);
+    return { axes, strokeColors, leftAxisAttribute, rightAxisAttribute };
+};
+
+/**
+ * Форматтеры делений левой и правой шкал линейного графика — по `stringFormat` своего атрибута.
+ *
+ * Отдаются в `tickFormat` генератора оси, а не подменяют текст после отрисовки: d3 измеряет ширину
+ * шкалы по уже нарисованным подписям и по ней сдвигает поле графика. Подмена текста задним числом
+ * (`30` → `30,0`) делала подпись шире замера, и она заезжала на подпись оси слева.
+ */
+const useChartAxisTickFormat = ({ dataSources, relatedAttributes }) => {
+    const { t } = useGlobalContext();
+    const { leftAxisAttribute, rightAxisAttribute } = useChartAxisAttributes({ dataSources, relatedAttributes });
+    const createTickFormat = useCallback((attribute) => (value) => {
+        if (!value)
+            return "0";
+        return attribute
+            ? String(formatAttributeValue({
+                t,
+                type: attribute.type,
+                value: Number(value),
+                stringFormat: attribute.stringFormat,
+                noUnits: true,
+            }))
+            : String(value);
+    }, [t]);
+    const formatLeftTick = useMemo(() => createTickFormat(leftAxisAttribute), [createTickFormat, leftAxisAttribute]);
+    const formatRightTick = useMemo(() => createTickFormat(rightAxisAttribute), [createTickFormat, rightAxisAttribute]);
+    return { formatLeftTick, formatRightTick };
+};
+
+/**
+ * Подписи осей линейного графика и место, которое они занимают над телом графика.
+ *
+ * Режим размещения общий для всех осей (`options.axis.titlePosition`), текст — у каждой оси свой.
+ * Цвет подписи отдельной опцией не задаётся: одна серия на стороне — подпись в её цвет, несколько —
+ * нейтральная, потому что тогда подпись описывает всю ось, а не одну из линий. Ширину вертикальных
+ * подписей здесь не считаем — она зависит от числа строк текста и измеряется по факту.
+ */
+const useChartAxisTitles = ({ options, axes, isLineChart }) => {
+    const axisTitlePosition = options?.axis?.titlePosition ?? "side";
+    const axisTitles = useMemo(() => {
+        const pick = (side) => {
+            const sideAxes = axes.filter(related => getAxisSide(related) === side);
+            const title = sideAxes.map(resolveAxis).find(axis => axis.title)?.title;
+            if (!title)
+                return undefined;
+            return { title, color: sideAxes.length === 1 ? resolveAxis(sideAxes[0]).color : undefined };
+        };
+        return { left: pick("left"), right: pick("right") };
+    }, [axes]);
+    const hasAxisTitles = !!(isLineChart && (axisTitles.left || axisTitles.right));
+    const hasTopTitles = hasAxisTitles && axisTitlePosition === "top";
+    const hasSideTitles = hasAxisTitles && axisTitlePosition === "side";
+    const hideLeftAxis = useMemo(() => axes.filter(related => !isRightAxis(related)).every(related => resolveAxis(related).hide), [axes]);
+    const hideRightAxis = useMemo(() => axes.filter(isRightAxis).every(related => resolveAxis(related).hide), [axes]);
+    return {
+        axisTitles,
+        hasTopTitles,
+        hasSideTitles,
+        axisTitlesHeight: hasTopTitles ? AXIS_TITLE_TOP_HEIGHT : 0,
+        hideLeftAxis,
+        hideRightAxis,
+    };
+};
+
 const HEIGHT_OFFSET = 20;
 const FILL_OPACITY = 0.28;
 const lineGenerator = line()
@@ -7096,20 +7368,10 @@ function wrap() {
     }
 }
 const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, markers, showMarkers, }) => {
-    const { t } = useGlobalContext();
-    const { layerInfos, dataSources: fetchedDataSources } = useWidgetContext();
-    const strokeColors = relatedAttributes
-        .filter(({ chartAxis }) => chartAxis === "y")
-        .map(({ axisColor }) => axisColor);
-    const yAxis = useMemo(() => relatedAttributes?.find(({ chartAxis }) => chartAxis === "y") ?? relatedAttributes?.[0], [relatedAttributes]);
-    const yAxisAttribute = useMemo(() => {
-        const layerInfo = getDataSourceLayerInfo({
-            layerInfos,
-            configDataSource: dataSources?.find(({ name }) => name === yAxis?.dataSourceName),
-            fetchedDataSource: getDataSource(yAxis?.dataSourceName, fetchedDataSources),
-        });
-        return getLayerInfoAttribute(layerInfo, yAxis?.attributeName);
-    }, [dataSources, fetchedDataSources, layerInfos, yAxis]);
+    const { strokeColors } = useChartAxisAttributes({
+        dataSources,
+        relatedAttributes,
+    });
     const ref = useRef({
         path: null,
         area: null,
@@ -7162,22 +7424,9 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         svg
             .selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick text`)
             .attr("y", 16);
-        svg
-            .selectAll(`.${lineChartClassNames.lineChartYScaleGlobal} .tick text`)
-            .text(item => {
-            if (!item)
-                return 0;
-            return yAxisAttribute
-                ? formatAttributeValue({
-                    t,
-                    type: yAxisAttribute.type,
-                    value: item,
-                    stringFormat: yAxisAttribute.stringFormat,
-                    noUnits: true,
-                })
-                : item;
-        })
-            .each(wrap);
+        // Текст делений форматируется ещё в генераторе оси (useChartAxisTickFormat), до замера ширины
+        // шкалы; здесь его только укорачиваем.
+        svg.selectAll(`.${lineChartClassNames.lineChartYScaleGlobal} .tick text`).each(wrap);
         svg.selectAll(".tick text").attr("style", `color: ${fontColor}`);
         const global = svg.select(`.${lineChartClassNames.lineChartLinesGlobal}`);
         const lineChartLines = svg.selectAll(`.${lineChartClassNames.lineChartLine}`);
@@ -7213,7 +7462,6 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         svg.append("defs").html(() => defs.join(""));
     }, [
         fontColor,
-        yAxisAttribute,
         chartId,
         strokeColors,
         defaultColor,
@@ -7221,7 +7469,6 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         onChange,
         showMarkers,
         markers,
-        t,
     ]);
     return [customize, onChange];
 };
@@ -7378,10 +7625,10 @@ const useChartData = ({ element, type }) => {
     const configDataSources = useConfigDataSources(type);
     const relatedAttributes = useMemo(() => element?.options?.relatedDataSources || [], [element?.options?.relatedDataSources]);
     const loading = useMemo(() => !!relatedAttributes?.length &&
-        !dataSources?.some(({ name }) => relatedAttributes.some(({ chartAxis, dataSourceName }) => chartAxis === "y" && dataSourceName === name)), [dataSources, relatedAttributes]);
+        !dataSources?.some(({ name }) => relatedAttributes.some(related => isValueAxis(related) && related.dataSourceName === name)), [dataSources, relatedAttributes]);
     const fetchedData = useMemo(() => {
         const isRelated = !!relatedAttributes?.length;
-        const filteredAttributes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
+        const filteredAttributes = relatedAttributes.filter(isValueAxis);
         if (!element)
             return [];
         if (isRelated) {
@@ -7389,7 +7636,7 @@ const useChartData = ({ element, type }) => {
                 return [];
             return filteredAttributes
                 .map(relatedAxis => {
-                const { dataSourceName, axisColor, attributeName, attributeUnits } = relatedAxis;
+                const { dataSourceName, attributeName, attributeUnits } = relatedAxis;
                 const dataSource = configDataSources.find(({ name }) => name === dataSourceName);
                 const featureDataSource = getDataSource(dataSourceName, dataSources);
                 const layerInfo = getDataSourceLayerInfo({
@@ -7409,7 +7656,10 @@ const useChartData = ({ element, type }) => {
                             layerInfo,
                         })
                         : null,
-                    color: axisColor,
+                    color: resolveAxis(relatedAxis).color,
+                    // Сторона едет вместе с данными: серии без значений отсеиваются ниже, и сопоставлять
+                    // их с осями по индексу уже нельзя.
+                    axisSide: getAxisSide(relatedAxis),
                     attributeName,
                     attributeUnits,
                     dataSourceName,
@@ -7422,6 +7672,7 @@ const useChartData = ({ element, type }) => {
         return [
             {
                 items: getDataFromAttributes(t, element, attributes),
+                axisSide: "left",
                 layerInfo: null,
                 attributeName: null,
                 attributeUnits: null,
@@ -7441,7 +7692,7 @@ const useChartData = ({ element, type }) => {
     ]);
     const isResolved = useMemo(() => !relatedAttributes?.length ||
         relatedAttributes
-            .filter(({ chartAxis }) => chartAxis === "y")
+            .filter(isValueAxis)
             .every(({ dataSourceName }) => Array.isArray(getDataSource(dataSourceName, dataSources)?.features)), [relatedAttributes, dataSources]);
     const [data, setData] = useState(fetchedData);
     useEffect(() => {
@@ -8973,6 +9224,15 @@ const ChartLegendContainer = styled(Flex).withConfig({ displayName: "ChartLegend
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: ${({ twoColumns }) => (twoColumns ? "flex-start" : "center")};
+
+  /* Явная опция column перебивает раскладку, которую легенде навязывает ChartContainer
+     (под графиком — в ряд, сбоку — столбиком). Без опции поведение прежнее. */
+  ${({ $column }) => $column !== undefined &&
+    css `
+      &&& {
+        flex-direction: ${$column ? "column" : "row"};
+      }
+    `}
 `;
 const ChartLegendItem = styled(Flex).withConfig({ displayName: "ChartLegendItem", componentId: "sc-16m9piw" }) `
   cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
@@ -9041,12 +9301,129 @@ const ContainerChart = styled(Flex).withConfig({ displayName: "ContainerChart",
     `}
 `;
 const ContainerLegend = styled(Flex).withConfig({ displayName: "ContainerLegend", componentId: "sc-z1n1s8" }) ``;
-const ContainerUnits = styled.div.withConfig({ displayName: "ContainerUnits", componentId: "sc-1vurgy9" }) `
+/**
+ * Выравнивание строки по полю графика: ширина тела графика, а внутренние отступы — до краёв поля
+ * (колонка подписи оси и значения шкалы). Тело графика центрируется в слоте, поэтому и строка
+ * центрируется. Правило поднято `&&&` над шириной, которую строкам задаёт `ContainerValue`.
+ */
+const plotInsetsMixin = css `
+  ${({ $insets }) => $insets &&
+    css `
+      &&& {
+        box-sizing: border-box;
+        align-self: center;
+        width: ${$insets.width}px;
+        max-width: 100%;
+        padding-left: ${$insets.left}px;
+        padding-right: ${$insets.right}px;
+      }
+    `}
+`;
+/**
+ * Строка ждёт, пока график сообщит положение поля: место занимает, но не видна. Иначе до первой
+ * отрисовки d3 она стояла бы по краю контейнера и потом прыгала на место.
+ */
+const awaitingPlotMixin = css `
+  ${({ $awaitingPlot }) => $awaitingPlot &&
+    css `
+      visibility: hidden;
+    `}
+`;
+/**
+ * Строка под телом графика: подпись оси X и, при `legendInline`, легенда справа от неё.
+ *
+ * `$offsetTop` подтягивает строку к подписям оси X: под ними внутри SVG остаётся пустая полоса,
+ * и без поправки зазор получился бы втрое больше макетного.
+ */
+const ChartFooter = styled(Flex).withConfig({ displayName: "ChartFooter", componentId: "sc-nii28w" }) `
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.5rem;
+  width: 100%;
+  margin-top: ${({ $offsetTop }) => $offsetTop ?? 0}px;
+  justify-content: ${({ $align }) => $align};
+
+  ${ContainerLegend} {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+
+  /* Легенда в строке с подписью: записи прижаты вправо, без отступа сверху, который ей задаёт
+     ContainerValue, и без нижнего отступа записей — иначе она съедет вниз относительно подписи.
+     Прижимать нужно сами записи: обёртки легенды — Flex из uilib-gl с width: 100%, и выравнивание
+     внешнего контейнера до записей не доходит, а своё у легенды — по центру. */
+  &&& ${ChartLegendContainer} {
+    justify-content: flex-end;
+    margin-top: 0;
+  }
+
+  &&& ${ChartLegendItem} {
+    margin-bottom: 0;
+  }
+
+  ${plotInsetsMixin};
+  ${awaitingPlotMixin};
+`;
+const ChartXAxisTitle = styled.div.withConfig({ displayName: "ChartXAxisTitle", componentId: "sc-1vsgzi9" }) `
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  white-space: nowrap;
+  color: ${({ $color, theme: { palette } }) => $color || palette.textDisabled};
+`;
+/**
+ * Строка легенды под графиком. `$gapTop` заменяет отступ сверху, который легенде задаёт `ContainerValue`;
+ * `$offsetTop` сдвигает саму строку — подтягивает её к подписям оси X, как строку с подписью оси.
+ *
+ * `$justify` выравнивает сами записи. Выравнивание строки (`justifyContent`) до них не доходит: обёртки
+ * легенды — Flex из uilib-gl с `width: 100%`, а записи внутри легенда всегда центрирует.
+ */
+const ChartLegendRow = styled(ContainerLegend).withConfig({ displayName: "ChartLegendRow", componentId: "sc-1a12wrz" }) `
+  ${({ $offsetTop }) => $offsetTop !== undefined &&
+    css `
+      margin-top: ${$offsetTop}px;
+    `}
+
+  ${({ $gapTop }) => $gapTop !== undefined &&
+    css `
+      &&& ${ChartLegendContainer} {
+        margin-top: ${$gapTop}px;
+      }
+    `}
+
+  ${({ $justify }) => $justify &&
+    css `
+      &&& ${ChartLegendContainer} {
+        justify-content: ${$justify};
+      }
+    `}
+
+  ${plotInsetsMixin};
+  ${awaitingPlotMixin};
+`;
+/**
+ * Колонка «график + подпись оси X» для легенды сбоку (`twoColumns`). Без неё подпись встала бы третьим
+ * элементом ряда рядом с легендой, а не под графиком.
+ */
+const ChartWithFooter = styled(Flex).withConfig({ displayName: "ChartWithFooter", componentId: "sc-140gv2s" }) `
+  flex-direction: column;
+  flex-wrap: nowrap;
+  min-width: 0;
+
+  ${({ $fill }) => $fill &&
+    css `
+      min-height: 0;
+    `}
+
+  &&& ${ContainerChart} {
+    width: 100%;
+  }
+`;
+const ContainerUnits = styled.div.withConfig({ displayName: "ContainerUnits", componentId: "sc-vj15z6" }) `
   margin-left: 0.5rem;
   white-space: nowrap;
   font-size: 0.75rem;
 `;
-const ContainerValue = styled(Flex).withConfig({ displayName: "ContainerValue", componentId: "sc-aj1rs9" }) `
+const ContainerValue = styled(Flex).withConfig({ displayName: "ContainerValue", componentId: "sc-1bnfj5v" }) `
   justify-content: flex-end;
   align-items: center;
   flex-wrap: nowrap;
@@ -9065,7 +9442,7 @@ const ContainerValue = styled(Flex).withConfig({ displayName: "ContainerValue",
     width: ${({ column }) => (column ? "100%" : "auto")};
   }
 
-  ${ContainerChart}, ${ContainerLegend} {
+  ${ContainerChart}, ${ContainerLegend}, ${ChartWithFooter} {
     width: ${({ column }) => (column ? "100%" : "50%")};
   }
 
@@ -9088,7 +9465,7 @@ const SizeIconMixin = css `
     font-size: ${({ $fontSize }) => $fontSize}px !important;
   }
 `;
-styled(Icon).withConfig({ displayName: "ContainerIcon", componentId: "sc-1w9w0bq" }) `
+styled(Icon).withConfig({ displayName: "ContainerIcon", componentId: "sc-18399bz" }) `
   width: auto;
   height: auto;
   margin-bottom: 0.5rem;
@@ -9102,7 +9479,7 @@ const SvgContainerColorMixin$1 = css `
     fill: ${({ $fontColor }) => $fontColor};
   }
 `;
-const SvgContainer$1 = styled.div.withConfig({ displayName: "SvgContainer", componentId: "sc-1qs5gmx" }) `
+const SvgContainer$1 = styled.div.withConfig({ displayName: "SvgContainer", componentId: "sc-8l0ajh" }) `
   &&& {
     min-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
     max-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
@@ -9114,7 +9491,7 @@ const SvgContainer$1 = styled.div.withConfig({ displayName: "SvgContainer", comp
     }
   }
 `;
-const TwoColumnContainerWrapper = styled(Container).withConfig({ displayName: "TwoColumnContainerWrapper", componentId: "sc-1ogv4d3" }) `
+const TwoColumnContainerWrapper = styled(Container).withConfig({ displayName: "TwoColumnContainerWrapper", componentId: "sc-1yxeknf" }) `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
@@ -9141,6 +9518,16 @@ const CameraContainer = memo(({ elementConfig, type, renderElement }) => {
     return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { ...body, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
+/**
+ * Контекст, через который элемент `chart` сообщает контейнеру, где лежит поле графика.
+ *
+ * По макету подпись оси X и легенда выравниваются по полю графика, а не по краям контейнера.
+ * Ширину шкал d3 вычисляет только при отрисовке, а подвал с подписью и легендой рисует
+ * `ChartContainer` — снаружи элемента. Без контейнера (элемент сам по себе) провайдера нет,
+ * и отчёт просто не отправляется.
+ */
+const ChartPlotContext = createContext({});
+
 /**
  * Контекст вписывания графика (`options.fill` контейнера Chart).
  *
@@ -9150,14 +9537,40 @@ const CameraContainer = memo(({ elementConfig, type, renderElement }) => {
  */
 const FillContext = createContext({ fill: false, fitHeight: false });
 
+const isSameInsets = (prev, next) => !!prev && prev.left === next.left && prev.right === next.right && prev.width === next.width;
 const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement }) => {
     const { options, children } = elementConfig || {};
-    const { twoColumns, hideEmpty, height } = options || {};
+    const { twoColumns, hideEmpty, height, legendInline } = options || {};
     const fill = options?.fill;
     const fillContextValue = useMemo(() => ({ fill: !!fill, fitHeight: !!fill && height != null }), [fill, height]);
+    // Поле графика отчитывается после каждой отрисовки d3; одинаковые значения не пишем в стейт,
+    // иначе отчёт и ре-рендер гоняли бы друг друга.
+    const [plotInsets, setPlotInsets] = useState(null);
+    const reportPlotInsets = useCallback((next) => setPlotInsets(prev => (isSameInsets(prev, next) ? prev : next)), []);
+    const plotContextValue = useMemo(() => ({ reportPlotInsets }), [reportPlotInsets]);
     const aliasElement = children.find(child => child.id === "alias");
     const chartElement = children.find(child => child.id === "chart");
     const legendElement = children.find(child => child.id === "legend");
+    const isLineChart = chartElement?.options?.chartType === "line";
+    const xAxisTitle = chartElement?.options?.axis?.x?.title;
+    const footerJustify = useMemo(() => CHART_AXIS_ALIGN_JUSTIFY[chartElement?.options?.axis?.x?.align ?? "center"], [chartElement?.options?.axis?.x?.align]);
+    // Легенда встаёт в строку с подписью оси X только когда та есть и легенда не вынесена вбок.
+    const isLegendInline = useMemo(() => !!legendInline && !twoColumns && !!xAxisTitle, [legendInline, twoColumns, xAxisTitle]);
+    // По макету подпись оси X и легенда у линейного графика выравниваются по полю графика, а не по
+    // контейнеру. Легенда сбоку (twoColumns) живёт в своей колонке и в выравнивании не участвует.
+    const footerInsets = useMemo(() => (isLineChart ? plotInsets : null), [isLineChart, plotInsets]);
+    const isPlotLegend = isLineChart && !twoColumns;
+    // Положение поля становится известно только после отрисовки: LineChart рисует d3 в useEffect, уже
+    // после первого кадра. До отчёта подвал встал бы по краю контейнера и затем прыгнул на место, поэтому
+    // прячем его — место под ним сохраняется, а появляется он вместе с линиями графика.
+    const isAwaitingPlot = isLineChart && !plotInsets;
+    // Пока подпись оси X не задана, легенда выравнивается прежней опцией `center` (по умолчанию — к левой
+    // границе поля графика); с подписью — по ней, иначе подпись и легенда разъезжаются по разным краям.
+    const legendJustify = useMemo(() => {
+        if (xAxisTitle)
+            return footerJustify;
+        return legendElement?.options?.center ? "center" : "flex-start";
+    }, [xAxisTitle, footerJustify, legendElement?.options?.center]);
     const { root, body } = useContainerRoot({ elementConfig });
     const { data, loading } = useChartData({
         element: chartElement,
@@ -9169,7 +9582,12 @@ const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement })
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { "$fill": !!fill, children: jsx(FillContext.Provider, { value: fillContextValue, children: renderElement({ id: "chart" }) }) }), jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
+    const chartSlot = (jsx(ContainerChart, { "$fill": !!fill, children: jsx(FillContext.Provider, { value: fillContextValue, children: jsx(ChartPlotContext.Provider, { value: plotContextValue, children: renderElement({ id: "chart" }) }) }) }));
+    const footer = xAxisTitle ? (jsxs(ChartFooter, { "$align": footerJustify, "$insets": footerInsets, "$offsetTop": isLineChart ? X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK : 0, "$awaitingPlot": isAwaitingPlot, children: [jsx(ChartXAxisTitle, { children: xAxisTitle }), isLegendInline && jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : null;
+    // Легенда линейного графика: под подписью оси X — через X_AXIS_TITLE_LEGEND_GAP, без подписи — на её
+    // месте, вплотную под подписями делений оси X. У остальных графиков — прежняя раскладка общей легенды.
+    const legendRow = isLegendInline ? null : (jsx(ChartLegendRow, { justifyContent: legendJustify, "$insets": isPlotLegend ? footerInsets : null, "$gapTop": isPlotLegend ? (xAxisTitle ? X_AXIS_TITLE_LEGEND_GAP : 0) : undefined, "$offsetTop": isPlotLegend && !xAxisTitle ? X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK : undefined, "$justify": isPlotLegend ? legendJustify : undefined, "$awaitingPlot": isPlotLegend && isAwaitingPlot, children: renderElement({ id: "legend" }) }));
+    return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxs(Fragment$1, { children: [twoColumns && footer ? (jsxs(ChartWithFooter, { "$fill": !!fill, children: [chartSlot, footer] })) : (jsxs(Fragment$1, { children: [chartSlot, footer] })), legendRow] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
 });
 
 const InnerContainerWrapper = styled.div.withConfig({ displayName: "InnerContainerWrapper", componentId: "sc-1a1fl7q" }) `
@@ -9527,6 +9945,7 @@ const DEFAULT_BAR_CHART_HEIGHT = 100;
 const BAR_CHART_HEADER_HEIGHT = 40;
 const BAR_CHART_FOOTER_MARGIN = 16;
 const LINE_CHART_LABEL_MARGIN = 20;
+const LINE_CHART_X_AXIS_PADDING = 15;
 const DEFAULT_BAR_CHART_MARGINS = {
     top: 0,
     left: 0,
@@ -15190,9 +15609,9 @@ const ElementImage = memo(({ type, elementConfig }) => {
 });
 
 const ElementLegend = memo(({ type, element, elementConfig }) => {
-    const { attributes, dataSources, expandedContainers } = useWidgetContext(type);
+    const { attributes, expandedContainers } = useWidgetContext(type);
     const { options } = elementConfig || {};
-    const { twoColumns, chartId, relatedDataSources, fontSize } = options || {};
+    const { twoColumns, column, chartId, relatedDataSources, fontSize } = options || {};
     const chartElement = useMemo(() => returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
     const { data, loading } = useChartData({
         element: chartElement,
@@ -15203,10 +15622,10 @@ const ElementLegend = memo(({ type, element, elementConfig }) => {
         if (!data[0]?.items?.length)
             return [];
         if (chartElement?.options?.chartType === "line") {
-            return axes.map(({ alias, axisColor }) => {
+            return axes.map(related => {
                 return {
-                    name: alias,
-                    color: axisColor,
+                    name: related.alias,
+                    color: resolveAxis(related).color,
                 };
             });
         }
@@ -15220,7 +15639,7 @@ const ElementLegend = memo(({ type, element, elementConfig }) => {
             });
     }, [data, chartElement?.options?.chartType, relatedDataSources, axes, attributes]);
     return !chartElement?.options?.expanded ||
-        expandedContainers?.[chartElement.id] ? (jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
+        expandedContainers?.[chartElement.id] ? (jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, column: column, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(IconButton).attrs(() => ({
@@ -16788,7 +17207,11 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
     if (isOtherSliced) {
         data = data.slice(0, config?.options?.otherItems);
     }
-    const gradientArray = relatedConfig.chartAxis
+    // Источник чарта отличается от источника фильтра наличием осей: BarChartFilter собирает
+    // relatedConfig вручную и оси не задаёт, потому что ему нужна исходная палитра, а не растянутая
+    // под число элементов. Гейт смотрит и на устаревший chartAxis — иначе у старых конфигов
+    // молча поехали бы цвета столбцов и долей.
+    const gradientArray = hasAxisConfig(relatedConfig)
         ? stretchPalette(colors, data.length)
         : colors;
     const filter = getConfigFilter(relatedConfig?.filterName, filters);
@@ -18854,6 +19277,15 @@ const StackBar = ({ data, filterName, type, alias, options, fill, renderElement,
     return (jsxs(Fragment$1, { children: [(alias || showTotal) && (jsxs(StackBarHeader, { children: [jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxs(StackBarTotal, { children: [jsx(StackBarValue, { children: formatValue(total) }), !!units && jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsx(Tooltip$1, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => (jsx(StackBarContainer, { ref: ref, "$fill": fill, children: renderItems })) })) : (jsx(StackBarContainer, { "$fill": fill, children: renderItems }))] }));
 };
 
+/** Горизонтальные подписи осей над телом графика: левая прижата влево, правая — вправо. */
+const AxisTitlesTop = ({ left, right, neutralColor }) => (jsxs(AxisTitlesRow, { children: [jsx(AxisTitleTop, { "$color": left?.color || neutralColor, title: left?.title, children: left?.title }), jsx(AxisTitleTop, { "$color": right?.color || neutralColor, title: right?.title, children: right?.title })] }));
+/** Вертикальная подпись оси сбоку от тела графика. Без подписи ничего не рендерит. */
+const AxisTitleSideSlot = ({ side, axisTitle, neutralColor, plotTop, plotBottom, }) => {
+    if (!axisTitle)
+        return null;
+    return (jsx(AxisTitleSideColumn, { "$side": side, "$plotTop": plotTop, "$plotBottom": plotBottom, children: jsx(AxisTitleSide, { "$side": side, "$color": axisTitle.color || neutralColor, title: axisTitle.title, children: axisTitle.title }) }));
+};
+
 const Chart = memo(({ config, element, elementConfig, type, renderElement }) => {
     const theme = useTheme();
     const { palette } = theme;
@@ -18874,12 +19306,18 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const radius = options?.radius || DEFAULT_BARCHART_RADIUS;
     const padding = options?.padding || DEFAULT_BAR_PADDING;
     const fontColor = options?.fontColor || palette.iconDisabled;
+    // Нейтральная подпись оси — тем же цветом, что и значения шкалы (на макете у них один стиль).
+    const axisTitleColor = options?.fontColor || palette.textDisabled;
     const angle = options?.angle || DEFAULT_CHART_ANGLE;
     const barWidth = options?.barWidth || DEFAULT_BAR_WIDTH;
     const cornerRadius = options?.cornerRadius || 0;
     const relatedAttributes = useMemo(() => relatedDataSources || [], [relatedDataSources]);
-    const axes = useMemo(() => relatedAttributes.filter(({ chartAxis }) => chartAxis === "y"), [relatedAttributes]);
+    const axes = useMemo(() => relatedAttributes.filter(isValueAxis), [relatedAttributes]);
     const filterName = getChartFilterName(relatedDataSources);
+    const { axisTitles, hasTopTitles, hasSideTitles, axisTitlesHeight, hideLeftAxis, hideRightAxis, } = useChartAxisTitles({ options, axes, isLineChart });
+    // Ширина вертикальных подписей зависит от числа строк текста, поэтому тело между ними меряем
+    // по факту, а не вычитаем константу.
+    const [lineBodyRef, { width: measuredBodyWidth }] = useResizeBox(hasSideTitles);
     const isRelated = !!relatedAttributes?.length;
     const { data, loading } = useChartData({ element, type });
     const totalWidthFromBarWidth = (data[0]?.items?.length || 0) * (barWidth + padding);
@@ -18907,17 +19345,54 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const chartHeight = useMemo(() => (fitsHeight && measuredHeight ? measuredHeight : height), [fitsHeight, measuredHeight, height]);
     // Круглый график вписываем по короткой стороне (object-fit: contain), центрируя в ячейке.
     const pieSide = useMemo(() => (fitsHeight && measuredHeight ? Math.min(chartWidth, measuredHeight) : chartWidth), [fitsHeight, measuredHeight, chartWidth]);
+    // Тело линейного графика — это ячейка за вычетом подписей осей. По высоте вычитаем только в
+    // fill: вне fill chartHeight означает высоту самого тела, и обёртка честно растёт на подписи.
+    const lineBodyWidth = useMemo(() => {
+        if (!hasSideTitles)
+            return chartWidth;
+        if (measuredBodyWidth)
+            return measuredBodyWidth;
+        // До первого замера — оценка: одна строка текста и зазор на каждую подпись.
+        const sideTitlesCount = Number(!!axisTitles.left) + Number(!!axisTitles.right);
+        return Math.max(chartWidth - sideTitlesCount * (AXIS_TITLE_LINE_HEIGHT + AXIS_TITLE_GAP), 0);
+    }, [hasSideTitles, measuredBodyWidth, chartWidth, axisTitles]);
+    const lineBodyHeight = useMemo(() => (fitsHeight ? Math.max(chartHeight - axisTitlesHeight, 0) : chartHeight), [fitsHeight, chartHeight, axisTitlesHeight]);
+    // Обёртка выше тела на строку горизонтальных подписей. В fill вся высота уже отмерена ячейкой,
+    // поэтому прибавлять нечего — иначе тело вылезло бы за нижнюю границу.
+    const lineWrapperHeight = useMemo(() => (fitsHeight ? chartHeight : chartHeight + axisTitlesHeight), [fitsHeight, chartHeight, axisTitlesHeight]);
     const [customize] = useChartChange({
         dataSources: config.dataSources,
         chartId: elementConfig?.id,
-        width: chartWidth,
-        height: chartHeight,
+        width: lineBodyWidth,
+        height: lineBodyHeight,
         fontColor,
         relatedAttributes,
         defaultColor: primaryColor,
         markers: configMarkers,
         showMarkers,
     });
+    const { formatLeftTick, formatRightTick } = useChartAxisTickFormat({
+        dataSources: config.dataSources,
+        relatedAttributes,
+    });
+    const { reportPlotInsets } = useContext(ChartPlotContext);
+    // Положение поля графика известно только после отрисовки: ширину шкал вычисляет d3. Смещение тела
+    // берём из offset-размеров, а не из getBoundingClientRect: они не искажаются масштабом превью и
+    // transform предков, а координаты шкалы всегда в пикселях SVG.
+    const customizeLine = useCallback(args => {
+        customize?.(args);
+        const body = lineBodyRef.current;
+        const layout = body?.parentElement?.parentElement;
+        if (!reportPlotInsets || !body || !layout)
+            return;
+        const bodyLeft = body.offsetLeft - layout.offsetLeft;
+        const [plotLeft, plotRight] = args.xScale.range();
+        reportPlotInsets({
+            left: Math.round(bodyLeft + plotLeft),
+            right: Math.round(layout.offsetWidth - bodyLeft - plotRight),
+            width: layout.offsetWidth,
+        });
+    }, [customize, reportPlotInsets, lineBodyRef]);
     const { formatFilterColor, onFilter } = useWidgetFilters(type, filterName, data?.[0]?.items);
     const formattedAttributes = useMemo(() => getFormattedAttributes(t, (data[0]?.items || []), attributes, element), [attributes, data, element, t]);
     const totalSum = useMemo(() => isRelated
@@ -18976,6 +19451,17 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
             left: markersMargin,
         };
     }, [showMarkers, markers?.length]);
+    // Значения шкалы барчарта d3 центрирует на делении, и крайние деления наполовину выступают за поле.
+    // При нулевом поле SVG выступ уходит за SVG, где его срезает BarChartContainer (overflow-x: hidden,
+    // отчего и по вертикали содержимое не visible). Место под выступ резервируем внутри SVG — внешние
+    // размеры обёрток не меняются. Без значений шкалы (showLabels) выступать нечему.
+    const barMargin = useMemo(() => showLabels
+        ? {
+            ...margin,
+            top: Math.max(margin.top, Y_AXIS_LABEL_OVERHANG),
+            bottom: Math.max(margin.bottom, Y_AXIS_LABEL_OVERHANG),
+        }
+        : margin, [showLabels, margin]);
     const formatTooltipName = useCallback((name) => isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes), [formattedAttributes, isRelated]);
     const formatTooltipValue = useCallback((value, name) => isRelated
         ? tooltipValueFromRelatedFeatures(t, value, relatedAttributes, data[0]?.layerInfo)
@@ -19002,26 +19488,42 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                 attributeUnits: item.attributeUnits,
                 dataSourceName: item.dataSourceName,
                 stroke: item.color || primaryColor,
+                axis: item.axisSide ?? "left",
                 values: item.items
                     ?.filter(({ value }) => !isEmptyValue(value))
                     ?.map(({ value }) => Number(value)),
             }));
-            const isHidedY = axes.every(({ hideAxis }) => hideAxis);
-            const chartValues = lineChartData
-                .flat()
+            const isHidedY = hideLeftAxis && hideRightAxis;
+            const valuesOfSide = (side) => lineChartData
+                .filter(({ axis }) => axis === side)
                 .map(({ values }) => values)
                 .flat();
+            const leftValues = valuesOfSide("left");
+            const rightValues = valuesOfSide("right");
             // Резервируем нижнюю полосу под подписи оси X: без неё ось прижата к нижней границе,
             // подписи (сдвинутые на +16px) вылезают за тело и режутся overflow: hidden у ChartFillMeasure.
+            // Сверху резервируем выступ верхнего деления шкалы: оно центрировано на линии сетки и при нулевом
+            // поле наполовину уходит за SVG, где в fill его срезает overflow: hidden у ChartFillMeasure.
+            const topOverhang = Math.max(Y_AXIS_LABEL_OVERHANG - margin.top, 0);
             const lineMargin = {
                 ...margin,
+                top: margin.top + topOverhang,
                 bottom: Math.max(margin.bottom, LINE_CHART_LABEL_MARGIN),
             };
-            return (jsxs(AnyChartWrapper, { height: chartHeight, children: [jsx(LineChartStyles, {}), jsx(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: lineMargin })] }));
+            // draw.ts вычитает верхнее поле и из нижней границы поля графика — компенсируем добавленное,
+            // чтобы низ поля и зазор до подписей оси X остались на месте.
+            const lineXAxisPadding = LINE_CHART_X_AXIS_PADDING - topOverhang;
+            // Колонки вертикальных подписей повторяют поля SVG, чтобы подпись центрировалась по полю
+            // графика, а не по всей высоте вместе с подписями оси X.
+            const plotTop = lineMargin.top;
+            const plotBottom = lineMargin.top + lineMargin.bottom + lineXAxisPadding;
+            return (jsxs(AnyChartWrapper, { height: lineWrapperHeight, children: [jsx(LineChartStyles, {}), jsxs(LineChartLayout, { children: [hasTopTitles && (jsx(AxisTitlesTop, { left: axisTitles.left, right: axisTitles.right, neutralColor: axisTitleColor })), jsxs(LineChartRow, { children: [hasSideTitles && (jsx(AxisTitleSideSlot, { side: "left", axisTitle: axisTitles.left, neutralColor: axisTitleColor, plotTop: plotTop, plotBottom: plotBottom })), jsx(LineChartBody, { ref: lineBodyRef, children: jsx(LineChart, { data: lineChartData, labels: labels, markers: markers, width: lineBodyWidth, height: lineBodyHeight, xAxisPadding: lineXAxisPadding, yAxisPadding: 0, min: leftValues.length ? Math.min(...leftValues) : undefined, rightMin: rightValues.length ? Math.min(...rightValues) : undefined, customYAxisSelection: yAxis => {
+                                                // Обе оси приходят в один колбэк, поэтому сторону определяем по классу.
+                                                const isRight = yAxis.classed(lineChartClassNames.lineChartYScaleRight);
+                                                if (isRight ? hideRightAxis : hideLeftAxis) {
+                                                    yAxis.remove();
+                                                }
+                                            }, customYAxis: yAxis => yAxis.ticks(LINE_CHART_Y_TICKS).tickFormat(formatLeftTick), customYAxisRight: yAxis => yAxis.ticks(LINE_CHART_Y_TICKS).tickFormat(formatRightTick), renderTooltip: renderLineChartTooltip, customize: customizeLine, dotSnapping: dotSnapping, dynamicTooltipEnable: true, stackedTooltip: true, tooltipClassName: "dashboardLineChartTooltip", drawGridX: !isHidedY, margin: lineMargin }) }), hasSideTitles && (jsx(AxisTitleSideSlot, { side: "right", axisTitle: axisTitles.right, neutralColor: axisTitleColor, plotTop: plotTop, plotBottom: plotBottom }))] })] })] }));
         }
         if (isStackBar) {
             // Вне fill chartHeight — высота самой полосы, и обёртка честно становится выше на строку
@@ -19051,7 +19553,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                         const barRadius = options?.cornerRadius ?? DEFAULT_BARCHART_RADIUS;
                         bars.attr("rx", barRadius);
                         bars.attr("ry", barRadius);
-                    }, margin: margin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined }) }) }));
+                    }, margin: barMargin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined }) }) }));
     }, [
         customXAxisBottom,
         customYAxisLeft,
@@ -19067,6 +19569,15 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         formatFilterColor,
         chartWidth,
         chartHeight,
+        lineBodyWidth,
+        lineBodyHeight,
+        lineWrapperHeight,
+        axisTitles,
+        hasTopTitles,
+        hasSideTitles,
+        axisTitleColor,
+        hideLeftAxis,
+        hideRightAxis,
         fitsHeight,
         pieSide,
         fill,
@@ -19076,11 +19587,14 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         formatTooltipValue,
         formatTooltipName,
         filterName,
-        axes,
         labels,
         margin,
+        barMargin,
         renderLineChartTooltip,
-        customize,
+        customizeLine,
+        lineBodyRef,
+        formatLeftTick,
+        formatRightTick,
         primaryColor,
         type,
         elementConfig?.children,
@@ -19097,14 +19611,14 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     ]);
     if (!isVisibleContainer(id, expandable, expanded, expandedContainers))
         return null;
-    const chartBody = (jsxs(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : chartHeight, column: column, loading: loading, children: [jsx(ChartTooltipStyles, {}), renderChart] }));
+    const chartBody = (jsxs(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : isLineChart ? lineWrapperHeight : chartHeight, column: column, loading: loading, children: [jsx(ChartTooltipStyles, {}), renderChart] }));
     if (!fill)
         return chartBody;
     // fill: тело центрируется в измеряемой обёртке, ref которой питает ResizeObserver обеими осями.
     return jsx(ChartFillMeasure, { ref: chartRef, children: chartBody });
 });
 
-const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }) => {
+const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, column, loading }) => {
     const { t } = useGlobalContext();
     const { sliceItems, showMore, onShowMore } = useShownOtherItems(chartElement?.options);
     const axes = useMemo(() => getChartAxes(chartElement), [chartElement]);
@@ -19113,7 +19627,7 @@ const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
+    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, "$column": column, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
 const ContainerChildren = memo(({ type, items, isColumn, isMain, renderElement }) => {
@@ -19968,5 +20482,5 @@ const DEFAULT_HEATMAP_STYLE = {
     ],
 };
 
-export { ALIGNMENTS, ALIGN_ITEMS, ATTRIBUTE_ICON_ELEMENT_TYPES, AddButtonRow, AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BG_IMAGE_SLOT_ID, BaseMapTheme, CHART_TYPES, COMPACT_FRACTION_DIGITS, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CONTAINERS_GROUP_DEFAULTS, CONTAINER_BODY_ATTRIBUTE, CONTAINER_BODY_FILL_STYLE, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, ContainerBackground, ContainerChildren, ContainerLoading, ContainerRoot, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DASHBOARD_OVERLAY_Z_INDEX, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_BLUR, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_RADIUS, DEFAULT_CIRCLE_STROKE_WIDTH, DEFAULT_CIRCLE_STYLE, DEFAULT_COLOR, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_BASE, DEFAULT_FILL_EXTRUSION_HEIGHT, DEFAULT_FILL_EXTRUSION_STYLE, DEFAULT_FILL_EXTRUSION_VERTICAL_GRADIENT, DEFAULT_FILL_STYLE, DEFAULT_FILTER_PADDING, DEFAULT_GRID_GAP, DEFAULT_HEATMAP_COLOR, DEFAULT_HEATMAP_INTENSITY, DEFAULT_HEATMAP_RADIUS, DEFAULT_HEATMAP_STYLE, DEFAULT_HEATMAP_WEIGHT, DEFAULT_ICON_ANCHOR, DEFAULT_ICON_OVERLAP, DEFAULT_ICON_PADDING, DEFAULT_ICON_ROTATE, DEFAULT_ICON_SIZE, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_CAP, DEFAULT_LINE_JOIN, DEFAULT_LINE_STYLE, DEFAULT_LINE_WIDTH, DEFAULT_LNG, DEFAULT_OPACITY, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_SYMBOL_COLOR, DEFAULT_SYMBOL_HALO_COLOR, DEFAULT_SYMBOL_PLACEMENT, DEFAULT_SYMBOL_SPACING, DEFAULT_SYMBOL_STYLE, DEFAULT_TEXT_ANCHOR, DEFAULT_TEXT_JUSTIFY, DEFAULT_TEXT_SIZE, DEFAULT_TEXT_TRANSFORM, DEFAULT_TRACK_FR, DEFAULT_TRANSLATE, DEFAULT_ZOOM, DRAG_THRESHOLD_PX, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EMPTY_DATA_SOURCE_LAYER_INFO, EXTENT_FILTER_NAME, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTable, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILL_SIZE, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FR_PRECISION, FeatureCardBackgroundHeader, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GEOMETRY_FILTER_NAME, GRID_AUTO_FILL_DEFAULTS, GRID_CELL_ATTR, GRID_CELL_ID_PREFIX, GRID_DRAGGING_ATTR, GRID_DRAG_SOURCE_ATTR, GRID_DROP_TARGET_ATTR, GRID_FILL_DEFAULTS, GRID_ROW_ID_PREFIX, GlobalContext, GlobalProvider, GridRowContainer, HANDLE_BLEED_PX, Header, HeaderContainer, HeaderFontColorMixin, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAP_VIEW_FILTER_NAMES, MAX_CHART_WIDTH, MAX_TRACKS, MIN_TRACK_PX, MIN_TRACK_RATIO, Map$1 as Map, MapContext, MapProvider, NON_TRACK_SLOT_IDS, NO_CELL_DRAG_SELECTOR, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OBJECT_FITS, OVERFLOWS, OneColumnContainer, PIE_CHART_TOOLTIP_STYLE, POLL_SUBTASK_INTERVAL_MS, POLL_SUBTASK_TIMEOUT_MS, PROJECT_ALIAS_PROP, PROJECT_FILTER_NAME, PROJECT_NAME_PROP, PROJECT_PROPS, PROVIDER_PREFIX, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, ProviderPrefix, QUERY_DESCRIPTION_CACHE_TTL, RESIZE_HANDLE_ATTR, ResizeHandle, RoundedBackgroundContainer, SAVE_HOOK_RESULT_DURATION, SERVER_NOTIFICATION_EVENT, STACK_BAR_TOTAL_HEIGHT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, StructuredDataContainer, SvgImage, TILE_ALIGNMENTS, TIME_ZONE_FORMAT, TITLE_SLOT_IDS, TabsContainer, TextTrim, ThemeName, TitleContainer, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, VIEW_MODES, VoteContainer, WidgetType, ZOOM_FILTER_NAME, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyTreeFilterToCondition, applyVarsToCondition, asAttributeName, asChartId, asContainerId, asDataSourceName, asFilterName, asLayerName, asModalId, asResourceId, asTabId, buildGridTemplate, buildTrackTemplate, checkEqualOrIncludes, checkIsLoading, collectConfigIds, colorToHex, containsNodeId, createConfigLayer, createConfigPage, createGridCell, createGridIdFactory, createGridRow, createNewPageId, createSaveNotificationId, dateOptions, debounce, decimalOpacityToHex, enrichStyleItemsWithIds, enrichStyleModelsWithIds, eqlParametersToPayload, fetchQueryDescription, findAttributeInExpression, findCellContext, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, geometryToEwkt, getActualExtrusionHeight, getAttributeByName, getAttributeConfigurationByName, getAttributeIconElement, getAttributeIconUrl, getAttributeValue, getAttributesConfiguration, getAverageTrackSize, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDataSourceLayerInfo, getDate, getDefaultConfig, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getImageUrl, getLayerClientStyle, getLayerInfo, getLayerInfoAttribute, getLayerInfoFromDataSources, getLayoutChildren, getMapViewDataSources, getModalsDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProjectValue, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getShownItemsLimit, getSlideshowImages, getStyleAttributes, getSvgUrl, getTemplateNameFromAttribute, getThemeByName, getTotalFromAttributes, getTotalFromRelatedFeatures, getTrackSize, getTrackSizeKey, getTrackSizes, getWrapperSizeStyle, hasContainerBgImage, hexToRgba, isCrossOriginUrl, isEmptyElementValue, isEmptyValue, isFeaturesFilterValue, isFillSize, isFrSize, isGridNode, isHiddenEmptyValue, isHookActive, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isRootOwningContainer, isTreeFilterValue, isVisibleContainer, mapNodeById, mergeAttributeConfigurations, metersPerPixel, noMarginMixin, numberOptions, parseFrValue, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, removeTracks, replaceNodesByIds, rgbToHex, roundFr, roundTotalSum, setLayoutChildren, sizeCssMixin, sliceShownOtherItems, stretchPalette, timeOptions, toConditionsArray, toCssSize, toFrSize, toPxNumber, toRenderableValue, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, updateDataSource, useAfterSave, useAppHeight, useAttachmentDownload, useAttachmentItems, useAttachmentPreviewImages, useAttachmentsView, useAutoCompleteControl, useBeforeSave, useBgImageHost, useChartChange, useChartData, useConfigDataSources, useContainerAttributes, useContainerRoot, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSourceLoading, useDataSources, useDebouncedCallback, useDiffPage, useEditGroupAttributes, useEqualTileWidth, useExpandableContainers, useExportPdf, useFeatureSaveHooks, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRemoteTask, useRenderElement, useResizeBox, useResizeDrag, useSavePrototypeBuilder, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useWrapperSize, useZoomToFeatures, useZoomToPoint, withTrackSize };
+export { ALIGNMENTS, ALIGN_ITEMS, ATTRIBUTE_ICON_ELEMENT_TYPES, AXIS_TITLE_GAP, AXIS_TITLE_LINE_HEIGHT, AXIS_TITLE_TOP_GRID_GAP, AXIS_TITLE_TOP_HEIGHT, AddButtonRow, AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BG_IMAGE_SLOT_ID, BaseMapTheme, CHART_AXIS_ALIGN_JUSTIFY, CHART_TYPES, COMPACT_FRACTION_DIGITS, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CONTAINERS_GROUP_DEFAULTS, CONTAINER_BODY_ATTRIBUTE, CONTAINER_BODY_FILL_STYLE, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, ContainerBackground, ContainerChildren, ContainerLoading, ContainerRoot, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DASHBOARD_OVERLAY_Z_INDEX, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_BLUR, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_RADIUS, DEFAULT_CIRCLE_STROKE_WIDTH, DEFAULT_CIRCLE_STYLE, DEFAULT_COLOR, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_BASE, DEFAULT_FILL_EXTRUSION_HEIGHT, DEFAULT_FILL_EXTRUSION_STYLE, DEFAULT_FILL_EXTRUSION_VERTICAL_GRADIENT, DEFAULT_FILL_STYLE, DEFAULT_FILTER_PADDING, DEFAULT_GRID_GAP, DEFAULT_HEATMAP_COLOR, DEFAULT_HEATMAP_INTENSITY, DEFAULT_HEATMAP_RADIUS, DEFAULT_HEATMAP_STYLE, DEFAULT_HEATMAP_WEIGHT, DEFAULT_ICON_ANCHOR, DEFAULT_ICON_OVERLAP, DEFAULT_ICON_PADDING, DEFAULT_ICON_ROTATE, DEFAULT_ICON_SIZE, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_CAP, DEFAULT_LINE_JOIN, DEFAULT_LINE_STYLE, DEFAULT_LINE_WIDTH, DEFAULT_LNG, DEFAULT_OPACITY, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_SYMBOL_COLOR, DEFAULT_SYMBOL_HALO_COLOR, DEFAULT_SYMBOL_PLACEMENT, DEFAULT_SYMBOL_SPACING, DEFAULT_SYMBOL_STYLE, DEFAULT_TEXT_ANCHOR, DEFAULT_TEXT_JUSTIFY, DEFAULT_TEXT_SIZE, DEFAULT_TEXT_TRANSFORM, DEFAULT_TRACK_FR, DEFAULT_TRANSLATE, DEFAULT_ZOOM, DRAG_THRESHOLD_PX, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EMPTY_DATA_SOURCE_LAYER_INFO, EXTENT_FILTER_NAME, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTable, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILL_SIZE, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FR_PRECISION, FeatureCardBackgroundHeader, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GEOMETRY_FILTER_NAME, GRID_AUTO_FILL_DEFAULTS, GRID_CELL_ATTR, GRID_CELL_ID_PREFIX, GRID_DRAGGING_ATTR, GRID_DRAG_SOURCE_ATTR, GRID_DROP_TARGET_ATTR, GRID_FILL_DEFAULTS, GRID_ROW_ID_PREFIX, GlobalContext, GlobalProvider, GridRowContainer, HANDLE_BLEED_PX, Header, HeaderContainer, HeaderFontColorMixin, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, LINE_CHART_X_LABELS_BLANK, LINE_CHART_Y_TICKS, Layer, LayerDescription, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAP_VIEW_FILTER_NAMES, MAX_CHART_WIDTH, MAX_TRACKS, MIN_TRACK_PX, MIN_TRACK_RATIO, Map$1 as Map, MapContext, MapProvider, NON_TRACK_SLOT_IDS, NO_CELL_DRAG_SELECTOR, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OBJECT_FITS, OVERFLOWS, OneColumnContainer, PIE_CHART_TOOLTIP_STYLE, POLL_SUBTASK_INTERVAL_MS, POLL_SUBTASK_TIMEOUT_MS, PROJECT_ALIAS_PROP, PROJECT_FILTER_NAME, PROJECT_NAME_PROP, PROJECT_PROPS, PROVIDER_PREFIX, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, ProviderPrefix, QUERY_DESCRIPTION_CACHE_TTL, RESIZE_HANDLE_ATTR, ResizeHandle, RoundedBackgroundContainer, SAVE_HOOK_RESULT_DURATION, SERVER_NOTIFICATION_EVENT, STACK_BAR_TOTAL_HEIGHT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, StructuredDataContainer, SvgImage, TILE_ALIGNMENTS, TIME_ZONE_FORMAT, TITLE_SLOT_IDS, TabsContainer, TextTrim, ThemeName, TitleContainer, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, VIEW_MODES, VoteContainer, WidgetType, X_AXIS_TITLE_GAP, X_AXIS_TITLE_LEGEND_GAP, Y_AXIS_LABEL_OVERHANG, ZOOM_FILTER_NAME, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyTreeFilterToCondition, applyVarsToCondition, asAttributeName, asChartId, asContainerId, asDataSourceName, asFilterName, asLayerName, asModalId, asResourceId, asTabId, buildGridTemplate, buildTrackTemplate, checkEqualOrIncludes, checkIsLoading, collectConfigIds, colorToHex, containsNodeId, createConfigLayer, createConfigPage, createGridCell, createGridIdFactory, createGridRow, createNewPageId, createSaveNotificationId, dateOptions, debounce, decimalOpacityToHex, enrichStyleItemsWithIds, enrichStyleModelsWithIds, eqlParametersToPayload, fetchQueryDescription, findAttributeInExpression, findCellContext, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, geometryToEwkt, getActualExtrusionHeight, getAttributeByName, getAttributeConfigurationByName, getAttributeIconElement, getAttributeIconUrl, getAttributeValue, getAttributesConfiguration, getAverageTrackSize, getAxisSide, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDataSourceLayerInfo, getDate, getDefaultConfig, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getImageUrl, getLayerClientStyle, getLayerInfo, getLayerInfoAttribute, getLayerInfoFromDataSources, getLayoutChildren, getMapViewDataSources, getModalsDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProjectValue, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getShownItemsLimit, getSlideshowImages, getStyleAttributes, getSvgUrl, getTemplateNameFromAttribute, getThemeByName, getTotalFromAttributes, getTotalFromRelatedFeatures, getTrackSize, getTrackSizeKey, getTrackSizes, getWrapperSizeStyle, hasAxisConfig, hasContainerBgImage, hexToRgba, isCrossOriginUrl, isEmptyElementValue, isEmptyValue, isFeaturesFilterValue, isFillSize, isFrSize, isGridNode, isHiddenEmptyValue, isHookActive, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isRightAxis, isRootOwningContainer, isTreeFilterValue, isValueAxis, isVisibleContainer, mapNodeById, mergeAttributeConfigurations, metersPerPixel, noMarginMixin, numberOptions, parseFrValue, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, removeTracks, replaceNodesByIds, resolveAxis, rgbToHex, roundFr, roundTotalSum, setLayoutChildren, sizeCssMixin, sliceShownOtherItems, stretchPalette, timeOptions, toConditionsArray, toCssSize, toFrSize, toPxNumber, toRenderableValue, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, updateDataSource, useAfterSave, useAppHeight, useAttachmentDownload, useAttachmentItems, useAttachmentPreviewImages, useAttachmentsView, useAutoCompleteControl, useBeforeSave, useBgImageHost, useChartAxisAttributes, useChartAxisTickFormat, useChartAxisTitles, useChartChange, useChartData, useConfigDataSources, useContainerAttributes, useContainerRoot, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSourceLoading, useDataSources, useDebouncedCallback, useDiffPage, useEditGroupAttributes, useEqualTileWidth, useExpandableContainers, useExportPdf, useFeatureSaveHooks, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRemoteTask, useRenderElement, useResizeBox, useResizeDrag, useSavePrototypeBuilder, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useWrapperSize, useZoomToFeatures, useZoomToPoint, withTrackSize };
 //# sourceMappingURL=react.esm.js.map