@gravity-ui/charts 1.14.0 → 1.16.0

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

@@ -39,8 +39,13 @@ export function useChartInnerProps(props) {
     const [xAxis, setXAxis] = React.useState(null);
     React.useEffect(() => {
         setXAxis(null);
-        getPreparedXAxis({ xAxis: data.xAxis, width, seriesData: zoomedSeriesData }).then((val) => setXAxis(val));
-    }, [data.xAxis, width, zoomedSeriesData]);
+        getPreparedXAxis({
+            xAxis: data.xAxis,
+            width,
+            seriesData: zoomedSeriesData,
+            seriesOptions: preparedSeriesOptions,
+        }).then((val) => setXAxis(val));
+    }, [data.xAxis, preparedSeriesOptions, width, zoomedSeriesData]);
     const [yAxis, setYAxis] = React.useState([]);
     React.useEffect(() => {
         setYAxis([]);

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -2,10 +2,13 @@ import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
 export interface ChartTooltipContentProps {
     hovered?: TooltipDataChunk[];
-    xAxis?: ChartXAxis | null;
-    yAxis?: ChartYAxis;
+    pinned?: boolean;
     renderer?: ChartTooltip['renderer'];
+    rowRenderer?: ChartTooltip['rowRenderer'];
     valueFormat?: ChartTooltip['valueFormat'];
+    headerFormat?: ChartTooltip['headerFormat'];
     totals?: ChartTooltip['totals'];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
 }
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer, valueFormat, totals } = props;
+    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
-    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat, totals: totals })) : (customTooltip);
+    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
 };

package/dist/cjs/components/Tooltip/DefaultTooltipContent/Row.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 export declare function Row(props: {
     label: React.ReactNode;
-    value: React.ReactNode;
     active?: boolean;
     className?: string;
     color?: string;
     striped?: boolean;
+    style?: React.CSSProperties;
+    value?: React.ReactNode;
 }): React.JSX.Element;

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { block } from '../../../utils';
 const b = block('tooltip');
 export function Row(props) {
-    const { label, value, active, color, className, striped } = props;
-    return (React.createElement("div", { className: b('content-row', { active, striped }, className) },
+    const { label, value, active, color, className, striped, style } = props;
+    return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
         color && React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } }),
         label,
-        React.createElement("span", { className: b('content-row-value') }, value)));
+        value && React.createElement("span", { className: b('content-row-value') }, value)));
 }

package/dist/cjs/components/Tooltip/DefaultTooltipContent/{RowTotals.d.ts → RowWithAggregation.d.ts}

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ValueFormat } from '../../../types';
 import type { HoveredValue } from './utils';
-export declare function RowTotals(props: {
+export declare function RowWithAggregation(props: {
     aggregation: ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);
     values: HoveredValue[];
     label?: string;
+    style?: React.CSSProperties;
     valueFormat?: ValueFormat;
 }): React.JSX.Element;

package/dist/cjs/components/Tooltip/DefaultTooltipContent/{RowTotals.js → RowWithAggregation.js}

@@ -4,8 +4,8 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
 import { getBuiltInAggregatedValue, getBuiltInAggregationLabel } from './utils';
 const b = block('tooltip');
-export function RowTotals(props) {
-    const { aggregation, label, valueFormat, values } = props;
+export function RowWithAggregation(props) {
+    const { aggregation, label, style, valueFormat, values } = props;
     let resultLabel = label;
     if (!resultLabel && typeof aggregation === 'string') {
         resultLabel = getBuiltInAggregationLabel({ aggregation });
@@ -19,5 +19,5 @@ export function RowTotals(props) {
             format: valueFormat || { type: 'number' },
         })
         : resultValue;
-    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, value: formattedResultValue }));
+    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, style: style, value: formattedResultValue }));
 }

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.d.ts

@@ -2,10 +2,13 @@ import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
 type Props = {
     hovered: TooltipDataChunk[];
+    pinned?: boolean;
+    rowRenderer?: ChartTooltip['rowRenderer'];
     totals?: ChartTooltip['totals'];
     valueFormat?: ValueFormat;
+    headerFormat?: ChartTooltip['headerFormat'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 };
-export declare const DefaultTooltipContent: ({ hovered, xAxis, yAxis, valueFormat, totals }: Props) => React.JSX.Element;
+export declare const DefaultTooltipContent: ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }: Props) => React.JSX.Element;
 export {};

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

@@ -1,102 +1,202 @@
 import React from 'react';
 import { Divider } from '@gravity-ui/uikit';
 import get from 'lodash/get';
