@gravity-ui/charts 1.43.1 → 1.44.0

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -1,4 +1,4 @@
-import { group, min } from 'd3-array';
+import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
@@ -27,7 +27,7 @@ function getXValues(series, xAxis, xScale) {
             return acc;
         }, []);
     }
-    return Array.from(xValues);
+    return sort(Array.from(xValues), (d) => d[1]);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
@@ -166,13 +166,14 @@ export const prepareAreaData = async (args) => {
                     return m.set(key, d);
                 }, new Map());
                 const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    const rawData = seriesData.get(x);
+                    const d = rawData !== null && rawData !== void 0 ? rawData : {
                         x,
                         y: 0,
                     };
-                    let yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
-                    if (s.nullMode === 'connect' && yDataValue === null) {
+                    let yDataValue = (_a = d.y) !== null && _a !== void 0 ? _a : null;
+                    if (s.nullMode === 'connect' && (yDataValue === null || !rawData)) {
                         return pointsAcc;
                     }
                     if (yDataValue && isPercentStacking) {
@@ -187,13 +188,13 @@ export const prepareAreaData = async (args) => {
                     });
                     if (typeof yDataValue === 'number' && yValue !== null) {
                         yValue = round(yValue, 2);
-                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
-                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const prevPoint = seriesData.get((_b = xValues[index - 1]) === null || _b === void 0 ? void 0 : _b[0]);
+                        const nextPoint = seriesData.get((_c = xValues[index + 1]) === null || _c === void 0 ? void 0 : _c[0]);
                         const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
                             const positiveStackHeights = positiveStackValues.get(x);
-                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
-                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            let prevSectionStackHeight = (_d = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _d !== void 0 ? _d : 0;
+                            let nextSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _e !== void 0 ? _e : 0;
                             const point = {
                                 y0: yAxisTop + yMin - prevSectionStackHeight,
                                 x: xValue,
@@ -219,11 +220,11 @@ export const prepareAreaData = async (args) => {
                                     point2.y = newYValue;
                                 }
                             }
-                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null || s.nullMode === 'zero') {
                                 prevSectionStackHeight =
                                     prevSectionStackHeight + currentPointStackHeight;
                             }
-                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null || s.nullMode === 'zero') {
                                 nextSectionStackHeight =
                                     nextSectionStackHeight + currentPointStackHeight;
                             }
@@ -234,8 +235,8 @@ export const prepareAreaData = async (args) => {
                         }
                         else {
                             const negativeStackHeights = negativeStackValues.get(x);
-                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
-                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
+                            let prevSectionStackHeight = (_f = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _f !== void 0 ? _f : 0;
+                            let nextSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _g !== void 0 ? _g : 0;
                             pointsAcc.push({
                                 y0: yAxisTop + yMin + prevSectionStackHeight,
                                 x: xValue,

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -110,8 +110,8 @@ export const prepareBarXData = async (args) => {
             const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
             for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
                 const yValues = stacks[groupItemIndex];
-                let positiveStackHeight = 0;
-                let negativeStackHeight = 0;
+                let positiveStackSum = 0;
+                let negativeStackSum = 0;
                 const stackItems = [];
                 let sortedData = yValues;
                 if (sortKey) {
@@ -144,7 +144,6 @@ export const prepareBarXData = async (args) => {
                     }
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
-                    const y = seriesYScale(yDataValue);
                     let base = 0;
                     if (seriesYAxis.type === 'logarithmic') {
                         const domainData = seriesYScale.domain();
@@ -155,7 +154,22 @@ export const prepareBarXData = async (args) => {
                         base = seriesYScale(0);
                     }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
-                    const height = Math.abs(base - y);
+                    let height;
+                    let barPositionY;
+                    if (yDataValue > 0) {
+                        const newSum = positiveStackSum + yDataValue;
+                        const topPixel = seriesYScale(newSum);
+                        const bottomPixel = positiveStackSum === 0 ? base : seriesYScale(positiveStackSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + topPixel;
+                    }
+                    else {
+                        const newSum = negativeStackSum + yDataValue;
+                        const bottomPixel = negativeStackSum === 0 ? base : seriesYScale(negativeStackSum);
+                        const topPixel = seriesYScale(newSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + bottomPixel;
+                    }
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
                     if (shapeHeight < 0) {
                         shapeHeight = height;
@@ -165,9 +179,7 @@ export const prepareBarXData = async (args) => {
                     }
                     const barData = {
                         x,
-                        y: yDataValue > 0
-                            ? yAxisTop + y - positiveStackHeight
-                            : yAxisTop + base + negativeStackHeight,
+                        y: barPositionY,
                         width: rectWidth,
                         height: shapeHeight,
                         _height: height,
@@ -180,14 +192,15 @@ export const prepareBarXData = async (args) => {
                     };
                     stackItems.push(barData);
                     if (yDataValue > 0) {
-                        positiveStackHeight += height;
+                        positiveStackSum += yDataValue;
                     }
                     else {
-                        negativeStackHeight += height;
+                        negativeStackSum += yDataValue;
                     }
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
+                    const positiveStackHeight = stackItems.reduce((sum, item) => sum + item._height, 0);
                     const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
                         item.height = item._height * ratio;

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -19,8 +19,9 @@ import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
+import type { PreparedXRangeData } from './x-range';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
 export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
 type Args = {
     boundsWidth: number;

package/dist/cjs/hooks/useShapes/index.js

@@ -22,6 +22,7 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
+import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
     return false;
@@ -224,6 +225,22 @@ export async function getShapes(args) {
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
+            case SERIES_TYPE.XRange: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareXRangeData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsWidth,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(XRangeSeriesShapes, { key: SERIES_TYPE.XRange, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
             default: {
                 throw new ChartError({
                     message: `The display method is not defined for a series with type "${seriesType}"`,

package/dist/cjs/hooks/useShapes/x-range/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+export { prepareXRangeData } from './prepare-data';
+export type { PreparedXRangeData } from './types';
+import type { PreparedXRangeData } from './types';
+type Args = {
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
+    preparedData: PreparedXRangeData[];
+    seriesOptions: PreparedSeriesOptions;
+    dispatcher?: Dispatch<object>;
+};
+export declare function XRangeSeriesShapes(args: Args): React.JSX.Element;

package/dist/cjs/hooks/useShapes/x-range/index.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { getLineDashArray } from '../../../core/utils';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getRectPath } from '../utils';
+export { prepareXRangeData } from './prepare-data';
+const b = block('x-range');
+export function XRangeSeriesShapes(args) {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const segmentSelection = svgElement
+            .selectAll(`path.${b('segment')}`)
+            .data(preparedData)
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+            return getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius,
+            }).toString();
+        })
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+            .attr('cursor', (d) => d.series.cursor);
+        svgElement
+            .selectAll(`path.${b('segment-border')}`)
+            .data(preparedData.filter((d) => d.series.borderWidth > 0))
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+            return getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius,
+            }).toString();
+        })
+            .attr('class', b('segment-border'))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.series.borderColor)
+            .attr('stroke-width', (d) => d.series.borderWidth)
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.series.borderDashStyle, d.series.borderWidth))
+            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+            .attr('pointer-events', 'none');
+        const svgLabels = preparedData.flatMap((d) => d.svgLabels);
+        svgElement
+            .selectAll(`text.${b('label')}`)
+            .data(svgLabels)
+            .join('text')
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .attr('dominant-baseline', 'central')
+            .attr('pointer-events', 'none')
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null)
+            .html((d) => d.text);
+        const hoverOptions = get(seriesOptions, 'x-range.states.hover');
+        const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
+                const hoveredSet = new Set(data === null || data === void 0 ? void 0 : data.map((d) => d.data));
+                segmentSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.color;
+                    if (hoveredSet.has(d.data)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
+                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
+                segmentSelection.attr('opacity', (d) => {
+                    var _a, _b;
+                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
+                        return inactiveOptions.opacity || null;
+                    }
+                    return (_b = (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity) !== null && _b !== void 0 ? _b : null;
+                });
+            }
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover((_a = hoveredDataRef.current) !== null && _a !== void 0 ? _a : undefined);
+        }
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', handleShapeHover);
+        return () => {
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
+}

package/dist/cjs/hooks/useShapes/x-range/prepare-data.d.ts

@@ -0,0 +1,15 @@
+import type { ChartScale } from '../../../core/scales/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
+import type { PreparedXRangeSeries } from '../../useSeries/types';
+import type { PreparedXRangeData } from './types';
+type PrepareXRangeDataArgs = {
+    series: PreparedXRangeSeries[];
+    xAxis: PreparedXAxis;
+    xScale: ChartScale;
+    yAxis: PreparedYAxis[];
+    yScale: (ChartScale | undefined)[];
+    boundsWidth?: number;
+    isRangeSlider?: boolean;
+};
+export declare function prepareXRangeData(args: PrepareXRangeDataArgs): Promise<PreparedXRangeData[]>;
+export {};

package/dist/cjs/hooks/useShapes/x-range/prepare-data.js

@@ -0,0 +1,147 @@
+import get from 'lodash/get';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../core/utils';
+import { getFormattedValue } from '../../../core/utils/format';
+import { MIN_BAR_WIDTH } from '../../constants';
+import { getBandSize } from '../../utils/get-band-size';
+const DEFAULT_BAR_PADDING = 0.2;
+export async function prepareXRangeData(args) {
+    var _a;
+    const { series, xAxis, xScale, yAxis, yScale: [yScale], boundsWidth, isRangeSlider, } = args;
+    if (!yScale) {
+        return [];
+    }
+    // Collect unique y-domain values
+    const domain = [];
+    const seen = new Set();
+    const categories = get(yAxis[0], 'categories', []);
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const key = yAxis[0].type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
+                : d.y;
+            if (key !== undefined && !seen.has(key)) {
+                seen.add(key);
+                domain.push(key);
+            }
+        });
+    });
+    const bandSize = getBandSize({ domain, scale: yScale });
+    const barSize = Math.max(MIN_BAR_WIDTH, bandSize * (1 - DEFAULT_BAR_PADDING));
+    const result = [];
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            let center;
+            if (yAxis[0].type === 'category') {
+                const bandScale = yScale;
+                const yCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: d });
+                if (!bandScale.domain().includes(yCategory)) {
+                    return;
+                }
+                center = (bandScale(yCategory) || 0) + bandSize / 2;
+            }
+            else {
+                const linearScale = yScale;
+                if (d.y === undefined) {
+                    return;
+                }
+                center = linearScale(Number(d.y));
+            }
+            let xStart;
+            let xEnd;
+            if (xAxis.type === 'category') {
+                // x-range on a category x-axis is unusual but supported
+                const xBandScale = xScale;
+                const xCategories = get(xAxis, 'categories', []);
+                const startCategory = getDataCategoryValue({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    data: { x: d.x0 },
+                });
+                const endCategory = getDataCategoryValue({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    data: { x: d.x1 },
+                });
+                xStart = xBandScale(startCategory) || 0;
+                xEnd = (xBandScale(endCategory) || 0) + xBandScale.bandwidth();
+            }
+            else {
+                const linearScale = xScale;
+                xStart = linearScale(Number(d.x0));
+                xEnd = linearScale(Number(d.x1));
+            }
+            const width = xEnd - xStart;
+            if (width <= 0) {
+                return;
+            }
+            result.push({
+                x: xStart,
+                y: center - barSize / 2,
+                width,
+                height: barSize,
+                color: d.color || s.color,
+                data: d,
+                series: s,
+                htmlLabels: [],
+                svgLabels: [],
+            });
+        });
+    });
+    const textSizeFnCache = new Map();
+    for (let i = 0; i < result.length; i++) {
+        const item = result[i];
+        const { dataLabels } = item.series;
+        if (!dataLabels.enabled || item.data.label === null || isRangeSlider) {
+            continue;
+        }
+        const content = getFormattedValue(Object.assign({ value: item.data.label }, dataLabels));
+        const visibleStart = Math.max(0, item.x);
+        const visibleEnd = boundsWidth === undefined
+            ? item.x + item.width
+            : Math.min(boundsWidth, item.x + item.width);
+        const visibleWidth = visibleEnd - visibleStart;
+        const visibleCenterX = visibleStart + visibleWidth / 2;
+        if (dataLabels.html) {
+            const { maxHeight: height, maxWidth: width } = await getLabelsSize({
+                labels: [content],
+                style: dataLabels.style,
+                html: true,
+            });
+            const htmlItem = {
+                content,
+                size: { width, height },
+                style: dataLabels.style,
+                x: visibleCenterX - width / 2,
+                y: item.y + item.height / 2 - height / 2,
+            };
+            item.htmlLabels.push(htmlItem);
+        }
+        else {
+            if (!textSizeFnCache.has(dataLabels.style)) {
+                textSizeFnCache.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
+            }
+            const getTextSize = (_a = textSizeFnCache.get(dataLabels.style)) !== null && _a !== void 0 ? _a : getTextSizeFn({ style: dataLabels.style });
+            const availableWidth = Math.max(0, visibleWidth - 2 * dataLabels.padding);
+            const text = await getTextWithElipsis({
+                text: content,
+                getTextWidth: (s) => getTextSize(s).then((r) => r.width),
+                maxWidth: availableWidth,
+            });
+            if (!text) {
+                continue;
+            }
+            const { width, height, hangingOffset } = await getTextSize(text);
+            const svgItem = {
+                text,
+                size: { width, height, hangingOffset },
+                style: dataLabels.style,
+                textAnchor: 'middle',
+                x: visibleCenterX,
+                y: item.y + item.height / 2,
+                series: item.series,
+            };
+            item.svgLabels.push(svgItem);
+        }
+    }
+    return result;
+}

package/dist/cjs/hooks/useShapes/x-range/types.d.ts

@@ -0,0 +1,12 @@
+import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { PreparedXRangeSeries } from '../../useSeries/types';
+export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    series: PreparedXRangeSeries;
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+};

package/dist/cjs/hooks/useShapes/x-range/types.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/core/constants/chart-types.js

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

package/dist/esm/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/esm/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,