@gravity-ui/charts 1.43.0 → 1.44.0

package/dist/cjs/components/ChartInner/index.js

@@ -71,7 +71,7 @@ export const ChartInner = (props) => {
         value: allPreparedSeries,
         delay: DEBOUNCED_VALUE_DELAY,
     });
-    const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
+    const { handleChartClick, handlePointerLeave, throttledHandlePointerMove, throttledHandleTouchMove, } = useChartInnerHandlers({
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,
@@ -256,7 +256,7 @@ export const ChartInner = (props) => {
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
-        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
+        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle)),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
@@ -283,7 +283,7 @@ export const ChartInner = (props) => {
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
             // when starting to select an area, the tooltip remains in the position where the selection began
-            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
+            onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -23,8 +23,8 @@ type Props = {
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;
-    handleMouseLeave: React.MouseEventHandler<SVGSVGElement>;
-    throttledHandleMouseMove: import("lodash").DebouncedFuncLeading<React.MouseEventHandler<SVGSVGElement>> | undefined;
-    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>> | undefined;
+    handlePointerLeave: React.PointerEventHandler<SVGSVGElement>;
+    throttledHandlePointerMove: import("lodash").DebouncedFuncLeading<React.PointerEventHandler<SVGSVGElement>>;
+    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>>;
 };
 export {};

package/dist/cjs/components/ChartInner/useChartInnerHandlers.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { pointer } from 'd3-selection';
 import get from 'lodash/get';
 import throttle from 'lodash/throttle';
-import { IS_TOUCH_ENABLED } from '../../core/constants';
 import { EventType } from '../../core/utils';
 import { getClosestPoints } from '../../core/utils/get-closest-data';
 import { getHoveredPlots } from '../../core/utils/get-hovered-plots';
@@ -47,18 +46,19 @@ export function useChartInnerHandlers(props) {
             hoveredPlotBands: plotBands,
         }, event);
     };
