@gravity-ui/chartkit 5.7.0 → 5.8.0

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { ChartScale, PreparedAxis } from '../hooks';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../hooks';
 type Props = {
     axis: PreparedAxis;
     width: number;
     height: number;
     scale: ChartScale;
+    split: PreparedSplit;
 };
 export declare const AxisX: React.NamedExoticComponent<Props>;
 export {};

package/build/plugins/d3/renderer/components/AxisX.js

@@ -18,16 +18,26 @@ function getLabelFormatter({ axis, scale }) {
         });
     };
 }
-export const AxisX = React.memo(function AxisX({ axis, width, height, scale }) {
+export const AxisX = React.memo(function AxisX(props) {
+    const { axis, width, height: totalHeight, scale, split } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
+        let tickItems = [];
+        if (axis.grid.enabled) {
+            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
+                var _a, _b;
+                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
+                return [-top, -(top + height)];
+            });
+        }
         const xAxisGenerator = axisBottom({
             scale: scale,
             ticks: {
-                size: axis.grid.enabled ? height * -1 : 0,
+                items: tickItems,
                 labelFormat: getLabelFormatter({ axis, scale }),
                 labelsPaddings: axis.labels.padding,
                 labelsMargin: axis.labels.margin,
@@ -59,6 +69,6 @@ export const AxisX = React.memo(function AxisX({ axis, width, height, scale }) {
                 .text(axis.title.text)
                 .call(setEllipsisForOverflowText, width);
         }
-    }, [axis, width, height, scale]);
+    }, [axis, width, totalHeight, scale, split]);
     return React.createElement("g", { ref: ref });
 });

package/build/plugins/d3/renderer/components/AxisY.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { ChartScale, PreparedAxis } from '../hooks';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../hooks';
 type Props = {
-    axises: PreparedAxis[];
+    axes: PreparedAxis[];
     scale: ChartScale[];
     width: number;
     height: number;
+    split: PreparedSplit;
 };
-export declare const AxisY: ({ axises, width, height, scale }: Props) => React.JSX.Element;
+export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { calculateCos, calculateSin, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
+import { calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
 const b = block('d3-axis');
 function transformLabel(args) {
     const { node, axis } = args;
@@ -51,7 +51,9 @@ function getAxisGenerator(args) {
     }
     return axisGenerator;
 }
-export const AxisY = ({ axises, width, height, scale }) => {
+export const AxisY = (props) => {
+    const { axes, width, height: totalHeight, scale, split } = props;
+    const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -61,15 +63,22 @@ export const AxisY = ({ axises, width, height, scale }) => {
         svgElement.selectAll('*').remove();
         const axisSelection = svgElement
             .selectAll('axis')
-            .data(axises)
+            .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (_d, index) => (index === 0 ? '' : `translate(${width}px, 0)`));
+            .style('transform', (d) => {
+            var _a;
+            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (d.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        });
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
             const yAxisGenerator = getAxisGenerator({
-                axisGenerator: index === 0
+                axisGenerator: d.position === 'left'
                     ? axisLeft(seriesScale)
                     : axisRight(seriesScale),
                 preparedAxis: d,
@@ -136,13 +145,13 @@ export const AxisY = ({ axises, width, height, scale }) => {
             .attr('class', b('title'))
             .attr('text-anchor', 'middle')
             .attr('dy', (d) => -(d.title.margin + d.labels.margin + d.labels.width))
-            .attr('dx', (_d, index) => (index === 0 ? -height / 2 : height / 2))
+            .attr('dx', (d) => (d.position === 'left' ? -height / 2 : height / 2))
             .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (_d, index) => (index === 0 ? 'rotate(-90)' : 'rotate(90)'))
+            .attr('transform', (d) => (d.position === 'left' ? 'rotate(-90)' : 'rotate(90)'))
             .text((d) => d.title.text)
             .each((_d, index, node) => {
             return setEllipsisForOverflowText(select(node[index]), height);
         });
-    }, [axises, width, height, scale]);
+    }, [axes, width, height, scale, split]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

package/build/plugins/d3/renderer/components/Chart.js

@@ -7,10 +7,12 @@ import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShape
 import { getYAxisWidth } from '../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
+import { useSplit } from '../hooks/useSplit';
 import { getClosestPoints } from '../utils/get-closest-data';
 import { AxisX } from './AxisX';
 import { AxisY } from './AxisY';
 import { Legend } from './Legend';
+import { PlotTitle } from './PlotTitle';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
 import './styles.css';
@@ -27,7 +29,10 @@ export const Chart = (props) => {
         data,
     });
     const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
-    const yAxis = React.useMemo(() => getPreparedYAxis({ series: data.series.data, yAxis: data.yAxis }), [data, width]);
+    const yAxis = React.useMemo(() => getPreparedYAxis({
+        series: data.series.data,
+        yAxis: data.yAxis,
+    }), [data]);
     const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
         chartWidth: width,
         chartHeight: height,
@@ -45,12 +50,14 @@ export const Chart = (props) => {
         preparedYAxis: yAxis,
         preparedSeries: preparedSeries,
     });
+    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
         series: preparedSeries,
         xAxis,
         yAxis,
+        split: preparedSplit,
     });
     const { shapes, shapesData } = useShapes({
         boundsWidth,
@@ -62,6 +69,7 @@ export const Chart = (props) => {
         xScale,
         yAxis,
         yScale,
+        split: preparedSplit,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     React.useEffect(() => {
@@ -97,11 +105,14 @@ export const Chart = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
+            React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
+                return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
+            })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));

package/build/plugins/d3/renderer/components/PlotTitle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PreparedPlotTitle } from '../hooks/useSplit/types';
+type Props = {
+    title?: PreparedPlotTitle;
+};
+export declare const PlotTitle: (props: Props) => React.JSX.Element | null;
+export {};