-import { block } from '../../../utils';
+import isEqual from 'lodash/isEqual';
+import { usePrevious } from '../../../hooks';
+import { i18n } from '../../../i18n';
+import { block, hasVerticalScrollbar } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
-import { RowTotals } from './RowTotals';
+import { RowWithAggregation } from './RowWithAggregation';
 import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
 const b = block('tooltip');
-export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals }) => {
+export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }) => {
+    var _a;
+    const [visibleRows, setVisibleRows] = React.useState();
+    const [maxContentRowsHeight, setMaxContentRowsHeight] = React.useState();
+    const [scrollBarWidth, setScrollBarWidth] = React.useState(0);
+    const contentRowsRef = React.useRef(null);
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
-    return (React.createElement("div", { className: b('content') },
-        measureValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: measureValue } })),
-        // eslint-disable-next-line complexity
-        hovered.map((seriesItem, i) => {
-            var _a;
-            const { data, series, closest } = seriesItem;
-            const id = `${get(series, 'id')}_${i}`;
-            const color = get(data, 'color') || get(series, 'color');
-            const active = closest && hovered.length > 1;
-            const striped = (i + 1) % 2 === 0;
-            switch (series.type) {
-                case 'scatter':
-                case 'line':
-                case 'area':
-                case 'bar-x': {
-                    const format = valueFormat || getDefaultValueFormat({ axis: yAxis });
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format,
-                    });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
-                }
-                case 'waterfall': {
-                    const isTotal = get(data, 'total', false);
-                    const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                    const format = valueFormat || getDefaultValueFormat({ axis: yAxis });
-                    const subTotal = getFormattedValue({
-                        value: subTotalValue,
-                        format,
-                    });
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format,
-                    });
-                    return (React.createElement(React.Fragment, { key: id },
-                        !isTotal && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
-                            React.createElement(Row, { label: series.name, value: formattedValue }))),
-                        React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
-                }
-                case 'bar-y': {
-                    const format = valueFormat || getDefaultValueFormat({ axis: xAxis });
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format,
-                    });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
-                }
-                case 'pie':
-                case 'treemap': {
-                    const seriesData = data;
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format: valueFormat || { type: 'number' },
-                    });
-                    return (React.createElement(Row, { key: id, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: [seriesData.name || seriesData.id]
-                                    .flat()
-                                    .join('\n'),
-                            } }), value: formattedValue }));
+    const prevHoveredValues = usePrevious(hoveredValues);
+    const visibleHovered = pinned || !visibleRows ? hovered : hovered.slice(0, visibleRows);
+    const restHoveredValues = pinned || !visibleRows ? [] : hoveredValues.slice(visibleRows);
+    const renderRow = ({ id, name, color, active, striped, value, formattedValue, }) => {
+        if (typeof rowRenderer === 'function') {
+            return rowRenderer({
+                id,
+                name,
+                color,
+                value,
+                formattedValue,
+                striped,
+                active,
+                className: b('content-row', { active, striped }),
+                hovered,
+            });
+        }
+        return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
+    };
+    const formattedHeadValue = headerFormat
+        ? getFormattedValue({ value: measureValue, format: headerFormat })
+        : measureValue;
+    React.useEffect(() => {
+        if (!contentRowsRef.current) {
+            return;
+        }
+        if (!hasVerticalScrollbar(contentRowsRef.current)) {
+            return;
+        }
+        if (!isEqual(hoveredValues, prevHoveredValues)) {
+            const { clientHeight } = contentRowsRef.current;
+            const { top: containerTop } = contentRowsRef.current.getBoundingClientRect();
+            const rows = contentRowsRef.current.querySelectorAll(`.${b('content-row')}`);
+            let nextVisibleRows = 0;
+            let nextMaxContentRowsHeight = 0;
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i];
+                const { top, height } = row.getBoundingClientRect();
+                if (top - containerTop + height <= clientHeight) {
+                    nextVisibleRows += 1;
+                    nextMaxContentRowsHeight += height;
                 }
-                case 'sankey': {
-                    const { target, data: source } = seriesItem;
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format: valueFormat || { type: 'number' },
-                    });
-                    return (React.createElement(Row, { key: id, color: source.color, label: React.createElement("span", null,
-                            source.name,
-                            " \u2192 ", target === null || target === void 0 ? void 0 :
-                            target.name,
-                            ":"), value: formattedValue }));
-                }
-                case 'radar': {
-                    const radarSeries = series;
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format: valueFormat || { type: 'number' },
-                    });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: radarSeries.name || radarSeries.id, value: formattedValue }));
-                }
-                default: {
-                    return null;
+                else {
+                    break;
                 }
             }
