@evergis/react 4.0.153 → 4.0.155

package/dist/index.js

@@ -3358,6 +3358,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";
@@ -3467,7 +3507,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;
   }
@@ -3476,7 +3585,7 @@ const ChartTooltipTable = styled.table.withConfig({ displayName: "ChartTooltipTa
     padding-bottom: 0.375rem;
   }
 `;
-const ChartTooltip = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltip", componentId: "sc-1iyyyv7" }) `
+const ChartTooltip = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltip", componentId: "sc-1ps09qa" }) `
   flex-wrap: nowrap;
   background: rgb(48, 69, 79);
   border-radius: 0.25rem;
@@ -3486,26 +3595,26 @@ const ChartTooltip = styled(uilibGl.Flex).withConfig({ displayName: "ChartToolti
     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(uilibGl.Flex).withConfig({ displayName: "ChartTooltipRow", componentId: "sc-ih1uc5" }) `
+const ChartTooltipRow = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltipRow", componentId: "sc-ftllia" }) `
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -3517,11 +3626,11 @@ const ChartTooltipRow = styled(uilibGl.Flex).withConfig({ displayName: "ChartToo
     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%;
@@ -3530,7 +3639,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%;
 `;
@@ -3539,7 +3648,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;
@@ -3557,7 +3666,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);
@@ -3662,7 +3771,7 @@ const LineChartStyles = styled.createGlobalStyle `
     fill: ${({ theme: { palette } }) => palette.textDisabled};
   }
 `;
-const StyledBarChart = styled(charts.BarChart).withConfig({ displayName: "StyledBarChart", componentId: "sc-1l1kx80" }) `
+const StyledBarChart = styled(charts.BarChart).withConfig({ displayName: "StyledBarChart", componentId: "sc-16gz38d" }) `
   .domain {
     display: none;
   }
@@ -4550,6 +4659,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;
@@ -4574,7 +4756,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 })
@@ -5419,11 +5601,11 @@ const getAttributeValue = (element, attributes) => {
     return typeof value === "string" && maxLength && maxLength < value.length ? (jsxRuntime.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;
 };
 
@@ -5642,13 +5824,14 @@ const GRID_TILE_SIZE = "4.5rem";
 const LIST_ICON_SIZE = "1.5rem";
 const JPG_MIME_TYPE = "image/jpeg";
 const PNG_MIME_TYPE = "image/png";
+const SVG_MIME_TYPE = "image/svg+xml";
 const IMAGE_MIME_TYPES = [
     "image/apng",
     "image/avif",
     "image/gif",
     "image/jpeg",
     "image/png",
-    "image/svg+xml",
+    SVG_MIME_TYPE,
     "image/webp",
 ];
 const XLSX_MIME_TYPES = [
@@ -7053,6 +7236,96 @@ const useFetchImageWithAuth = (url) => {
     return isExternal ? url : blobUrl;
 };
 
+/**
+ * Оси значений линейного графика и атрибуты, по `stringFormat` которых форматируются деления.
+ *
+ * У левой и правой осей это разные атрибуты, поэтому они резолвятся по отдельности: иначе на
+ * правой оси окажутся единицы измерения левой.
+ */
+const useChartAxisAttributes = ({ dataSources, relatedAttributes }) => {
+    const { layerInfos, dataSources: fetchedDataSources } = useWidgetContext();
+    const axes = React.useMemo(() => (relatedAttributes || []).filter(isValueAxis), [relatedAttributes]);
+    const strokeColors = React.useMemo(() => axes.map(related => resolveAxis(related).color), [axes]);
+    const leftAxis = React.useMemo(() => axes.find(related => !isRightAxis(related)) ?? axes[0] ?? relatedAttributes?.[0], [axes, relatedAttributes]);
+    const rightAxis = React.useMemo(() => axes.find(isRightAxis), [axes]);
+    const resolveAxisAttribute = React.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 = React.useMemo(() => resolveAxisAttribute(leftAxis), [resolveAxisAttribute, leftAxis]);
+    const rightAxisAttribute = React.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 = React.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 = React.useMemo(() => createTickFormat(leftAxisAttribute), [createTickFormat, leftAxisAttribute]);
+    const formatRightTick = React.useMemo(() => createTickFormat(rightAxisAttribute), [createTickFormat, rightAxisAttribute]);
+    return { formatLeftTick, formatRightTick };
+};
+
+/**
+ * Подписи осей линейного графика и место, которое они занимают над телом графика.
+ *
+ * Режим размещения общий для всех осей (`options.axis.titlePosition`), текст — у каждой оси свой.
+ * Цвет подписи отдельной опцией не задаётся: одна серия на стороне — подпись в её цвет, несколько —
+ * нейтральная, потому что тогда подпись описывает всю ось, а не одну из линий. Ширину вертикальных
+ * подписей здесь не считаем — она зависит от числа строк текста и измеряется по факту.
+ */
+const useChartAxisTitles = ({ options, axes, isLineChart }) => {
+    const axisTitlePosition = options?.axis?.titlePosition ?? "side";
+    const axisTitles = React.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 = React.useMemo(() => axes.filter(related => !isRightAxis(related)).every(related => resolveAxis(related).hide), [axes]);
+    const hideRightAxis = React.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()
@@ -7098,20 +7371,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 = React.useMemo(() => relatedAttributes?.find(({ chartAxis }) => chartAxis === "y") ?? relatedAttributes?.[0], [relatedAttributes]);
-    const yAxisAttribute = React.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 = React.useRef({
         path: null,
         area: null,
@@ -7164,22 +7427,9 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         svg
             .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick text`)
             .attr("y", 16);
-        svg
-            .selectAll(`.${charts.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(`.${charts.lineChartClassNames.lineChartYScaleGlobal} .tick text`).each(wrap);
         svg.selectAll(".tick text").attr("style", `color: ${fontColor}`);
         const global = svg.select(`.${charts.lineChartClassNames.lineChartLinesGlobal}`);
         const lineChartLines = svg.selectAll(`.${charts.lineChartClassNames.lineChartLine}`);
@@ -7215,7 +7465,6 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         svg.append("defs").html(() => defs.join(""));
     }, [
         fontColor,
-        yAxisAttribute,
         chartId,
         strokeColors,
         defaultColor,
@@ -7223,7 +7472,6 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
         onChange,
         showMarkers,
         markers,
-        t,
     ]);
     return [customize, onChange];
 };
@@ -7380,10 +7628,10 @@ const useChartData = ({ element, type }) => {
     const configDataSources = useConfigDataSources(type);
     const relatedAttributes = React.useMemo(() => element?.options?.relatedDataSources || [], [element?.options?.relatedDataSources]);
     const loading = React.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 = React.useMemo(() => {
         const isRelated = !!relatedAttributes?.length;
-        const filteredAttributes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
+        const filteredAttributes = relatedAttributes.filter(isValueAxis);
         if (!element)
             return [];
         if (isRelated) {
@@ -7391,7 +7639,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({
@@ -7411,7 +7659,10 @@ const useChartData = ({ element, type }) => {
                             layerInfo,
                         })
                         : null,
-                    color: axisColor,
+                    color: resolveAxis(relatedAxis).color,
+                    // Сторона едет вместе с данными: серии без значений отсеиваются ниже, и сопоставлять
+                    // их с осями по индексу уже нельзя.
+                    axisSide: getAxisSide(relatedAxis),
                     attributeName,
                     attributeUnits,
                     dataSourceName,
@@ -7424,6 +7675,7 @@ const useChartData = ({ element, type }) => {
         return [
             {
                 items: getDataFromAttributes(t, element, attributes),
+                axisSide: "left",
                 layerInfo: null,
                 attributeName: null,
                 attributeUnits: null,
@@ -7443,7 +7695,7 @@ const useChartData = ({ element, type }) => {
     ]);
     const isResolved = React.useMemo(() => !relatedAttributes?.length ||
         relatedAttributes
-            .filter(({ chartAxis }) => chartAxis === "y")
+            .filter(isValueAxis)
             .every(({ dataSourceName }) => Array.isArray(getDataSource(dataSourceName, dataSources)?.features)), [relatedAttributes, dataSources]);
     const [data, setData] = React.useState(fetchedData);
     React.useEffect(() => {
@@ -8975,6 +9227,15 @@ const ChartLegendContainer = styled(uilibGl.Flex).withConfig({ displayName: "Cha
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: ${({ twoColumns }) => (twoColumns ? "flex-start" : "center")};
+
+  /* Явная опция column перебивает раскладку, которую легенде навязывает ChartContainer
+     (под графиком — в ряд, сбоку — столбиком). Без опции поведение прежнее. */
+  ${({ $column }) => $column !== undefined &&
+    styled.css `
+      &&& {
+        flex-direction: ${$column ? "column" : "row"};
+      }
+    `}
 `;
 const ChartLegendItem = styled(uilibGl.Flex).withConfig({ displayName: "ChartLegendItem", componentId: "sc-16m9piw" }) `
   cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
@@ -9043,12 +9304,129 @@ const ContainerChart = styled(uilibGl.Flex).withConfig({ displayName: "Container
     `}
 `;
 const ContainerLegend = styled(uilibGl.Flex).withConfig({ displayName: "ContainerLegend", componentId: "sc-z1n1s8" }) ``;
-const ContainerUnits = styled.div.withConfig({ displayName: "ContainerUnits", componentId: "sc-1vurgy9" }) `
+/**
+ * Выравнивание строки по полю графика: ширина тела графика, а внутренние отступы — до краёв поля
+ * (колонка подписи оси и значения шкалы). Тело графика центрируется в слоте, поэтому и строка
+ * центрируется. Правило поднято `&&&` над шириной, которую строкам задаёт `ContainerValue`.
+ */
+const plotInsetsMixin = styled.css `
+  ${({ $insets }) => $insets &&
+    styled.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 = styled.css `
+  ${({ $awaitingPlot }) => $awaitingPlot &&
+    styled.css `
+      visibility: hidden;
+    `}
+`;
+/**
+ * Строка под телом графика: подпись оси X и, при `legendInline`, легенда справа от неё.
+ *
+ * `$offsetTop` подтягивает строку к подписям оси X: под ними внутри SVG остаётся пустая полоса,
+ * и без поправки зазор получился бы втрое больше макетного.
+ */
+const ChartFooter = styled(uilibGl.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 &&
+    styled.css `
+      margin-top: ${$offsetTop}px;
+    `}
+
+  ${({ $gapTop }) => $gapTop !== undefined &&
+    styled.css `
+      &&& ${ChartLegendContainer} {
+        margin-top: ${$gapTop}px;
+      }
+    `}
+
+  ${({ $justify }) => $justify &&
+    styled.css `
+      &&& ${ChartLegendContainer} {
+        justify-content: ${$justify};
+      }
+    `}
+
+  ${plotInsetsMixin};
+  ${awaitingPlotMixin};
+`;
+/**
+ * Колонка «график + подпись оси X» для легенды сбоку (`twoColumns`). Без неё подпись встала бы третьим
+ * элементом ряда рядом с легендой, а не под графиком.
+ */
+const ChartWithFooter = styled(uilibGl.Flex).withConfig({ displayName: "ChartWithFooter", componentId: "sc-140gv2s" }) `
+  flex-direction: column;
+  flex-wrap: nowrap;
+  min-width: 0;
+
+  ${({ $fill }) => $fill &&
+    styled.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(uilibGl.Flex).withConfig({ displayName: "ContainerValue", componentId: "sc-aj1rs9" }) `
+const ContainerValue = styled(uilibGl.Flex).withConfig({ displayName: "ContainerValue", componentId: "sc-1bnfj5v" }) `
   justify-content: flex-end;
   align-items: center;
   flex-wrap: nowrap;
@@ -9067,7 +9445,7 @@ const ContainerValue = styled(uilibGl.Flex).withConfig({ displayName: "Container
     width: ${({ column }) => (column ? "100%" : "auto")};
   }
 
-  ${ContainerChart}, ${ContainerLegend} {
+  ${ContainerChart}, ${ContainerLegend}, ${ChartWithFooter} {
     width: ${({ column }) => (column ? "100%" : "50%")};
   }
 
@@ -9090,7 +9468,7 @@ const SizeIconMixin = styled.css `
     font-size: ${({ $fontSize }) => $fontSize}px !important;
   }
 `;
-styled(uilibGl.Icon).withConfig({ displayName: "ContainerIcon", componentId: "sc-1w9w0bq" }) `
+styled(uilibGl.Icon).withConfig({ displayName: "ContainerIcon", componentId: "sc-18399bz" }) `
   width: auto;
   height: auto;
   margin-bottom: 0.5rem;
@@ -9104,7 +9482,7 @@ const SvgContainerColorMixin$1 = styled.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")};
@@ -9116,7 +9494,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;
@@ -9143,6 +9521,16 @@ const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
+/**
+ * Контекст, через который элемент `chart` сообщает контейнеру, где лежит поле графика.
+ *
+ * По макету подпись оси X и легенда выравниваются по полю графика, а не по краям контейнера.
+ * Ширину шкал d3 вычисляет только при отрисовке, а подвал с подписью и легендой рисует
+ * `ChartContainer` — снаружи элемента. Без контейнера (элемент сам по себе) провайдера нет,
+ * и отчёт просто не отправляется.
+ */
+const ChartPlotContext = React.createContext({});
+
 /**
  * Контекст вписывания графика (`options.fill` контейнера Chart).
  *
@@ -9152,14 +9540,43 @@ const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
  */
 const FillContext = React.createContext({ fill: false, fitHeight: false });
 
+const isSameInsets = (prev, next) => !!prev && prev.left === next.left && prev.right === next.right && prev.width === next.width;
 const ChartContainer = React.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 = React.useMemo(() => ({ fill: !!fill, fitHeight: !!fill && height != null }), [fill, height]);
+    // Поле графика отчитывается после каждой отрисовки d3; одинаковые значения не пишем в стейт,
+    // иначе отчёт и ре-рендер гоняли бы друг друга.
+    const [plotInsets, setPlotInsets] = React.useState(null);
+    const reportPlotInsets = React.useCallback((next) => setPlotInsets(prev => (isSameInsets(prev, next) ? prev : next)), []);
+    const plotContextValue = React.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";
+    // Подпись оси X — часть макета осей линейного графика, как и подписи осей Y в `Chart`. У других типов
+    // её нет, даже если она осталась в конфиге после смены типа: редактор показывает настройки осей только
+    // линейному графику, и убрать там такую подпись было бы нечем.
+    const xAxisTitle = React.useMemo(() => (isLineChart ? chartElement?.options?.axis?.x?.title : undefined), [isLineChart, chartElement?.options?.axis?.x?.title]);
+    const footerJustify = React.useMemo(() => CHART_AXIS_ALIGN_JUSTIFY[chartElement?.options?.axis?.x?.align ?? "center"], [chartElement?.options?.axis?.x?.align]);
+    // Легенда встаёт в строку с подписью оси X только когда та есть и легенда не вынесена вбок.
+    const isLegendInline = React.useMemo(() => !!legendInline && !twoColumns && !!xAxisTitle, [legendInline, twoColumns, xAxisTitle]);
+    // По макету подпись оси X и легенда у линейного графика выравниваются по полю графика, а не по
+    // контейнеру. Легенда сбоку (twoColumns) живёт в своей колонке и в выравнивании не участвует.
+    const footerInsets = React.useMemo(() => (isLineChart ? plotInsets : null), [isLineChart, plotInsets]);
+    const isPlotLegend = isLineChart && !twoColumns;
+    // Положение поля становится известно только после отрисовки: LineChart рисует d3 в useEffect, уже
+    // после первого кадра. До отчёта подвал встал бы по краю контейнера и затем прыгнул на место, поэтому
+    // прячем его — место под ним сохраняется, а появляется он вместе с линиями графика.
+    const isAwaitingPlot = isLineChart && !plotInsets;
+    // Пока подпись оси X не задана, легенда выравнивается прежней опцией `center` (по умолчанию — к левой
+    // границе поля графика); с подписью — по ней, иначе подпись и легенда разъезжаются по разным краям.
+    const legendJustify = React.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,
@@ -9171,7 +9588,12 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, 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 chartSlot = (jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: jsxRuntime.jsx(ChartPlotContext.Provider, { value: plotContextValue, children: renderElement({ id: "chart" }) }) }) }));
+    const footer = xAxisTitle ? (jsxRuntime.jsxs(ChartFooter, { "$align": footerJustify, "$insets": footerInsets, "$offsetTop": X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK, "$awaitingPlot": isAwaitingPlot, children: [jsxRuntime.jsx(ChartXAxisTitle, { children: xAxisTitle }), isLegendInline && jsxRuntime.jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : null;
+    // Легенда линейного графика: под подписью оси X — через X_AXIS_TITLE_LEGEND_GAP, без подписи — на её
+    // месте, вплотную под подписями делений оси X. У остальных графиков — прежняя раскладка общей легенды.
+    const legendRow = isLegendInline ? null : (jsxRuntime.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 (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, 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: [twoColumns && footer ? (jsxRuntime.jsxs(ChartWithFooter, { "$fill": !!fill, children: [chartSlot, footer] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [chartSlot, footer] })), legendRow] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
 const InnerContainerWrapper = styled.div.withConfig({ displayName: "InnerContainerWrapper", componentId: "sc-1a1fl7q" }) `
@@ -9529,6 +9951,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,
@@ -10927,6 +11350,13 @@ const StyledSvg = styled(uilibGl.Flex).withConfig({ displayName: "StyledSvg", co
   ${({ $fontColor }) => !!$fontColor && StyledSvgColorMixin};
 `;
 
+const AttachmentIconImg = styled.img.withConfig({ displayName: "AttachmentIconImg", componentId: "sc-1qtgzdf" }) `
+  flex-shrink: 0;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  object-fit: contain;
+`;
+
 const ContainerIconValue = styled(uilibGl.Flex).withConfig({ displayName: "ContainerIconValue", componentId: "sc-1adlcb4" }) ``;
 /**
  * Обёртка иконки плитки. Собственный styled нужен, чтобы до иконки можно было дотянуться стилями:
@@ -11031,6 +11461,12 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex).withConfig({ disp
           width: ${BIG_ICON_SIZE} !important;
           height: ${BIG_ICON_SIZE} !important;
         }
+
+        /* Растровая иконка из атрибута-вложения: её размер тоже задаёт контейнер. */
+        ${AttachmentIconImg} {
+          width: ${BIG_ICON_SIZE};
+          height: ${BIG_ICON_SIZE};
+        }
       }
     `};
 
@@ -15128,14 +15564,55 @@ const StyledIcon = styled(uilibGl.Icon).withConfig({ displayName: "StyledIcon",
   ${({ fontColor }) => !!fontColor && StyledIconFontColorMixin};
 `;
 
+/** Размер иконки-вложения, px, когда в конфиге не задан `options.fontSize`. */
+const ATTACHMENT_ICON_DEFAULT_SIZE = 16;
+
+/**
+ * Иконка из значения атрибута-вложения: первое изображение списка, остальные файлы пропускаются.
+ * Значение приходит JSON-строкой с сервера или массивом после правки — `parseAttachments` понимает оба.
+ * SVG помечается отдельно: его рисуют инлайном, чтобы перекрасить цветом иконки.
+ */
+const getAttachmentIcon = (value) => {
+    const image = parseAttachments(value).find(({ mimeType, name }) => IMAGE_FILE_TYPES.includes(getFileType(mimeType, name)));
+    if (!image)
+        return null;
+    return {
+        url: getResourceUrl(image.link),
+        name: image.name,
+        isSvg: image.mimeType === SVG_MIME_TYPE,
+    };
+};
+
+/**
+ * Иконка из атрибута-вложения. SVG рисуется инлайном и перекрашивается `fontColor`, как у ElementSvg;
+ * растровый файл — картинкой как есть. Изображений среди вложений нет — не рендерится ничего.
+ */
+const AttachmentIcon = React.memo(({ value, fontSize, fontColor, style }) => {
+    const icon = React.useMemo(() => getAttachmentIcon(value), [value]);
+    const size = React.useMemo(() => Number(fontSize) || ATTACHMENT_ICON_DEFAULT_SIZE, [fontSize]);
+    const rasterUrl = React.useMemo(() => (icon && !icon.isSvg ? icon.url : null), [icon]);
+    const imageSrc = useFetchImageWithAuth(rasterUrl);
+    if (!icon)
+        return null;
+    if (icon.isSvg) {
+        return jsxRuntime.jsx(SvgImage, { url: icon.url, width: size, height: size, fontColor: fontColor });
+    }
+    if (!imageSrc)
+        return null;
+    return jsxRuntime.jsx(AttachmentIconImg, { src: imageSrc, alt: icon.name, style: style, "$size": size });
+});
+
 const ElementIcon = React.memo(({ type, elementConfig, ...rest }) => {
     const ctx = useWidgetContext(type);
     const attributes = rest.attributes || ctx.attributes;
     const { value, attributeName, options, style } = elementConfig || {};
     const { fontSize, fontColor } = options || {};
-    const iconValue = React.useMemo(() => attributeName
-        ? attributes?.find(item => item.attributeName === attributeName)?.value
-        : value, [attributeName, attributes, value]);
+    const attribute = React.useMemo(() => (attributeName ? getAttributeByName(attributeName, attributes) : undefined), [attributeName, attributes]);
+    const iconValue = React.useMemo(() => (attributeName ? attribute?.value : value), [attributeName, attribute, value]);
+    // Во вложениях лежит список файлов, а не имя глифа: иконкой становится первое изображение.
+    if (attribute?.subType === api.StringSubType.Attachments) {
+        return jsxRuntime.jsx(AttachmentIcon, { value: attribute.value, fontSize: fontSize, fontColor: fontColor, style: style });
+    }
     return (jsxRuntime.jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor, style: style }));
 });
 
@@ -15192,9 +15669,9 @@ const ElementImage = React.memo(({ type, elementConfig }) => {
 });
 
 const ElementLegend = React.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 = React.useMemo(() => findAnd.returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
     const { data, loading } = useChartData({
         element: chartElement,
@@ -15205,10 +15682,10 @@ const ElementLegend = React.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,
                 };
             });
         }
@@ -15222,7 +15699,7 @@ const ElementLegend = React.memo(({ type, element, elementConfig }) => {
             });
     }, [data, chartElement?.options?.chartType, relatedDataSources, axes, attributes]);
     return !chartElement?.options?.expanded ||
-        expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
+        expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, column: column, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(uilibGl.IconButton).attrs(() => ({
@@ -16790,7 +17267,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);
@@ -18856,6 +19337,15 @@ const StackBar = ({ data, filterName, type, alias, options, fill, renderElement,
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alias || showTotal) && (jsxRuntime.jsxs(StackBarHeader, { children: [jsxRuntime.jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxRuntime.jsxs(StackBarTotal, { children: [jsxRuntime.jsx(StackBarValue, { children: formatValue(total) }), !!units && jsxRuntime.jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsxRuntime.jsx(uilibGl.Tooltip, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => (jsxRuntime.jsx(StackBarContainer, { ref: ref, "$fill": fill, children: renderItems })) })) : (jsxRuntime.jsx(StackBarContainer, { "$fill": fill, children: renderItems }))] }));
 };
 
+/** Горизонтальные подписи осей над телом графика: левая прижата влево, правая — вправо. */
+const AxisTitlesTop = ({ left, right, neutralColor }) => (jsxRuntime.jsxs(AxisTitlesRow, { children: [jsxRuntime.jsx(AxisTitleTop, { "$color": left?.color || neutralColor, title: left?.title, children: left?.title }), jsxRuntime.jsx(AxisTitleTop, { "$color": right?.color || neutralColor, title: right?.title, children: right?.title })] }));
+/** Вертикальная подпись оси сбоку от тела графика. Без подписи ничего не рендерит. */
+const AxisTitleSideSlot = ({ side, axisTitle, neutralColor, plotTop, plotBottom, }) => {
+    if (!axisTitle)
+        return null;
+    return (jsxRuntime.jsx(AxisTitleSideColumn, { "$side": side, "$plotTop": plotTop, "$plotBottom": plotBottom, children: jsxRuntime.jsx(AxisTitleSide, { "$side": side, "$color": axisTitle.color || neutralColor, title: axisTitle.title, children: axisTitle.title }) }));
+};
+
 const Chart = React.memo(({ config, element, elementConfig, type, renderElement }) => {
     const theme = styled.useTheme();
     const { palette } = theme;
@@ -18876,12 +19366,18 @@ const Chart = React.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 = React.useMemo(() => relatedDataSources || [], [relatedDataSources]);
-    const axes = React.useMemo(() => relatedAttributes.filter(({ chartAxis }) => chartAxis === "y"), [relatedAttributes]);
+    const axes = React.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);
@@ -18909,17 +19405,54 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     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]);
+    // Тело линейного графика — это ячейка за вычетом подписей осей. По высоте вычитаем только в
+    // fill: вне fill chartHeight означает высоту самого тела, и обёртка честно растёт на подписи.
+    const lineBodyWidth = React.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 = React.useMemo(() => (fitsHeight ? Math.max(chartHeight - axisTitlesHeight, 0) : chartHeight), [fitsHeight, chartHeight, axisTitlesHeight]);
+    // Обёртка выше тела на строку горизонтальных подписей. В fill вся высота уже отмерена ячейкой,
+    // поэтому прибавлять нечего — иначе тело вылезло бы за нижнюю границу.
+    const lineWrapperHeight = React.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 } = React.useContext(ChartPlotContext);
+    // Положение поля графика известно только после отрисовки: ширину шкал вычисляет d3. Смещение тела
+    // берём из offset-размеров, а не из getBoundingClientRect: они не искажаются масштабом превью и
+    // transform предков, а координаты шкалы всегда в пикселях SVG.
+    const customizeLine = React.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 = React.useMemo(() => getFormattedAttributes(t, (data[0]?.items || []), attributes, element), [attributes, data, element, t]);
     const totalSum = React.useMemo(() => isRelated
@@ -18978,6 +19511,17 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
             left: markersMargin,
         };
     }, [showMarkers, markers?.length]);
+    // Значения шкалы барчарта d3 центрирует на делении, и крайние деления наполовину выступают за поле.
+    // При нулевом поле SVG выступ уходит за SVG, где его срезает BarChartContainer (overflow-x: hidden,
+    // отчего и по вертикали содержимое не visible). Место под выступ резервируем внутри SVG — внешние
+    // размеры обёрток не меняются. Без значений шкалы (showLabels) выступать нечему.
+    const barMargin = React.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 = React.useCallback((name) => isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes), [formattedAttributes, isRelated]);
     const formatTooltipValue = React.useCallback((value, name) => isRelated
         ? tooltipValueFromRelatedFeatures(t, value, relatedAttributes, data[0]?.layerInfo)
@@ -19004,26 +19548,42 @@ const Chart = React.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 (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: 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 (jsxRuntime.jsxs(AnyChartWrapper, { height: lineWrapperHeight, children: [jsxRuntime.jsx(LineChartStyles, {}), jsxRuntime.jsxs(LineChartLayout, { children: [hasTopTitles && (jsxRuntime.jsx(AxisTitlesTop, { left: axisTitles.left, right: axisTitles.right, neutralColor: axisTitleColor })), jsxRuntime.jsxs(LineChartRow, { children: [hasSideTitles && (jsxRuntime.jsx(AxisTitleSideSlot, { side: "left", axisTitle: axisTitles.left, neutralColor: axisTitleColor, plotTop: plotTop, plotBottom: plotBottom })), jsxRuntime.jsx(LineChartBody, { ref: lineBodyRef, children: jsxRuntime.jsx(charts.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(charts.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 && (jsxRuntime.jsx(AxisTitleSideSlot, { side: "right", axisTitle: axisTitles.right, neutralColor: axisTitleColor, plotTop: plotTop, plotBottom: plotBottom }))] })] })] }));
         }
         if (isStackBar) {
             // Вне fill chartHeight — высота самой полосы, и обёртка честно становится выше на строку
@@ -19053,7 +19613,7 @@ const Chart = React.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,
@@ -19069,6 +19629,15 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         formatFilterColor,
         chartWidth,
         chartHeight,
+        lineBodyWidth,
+        lineBodyHeight,
+        lineWrapperHeight,
+        axisTitles,
+        hasTopTitles,
+        hasSideTitles,
+        axisTitleColor,
+        hideLeftAxis,
+        hideRightAxis,
         fitsHeight,
         pieSide,
         fill,
@@ -19078,11 +19647,14 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         formatTooltipValue,
         formatTooltipName,
         filterName,
-        axes,
         labels,
         margin,
+        barMargin,
         renderLineChartTooltip,
-        customize,
+        customizeLine,
+        lineBodyRef,
+        formatLeftTick,
+        formatRightTick,
         primaryColor,
         type,
         elementConfig?.children,
@@ -19099,14 +19671,14 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     ]);
     if (!isVisibleContainer(id, expandable, expanded, expandedContainers))
         return null;
-    const chartBody = (jsxRuntime.jsxs(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : chartHeight, column: column, loading: loading, children: [jsxRuntime.jsx(ChartTooltipStyles, {}), renderChart] }));
+    const chartBody = (jsxRuntime.jsxs(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : isLineChart ? lineWrapperHeight : chartHeight, column: column, loading: loading, children: [jsxRuntime.jsx(ChartTooltipStyles, {}), renderChart] }));
     if (!fill)
         return chartBody;
     // fill: тело центрируется в измеряемой обёртке, ref которой питает ResizeObserver обеими осями.
     return jsxRuntime.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 = React.useMemo(() => getChartAxes(chartElement), [chartElement]);
@@ -19115,7 +19687,7 @@ const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
+    return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, "$column": column, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
 const ContainerChildren = React.memo(({ type, items, isColumn, isMain, renderElement }) => {
@@ -19973,6 +20545,10 @@ const DEFAULT_HEATMAP_STYLE = {
 exports.ALIGNMENTS = ALIGNMENTS;
 exports.ALIGN_ITEMS = ALIGN_ITEMS;
 exports.ATTRIBUTE_ICON_ELEMENT_TYPES = ATTRIBUTE_ICON_ELEMENT_TYPES;
+exports.AXIS_TITLE_GAP = AXIS_TITLE_GAP;
+exports.AXIS_TITLE_LINE_HEIGHT = AXIS_TITLE_LINE_HEIGHT;
+exports.AXIS_TITLE_TOP_GRID_GAP = AXIS_TITLE_TOP_GRID_GAP;
+exports.AXIS_TITLE_TOP_HEIGHT = AXIS_TITLE_TOP_HEIGHT;
 exports.AddButtonRow = AddButtonRow;
 exports.AddFeatureButton = AddFeatureButton;
 exports.AddFeatureContainer = AddFeatureContainer;
@@ -19982,6 +20558,7 @@ exports.AttributeGalleryContainer = AttributeGalleryContainer;
 exports.AttributeLabel = AttributeLabel;
 exports.BASE_CONTAINER_STYLE = BASE_CONTAINER_STYLE;
 exports.BG_IMAGE_SLOT_ID = BG_IMAGE_SLOT_ID;
+exports.CHART_AXIS_ALIGN_JUSTIFY = CHART_AXIS_ALIGN_JUSTIFY;
 exports.CHART_TYPES = CHART_TYPES;
 exports.COMPACT_FRACTION_DIGITS = COMPACT_FRACTION_DIGITS;
 exports.CONFIG_PAGES_ID = CONFIG_PAGES_ID;
@@ -20135,6 +20712,8 @@ exports.HiddenTitleItems = HiddenTitleItems;
 exports.IconContainer = IconContainer;
 exports.ImageContainer = ImageContainer;
 exports.LEFT_PANEL_HEADER_HEIGHT = LEFT_PANEL_HEADER_HEIGHT;
+exports.LINE_CHART_X_LABELS_BLANK = LINE_CHART_X_LABELS_BLANK;
+exports.LINE_CHART_Y_TICKS = LINE_CHART_Y_TICKS;
 exports.Layer = Layer;
 exports.LayerDescription = LayerDescription;
 exports.LayerGroupList = LayerGroupList;
@@ -20214,6 +20793,9 @@ exports.TwoColumnContainer = TwoColumnContainer;
 exports.UploadContainer = UploadContainer;
 exports.VIEW_MODES = VIEW_MODES;
 exports.VoteContainer = VoteContainer;
+exports.X_AXIS_TITLE_GAP = X_AXIS_TITLE_GAP;
+exports.X_AXIS_TITLE_LEGEND_GAP = X_AXIS_TITLE_LEGEND_GAP;
+exports.Y_AXIS_LABEL_OVERHANG = Y_AXIS_LABEL_OVERHANG;
 exports.ZOOM_FILTER_NAME = ZOOM_FILTER_NAME;
 exports.addDataSource = addDataSource;
 exports.addDataSources = addDataSources;
@@ -20273,6 +20855,7 @@ exports.getAttributeIconUrl = getAttributeIconUrl;
 exports.getAttributeValue = getAttributeValue;
 exports.getAttributesConfiguration = getAttributesConfiguration;
 exports.getAverageTrackSize = getAverageTrackSize;
+exports.getAxisSide = getAxisSide;
 exports.getChartAxes = getChartAxes;
 exports.getChartFilterName = getChartFilterName;
 exports.getChartMarkers = getChartMarkers;
@@ -20324,6 +20907,7 @@ exports.getTrackSize = getTrackSize;
 exports.getTrackSizeKey = getTrackSizeKey;
 exports.getTrackSizes = getTrackSizes;
 exports.getWrapperSizeStyle = getWrapperSizeStyle;
+exports.hasAxisConfig = hasAxisConfig;
 exports.hasContainerBgImage = hasContainerBgImage;
 exports.hexToRgba = hexToRgba;
 exports.isCrossOriginUrl = isCrossOriginUrl;
@@ -20340,8 +20924,10 @@ exports.isNotValidSelectedTab = isNotValidSelectedTab;
 exports.isNumeric = isNumeric;
 exports.isObject = isObject;
 exports.isProxyService = isProxyService;
+exports.isRightAxis = isRightAxis;
 exports.isRootOwningContainer = isRootOwningContainer;
 exports.isTreeFilterValue = isTreeFilterValue;
+exports.isValueAxis = isValueAxis;
 exports.isVisibleContainer = isVisibleContainer;
 exports.mapNodeById = mapNodeById;
 exports.mergeAttributeConfigurations = mergeAttributeConfigurations;
@@ -20357,6 +20943,7 @@ exports.pointOptions = pointOptions;
 exports.removeDataSource = removeDataSource;
 exports.removeTracks = removeTracks;
 exports.replaceNodesByIds = replaceNodesByIds;
+exports.resolveAxis = resolveAxis;
 exports.rgbToHex = rgbToHex;
 exports.roundFr = roundFr;
 exports.roundTotalSum = roundTotalSum;
@@ -20384,6 +20971,9 @@ exports.useAttachmentsView = useAttachmentsView;
 exports.useAutoCompleteControl = useAutoCompleteControl;
 exports.useBeforeSave = useBeforeSave;
 exports.useBgImageHost = useBgImageHost;
+exports.useChartAxisAttributes = useChartAxisAttributes;
+exports.useChartAxisTickFormat = useChartAxisTickFormat;
+exports.useChartAxisTitles = useChartAxisTitles;
 exports.useChartChange = useChartChange;
 exports.useChartData = useChartData;
 exports.useConfigDataSources = useConfigDataSources;