@gravity-ui/charts 1.26.0 → 1.27.0

package/dist/esm/components/Legend/index.js

@@ -6,17 +6,15 @@ import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineD
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
-const getLegendItemPosition = (args) => {
+const getLegendItemLeftPosition = (args) => {
     const { align, width, contentWidth } = args;
     if (align === 'right') {
-        return { left: width - contentWidth };
+        return width - contentWidth;
     }
-    else if (align === 'left') {
-        return { left: 0 };
-    }
-    else {
-        return { left: width / 2 - contentWidth / 2 };
+    if (align === 'left') {
+        return 0;
     }
+    return width / 2 - contentWidth / 2;
 };
 const getLegendPosition = (args) => {
     const { offsetLeft, offsetTop, contentWidth, width } = args;
@@ -256,12 +254,11 @@ export const Legend = (props) => {
                     let left = 0;
                     switch (legend.justifyContent) {
                         case 'center': {
-                            const legendLinePostion = getLegendItemPosition({
+                            left = getLegendItemLeftPosition({
                                 align: legend.align,
                                 width: config.maxWidth,
                                 contentWidth,
                             });
-                            left = legendLinePostion.left;
                             legendWidth = config.maxWidth;
                             break;
                         }
@@ -296,11 +293,21 @@ export const Legend = (props) => {
                 legendTop = top;
             }
             else {
-                const { left } = getLegendItemPosition({
-                    align: legend.align,
-                    width: config.maxWidth,
-                    contentWidth: legend.width,
-                });
+                let left = 0;
+                switch (legend.align) {
+                    case 'right': {
+                        left = config.offset.left + config.maxWidth - legend.width;
+                        break;
+                    }
+                    case 'left': {
+                        left = config.offset.left;
+                        break;
+                    }
+                    case 'center': {
+                        left = config.offset.left + config.maxWidth / 2 - legend.width / 2;
+                        break;
+                    }
+                }
                 const { top } = getLegendPosition({
                     width: config.maxWidth,
                     contentWidth: legendWidth,

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

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

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

@@ -1,14 +1,46 @@
 import React from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import { useBrush, useRangeSlider } from '../../hooks';
-import { block } from '../../utils';
+import { block, isBandScale } from '../../utils';
+import { getInitialRangeSliderState } from '../utils';
 import { getFramedPath } from './utils';
 import './styles.css';
 const b = block('range-slider');
-function RangeSliderComponent(props) {
+function RangeSliderComponent(props, forwardedRef) {
+    const { onUpdate } = props;
     const clipPathId = useUniqId();
-    const { brush, height, onBrushEnd, onOverlayClick, offsetLeft, offsetTop, preparedXAxis, preparedYAxis, selection, shapes, width, } = useRangeSlider(Object.assign(Object.assign({}, props), { clipPathId }));
+    const { brush, defaultRange, height, onBrushEnd, onOverlayClick, offsetLeft, offsetTop, preparedXAxis, preparedYAxis, selection, shapes, width, xScale, } = useRangeSlider(Object.assign(Object.assign({}, props), { clipPathId }));
     const ref = React.useRef(null);
+    /*
+     * We use useImperativeHandle to expose methods to the parent component.
+     *
+     * This is necessary due to an architectural decision: all calculations for all data series
+     * (without zoom) are performed only within the RangeSlider component. This approach
+     * was chosen to avoid degrading performance for charts that don't use the slider —
+     * 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);
+            }
+        },
+    }), [defaultRange, onUpdate, xScale]);
     const areas = React.useMemo(() => {
         if (!preparedXAxis || !(preparedYAxis === null || preparedYAxis === void 0 ? void 0 : preparedYAxis.length)) {
             return [];
@@ -38,4 +70,4 @@ function RangeSliderComponent(props) {
         React.createElement("g", { className: b('shapes') }, shapes),
         React.createElement("rect", { height: height, className: b('clickable-overlay'), onClick: onOverlayClick, width: width, x: 0, y: 0 })));
 }
-export const RangeSlider = React.memo(RangeSliderComponent);
+export const RangeSlider = React.memo(React.forwardRef(RangeSliderComponent));

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

@@ -1,11 +1,11 @@
 import React from 'react';
 export const Title = (props) => {
-    const { chartWidth, text, height, style } = props;
+    const { chartWidth, text, height, style, qa } = props;
     return (React.createElement("text", { dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", 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,
             lineHeight: `${height}px`,
-        } },
+        }, "data-qa": qa },
         React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
 };

package/dist/esm/components/utils.d.ts

@@ -0,0 +1,9 @@
+import type { ChartScaleLinear, ChartScaleTime } from '../hooks';
+import type { ChartAxisRangeSlider } from '../types';
+export declare function getInitialRangeSliderState(args: {
+    xScale: ChartScaleLinear | ChartScaleTime;
+    defaultRange?: ChartAxisRangeSlider['defaultRange'];
+}): {
+    min: number;
+    max: number;
+};

package/dist/esm/components/utils.js

@@ -0,0 +1,34 @@
+import { duration } from '@gravity-ui/date-utils';
+import { isTimeScale } from '../utils';
+export function getInitialRangeSliderState(args) {
+    const { defaultRange, xScale } = args;
+    let minRange;
+    let maxRange;
+    if (isTimeScale(xScale)) {
+        const [minDomainMs, maxDomainMs] = xScale.domain().map(Number);
+        minRange = minDomainMs;
+        maxRange = maxDomainMs;
+        try {
+            if (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.size) {
+                const durationMs = duration(defaultRange.size).asMilliseconds();
+                const minDefaultRangeMs = maxDomainMs - durationMs;
+                if (minDefaultRangeMs < maxDomainMs) {
+                    minRange = minDefaultRangeMs;
+                }
+            }
+        }
+        catch (_a) { }
+    }
+    else {
+        const [minDomain, maxDomain] = xScale.domain();
+        minRange = minDomain;
+        maxRange = maxDomain;
+        if (typeof (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.size) === 'number') {
+            const minDefaultRange = maxDomain - defaultRange.size;
+            if (minDefaultRange < maxDomain) {
+                minRange = minDefaultRange;
+            }
+        }
+    }
+    return { min: minRange, max: maxRange };
+}

package/dist/esm/constants/defaults/axis.js

@@ -1,7 +1,7 @@
 import { DASH_STYLE } from '../line-styles';
 export const axisLabelsDefaults = {
     margin: 10,
-    padding: 10,
+    padding: 4,
     fontSize: 11,
     maxWidth: 80,
 };

package/dist/esm/hooks/index.d.ts

@@ -4,7 +4,6 @@ export * from './useAxisScales';
 export * from './useBrush';
 export * from './useBrush/types';
 export * from './useChartDimensions';
-export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useCrosshair';
 export * from './useNormalizedOriginalData';

package/dist/esm/hooks/index.js

@@ -4,7 +4,6 @@ export * from './useAxisScales';
 export * from './useBrush';
 export * from './useBrush/types';
 export * from './useChartDimensions';
-export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useCrosshair';
 export * from './useNormalizedOriginalData';

package/dist/esm/hooks/useAxis/index.js

@@ -14,9 +14,19 @@ export function useAxis(props) {
         (async function () {
             const currentRun = axesStateRunRef.current;
             const seriesData = preparedSeries.filter((s) => s.visible);
+            const estimatedPreparedYAxis = await getPreparedYAxis({
+                height,
+                boundsHeight: height,
+                width,
+                seriesData,
+                yAxis,
+            });
+            const axesWidth = estimatedPreparedYAxis.reduce((acc, a) => acc + a.title.height + a.title.margin + a.labels.margin + a.labels.width, 0);
+            const estimatedBoundsWidth = width - (axesWidth + preparedChart.margin.left + preparedChart.margin.right);
             const preparedXAxis = await getPreparedXAxis({
                 xAxis,
                 width,
+                boundsWidth: estimatedBoundsWidth,
                 seriesData,
             });
             let estimatedBoundsHeight = boundsHeight !== null && boundsHeight !== void 0 ? boundsHeight : height;

package/dist/esm/hooks/useAxis/types.d.ts

@@ -43,6 +43,9 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
         style: BaseTextStyle;
         align: ChartAxisTitleAlignment;
         maxRowCount: number;
+        rotation: number;
+        maxWidth: number;
+        html: boolean;
     };
     min?: number;
     grid: {

package/dist/esm/hooks/useAxis/x-axis.d.ts

@@ -1,7 +1,8 @@
 import type { ChartSeries, ChartXAxis } from '../../types';
 import type { PreparedXAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, seriesData, width, }: {
+export declare const getPreparedXAxis: ({ xAxis, seriesData, width, boundsWidth, }: {
     xAxis?: ChartXAxis;
     seriesData: ChartSeries[];
     width: number;
+    boundsWidth: number;
 }) => Promise<PreparedXAxis | null>;

package/dist/esm/hooks/useAxis/x-axis.js

@@ -1,6 +1,7 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
 import { prepareAxisPlotLabel } from './utils';
@@ -11,31 +12,31 @@ async function setLabelSettings({ axis, seriesData, width, autoRotation = true,
         axis.labels.rotation = 0;
         return;
     }
-    const tickCount = getTicksCount({ axis, range: width });
-    const ticks = getAxisItems({
-        scale: scale,
-        count: tickCount,
-        maxCount: getMaxTickCount({ width, axis }),
-    });
-    const step = getClosestPointsRange(axis, ticks);
+    const getTextSize = getTextSizeFn({ style: axis.labels.style });
+    const labelLineHeight = (await getTextSize('Tmp')).height;
+    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight });
+    const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !axis.labels.dateFormat) {
-        axis.labels.dateFormat = getDefaultDateFormat(step);
+        axis.labels.dateFormat = getDefaultDateFormat(tickStep);
     }
-    const labels = ticks.map((value) => {
-        return formatAxisTickLabel({
-            axis,
-            value,
-            step,
-        });
-    });
-    const overlapping = axis.labels.html
-        ? false
-        : hasOverlappingLabels({
-            width,
-            labels,
-            padding: axis.labels.padding,
-            style: axis.labels.style,
-        });
+    const labels = tickValues.map((tick) => formatAxisTickLabel({
+        axis,
+        value: tick.value,
+        step: tickStep,
+    }));
+    const labelMaxWidth = tickValues.length > 1
+        ? getMinSpaceBetween(tickValues, (d) => d.x) - axis.labels.padding * 2
+        : width;
+    const hasOverlappingLabels = async () => {
+        for (let i = 0; i < labels.length; i++) {
+            const size = await getTextSize(labels[i]);
+            if (size.width > labelMaxWidth) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const overlapping = axis.labels.html ? false : await hasOverlappingLabels();
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
     const rotation = axis.labels.html ? 0 : axis.labels.rotation || defaultRotation;
     const labelsHeight = rotation || axis.labels.html
@@ -56,7 +57,7 @@ function getMaxPaddingBySeries({ series }) {
     }
     return 0.01;
 }
-export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
+export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth, }) => {
     var _a, _b, _c, _d, _e;
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
     if (!hasAxisRelatedSeries) {
@@ -82,6 +83,10 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
         ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
         : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
     const shouldHideGrid = seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
+    const preparedRangeSlider = getPreparedRangeSlider({ xAxis });
+    const maxPadding = preparedRangeSlider.enabled
+        ? 0
+        : get(xAxis, 'maxPadding', getMaxPaddingBySeries({ series: seriesData }));
     const preparedXAxis = {
         type: get(xAxis, 'type', 'linear'),
         labels: {
@@ -109,10 +114,13 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             width: titleSize.maxWidth,
             align: get(xAxis, 'title.align', xAxisTitleDefaults.align),
             maxRowCount: get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount),
+            rotation: 0,
+            maxWidth: Infinity,
+            html: false,
         },
         min: get(xAxis, 'min'),
         max: get(xAxis, 'max'),
-        maxPadding: get(xAxis, 'maxPadding', getMaxPaddingBySeries({ series: seriesData })),
+        maxPadding,
         grid: {
             enabled: shouldHideGrid ? false : get(xAxis, 'grid.enabled', true),
         },
@@ -154,12 +162,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
         },
         visible: get(xAxis, 'visible', true),
         order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
-        rangeSlider: getPreparedRangeSlider({ xAxis }),
+        rangeSlider: preparedRangeSlider,
     };
     await setLabelSettings({
         axis: preparedXAxis,
         seriesData,
-        width,
+        width: boundsWidth,
         autoRotation: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.autoRotation,
     });
     return preparedXAxis;

package/dist/esm/hooks/useAxis/y-axis.js

@@ -43,6 +43,13 @@ function getMaxPaddingBySeries({ series }) {
     }
     return 0.05;
 }
+const VALID_Y_AXIS_TITLE_ROTATION = [0, -90, 90];
+function getAxisTitleRotation(value, axisPosition) {
+    if (typeof value !== 'undefined' && VALID_Y_AXIS_TITLE_ROTATION.includes(value)) {
+        return value;
+    }
+    return axisPosition === 'left' ? -90 : 90;
+}
 export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
@@ -50,8 +57,10 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
     if (!hasAxisRelatedSeries) {
         return Promise.resolve([]);
     }
-    return Promise.all(axisItems.map(async (axisItem, axisIndex) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+    return Promise.all(
+    // eslint-disable-next-line complexity
+    axisItems.map(async (axisItem, axisIndex) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -59,6 +68,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         }
         axisByPlot[plotIndex].push(axisItem);
         const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
+        const axisPosition = get(axisItem, 'position', defaultAxisPosition);
         const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === axisIndex);
         const labelsEnabled = get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
@@ -76,7 +86,21 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             style: titleStyle,
             width: height,
         })).slice(0, titleMaxRowsCount);
-        const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
+        const titleRotation = getAxisTitleRotation((_a = axisItem.title) === null || _a === void 0 ? void 0 : _a.rotation, axisPosition);
+        const titleMaxWidth = titleRotation === 0
+            ? calculateNumericProperty({
+                value: (_c = (_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.maxWidth) !== null && _c !== void 0 ? _c : '20%',
+                base: width,
+            })
+            : calculateNumericProperty({
+                value: (_e = (_d = axisItem.title) === null || _d === void 0 ? void 0 : _d.maxWidth) !== null && _e !== void 0 ? _e : '100%',
+                base: height,
+            });
+        const titleSize = await getLabelsSize({
+            labels: [titleText],
+            style: titleStyle,
+            html: (_f = axisItem.title) === null || _f === void 0 ? void 0 : _f.html,
+        });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
         const shouldHideGrid = axisItem.visible === false ||
             axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
@@ -95,7 +119,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: (_b = calculateNumericProperty({ base: width, value: (_a = axisItem.labels) === null || _a === void 0 ? void 0 : _a.maxWidth })) !== null && _b !== void 0 ? _b : axisLabelsDefaults.maxWidth,
+                maxWidth: (_h = calculateNumericProperty({ base: width, value: (_g = axisItem.labels) === null || _g === void 0 ? void 0 : _g.maxWidth })) !== null && _h !== void 0 ? _h : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -105,29 +129,32 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 text: titleText,
                 margin: get(axisItem, 'title.margin', yAxisTitleDefaults.margin),
                 style: titleStyle,
-                width: titleSize.maxWidth,
+                width: Math.min(titleSize.maxWidth, titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity),
                 height: titleSize.maxHeight * estimatedTitleRows.length,
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
+                html: (_k = (_j = axisItem.title) === null || _j === void 0 ? void 0 : _j.html) !== null && _k !== void 0 ? _k : false,
+                maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
+                rotation: titleRotation,
             },
-            min: (_c = get(axisItem, 'min')) !== null && _c !== void 0 ? _c : getDefaultMinYAxisValue(axisSeriesData),
+            min: (_l = get(axisItem, 'min')) !== null && _l !== void 0 ? _l : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
             maxPadding: get(axisItem, 'maxPadding', getMaxPaddingBySeries({ series: axisSeriesData })),
             grid: {
                 enabled: shouldHideGrid
                     ? false
                     : get(axisItem, 'grid.enabled', firstPlotAxis ||
-                        (!firstPlotAxis && !((_d = axisByPlot[plotIndex][0].visible) !== null && _d !== void 0 ? _d : true))),
+                        (!firstPlotAxis && !((_m = axisByPlot[plotIndex][0].visible) !== null && _m !== void 0 ? _m : true))),
             },
             ticks: {
-                pixelInterval: ((_e = axisItem.ticks) === null || _e === void 0 ? void 0 : _e.interval)
+                pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
                     ? calculateNumericProperty({
                         base: height,
-                        value: (_f = axisItem.ticks) === null || _f === void 0 ? void 0 : _f.interval,
+                        value: (_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval,
                     })
-                    : (_g = axisItem.ticks) === null || _g === void 0 ? void 0 : _g.pixelInterval,
+                    : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
             },
-            position: get(axisItem, 'position', defaultAxisPosition),
+            position: axisPosition,
             plotIndex: get(axisItem, 'plotIndex', 0),
             plotLines: get(axisItem, 'plotLines', []).map((d) => ({
                 value: get(d, 'value', 0),

package/dist/esm/hooks/useAxisScales/index.d.ts

@@ -1,7 +1,10 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
 import type { PreparedAxis, PreparedSeries, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
-export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
+type ChartScaleBand = ScaleBand<string>;
+export type ChartScaleLinear = ScaleLinear<number, number>;
+export type ChartScaleTime = ScaleTime<number, number>;
+export type ChartScale = ChartScaleBand | ChartScaleLinear | ChartScaleTime;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SERIES_TYPE } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisCategories, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 import { getBandSize } from '../utils/get-band-size';
-import { checkIsPointDomain, getMinMaxPropsOrState, hasOnlyMarkerSeries } from './utils';
+import { checkIsPointDomain, getMinMaxPropsOrState, getXMaxDomainResult, hasOnlyMarkerSeries, } from './utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function validateArrayData(data) {
     let hasNumberAndNullValues;
@@ -242,7 +242,7 @@ export function createXScale(args) {
             order: axis.order,
         });
     }
-    const maxPadding = rangeSliderState ? 0 : get(axis, 'maxPadding', 0);
+    const maxPadding = get(axis, 'maxPadding', 0);
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const range = getXScaleRange({
         boundsWidth,
@@ -350,11 +350,12 @@ export function createXScale(args) {
                     !isPointDomain
                     ? xMinPropsOrState
                     : xMinTimestamp;
-                const xMax = typeof xMaxPropsOrState === 'number' &&
-                    xMaxPropsOrState < xMaxTimestamp &&
-                    !isPointDomain
-                    ? xMaxPropsOrState
-                    : xMaxTimestamp;
+                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],
+                });
                 domain = [xMin, xMax];
                 const scale = scaleUtc().domain(domain).range(range);
                 let offsetMin = 0;

package/dist/esm/hooks/useAxisScales/utils.d.ts

@@ -16,4 +16,10 @@ export declare function getMinMaxPropsOrState(args: {
  */
 export declare function checkIsPointDomain(domain: [number, number]): boolean;
 export declare function hasOnlyMarkerSeries(series: (PreparedSeries | ChartSeries)[]): boolean;
+export declare function getXMaxDomainResult(args: {
+    xMaxDomain: number;
+    xMaxProps?: number;
+    xMaxRangeSlider?: number;
+    xMaxZoom?: number;
+}): number;
 export {};

package/dist/esm/hooks/useAxisScales/utils.js

@@ -32,3 +32,20 @@ export function checkIsPointDomain(domain) {
 export function hasOnlyMarkerSeries(series) {
     return series.every((s) => MARKER_SERIES_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;
+}

package/dist/esm/hooks/useChartDimensions/utils.js

@@ -11,7 +11,13 @@ export function getYAxisWidth(axis) {
     }
     let result = 0;
     if (axis === null || axis === void 0 ? void 0 : axis.title.text) {
-        result += axis.title.height + axis.title.margin;
+        result += axis.title.margin;
+        if (axis.title.rotation === 0) {
+            result += axis.title.width;
+        }
+        else {
+            result += axis.title.height;
+        }
     }
     if (axis === null || axis === void 0 ? void 0 : axis.labels.enabled) {
         result += axis.labels.margin + axis.labels.width;

package/dist/esm/hooks/useNormalizedOriginalData/index.d.ts

@@ -14,13 +14,7 @@ export declare function useNormalizedOriginalData(props: UseOriginalDataProps):
         type?: import("../..").ChartAxisType;
         labels?: import("../..").ChartAxisLabels;
         lineColor?: string;
-        title?: {
-            text?: string;
-            style?: Partial<import("../..").BaseTextStyle>;
-            margin?: number;
-            align?: import("../..").ChartAxisTitleAlignment;
-            maxRowCount?: number;
-        };
+        title?: import("../..").ChartAxisTitle;
         min?: number;
         max?: number;
         grid?: {

package/dist/esm/hooks/useRangeSlider/index.js

@@ -17,7 +17,7 @@ const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: true,
 };
 export function useRangeSlider(props) {
-    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, zoomState, } = props;
+    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
@@ -44,7 +44,6 @@ export function useRangeSlider(props) {
         split: EMPTY_PREPARED_SPLIT,
         xAxis: preparedXAxis,
         yAxis: preparedYAxis,
-        zoomState,
     });
     const { shapes } = useShapes({
         boundsHeight: preparedRangeSlider.height,

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

@@ -4,7 +4,6 @@ import type { ChartScale } from '../useAxisScales';
 import type { BrushSelection, UseBrushProps } from '../useBrush/types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
-import type { ZoomState } from '../useZoom/types';
 export type RangeSliderState = {
     max: number;
     min: number;
@@ -14,7 +13,7 @@ export interface RangeSliderProps {
     boundsWidth: number;
     height: number;
     htmlLayout: HTMLElement | null;
-    onUpdate: (nextRangeSliderState?: RangeSliderState) => void;
+    onUpdate: (nextRangeSliderState?: RangeSliderState, syncZoom?: boolean) => void;
     preparedChart: PreparedChart;
     preparedLegend: PreparedLegend | null;
     preparedRangeSlider: PreparedRangeSlider;
@@ -24,7 +23,6 @@ export interface RangeSliderProps {
     rangeSliderState?: RangeSliderState;
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis[];
-    zoomState?: Partial<ZoomState>;
 }
 export interface UseRangeSliderProps extends RangeSliderProps {
     clipPathId: string;