package/build/plugins/d3/renderer/components/PlotTitle.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { block } from '../../../../utils/cn';
+const b = block('d3-plot-title');
+export const PlotTitle = (props) => {
+    const { title } = props;
+    if (!title) {
+        return null;
+    }
+    const { x, y, text, style, height } = title;
+    return (React.createElement("text", { className: b(), dx: x, dy: y, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
+        React.createElement("tspan", null, text)));
+};

package/build/plugins/d3/renderer/components/styles.css

@@ -11,7 +11,7 @@
   alignment-baseline: after-edge;
 }
 
-.chartkit-d3-axis .tick line {
+.chartkit-d3-axis .tick line, .chartkit-d3-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
 
@@ -79,6 +79,12 @@
   fill: var(--g-color-text-primary);
 }
 
+.chartkit-d3-plot-title {
+  font-size: var(--g-text-subheader-3-font-size);
+  font-weight: var(--g-text-subheader-font-weight);
+  fill: var(--g-color-text-secondary);
+}
+
 .chartkit-d3-tooltip[class] {
   --g-popup-border-width: 0;
   pointer-events: none;

package/build/plugins/d3/renderer/hooks/index.d.ts

@@ -7,3 +7,4 @@ export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';
+export * from './useSplit/types';

package/build/plugins/d3/renderer/hooks/index.js

@@ -7,3 +7,4 @@ export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';
+export * from './useSplit/types';

package/build/plugins/d3/renderer/hooks/useAxisScales/index.d.ts

@@ -1,7 +1,8 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
 import { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
 import type { PreparedAxis } from '../useChartOptions/types';
-import { PreparedSeries } from '../useSeries/types';
+import type { PreparedSeries } from '../useSeries/types';
+import type { PreparedSplit } from '../useSplit/types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
@@ -9,6 +10,7 @@ type Args = {
     series: PreparedSeries[];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
+    split: PreparedSplit;
 };
 type ReturnValue = {
     xScale?: ChartScale;

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
@@ -31,7 +31,7 @@ export function createYScale(axis, series, boundsHeight) {
                 const [domainYMin, domainMax] = extent(domain);
                 const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
                 let yMaxValue = domainMax;
-                if (series.some((s) => CHART_SERIES_WITH_VOLUME.includes(s.type))) {
+                if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
                     yMaxValue = Math.max(yMaxValue, 0);
                 }
                 return scaleLinear().domain([yMinValue, yMaxValue]).range(range).nice();
@@ -73,8 +73,11 @@ function calculateXAxisPadding(series) {
         switch (s.type) {
             case 'bar-y': {
                 // Since labels can be located to the right of the bar, need to add an additional space
-                const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
-                result = Math.max(result, labelsMaxWidth);
+                const inside = get(s, 'dataLabels.inside');
+                if (!inside) {
+                    const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
+                    result = Math.max(result, labelsMaxWidth);
+                }
                 break;
             }
         }
@@ -134,7 +137,7 @@ export function createXScale(axis, series, boundsWidth) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
@@ -147,7 +150,8 @@ const createScales = (args) => {
                 return seriesAxisIndex === index;
             });
             const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
-            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, boundsHeight);
+            const axisHeight = getAxisHeight({ boundsHeight, split });
+            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, axisHeight);
         }),
     };
 };
