@gravity-ui/chartkit 5.6.0 → 5.8.0

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 { 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;
@@ -24,8 +24,8 @@ const getAxisLabelMaxWidth = (args) => {
 };
 function getAxisMin(axis, series) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    const seriesWithVolume = ['bar-x', 'area', 'waterfall'];
-    if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => seriesWithVolume.includes(s.type)))) {
+    if (typeof min === 'undefined' &&
+        (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': {
@@ -33,7 +33,8 @@ function getAxisMin(axis, series) {
                     return Math.min(minValue, minSubTotal);
                 }
                 default: {
-                    return minValue;
+                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
+                    return Math.min(minValue, minYValue);
                 }
             }
         }, 0);
@@ -41,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),
@@ -85,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/area/prepare-data.js

@@ -1,5 +1,5 @@
 import { group, sort } from 'd3';
-import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
@@ -28,9 +28,12 @@ function getLabelData(point, series, xMax) {
     return labelData;
 }
 function getXValues(series, xAxis, xScale) {
+    const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
         s.data.forEach((d) => {
-            const key = String(d.x);
+            const key = String(xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x);
             if (!acc.has(key)) {
                 acc.set(key, getXValue({ point: d, xAxis, xScale }));
             }
@@ -38,7 +41,7 @@ function getXValues(series, xAxis, xScale) {
         return acc;
     }, new Map());
     if (xAxis.type === 'category') {
-        return (xAxis.categories || []).reduce((acc, category) => {
+        return categories.reduce((acc, category) => {
             const xValue = xValues.get(category);
             if (typeof xValue === 'number') {
                 acc.push([category, xValue]);
@@ -62,9 +65,16 @@ export const prepareAreaData = (args) => {
             const yAxisIndex = s.yAxis;
             const seriesYAxis = yAxis[yAxisIndex];
             const seriesYScale = yScale[yAxisIndex];
-            const [yMin, _yMax] = seriesYScale.range();
+            const yMin = getYValue({ point: { y: 0 }, yAxis: seriesYAxis, yScale: seriesYScale });
             const seriesData = s.data.reduce((m, d) => {
-                return m.set(String(d.x), d);
+                const key = String(xAxis.type === 'category'
+                    ? getDataCategoryValue({
+                        axisDirection: 'x',
+                        categories: xAxis.categories || [],
+                        data: d,
+                    })
+                    : d.x);
+                return m.set(key, d);
             }, new Map());
             const points = xValues.reduce((pointsAcc, [x, xValue]) => {
                 const accumulatedYValue = accumulatedYValues.get(x) || 0;

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

@@ -110,11 +110,13 @@ export const prepareBarXData = (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const y = seriesYScale(yValue.data.y);
-                const height = plotHeight - y;
+                const yDataValue = yValue.data.y;
+                const y = seriesYScale(yDataValue);
+                const base = seriesYScale(0);
+                const height = yDataValue > 0 ? base - y : y - base;
                 const barData = {
                     x,
-                    y: y - stackHeight,
+                    y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
                     width: rectWidth,
                     height,
                     opacity: get(yValue.data, 'opacity', null),

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

@@ -81,7 +81,8 @@ export const prepareBarYData = (args) => {
         const stacks = Object.values(val);
         const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            let stackSum = 0;
+            const base = xLinearScale(0);
+            let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
@@ -97,9 +98,10 @@ export const prepareBarYData = (args) => {
                     center = scale(Number(yValue));
                 }
                 const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
-                const width = xLinearScale(data.x);
+                const xValue = Number(data.x);
+                const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
                 stackItems.push({
-                    x: stackSum,
+                    x: xValue > 0 ? stackSum : stackSum - width,
                     y,
                     width,
                     height: barHeight,

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,6 +8,8 @@ export * from './axis';
 export * from './labels';
 export * from './symbol';
 export * from './series';
+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'];
@@ -38,7 +40,8 @@ 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[];
 export declare const getOnlyVisibleSeries: <T extends {

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

@@ -15,6 +15,12 @@ export * from './labels';
 export * from './symbol';
 export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
+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.
  *
@@ -33,42 +39,62 @@ 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;
     }, []);
 };
+export function getDefaultMaxXAxisValue(series) {
+    if (series.some((s) => s.type === 'bar-y')) {
+        return 0;
+    }
+    return undefined;
+}
 export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         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/plugins/highcharts/renderer/helpers/config/config.js

@@ -1328,8 +1328,8 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     // Callback setExtremes used because of it obligatory invocation on every zoom event
                     // setTimeout used because of absence resetZoomButton node in dom on first zoom event
                     setTimeout(() => {
-                        var _a;
-                        const text = (_a = this.chart.resetZoomButton) === null || _a === void 0 ? void 0 : _a.text;
+                        var _a, _b;
+                        const text = (_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resetZoomButton) === null || _b === void 0 ? void 0 : _b.text;
                         if (text) {
                             text.translate(0, -6);
                         }

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';