-        }),
+            setVisibleRows(nextVisibleRows - 1);
+            setMaxContentRowsHeight(nextMaxContentRowsHeight);
+        }
+    }, [hoveredValues, prevHoveredValues]);
+    React.useEffect(() => {
+        if (!contentRowsRef.current) {
+            return;
+        }
+        if (pinned) {
+            const { offsetWidth, clientWidth } = contentRowsRef.current;
+            setScrollBarWidth(offsetWidth - clientWidth);
+        }
+        else {
+            setScrollBarWidth(0);
+        }
+    }, [pinned]);
+    return (React.createElement("div", { className: b('content') },
+        formattedHeadValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: formattedHeadValue } })),
+        React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
+            visibleHovered.map((seriesItem, i) => {
+                var _a;
+                const { data, series, closest } = seriesItem;
+                const id = `${get(series, 'id')}_${i}`;
+                const color = get(data, 'color') || get(series, 'color');
+                // TODO: improve action item display https://github.com/gravity-ui/charts/issues/208
+                const active = closest && hovered.length > 1;
+                const striped = (i + 1) % 2 === 0;
+                const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
+                switch (series.type) {
+                    case 'scatter':
+                    case 'line':
+                    case 'area':
+                    case 'bar-x': {
+                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format,
+                        });
+                        return renderRow({
+                            id,
+                            active,
+                            color,
+                            name: series.name,
+                            striped,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'waterfall': {
+                        const isTotal = get(data, 'total', false);
+                        const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
+                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                        const subTotal = getFormattedValue({
+                            value: subTotalValue,
+                            format,
+                        });
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format,
+                        });
+                        return (React.createElement(React.Fragment, { key: id },
+                            !isTotal && (React.createElement(React.Fragment, null,
+                                React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
+                                React.createElement(Row, { label: series.name, value: formattedValue }))),
+                            React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
+                    }
+                    case 'bar-y': {
+                        const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format,
+                        });
+                        return renderRow({
+                            id,
+                            active,
+                            color,
+                            name: series.name,
+                            striped,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'pie':
+                    case 'treemap': {
+                        const seriesData = data;
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format: rowValueFormat || { type: 'number' },
+                        });
+                        return renderRow({
+                            id,
+                            color,
+                            name: [seriesData.name || seriesData.id].flat().join('\n'),
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'sankey': {
+                        const { target, data: source } = seriesItem;
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format: rowValueFormat || { type: 'number' },
+                        });
+                        return renderRow({
+                            id,
+                            color,
+                            name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'radar': {
+                        const radarSeries = series;
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format: rowValueFormat || { type: 'number' },
+                        });
+                        return renderRow({
+                            id,
+                            color,
+                            active,
+                            name: radarSeries.name || radarSeries.id,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    default: {
+                        return null;
+                    }
+                }
+            }),
+            Boolean(restHoveredValues.length) && (React.createElement(Row, { label: i18n('tooltip', 'label_more', { count: restHoveredValues.length }), striped: (visibleHovered.length + 1) % 2 === 0 }))),
         (totals === null || totals === void 0 ? void 0 : totals.enabled) && hovered.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(Divider, { className: b('content-row-totals-divider') }),
-            React.createElement(RowTotals, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, values: hoveredValues, valueFormat: valueFormat })))));
+            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
 };

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

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis })))) : null;
 };

package/dist/cjs/components/Tooltip/styles.css