@@ -155,15 +159,21 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
-    const scales = React.useMemo(() => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    return React.useMemo(() => {
         let xScale;
         let yScale;
         const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
         if (hasAxisRelatedSeries) {
-            ({ xScale, yScale } = createScales({ boundsWidth, boundsHeight, series, xAxis, yAxis }));
+            ({ xScale, yScale } = createScales({
+                boundsWidth,
+                boundsHeight,
+                series,
+                xAxis,
+                yAxis,
+                split,
+            }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
-    return scales;
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split]);
 };

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.js

@@ -16,6 +16,17 @@ export function getYAxisWidth(axis) {
     return result;
 }
 export function getWidthOccupiedByYAxis(args) {
-    const { preparedAxis = [] } = args;
-    return preparedAxis.reduce((sum, axis) => sum + getYAxisWidth(axis), 0);
+    const { preparedAxis } = args;
+    let leftAxisWidth = 0;
+    let rightAxisWidth = 0;
+    preparedAxis === null || preparedAxis === void 0 ? void 0 : preparedAxis.forEach((axis) => {
+        const axisWidth = getYAxisWidth(axis);
+        if (axis.position === 'right') {
+            rightAxisWidth = Math.max(rightAxisWidth, axisWidth);
+        }
+        else {
+            leftAxisWidth = Math.max(leftAxisWidth, axisWidth);
+        }
+    });
+    return leftAxisWidth + rightAxisWidth;
 }

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -28,6 +28,7 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
         pixelInterval?: number;
     };
     position: 'left' | 'right' | 'top' | 'bottom';
+    plotIndex: number;
 };
 export type PreparedTitle = ChartKitWidgetData['title'] & {
     height: number;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.d.ts

@@ -1,7 +1,7 @@
-import type { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
+import type { ChartKitWidgetSeries, ChartKitWidgetXAxis } from '../../../../../types';
 import type { PreparedAxis } from './types';
 export declare const getPreparedXAxis: ({ xAxis, series, width, }: {
-    xAxis?: ChartKitWidgetAxis | undefined;
+    xAxis?: import("../../../../../types").ChartKitWidgetAxis | undefined;
     series: ChartKitWidgetSeries[];
     width: number;
 }) => PreparedAxis;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const scale = createXScale(axis, series, width);
@@ -36,6 +36,17 @@ function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
+function getAxisMin(axis, series) {
+    const min = axis === null || axis === void 0 ? void 0 : axis.min;
+    if (typeof min === 'undefined' &&
+        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_X_AXIS.includes(s.type)))) {
+        return series.reduce((minValue, s) => {
+            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'x', 0)), 0);
+            return Math.min(minValue, minYValue);
+        }, 0);
+    }
+    return min;
+}
 export const getPreparedXAxis = ({ xAxis, series, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
@@ -71,7 +82,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
                 ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
                 : 0,
         },
-        min: get(xAxis, 'min'),
+        min: getAxisMin(xAxis, series),
         maxPadding: get(xAxis, 'maxPadding', 0.01),
         grid: {
             enabled: get(xAxis, 'grid.enabled', true),
@@ -80,6 +91,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             pixelInterval: get(xAxis, 'ticks.pixelInterval'),
         },
         position: 'bottom',
+        plotIndex: 0,
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.d.ts

@@ -1,6 +1,6 @@
-import type { ChartKitWidgetData, ChartKitWidgetSeries } from '../../../../../types';
+import type { ChartKitWidgetSeries, ChartKitWidgetYAxis } from '../../../../../types';
 import type { PreparedAxis } from './types';
 export declare const getPreparedYAxis: ({ series, yAxis, }: {
     series: ChartKitWidgetSeries[];
-    yAxis: ChartKitWidgetData['yAxis'];
+    yAxis: ChartKitWidgetYAxis[] | undefined;
 }) => PreparedAxis[];

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -25,7 +25,7 @@ const getAxisLabelMaxWidth = (args) => {
 function getAxisMin(axis, series) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
     if (typeof min === 'undefined' &&
-        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME.includes(s.type)))) {
+        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
         return series.reduce((minValue, s) => {
             switch (s.type) {
                 case 'waterfall': {
@@ -42,8 +42,16 @@ function getAxisMin(axis, series) {
     return min;
 }
 export const getPreparedYAxis = ({ series, yAxis, }) => {
-    return (yAxis || [{}]).map((axisItem, index) => {
-        const axisPosition = index === 0 ? 'left' : 'right';
+    const axisByPlot = [];
+    const axisItems = yAxis || [{}];
+    return axisItems.map((axisItem) => {
+        const plotIndex = get(axisItem, 'plotIndex', 0);
+        const firstPlotAxis = !axisByPlot[plotIndex];
+        if (firstPlotAxis) {
+            axisByPlot[plotIndex] = [];
+        }
+        axisByPlot[plotIndex].push(axisItem);
+        const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
         const labelsEnabled = get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
@@ -86,12 +94,13 @@ export const getPreparedYAxis = ({ series, yAxis, }) => {
             min: getAxisMin(axisItem, series),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
-                enabled: get(axisItem, 'grid.enabled', index === 0),
+                enabled: get(axisItem, 'grid.enabled', firstPlotAxis),
             },
             ticks: {
                 pixelInterval: get(axisItem, 'ticks.pixelInterval'),
             },
-            position: axisPosition,
+            position: get(axisItem, 'position', defaultAxisPosition),
+            plotIndex: get(axisItem, 'plotIndex', 0),
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.js

@@ -13,9 +13,10 @@ function prepareDataLabels(series) {
             style,
         })
         : {};
+    const inside = series.stacking === 'percent' ? true : get(series, 'dataLabels.inside', false);
     return {
         enabled,
-        inside: get(series, 'dataLabels.inside', false),
+        inside,
         style,
         maxHeight,
         maxWidth,

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dispatch } from 'd3';
-import type { PreparedSeries, PreparedSeriesOptions } from '../';
+import type { PreparedSeries, PreparedSeriesOptions, PreparedSplit } from '../';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
 import type { PreparedAreaData } from './area/types';
@@ -24,6 +24,7 @@ type Args = {
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
     yScale?: ChartScale[];
+    split: PreparedSplit;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -15,7 +15,7 @@ import { prepareTreemapData } from './treemap/prepare-data';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, } = args;
     const shapesComponents = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -77,6 +77,7 @@ export const useShapes = (args) => {
                             xScale,
                             yAxis,
                             yScale,
+                            split,
                         });
                         acc.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
                         shapesData.push(...preparedData);

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.d.ts

@@ -1,11 +1,13 @@
-import { ChartScale } from '../../useAxisScales';
-import { PreparedAxis } from '../../useChartOptions/types';
-import { PreparedLineSeries } from '../../useSeries/types';
-import { PreparedLineData } from './types';
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedLineSeries } from '../../useSeries/types';
+import type { PreparedSplit } from '../../useSplit/types';
+import type { PreparedLineData } from './types';
 export declare const prepareLineData: (args: {
     series: PreparedLineSeries[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
+    split: PreparedSplit;
 }) => PreparedLineData[];

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.js

@@ -27,15 +27,18 @@ function getLabelData(point, series, xMax) {
     return labelData;
 }
 export const prepareLineData = (args) => {
-    const { series, xAxis, xScale, yScale } = args;
-    const yAxis = args.yAxis[0];
+    const { series, xAxis, yAxis, xScale, yScale, split } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
     return series.reduce((acc, s) => {
+        var _a;
+        const yAxisIndex = s.yAxis;
+        const seriesYAxis = yAxis[yAxisIndex];
+        const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, xAxis, xScale }),
-            y: getYValue({ point: d, yAxis, yScale: seriesYScale }),
+            y: yAxisTop + getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
             active: true,
             data: d,
             series: s,

package/build/plugins/d3/renderer/hooks/useSplit/index.d.ts

@@ -0,0 +1,14 @@
+import type { ChartKitWidgetSplit } from '../../../../../types';
+import type { PreparedSplit } from './types';
+type UseSplitArgs = {
+    split?: ChartKitWidgetSplit;
+    boundsHeight: number;
+    chartWidth: number;
+};
+export declare function getPlotHeight(args: {
+    split: ChartKitWidgetSplit | undefined;
+    boundsHeight: number;
+    gap: number;
+}): number;
+export declare const useSplit: (args: UseSplitArgs) => PreparedSplit;
+export {};

package/build/plugins/d3/renderer/hooks/useSplit/index.js

@@ -0,0 +1,57 @@
+import get from 'lodash/get';
+import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
+const DEFAULT_TITLE_FONT_SIZE = '15px';
+const TITLE_TOP_BOTTOM_PADDING = 8;
+function preparePlotTitle(args) {
+    const { title, plotIndex, plotHeight, chartWidth, gap } = args;
+    const titleText = (title === null || title === void 0 ? void 0 : title.text) || '';
+    const titleStyle = {
+        fontSize: get(title, 'style.fontSize', DEFAULT_TITLE_FONT_SIZE),
+        fontWeight: get(title, 'style.fontWeight'),
+    };
+    const titleHeight = titleText
+        ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle }) +
+            TITLE_TOP_BOTTOM_PADDING * 2
+        : 0;
+    const top = plotIndex * (plotHeight + gap);
+    return {
+        text: titleText,
+        x: chartWidth / 2,
+        y: top + titleHeight / 2,
+        style: titleStyle,
+        height: titleHeight,
+    };
+}
+export function getPlotHeight(args) {
+    const { split, boundsHeight, gap } = args;
+    const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
+    if (plots.length > 1) {
+        return (boundsHeight - gap * (plots.length - 1)) / plots.length;
+    }
+    return boundsHeight;
+}
+export const useSplit = (args) => {
+    var _a;
+    const { split, boundsHeight, chartWidth } = args;
+    const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
+    const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
+    const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
+    return {
+        plots: plots.map((p, index) => {
+            const title = preparePlotTitle({
+                title: p.title,
+                plotIndex: index,
+                gap: splitGap,
+                plotHeight,
+                chartWidth,
+            });
+            const top = index * (plotHeight + splitGap);
+            return {
+                top: top + title.height,
+                height: plotHeight - title.height,
+                title,
+            };
+        }),
+        gap: splitGap,
+    };
+};

package/build/plugins/d3/renderer/hooks/useSplit/types.d.ts

@@ -0,0 +1,17 @@
+import type { BaseTextStyle } from '../../../../../types';
+export type PreparedSplit = {
+    plots: PreparedPlot[];
+    gap: number;
+};
+export type PreparedPlot = {
+    title: PreparedPlotTitle;
+    top: number;
+    height: number;
+};
+export type PreparedPlotTitle = {
+    x: number;
+    y: number;
+    text: string;
+    style?: Partial<BaseTextStyle>;
+    height: number;
+};

package/build/plugins/d3/renderer/hooks/useSplit/types.js

@@ -0,0 +1 @@
+export {};

package/build/plugins/d3/renderer/utils/axis-generators/bottom.d.ts

@@ -11,7 +11,7 @@ type AxisBottomArgs = {
         labelsStyle?: BaseTextStyle;
         labelsMaxWidth?: number;
         labelsLineHeight: number;
-        size: number;
+        items: [number, number][];
         rotation: number;
     };
     domain: {

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -1,20 +1,22 @@
-import { select } from 'd3';
+import { path, select } from 'd3';
 import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
 import { calculateCos, calculateSin } from '../math';
 import { getLabelsSize, setEllipsisForOverflowText } from '../text';
 function addDomain(selection, options) {
     const { size, color } = options;
-    selection
+    const domainPath = selection
         .selectAll('.domain')
         .data([null])
         .enter()
         .insert('path', '.tick')
         .attr('class', 'domain')
-        .attr('stroke', color || 'currentColor')
         .attr('d', `M0,0V0H${size}`);
+    if (color) {
+        domainPath.style('stroke', color);
+    }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, size: tickSize, count: ticksCount, maxTickCount, rotation, }, domain: { size: domainSize, color: domainColor }, } = args;
+    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation, }, domain: { size: domainSize, color: domainColor }, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -26,22 +28,28 @@ export function axisBottom(args) {
         var _a, _b;
         const x = ((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.x) || 0;
         const right = x + domainSize;
-        let transform = `translate(0, ${labelHeight + labelsMargin}px)`;
+        const top = -tickItems[0][0] || 0;
+        let transform = `translate(0, ${labelHeight + labelsMargin - top}px)`;
         if (rotation) {
-            const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin;
+            const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
             let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
             if (Math.abs(rotation) % 360 === 90) {
                 labelsOffsetLeft += ((rotation > 0 ? -1 : 1) * labelHeight) / 2;
             }
             transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
         }
+        const tickPath = path();
+        tickItems.forEach(([start, end]) => {
+            tickPath.moveTo(0, start);
+            tickPath.lineTo(0, end);
+        });
         selection
             .selectAll('.tick')
             .data(values)
             .order()
             .join((el) => {
             const tick = el.append('g').attr('class', 'tick');
-            tick.append('line').attr('stroke', 'currentColor').attr('y2', tickSize);
+            tick.append('path').attr('d', tickPath.toString()).attr('stroke', 'currentColor');
             tick.append('text')
                 .text(labelFormat)
                 .attr('fill', 'currentColor')
@@ -56,7 +64,7 @@ export function axisBottom(args) {
             return tick;
         })
             .attr('transform', function (d) {
-            return `translate(${position(d) + offset},0)`;
+            return `translate(${position(d) + offset}, ${top})`;
         });
         // Remove tick that has the same x coordinate like domain
         selection

package/build/plugins/d3/renderer/utils/axis.d.ts

@@ -1,5 +1,5 @@
-import { AxisDomain, AxisScale, ScaleBand } from 'd3';
-import { PreparedAxis } from '../hooks';
+import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
+import type { PreparedAxis, PreparedSplit } from '../hooks';
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;
@@ -20,3 +20,7 @@ export declare function getMaxTickCount({ axis, width }: {
     axis: PreparedAxis;
     width: number;
 }): number;
+export declare function getAxisHeight(args: {
+    split: PreparedSplit;
+    boundsHeight: number;
+}): number;

package/build/plugins/d3/renderer/utils/axis.js

@@ -41,3 +41,10 @@ export function getMaxTickCount({ axis, width }) {
     const minTickWidth = parseInt(axis.labels.style.fontSize) + axis.labels.padding;
     return Math.floor(width / minTickWidth);
 }
+export function getAxisHeight(args) {
+    const { split, boundsHeight } = args;
+    if (split.plots.length > 1) {
+        return split.plots[0].height;
+    }
+    return boundsHeight;
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -8,7 +8,8 @@ export * from './axis';
 export * from './labels';
 export * from './symbol';
 export * from './series';
-export declare const CHART_SERIES_WITH_VOLUME: ChartKitWidgetSeries['type'][];
+export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartKitWidgetSeries['type'][];
+export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartKitWidgetSeries['type'][];
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
@@ -39,7 +40,7 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
         category: string;
     }[];
 };
-export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => number[];
+export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => unknown[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
 export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];

package/build/plugins/d3/renderer/utils/index.js

@@ -15,11 +15,12 @@ export * from './labels';
 export * from './symbol';
 export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
-export const CHART_SERIES_WITH_VOLUME = [
+export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
     'area',
     'waterfall',
 ];
+export const CHART_SERIES_WITH_VOLUME_ON_X_AXIS = ['bar-y'];
 /**
  * Checks whether the series should be drawn with axes.
  *
@@ -38,10 +39,45 @@ export function isSeriesWithNumericalYValues(series) {
 export function isSeriesWithCategoryValues(series) {
     return isAxisRelatedSeries(series);
 }
+function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y') {
+    const acc = [];
+    const stackedSeries = group(seriesList, getSeriesStackId);
+    Array.from(stackedSeries).forEach(([_stackId, seriesStack]) => {
+        const values = {};
+        seriesStack.forEach((singleSeries) => {
+            const data = new Map();
+            singleSeries.data.forEach((point) => {
+                const key = String(point[keyAttr]);
+                let value = 0;
+                if (valueAttr in point && typeof point[valueAttr] === 'number') {
+                    value = point[valueAttr];
+                }
+                if (data.has(key)) {
+                    value = Math.max(value, data.get(key));
+                }
+                data.set(key, value);
+            });
+            Array.from(data).forEach(([key, value]) => {
+                values[key] = (values[key] || 0) + value;
+            });
+        });
+        acc.push(...Object.values(values));
+    });
+    return acc;
+}
 export const getDomainDataXBySeries = (series) => {
-    return series.reduce((acc, s) => {
-        if (isSeriesWithNumericalXValues(s)) {
-            acc.push(...s.data.map((d) => d.x));
+    const groupedSeries = group(series, (item) => item.type);
+    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+        switch (type) {
+            case 'bar-y': {
+                acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
+                break;
+            }
+            default: {
+                seriesList.filter(isSeriesWithNumericalXValues).forEach((s) => {
+                    acc.push(...s.data.map((d) => d.x));
+                });
+            }
         }
         return acc;
     }, []);
@@ -58,28 +94,7 @@ export const getDomainDataYBySeries = (series) => {
         switch (type) {
             case 'area':
             case 'bar-x': {
-                const stackedSeries = group(seriesList, getSeriesStackId);
-                Array.from(stackedSeries).forEach(([_stackId, seriesStack]) => {
-                    const values = {};
-                    seriesStack.forEach((singleSeries) => {
-                        const data = new Map();
-                        singleSeries.data.forEach((point) => {
-                            const key = String(point.x);
-                            let value = 0;
-                            if (point.y && typeof point.y === 'number') {
-                                value = point.y;
-                            }
-                            if (data.has(key)) {
-                                value = Math.max(value, data.get(key));
-                            }
-                            data.set(key, value);
-                        });
-                        Array.from(data).forEach(([key, value]) => {
-                            values[key] = (values[key] || 0) + value;
-                        });
-                    });
-                    acc.push(...Object.values(values));
-                });
+                acc.push(...getDomainDataForStackedSeries(seriesList));
                 break;
             }
             case 'waterfall': {

package/build/types/widget-data/axis.d.ts

@@ -65,3 +65,13 @@ export type ChartKitWidgetAxis = {
      * */
     maxPadding?: number;
 };
+export type ChartKitWidgetXAxis = ChartKitWidgetAxis;
+export type ChartKitWidgetYAxis = ChartKitWidgetAxis & {
+    /** Axis location.
+     * Possible values - 'left' and 'right'.
+     * */
+    position?: 'left' | 'right';
+    /** Property for splitting charts. Determines which area the axis is located in.
+     * */
+    plotIndex?: number;
+};

package/build/types/widget-data/bar-y.d.ts

@@ -45,7 +45,8 @@ export type BarYSeries<T = any> = BaseSeries & {
     grouping?: boolean;
     dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
         /**
-         * Whether to align the data label inside or outside the box
+         * Whether to align the data label inside or outside the box.
+         * For charts with a percentage stack, it is always true.
          *
          * @default false
          * */

package/build/types/widget-data/index.d.ts

@@ -1,7 +1,8 @@
-import type { ChartKitWidgetAxis } from './axis';
+import type { ChartKitWidgetXAxis, ChartKitWidgetYAxis } from './axis';
 import type { ChartKitWidgetChart } from './chart';
 import type { ChartKitWidgetLegend } from './legend';
 import type { ChartKitWidgetSeries, ChartKitWidgetSeriesOptions } from './series';
+import type { ChartKitWidgetSplit } from './split';
 import type { ChartKitWidgetTitle } from './title';
 import type { ChartKitWidgetTooltip } from './tooltip';
 export * from './axis';
@@ -15,6 +16,7 @@ export * from './bar-y';
 export * from './area';
 export * from './line';
 export * from './series';
+export * from './split';
 export * from './title';
 export * from './tooltip';
 export * from './halo';
@@ -29,6 +31,9 @@ export type ChartKitWidgetData<T = any> = {
     };
     title?: ChartKitWidgetTitle;
     tooltip?: ChartKitWidgetTooltip<T>;
-    xAxis?: ChartKitWidgetAxis;
-    yAxis?: ChartKitWidgetAxis[];
+    xAxis?: ChartKitWidgetXAxis;
+    yAxis?: ChartKitWidgetYAxis[];
+    /** Setting for displaying charts on different plots.
+     * It can be used to visualize related information on multiple charts. */
+    split?: ChartKitWidgetSplit;
 };

package/build/types/widget-data/index.js

@@ -9,6 +9,7 @@ export * from './bar-y';
 export * from './area';
 export * from './line';
 export * from './series';
+export * from './split';
 export * from './title';
 export * from './tooltip';
 export * from './halo';

package/build/types/widget-data/split.d.ts

@@ -0,0 +1,13 @@
+import type { BaseTextStyle } from './base';
+export type SplitPlotOptions = {
+    title?: {
+        text: string;
+        style?: Partial<BaseTextStyle>;
+    };
+};
+export type ChartKitWidgetSplit = {
+    enable: boolean;
+    layout?: 'vertical';
+    gap?: string | number;
+    plots?: SplitPlotOptions[];
+};

package/build/types/widget-data/split.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",