@gravity-ui/charts 1.34.8 → 1.34.9

package/dist/cjs/components/AxisX/AxisX.js

@@ -32,7 +32,6 @@ export const AxisX = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('text-anchor', 'start')
-                .style('dominant-baseline', 'text-after-edge')
                 .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
                 .attr('font-size', preparedAxisData.title.style.fontSize)
                 .selectAll('tspan')

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -1,6 +1,7 @@
 import { getUniqId } from '@gravity-ui/uikit';
-import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../utils';
 import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
+import { getMultilineTitleContentRows } from '../utils/axis-title';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
     var _a;
     const rotation = axis.labels.rotation;
@@ -189,23 +190,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             const titleContent = [];
             const titleMaxWidth = axisWidth;
             if (axis.title.maxRowCount > 1) {
-                const titleTextRows = await wrapText({
-                    text: axis.title.text,
-                    style: axis.title.style,
-                    width: titleMaxWidth,
-                    getTextSize: getTitleTextSize,
-                });
-                for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
-                    const textRow = titleTextRows[i];
-                    const textRowContent = textRow.text.trim();
-                    const textRowSize = await getTitleTextSize(textRowContent);
-                    titleContent.push({
-                        text: textRowContent,
-                        x: 0,
-                        y: textRow.y,
-                        size: textRowSize,
-                    });
-                }
+                titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
             }
             else {
                 const text = await getTextWithElipsis({
@@ -245,11 +230,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 style: axis.title.style,
                 size: titleTextSize,
                 x,
-                y: height +
-                    axis.labels.margin +
-                    axis.labels.height +
-                    axis.title.margin +
-                    titleTextSize.height,
+                y: height + axis.labels.margin + axis.labels.height + axis.title.margin,
                 rotate: 0,
                 offset: 0,
             };

package/dist/cjs/components/AxisX/types.d.ts

@@ -1,14 +1,6 @@
 import type { DashStyle } from 'src/constants';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
-export type TextRowData = {
-    text: string;
-    x: number;
-    y: number;
-    size: {
-        width: number;
-        height: number;
-    };
-};
+import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
     x: number;
     y: number;

package/dist/cjs/components/AxisY/prepare-axis-title.js

@@ -1,4 +1,5 @@
-import { calculateCos, calculateSin, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { calculateCos, calculateSin, getLabelsSize, getTextSizeFn, getTextWithElipsis, } from '../../utils';
+import { getMultilineTitleContentRows } from '../utils/axis-title';
 export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidth, axisLabelsWidth, }) {
     if (!axis.title.text || axis.title.html) {
         return null;
@@ -10,39 +11,7 @@ export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidt
     const titleContent = [];
     const titleMaxWidth = rotateAngle === 0 ? axis.title.maxWidth : sin * axisHeight;
     if (axis.title.maxRowCount > 1) {
-        let titleTextRows = await wrapText({
-            text: axis.title.text,
-            style: axis.title.style,
-            width: titleMaxWidth,
-            getTextSize: getTitleTextSize,
-        });
-        titleTextRows = titleTextRows.reduce((acc, row, index) => {
-            if (index < axis.title.maxRowCount) {
-                acc.push(row);
-            }
-            else {
-                acc[axis.title.maxRowCount - 1].text += row.text;
-            }
-            return acc;
-        }, []);
-        for (let i = 0; i < titleTextRows.length; i++) {
-            const textRow = titleTextRows[i];
-            let textRowContent = textRow.text.trim();
-            if (i === titleTextRows.length - 1) {
-                textRowContent = await getTextWithElipsis({
-                    text: textRowContent,
-                    maxWidth: titleMaxWidth,
-                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
-                });
-            }
-            const textRowSize = await getTitleTextSize(textRowContent);
-            titleContent.push({
-                text: textRowContent,
-                x: 0,
-                y: textRow.y,
-                size: textRowSize,
-            });
-        }
+        titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
     }
     else {
         const text = await getTextWithElipsis({

package/dist/cjs/components/AxisY/types.d.ts

@@ -1,14 +1,6 @@
 import type { DashStyle } from 'src/constants';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
-export type TextRowData = {
-    text: string;
-    x: number;
-    y: number;
-    size: {
-        width: number;
-        height: number;
-    };
-};
+import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
     x: number;
     y: number;

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

@@ -26,7 +26,7 @@ import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
 export const ChartInner = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const { width, height, data, onReady } = props;
     const svgRef = React.useRef(null);
     const resetZoomButtonRef = React.useRef(null);
@@ -60,13 +60,13 @@ export const ChartInner = (props) => {
     }, [data.xAxis]);
     const { initialized, setInitialized, tooltipPinned, togglePinTooltip, unpinTooltip, rangeSliderState, updateRangeSliderState, updateZoomState, zoomState, } = useChartInnerState({
         dispatcher,
-        preparedChart,
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
     const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, preparedChart, rangeSliderDomain: (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.getDomain(), rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        htmlLayout, plotNode: plotRef.current, preparedChart,
+        rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
@@ -96,8 +96,8 @@ export const ChartInner = (props) => {
         tooltipThrottle: preparedTooltip.throttle,
         isOutsideBounds,
     });
-    const clickHandler = (_c = (_b = data.chart) === null || _b === void 0 ? void 0 : _b.events) === null || _c === void 0 ? void 0 : _c.click;
-    const pointerMoveHandler = (_e = (_d = data.chart) === null || _d === void 0 ? void 0 : _d.events) === null || _e === void 0 ? void 0 : _e.pointermove;
+    const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
+    const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
     const prevRangeSliderDefaultRange = usePrevious(preparedRangeSlider.defaultRange);
     useCrosshair({
         split: preparedSplit,
@@ -246,7 +246,7 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_f = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _f === void 0 ? void 0 : _f.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -11,7 +11,6 @@ type Props = ChartInnerProps & {
     svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
-    rangeSliderDomain?: [number, number];
     rangeSliderState?: RangeSliderState;
 };
 export declare function useChartInnerProps(props: Props): {

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

@@ -4,7 +4,7 @@ import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData,
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
-import { getZoomedSeriesData } from '../../utils';
+import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -35,7 +35,7 @@ function getBoundsOffsetLeft(args) {
 }
 export function useChartInnerProps(props) {
     var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderDomain, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const colors = React.useMemo(() => {
@@ -57,14 +57,25 @@ export function useChartInnerProps(props) {
         seriesData: normalizedSeriesData,
         seriesOptions: data.series.options,
     });
+    const effectiveZoomState = React.useMemo(() => {
+        const result = {};
+        const effectiveX = getEffectiveXRange(zoomState.x, rangeSliderState);
+        if (effectiveX !== undefined) {
+            result.x = effectiveX;
+        }
+        if (zoomState.y !== undefined) {
+            result.y = zoomState.y;
+        }
+        return result;
+    }, [zoomState, rangeSliderState]);
     const { preparedSeries, preparedShapesSeries } = React.useMemo(() => {
         return getZoomedSeriesData({
             seriesData: allPreparedSeries,
             xAxis: normalizedXAxis,
             yAxis: normalizedYAxis,
-            zoomState,
+            zoomState: effectiveZoomState,
         });
-    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, zoomState]);
+    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, effectiveZoomState]);
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
             return { legendConfig: undefined, legendItems: [] };
@@ -126,7 +137,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
-        zoomState,
+        zoomState: effectiveZoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
@@ -147,7 +158,6 @@ export function useChartInnerProps(props) {
         plotContainerWidth: boundsWidth,
         preparedSplit,
         preparedZoom: preparedChart.zoom,
-        rangeSliderDomain,
         xAxis,
         xScale,
         yAxis,

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedChart, PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
 type Props = {
     dispatcher: Dispatch<object>;
-    preparedChart: PreparedChart;
     preparedRangeSlider: PreparedRangeSlider;
     tooltip?: PreparedTooltip;
 };
@@ -14,7 +13,7 @@ export declare function useChartInnerState(props: Props): {
     tooltipPinned: boolean;
     togglePinTooltip: ((value: boolean, event: React.MouseEvent) => void) | undefined;
     unpinTooltip: (() => void) | undefined;
-    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState, syncZoom?: boolean) => void;
+    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState) => void;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
 };

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-import { ZOOM_TYPE } from '../../constants';
 import { EventType, isMacintosh } from '../../utils';
-const RANGE_SLIDER_SYNC_ZOOM_TYPES = [ZOOM_TYPE.X, ZOOM_TYPE.XY];
 export function useChartInnerState(props) {
     var _a, _b;
-    const { dispatcher, preparedChart, preparedRangeSlider, tooltip } = props;
+    const { dispatcher, preparedRangeSlider, tooltip } = props;
     const [tooltipPinned, setTooltipPinned] = React.useState(false);
     const [zoomState, setZoomState] = React.useState({});
     const [rangeSliderState, setRangeSliderState] = React.useState();
@@ -13,7 +11,6 @@ export function useChartInnerState(props) {
     const tooltipEnabled = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled;
     const tooltipPinEnabled = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled;
     const modifierKey = (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _b === void 0 ? void 0 : _b.modifierKey;
-    const rangeSliderEnabled = preparedRangeSlider.enabled;
     const togglePinTooltip = React.useCallback((value, event) => {
         let resultValue = value;
         if (value && modifierKey) {
@@ -36,16 +33,17 @@ export function useChartInnerState(props) {
     const updateZoomState = React.useCallback((nextZoomState) => {
         if (!isEqual(zoomState, nextZoomState)) {
             setZoomState(nextZoomState);
-            if (rangeSliderEnabled && (nextZoomState === null || nextZoomState === void 0 ? void 0 : nextZoomState.x)) {
-                const [xMin, xMax] = nextZoomState.x;
-                setRangeSliderState({
-                    max: xMax,
-                    min: xMin,
-                });
+            // One-way sync: zoom → range slider. On full reset clear the slider state;
+            // on x-zoom change sync slider to the zoomed x range.
+            if (Object.keys(nextZoomState).length === 0) {
+                setRangeSliderState(undefined);
+            }
+            else if (nextZoomState.x !== undefined) {
+                setRangeSliderState({ min: nextZoomState.x[0], max: nextZoomState.x[1] });
             }
         }
-    }, [rangeSliderEnabled, zoomState]);
-    const updateRangeSliderState = React.useCallback((nextRangeSliderState, syncZoom = true) => {
+    }, [zoomState]);
+    const updateRangeSliderState = React.useCallback((nextRangeSliderState) => {
         if (!isEqual(rangeSliderState, nextRangeSliderState)) {
             setRangeSliderState(nextRangeSliderState
                 ? {
@@ -53,17 +51,11 @@ export function useChartInnerState(props) {
                     min: nextRangeSliderState.min,
                 }
                 : undefined);
-            if (syncZoom &&
-                nextRangeSliderState &&
-                preparedChart.zoom &&
-                Object.keys(zoomState || {}).length > 0 &&
-                RANGE_SLIDER_SYNC_ZOOM_TYPES.includes(preparedChart.zoom.type)) {
-                setZoomState({
-                    x: [nextRangeSliderState.min, nextRangeSliderState.max],
-                });
-            }
+            // Moving the slider clears zoom so the slider is always the sole source of truth.
+            // Zoom stays active only until the user explicitly touches the slider.
+            setZoomState({});
         }
-    }, [preparedChart.zoom, rangeSliderState, zoomState]);
+    }, [rangeSliderState]);
     return {
         initialized,
         rangeSliderState,

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

@@ -2,7 +2,6 @@ import React from 'react';
 import type { RangeSliderProps } from '../../hooks';
 import './styles.css';
 export interface RangeSliderHandle {
-    getDomain: () => [number, number] | undefined;
     resetState: () => void;
 }
 export declare const RangeSlider: React.MemoExoticComponent<React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<RangeSliderHandle>>>;

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

@@ -20,24 +20,17 @@ function RangeSliderComponent(props, forwardedRef) {
      * in that case, the extra computations simply don't happen.
      *
      * Methods:
-     * - getDomain: returns the current X-axis domain (for synchronization with zoom)
      * - resetState: resets the slider state to its initial value (these calculations
      *   are only possible within the component since it has access to the prepared series data)
      */
     React.useImperativeHandle(forwardedRef, () => ({
-        getDomain: () => {
-            if (!xScale || isBandScale(xScale)) {
-                return undefined;
-            }
-            return xScale.domain().map(Number);
-        },
         resetState: () => {
             if (xScale && !isBandScale(xScale)) {
                 const initialRangeSliderState = getInitialRangeSliderState({
                     xScale,
                     defaultRange,
                 });
-                onUpdate(initialRangeSliderState, false);
+                onUpdate(initialRangeSliderState);
             }
         },
     }), [defaultRange, onUpdate, xScale]);

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

@@ -0,0 +1,9 @@
+export type TextRowData = {
+    text: string;
+    x: number;
+    y: number;
+    size: {
+        width: number;
+        height: number;
+    };
+};

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

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

package/dist/cjs/components/utils/axis-title.d.ts

@@ -0,0 +1,6 @@
+import type { PreparedAxis } from '../../hooks';
+import type { TextRowData } from '../types';
+export declare function getMultilineTitleContentRows({ axis, titleMaxWidth, }: {
+    axis: PreparedAxis;
+    titleMaxWidth: number;
+}): Promise<TextRowData[]>;

package/dist/cjs/components/utils/axis-title.js

@@ -0,0 +1,39 @@
+import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../utils';
+export async function getMultilineTitleContentRows({ axis, titleMaxWidth, }) {
+    const titleContent = [];
+    const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
+    let titleTextRows = await wrapText({
+        text: axis.title.text,
+        style: axis.title.style,
+        width: titleMaxWidth,
+        getTextSize: getTitleTextSize,
+    });
+    titleTextRows = titleTextRows.reduce((acc, row, index) => {
+        if (index < axis.title.maxRowCount) {
+            acc.push(row);
+        }
+        else {
+            acc[axis.title.maxRowCount - 1].text += row.text;
+        }
+        return acc;
+    }, []);
+    for (let i = 0; i < titleTextRows.length; i++) {
+        const textRow = titleTextRows[i];
+        let textRowContent = textRow.text.trim();
+        if (i === titleTextRows.length - 1) {
+            textRowContent = await getTextWithElipsis({
+                text: textRowContent,
+                maxWidth: titleMaxWidth,
+                getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+            });
+        }
+        const textRowSize = await getTitleTextSize(textRowContent);
+        titleContent.push({
+            text: textRowContent,
+            x: 0,
+            y: textRow.y,
+            size: textRowSize,
+        });
+    }
+    return titleContent;
+}

package/dist/cjs/components/{utils.d.ts → utils/index.d.ts}

@@ -1,6 +1,6 @@
-import type { DashStyle } from '../constants';
-import type { ChartScaleLinear, ChartScaleTime } from '../hooks';
-import type { ChartAxisRangeSlider } from '../types';
+import type { DashStyle } from '../../constants';
+import type { ChartScaleLinear, ChartScaleTime } from '../../hooks';
+import type { ChartAxisRangeSlider } from '../../types';
 export declare function getInitialRangeSliderState(args: {
     xScale: ChartScaleLinear | ChartScaleTime;
     defaultRange?: ChartAxisRangeSlider['defaultRange'];

package/dist/cjs/components/{utils.js → utils/index.js}

@@ -1,7 +1,7 @@
 import { duration } from '@gravity-ui/date-utils';
 import { line as lineGenerator } from 'd3';
 import { select } from 'd3-selection';
-import { getLineDashArray, isTimeScale } from '../utils';
+import { getLineDashArray, isTimeScale } from '../../utils';
 export function getInitialRangeSliderState(args) {
     const { defaultRange, xScale } = args;
     let minRange;

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

@@ -9,7 +9,9 @@ export { createXScale } from './x-scale';
 export { createYScale } from './y-scale';
 const createScales = (args) => {
     const { boundsWidth, boundsHeight, isRangeSlider, rangeSliderState, series, split, xAxis, yAxis, zoomState, } = args;
-    let visibleSeries = getOnlyVisibleSeries(series);
+    // For range slider: always use all series regardless of visibility so the slider domain
+    // stays stable when the user hides/shows series via the legend.
+    let visibleSeries = isRangeSlider ? series : getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;

package/dist/cjs/hooks/useAxisScales/x-scale.d.ts

@@ -1,11 +1,5 @@
 import type { PreparedAxis, PreparedSeries, RangeSliderState } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
-export declare function getXMaxDomainResult(args: {
-    xMaxDomain: number;
-    xMaxProps?: number;
-    xMaxRangeSlider?: number;
-    xMaxZoom?: number;
-}): number;
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;

package/dist/cjs/hooks/useAxisScales/x-scale.js

@@ -1,7 +1,7 @@
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SERIES_TYPE } from '../../constants';
-import { getAxisCategories, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, } from '../../utils';
+import { getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getEffectiveXRange, } from '../../utils';
 import { getBandSize } from '../utils/get-band-size';
 import { checkIsPointDomain, filterCategoriesByVisibleSeries, getMinMaxPropsOrState, hasOnlyMarkerSeries, validateArrayData, } from './utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
@@ -27,23 +27,6 @@ function isSeriesWithXAxisOffset(series) {
     const types = [SERIES_TYPE.Heatmap, SERIES_TYPE.BarX];
     return series.some((s) => types.includes(s.type));
 }
-export function getXMaxDomainResult(args) {
-    const { xMaxDomain, xMaxProps, xMaxRangeSlider, xMaxZoom } = args;
-    let xMaxDomainResult = xMaxDomain;
-    // When xMaxRangeSlider is provided, we use it directly without considering xMaxDomain.
-    // This is intentional: the range slider needs to display the chart's maxPadding area,
-    // which would be clipped if we constrained it to xMaxDomain.
-    if (typeof xMaxRangeSlider === 'number') {
-        xMaxDomainResult = xMaxRangeSlider;
-    }
-    else if (typeof xMaxZoom === 'number' && xMaxZoom < xMaxDomain) {
-        xMaxDomainResult = xMaxZoom;
-    }
-    else if (typeof xMaxProps === 'number' && xMaxProps < xMaxDomain) {
-        xMaxDomainResult = xMaxProps;
-    }
-    return xMaxDomainResult;
-}
 function getXScaleRange({ boundsWidth, hasZoomX }) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth];
@@ -54,22 +37,17 @@ function getXScaleRange({ boundsWidth, hasZoomX }) {
 // eslint-disable-next-line complexity
 export function createXScale(args) {
     const { axis, boundsWidth, series, rangeSliderState, zoomStateX } = args;
+    const effectiveX = getEffectiveXRange(zoomStateX, rangeSliderState);
+    const effectiveXMin = effectiveX === null || effectiveX === void 0 ? void 0 : effectiveX[0];
+    const effectiveXMax = effectiveX === null || effectiveX === void 0 ? void 0 : effectiveX[1];
     const [xMinPropsOrState, xMaxPropsOrState] = getMinMaxPropsOrState({
         axis,
-        maxValues: [zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[1], rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.max],
-        minValues: [zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[0], rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.min],
+        maxValues: [effectiveXMax],
+        minValues: [effectiveXMin],
     });
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const hasZoomX = Boolean(zoomStateX);
-    let xCategories = get(axis, 'categories');
-    if (rangeSliderState && xCategories) {
-        xCategories = getAxisCategories({
-            categories: xCategories,
-            min: rangeSliderState.min,
-            max: rangeSliderState.max,
-            order: axis.order,
-        });
-    }
+    const xCategories = get(axis, 'categories');
     const maxPadding = get(axis, 'maxPadding', 0);
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const range = getXScaleRange({
@@ -193,12 +171,11 @@ export function createXScale(args) {
                     !isPointDomain
                     ? xMinPropsOrState
                     : xMinTimestamp;
-                const xMax = getXMaxDomainResult({
-                    xMaxDomain: xMaxTimestamp,
-                    xMaxProps: get(axis, 'max'),
-                    xMaxRangeSlider: rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.max,
-                    xMaxZoom: zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[1],
-                });
+                const xMax = typeof xMaxPropsOrState === 'number' &&
+                    xMaxPropsOrState < xMaxTimestamp &&
+                    !isPointDomain
+                    ? xMaxPropsOrState
+                    : xMaxTimestamp;
                 domain = [xMin, xMax];
                 const scale = scaleUtc().domain(domain).range(range);
                 let offsetMin = 0;

package/dist/cjs/hooks/useRangeSlider/types.d.ts

@@ -13,7 +13,7 @@ export interface RangeSliderProps {
     boundsWidth: number;
     height: number;
     htmlLayout: HTMLElement | null;
-    onUpdate: (nextRangeSliderState?: RangeSliderState, syncZoom?: boolean) => void;
+    onUpdate: (nextRangeSliderState?: RangeSliderState) => void;
     preparedChart: PreparedChart;
     preparedLegend: PreparedLegend | null;
     preparedRangeSlider: PreparedRangeSlider;

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -8,7 +8,8 @@ import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize }
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
-    const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
+    const seriesWithEnabledLegend = series.filter((s) => { var _a; return ((_a = s.legend) === null || _a === void 0 ? void 0 : _a.enabled) !== false; });
+    const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : seriesWithEnabledLegend.length > 1);
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);

package/dist/cjs/utils/chart/zoom.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedSeries, PreparedXAxis, PreparedYAxis } from '../../hooks';
+import type { PreparedSeries, PreparedXAxis, PreparedYAxis, RangeSliderState } from '../../hooks';
 import type { ZoomState } from '../../hooks/useZoom/types';
 import type { ChartXAxis, ChartYAxis } from '../../types';
 export declare function getZoomedSeriesData(args: {
@@ -10,3 +10,4 @@ export declare function getZoomedSeriesData(args: {
     preparedSeries: PreparedSeries[];
     preparedShapesSeries: PreparedSeries[];
 };
+export declare function getEffectiveXRange(zoomStateX: [number, number] | undefined, rangeSliderState: RangeSliderState | undefined): [number, number] | undefined;

package/dist/cjs/utils/chart/zoom.js

@@ -123,3 +123,12 @@ export function getZoomedSeriesData(args) {
         preparedShapesSeries: zoomedShapesSeriesData,
     };
 }
+export function getEffectiveXRange(zoomStateX, rangeSliderState) {
+    if (zoomStateX && rangeSliderState) {
+        return [
+            Math.max(zoomStateX[0], rangeSliderState.min),
+            Math.min(zoomStateX[1], rangeSliderState.max),
+        ];
+    }
+    return (zoomStateX !== null && zoomStateX !== void 0 ? zoomStateX : (rangeSliderState ? [rangeSliderState.min, rangeSliderState.max] : undefined));
+}

package/dist/esm/components/AxisX/AxisX.js

@@ -32,7 +32,6 @@ export const AxisX = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('text-anchor', 'start')
-                .style('dominant-baseline', 'text-after-edge')
                 .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
                 .attr('font-size', preparedAxisData.title.style.fontSize)
                 .selectAll('tspan')