@@ -1,4 +1,5 @@
 .gcharts-tooltip {
+  padding: var(--gcharts-tooltip-content-padding, 8px 0);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
 .gcharts-tooltip__popup-content {
@@ -7,7 +8,16 @@
   background-color: var(--g-color-infographics-tooltip-bg);
 }
 .gcharts-tooltip__content {
-  padding: var(--gcharts-tooltip-content-padding, 8px 0);
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  max-height: 90vh;
+}
+.gcharts-tooltip__content-rows {
+  overflow: hidden;
+}
+.gcharts-tooltip__content-rows_pinned {
+  overflow: auto;
 }
 .gcharts-tooltip__series-name {
   padding: 2px 14px 6px;

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

@@ -29,6 +29,7 @@ export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
+    seriesOptions: PreparedSeriesOptions;
     hasZoomX?: boolean;
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**

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

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 import { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
+import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function isNumericalArrayData(data) {
     return data.every((d) => typeof d === 'number' || d === null);
@@ -130,32 +131,55 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, maxPadding, }) {
+    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
+    const xRange = [0, boundsWidth - maxPadding];
+    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    const range = hasZoomX ? xRangeZoom : xRange;
+    const barXSeries = series.filter((s) => s.type === SeriesType.BarX);
+    if (barXSeries.length) {
+        const groupedData = groupBarXDataByXValue(barXSeries, axis);
+        if (Object.keys(groupedData).length > 1) {
+            const { bandSize } = getBarXLayoutForNumericScale({
+                plotWidth: boundsWidth - maxPadding,
+                groupedData,
+                seriesOptions,
+            });
+            const offset = bandSize / 2;
+            return [range[0] + offset, range[1] - offset];
+        }
+    }
+    return range;
+}
 // eslint-disable-next-line complexity
 export function createXScale(args) {
-    const { axis, boundsWidth, series, hasZoomX } = args;
+    const { axis, boundsWidth, series, seriesOptions, hasZoomX } = args;
     const xMinProps = get(axis, 'min');
     const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
-    const xTimestamps = get(axis, 'timestamps');
     const maxPadding = get(axis, 'maxPadding', 0);
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
-    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
-    const xRange = [0, boundsWidth - xAxisMaxPadding];
-    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    const range = getXScaleRange({
+        boundsWidth,
+        series,
+        seriesOptions,
+        hasZoomX,
+        axis,
+        maxPadding: xAxisMaxPadding,
+    });
     switch (axis.order) {
         case 'sortDesc':
         case 'reverse': {
-            xRange.reverse();
-            xRangeZoom.reverse();
+            range.reverse();
         }
     }
     switch (xType) {
         case 'linear':
         case 'logarithmic': {
-            const domain = getDomainDataXBySeries(series);
-            if (isNumericalArrayData(domain)) {
-                const [xMinDomain, xMaxDomain] = extent(domain);
+            const domainData = getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domainData)) {
+                const [xMinDomain, xMaxDomain] = extent(domainData);
                 let xMin;
                 let xMax;
                 if (typeof xMinProps === 'number') {
@@ -176,11 +200,10 @@ export function createXScale(args) {
                             : xMaxDomain;
                 }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn()
-                    .domain([xMin, xMax])
-                    .range(hasZoomX ? xRangeZoom : xRange);
+                const scale = scaleFn().domain([xMin, xMax]).range(range);
                 if (!hasZoomX) {
-                    scale.nice();
+                    // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                    scale.nice(Math.max(10, domainData.length));
                 }
                 return scale;
             }
@@ -195,40 +218,27 @@ export function createXScale(args) {
                 });
                 const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
                 if (xScale.step() / 2 < xAxisMaxPadding) {
-                    xScale.range(xRange);
+                    xScale.range(range);
                 }
                 return xScale;
             }
             break;
         }
         case 'datetime': {
-            if (xTimestamps) {
-                const [xMinTimestamp, xMaxTimestamp] = extent(xTimestamps);
+            let domain = null;
+            const domainData = get(axis, 'timestamps') || getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domainData)) {
+                const [xMinTimestamp, xMaxTimestamp] = extent(domainData);
                 const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                const scale = scaleUtc()
-                    .domain([xMin, xMax])
-                    .range(hasZoomX ? xRangeZoom : xRange);
+                domain = [xMin, xMax];
+                const scale = scaleUtc().domain(domain).range(range);
                 if (!hasZoomX) {
-                    scale.nice();
+                    // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                    scale.nice(Math.max(10, domainData.length));
                 }
                 return scale;
             }
-            else {
-                const domain = getDomainDataXBySeries(series);
-                if (isNumericalArrayData(domain)) {
-                    const [xMinTimestamp, xMaxTimestamp] = extent(domain);
-                    const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
-                    const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                    const scale = scaleUtc()
-                        .domain([xMin, xMax])
-                        .range(hasZoomX ? xRangeZoom : xRange);
-                    if (!hasZoomX) {
-                        scale.nice();
-                    }
-                    return scale;
-                }
-            }
             break;
         }
     }
@@ -242,7 +252,13 @@ const createScales = (args) => {
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
         xScale: xAxis
-            ? createXScale({ axis: xAxis, boundsWidth, series: visibleSeries, hasZoomX })
+            ? createXScale({
+                axis: xAxis,
+                boundsWidth,
+                series: visibleSeries,
+                seriesOptions,
+                hasZoomX,
+            })
             : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {

package/dist/cjs/hooks/useChartOptions/x-axis.d.ts

@@ -1,7 +1,9 @@
 import type { ChartSeries, ChartXAxis } from '../../types';
+import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, seriesData, width, }: {
+export declare const getPreparedXAxis: ({ xAxis, seriesData, seriesOptions, width, }: {
     xAxis?: ChartXAxis;
     seriesData: ChartSeries[];
+    seriesOptions: PreparedSeriesOptions;
     width: number;
 }) => Promise<PreparedAxis>;