-    const handleMouseMove = (event) => {
+    const handlePointerMove = (event) => {
+        if (event.pointerType === 'touch') {
+            return;
+        }
         const [pointerX, pointerY] = pointer(event, svgContainer);
         handleMove([pointerX, pointerY], event);
     };
-    const throttledHandleMouseMove = IS_TOUCH_ENABLED
-        ? undefined
-        : throttle(handleMouseMove, tooltipThrottle);
-    const handleMouseLeave = (event) => {
+    const throttledHandlePointerMove = throttle(handlePointerMove, tooltipThrottle);
+    const handlePointerLeave = (event) => {
         if (tooltipPinned) {
             return;
         }
-        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
+        throttledHandlePointerMove.cancel();
         dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
     };
@@ -67,9 +67,7 @@ export function useChartInnerHandlers(props) {
         const [pointerX, pointerY] = pointer(touch, svgContainer);
         handleMove([pointerX, pointerY], event);
     };
-    const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, tooltipThrottle)
-        : undefined;
+    const throttledHandleTouchMove = throttle(handleTouchMove, tooltipThrottle);
     const handleChartClick = (event) => {
         const [pointerX, pointerY] = pointer(event, svgContainer);
         const x = pointerX - boundsOffsetLeft;
@@ -116,8 +114,8 @@ export function useChartInnerHandlers(props) {
     };
     return {
         handleChartClick,
-        handleMouseLeave,
-        throttledHandleMouseMove,
+        handlePointerLeave,
+        throttledHandlePointerMove,
         throttledHandleTouchMove,
     };
 }

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -48,15 +48,19 @@ export function useChartInnerProps(props) {
         currentRunRef.current++;
         const currentRun = currentRunRef.current;
         (async function () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
-            const preparedTitle = await getPreparedTitle({ title: data.title, chartWidth: width });
+            const preparedTitle = await getPreparedTitle({
+                title: data.title,
+                chartWidth: width,
+                chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
+            });
             const preparedChart = getPreparedChart({
                 chart: data.chart,
                 seriesData: data.series.data,
                 preparedTitle,
             });
-            const colors = (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
+            const colors = (_b = data.colors) !== null && _b !== void 0 ? _b : DEFAULT_PALETTE;
             const normalizedSeriesData = getSortedSeriesData({
                 seriesData: data.series.data,
                 xAxis: data.xAxis,
@@ -79,7 +83,7 @@ export function useChartInnerProps(props) {
                 });
             }
             else {
-                allPreparedSeries = (_c = (_b = prevStateValue.current) === null || _b === void 0 ? void 0 : _b.allPreparedSeries) !== null && _c !== void 0 ? _c : [];
+                allPreparedSeries = (_d = (_c = prevStateValue.current) === null || _c === void 0 ? void 0 : _c.allPreparedSeries) !== null && _d !== void 0 ? _d : [];
             }
             const activeLegendItems = selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : getActiveLegendItems(allPreparedSeries);
             const visiblePreparedSeries = getVisibleSeries({

package/dist/cjs/components/ChartInner/utils/title.d.ts

@@ -1,6 +1,7 @@
 import type { PreparedTitle } from '../../../hooks/types';
-import type { ChartData } from '../../../types';
-export declare const getPreparedTitle: ({ title, chartWidth, }: {
+import type { ChartData, ChartMargin } from '../../../types';
+export declare const getPreparedTitle: ({ title, chartWidth, chartMargin, }: {
     title: ChartData["title"];
     chartWidth: number;
+    chartMargin?: Partial<ChartMargin>;
 }) => Promise<PreparedTitle | undefined>;

package/dist/cjs/components/ChartInner/utils/title.js

@@ -2,25 +2,30 @@ import get from 'lodash/get';
 import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const DEFAULT_TITLE_MARGIN = 10;
-export const getPreparedTitle = async ({ title, chartWidth, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const chartMarginTop = (_a = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.top) !== null && _a !== void 0 ? _a : 0;
+    const chartMarginLeft = (_b = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.left) !== null && _b !== void 0 ? _b : 0;
+    const chartMarginRight = (_c = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.right) !== null && _c !== void 0 ? _c : 0;
     const titleText = get(title, 'text');
     const titleStyle = {
-        fontSize: (_b = (_a = title === null || title === void 0 ? void 0 : title.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_FONT_SIZE,
-        fontWeight: (_d = (_c = title === null || title === void 0 ? void 0 : title.style) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : 'var(--g-text-subheader-font-weight)',
-        fontColor: (_f = (_e = title === null || title === void 0 ? void 0 : title.style) === null || _e === void 0 ? void 0 : _e.fontColor) !== null && _f !== void 0 ? _f : 'var(--g-color-text-primary)',
+        fontSize: (_e = (_d = title === null || title === void 0 ? void 0 : title.style) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : DEFAULT_TITLE_FONT_SIZE,
+        fontWeight: (_g = (_f = title === null || title === void 0 ? void 0 : title.style) === null || _f === void 0 ? void 0 : _f.fontWeight) !== null && _g !== void 0 ? _g : 'var(--g-text-subheader-font-weight)',
+        fontColor: (_j = (_h = title === null || title === void 0 ? void 0 : title.style) === null || _h === void 0 ? void 0 : _h.fontColor) !== null && _j !== void 0 ? _j : 'var(--g-color-text-primary)',
     };
     if (!titleText) {
         return undefined;
     }
     const getTitleTextSize = getTextSizeFn({ style: titleStyle });
-    const maxRowCount = (_g = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _g !== void 0 ? _g : 1;
+    const maxRowCount = (_k = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _k !== void 0 ? _k : 1;
     const contentRows = [];
+    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
+    const xCenter = chartMarginLeft + usableWidth / 2;
     if (maxRowCount > 1) {
         let titleTextRows = await wrapText({
             text: titleText,
             style: titleStyle,
-            width: chartWidth,
+            width: usableWidth,
             getTextSize: getTitleTextSize,
         });
         titleTextRows = titleTextRows.reduce((acc, row, index) => {
@@ -38,15 +43,15 @@ export const getPreparedTitle = async ({ title, chartWidth, }) => {
             if (i === titleTextRows.length - 1) {
                 textRowContent = await getTextWithElipsis({
                     text: textRowContent,
-                    maxWidth: chartWidth,
+                    maxWidth: usableWidth,
                     getTextWidth: async (s) => (await getTitleTextSize(s)).width,
                 });
             }
             const textRowSize = await getTitleTextSize(textRowContent);
             contentRows.push({
                 text: textRowContent,
-                x: 0,
-                y: textRow.y + textRowSize.hangingOffset,
+                x: xCenter,
+                y: textRow.y + textRowSize.hangingOffset + chartMarginTop,
                 size: textRowSize,
             });
         }
@@ -54,14 +59,14 @@ export const getPreparedTitle = async ({ title, chartWidth, }) => {
     else {
         const truncatedText = await getTextWithElipsis({
             text: titleText,
-            maxWidth: chartWidth,
+            maxWidth: usableWidth,
             getTextWidth: async (s) => (await getTitleTextSize(s)).width,
         });
         const textSize = await getTitleTextSize(truncatedText);
         contentRows.push({
             text: truncatedText,
-            x: 0,
-            y: textSize.hangingOffset,
+            x: xCenter,
+            y: textSize.hangingOffset + chartMarginTop,
             size: textSize,
         });
     }
@@ -71,7 +76,7 @@ export const getPreparedTitle = async ({ title, chartWidth, }) => {
         text: titleText,
         style: titleStyle,
         height: titleHeight,
-        margin: (_h = title === null || title === void 0 ? void 0 : title.margin) !== null && _h !== void 0 ? _h : DEFAULT_TITLE_MARGIN,
+        margin: (_l = title === null || title === void 0 ? void 0 : title.margin) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MARGIN,
         qa: title === null || title === void 0 ? void 0 : title.qa,
         contentRows,
     };

package/dist/cjs/components/ChartInner/utils/zoom.js

@@ -6,7 +6,8 @@ function mapSeriesTypeToZoomType(seriesType) {
         case SERIES_TYPE.Area: {
             return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
         }
-        case SERIES_TYPE.BarX: {
+        case SERIES_TYPE.BarX:
+        case SERIES_TYPE.XRange: {
             return [ZOOM_TYPE.X];
         }
         case SERIES_TYPE.BarY: {
@@ -36,6 +37,7 @@ function getDefaultZoomType(seriesType) {
         }
         case SERIES_TYPE.Area:
         case SERIES_TYPE.BarX:
+        case SERIES_TYPE.XRange:
         case SERIES_TYPE.Line:
         case SERIES_TYPE.Waterfall: {
             return ZOOM_TYPE.X;

package/dist/cjs/components/Title/index.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 import type { PreparedTitle } from '../../hooks';
-type Props = PreparedTitle & {
-    chartWidth: number;
-};
+type Props = PreparedTitle;
 export declare const Title: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Title/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 export const Title = (props) => {
-    const { chartWidth, style, qa, contentRows } = props;
+    const { style, qa, contentRows } = props;
     return (React.createElement("text", { dominantBaseline: "hanging", textAnchor: "middle", style: {
             fill: style === null || style === void 0 ? void 0 : style.fontColor,
             fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
             fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
-        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: chartWidth / 2, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
+        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -43,12 +43,15 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
         const colorSymbol = getTooltipRowColorSymbol({ series, color });
         return (React.createElement(Row, { key: id, active: active, color: color, colorSymbol: colorSymbol ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: colorSymbol.outerHTML } })) : undefined, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
     };
-    const formattedHeadValue = headerFormat
-        ? getFormattedValue({
-            value: measureValue === null || measureValue === void 0 ? void 0 : measureValue.value,
-            format: headerFormat,
-        })
-        : measureValue === null || measureValue === void 0 ? void 0 : measureValue.formattedValue;
+    let formattedHeadValue;
+    if (measureValue) {
+        formattedHeadValue = headerFormat
+            ? getFormattedValue({
+                value: measureValue.value,
+                format: headerFormat,
+            })
+            : measureValue.formattedValue;
+    }
     React.useEffect(() => {
         if (!contentRowsRef.current) {
             return;
@@ -186,6 +189,28 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                     formattedValue,
                 });
             }
+            case 'x-range': {
+                const xRangeData = data;
+                const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
+                const x0Formatted = getFormattedValue({
+                    value: xRangeData.x0,
+                    format,
+                });
+                const x1Formatted = getFormattedValue({
+                    value: xRangeData.x1,
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue: `${x0Formatted} — ${x1Formatted}`,
+                    series,
+                });
+            }
             default: {
                 return null;
             }

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.js

@@ -48,7 +48,7 @@ export const getMeasureValue = ({ data, xAxis, yAxis, headerFormat, }) => {
         const value = (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
         return { value };
     }
-    if (data.some((item) => item.series.type === 'bar-y')) {
+    if (data.some((item) => ['bar-y', 'x-range'].includes(item.series.type))) {
         const value = getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
         const formattedValue = getFormattedValue({
             value: getYRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, yAxis),
@@ -72,7 +72,9 @@ export function getHoveredValues(args) {
             case 'area':
             case 'line':
             case 'bar-x':
-            case 'scatter': {
+            case 'waterfall':
+            case 'scatter':
+            case 'x-range': {
                 return getYRowData(data, yAxis);
             }
             case 'bar-y': {
@@ -90,9 +92,6 @@ export function getHoveredValues(args) {
                 const { target, data: source } = seriesItem;
                 return (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
             }
-            case 'waterfall': {
-                return getYRowData(data, yAxis);
-            }
             default: {
                 return undefined;
             }

package/dist/cjs/core/constants/chart-types.d.ts

@@ -11,5 +11,6 @@ export declare const SERIES_TYPE: {
     readonly Radar: "radar";
     readonly Heatmap: "heatmap";
     readonly Funnel: "funnel";
+    readonly XRange: "x-range";
 };
 export type SeriesType = (typeof SERIES_TYPE)[keyof typeof SERIES_TYPE];

package/dist/cjs/core/constants/chart-types.js

@@ -11,4 +11,5 @@ export const SERIES_TYPE = {
     Radar: 'radar',
     Heatmap: 'heatmap',
     Funnel: 'funnel',
+    XRange: 'x-range',
 };

package/dist/cjs/core/constants/defaults/series-options.d.ts

@@ -21,7 +21,11 @@ type DefaultWaterfallSeriesOptions = Partial<ChartSeriesOptions['waterfall']> &
         barPadding: number;
     };
 };
-export type SeriesOptionsDefaults = Partial<ChartSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions;
+export type SeriesOptionsDefaults = Partial<ChartSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions & {
+    'x-range': {
+        borderRadius: number;
+    };
+};
 export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
 export declare const seriesRangeSliderOptionsDefaults: Required<ChartSeriesRangeSliderOptions>;
 export {};

package/dist/cjs/core/constants/defaults/series-options.js

@@ -133,6 +133,19 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    'x-range': {
+        borderRadius: 0,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
 };
 export const seriesRangeSliderOptionsDefaults = {
     visible: true,

package/dist/cjs/core/constants/index.d.ts

@@ -4,7 +4,6 @@ export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';
-export * from './misc';
 export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';

package/dist/cjs/core/constants/index.js

@@ -4,7 +4,6 @@ export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';
-export * from './misc';
 export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';

package/dist/cjs/core/i18n/keysets/en.json

@@ -21,7 +21,8 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis.",
     "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}].",
     "label_invalid-axis-categories": "It seems you are trying to use inappropriate value for \"categories\", or defined it incorrectly. Categories must be a non-empty array for an axis with \"category\" type.",
-    "label_inconsistent-y-axis-configuration": "It seems you have inconsistent Y-axis configuration. Possible reasons:\n1. Multiple Y axes with the same position and plot index.\n2. At the moment, 'category' axis is not supported in dual Y-axis configurations."
+    "label_inconsistent-y-axis-configuration": "It seems you have inconsistent Y-axis configuration. Possible reasons:\n1. Multiple Y axes with the same position and plot index.\n2. At the moment, 'category' axis is not supported in dual Y-axis configurations.",
+    "label_stacking-area-connect-null-mode": "It seems you are using \"nullMode: 'connect'\" with a stacking area series. The \"connect\" null mode is not supported in stacking mode. Use \"zero\" or \"skip\" instead."
   },
   "tooltip": {
     "label_totals_sum": "Sum",

package/dist/cjs/core/i18n/keysets/ru.json

@@ -21,7 +21,8 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\".",
     "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}].",
     "label_invalid-axis-categories": "Похоже, что вы пытаетесь использовать недопустимое значение для \"categories\", или указали его неверно. Категории для оси типа \"category\" должны быть непустым массивом.",
-    "label_inconsistent-y-axis-configuration": "Похоже, что конфигурация осей Y неконсистентна. Возможные причины:\n1. Несколько осей Y имеют одинаковые значения position и plotIndex.\n2. На данный момент категорийные оси не поддерживаются в конфигурациях с двумя осями Y."
+    "label_inconsistent-y-axis-configuration": "Похоже, что конфигурация осей Y неконсистентна. Возможные причины:\n1. Несколько осей Y имеют одинаковые значения position и plotIndex.\n2. На данный момент категорийные оси не поддерживаются в конфигурациях с двумя осями Y.",
+    "label_stacking-area-connect-null-mode": "Похоже, что вы используете \"nullMode: 'connect'\" с серией area с накоплением. Режим null \"connect\" не поддерживается в режиме накопления. Используйте \"zero\" или \"skip\"."
   },
   "tooltip": {
     "label_totals_sum": "Сумма",

package/dist/cjs/core/series/prepare-legend.js

@@ -136,7 +136,7 @@ async function getGroupedLegendItems(args) {
         else {
             resultItem.textWidth = textWidth;
         }
-        textWidthsInLine.push(textWidth);
+        textWidthsInLine.push(resultItem.textWidth);
         const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
         if (!result[lineIndex]) {
             result[lineIndex] = [];
@@ -155,7 +155,7 @@ async function getGroupedLegendItems(args) {
         else if (isCurrentLineOverMaxWidth) {
             result[lineIndex].pop();
             lineIndex += 1;
-            textWidthsInLine = [textWidth];
+            textWidthsInLine = [resultItem.textWidth];
             const nextLineIndex = lineIndex;
             result[nextLineIndex] = [];
             result[nextLineIndex].push(resultItem);

package/dist/cjs/core/series/prepare-x-range.d.ts

@@ -0,0 +1,11 @@
+import type { ScaleOrdinal } from 'd3-scale';
+import type { ChartSeriesOptions, XRangeSeries } from '../../types';
+import type { PreparedLegend, PreparedXRangeSeries } from './types';
+type PrepareXRangeSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: XRangeSeries[];
+    legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
+};
+export declare function prepareXRangeSeries(args: PrepareXRangeSeriesArgs): PreparedXRangeSeries[];
+export {};

package/dist/cjs/core/series/prepare-x-range.js

@@ -0,0 +1,41 @@
+import get from 'lodash/get';
+import { getUniqId } from '../utils';
+import { DASH_STYLE, DEFAULT_DATALABELS_STYLE } from '../constants';
+import { DEFAULT_DATALABELS_PADDING } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareXRangeSeries(args) {
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
+    return seriesList.map((series) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        return {
+            type: series.type,
+            color,
+            name,
+            id: getUniqId(),
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+                groupId: (_b = (_a = series.legend) === null || _a === void 0 ? void 0 : _a.groupId) !== null && _b !== void 0 ? _b : getUniqId(),
+                itemText: (_d = (_c = series.legend) === null || _c === void 0 ? void 0 : _c.itemText) !== null && _d !== void 0 ? _d : name,
+            },
+            data: series.data,
+            opacity: (_e = series.opacity) !== null && _e !== void 0 ? _e : null,
+            borderRadius: (_h = (_f = series.borderRadius) !== null && _f !== void 0 ? _f : (_g = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _g === void 0 ? void 0 : _g.borderRadius) !== null && _h !== void 0 ? _h : 0,
+            borderWidth: (_l = (_j = series.borderWidth) !== null && _j !== void 0 ? _j : (_k = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _k === void 0 ? void 0 : _k.borderWidth) !== null && _l !== void 0 ? _l : 0,
+            borderColor: (_p = (_m = series.borderColor) !== null && _m !== void 0 ? _m : (_o = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _o === void 0 ? void 0 : _o.borderColor) !== null && _p !== void 0 ? _p : 'var(--gcharts-shape-border-color)',
+            borderDashStyle: (_s = (_q = series.borderDashStyle) !== null && _q !== void 0 ? _q : (_r = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['x-range']) === null || _r === void 0 ? void 0 : _r.borderDashStyle) !== null && _s !== void 0 ? _s : DASH_STYLE.Solid,
+            cursor: get(series, 'cursor', null),
+            tooltip: series.tooltip,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', false),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_t = series.dataLabels) === null || _t === void 0 ? void 0 : _t.style),
+                html: get(series, 'dataLabels.html', false),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                format: (_u = series.dataLabels) === null || _u === void 0 ? void 0 : _u.format,
+            },
+        };
+    });
+}

package/dist/cjs/core/series/prepareSeries.js

@@ -11,6 +11,7 @@ import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
+import { prepareXRangeSeries } from './prepare-x-range';
 export async function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colors, colorScale } = args;
     switch (type) {
@@ -108,6 +109,14 @@ export async function prepareSeries(args) {
                 colors,
             });
         }
+        case 'x-range': {
+            return prepareXRangeSeries({
+                series: series,
+                seriesOptions,
+                legend,
+                colorScale,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

package/dist/cjs/core/series/types.d.ts

@@ -1,4 +1,4 @@
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData, XRangeSeries, XRangeSeriesData } from '../../types';
 import type { DashStyle, LayoutAlgorithm, LineCap, LineJoin, SeriesOptionsDefaults, SymbolType } from '../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -339,7 +339,23 @@ export type PreparedFunnelSeries = {
     };
     connectors: Required<FunnelSeries['connectors']>;
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries | PreparedHeatmapSeries | PreparedFunnelSeries;
+export type PreparedXRangeSeries = {
+    type: XRangeSeries['type'];
+    data: XRangeSeriesData[];
+    borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
+    borderDashStyle: DashStyle;
+    opacity: number | null;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        html: boolean;
+        padding: number;
+        format?: ValueFormat;
+    };
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries | PreparedHeatmapSeries | PreparedFunnelSeries | PreparedXRangeSeries;
 export type PreparedZoomableSeries = Extract<PreparedSeries, {
     data: Array<unknown>;
 }>;

package/dist/cjs/core/types/chart/area.d.ts

@@ -76,9 +76,10 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
     /**
      * Specifies how null or undefined values should be handled in the series.
      *
-     * - `'connect'`: Connect points across null values (skip nulls in rendering)
+     * - `'connect'`: Connect points across null values (skip nulls in rendering). **Not supported with `stacking`.**
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit the data point (creates gap in area)
+     *
      * @default 'skip'
      */
     nullMode?: 'connect' | 'zero' | 'skip';

package/dist/cjs/core/types/chart/series.d.ts

@@ -15,8 +15,9 @@ import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T> | FunnelSeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T> | FunnelSeriesData<T>;
+import type { XRangeSeries, XRangeSeriesData } from './x-range';
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T> | FunnelSeries<T> | XRangeSeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T> | FunnelSeriesData<T> | XRangeSeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -291,6 +292,32 @@ export interface ChartSeriesOptions {
             hover?: BasicHoverState;
         };
     };
+    'x-range'?: {
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
+        /**
+         * The width of the border surrounding each bar.
+         * @default 0
+         */
+        borderWidth?: number;
+        /**
+         * The color of the border surrounding each bar.
+         */
+        borderColor?: string;
+        /**
+         * The dash style of the border surrounding each bar.
+         * @default 'Solid'
+         */
+        borderDashStyle?: DashStyle;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 }
 export type ChartSeriesRangeSliderOptions = {
     /**