@gravity-ui/charts 1.24.0 → 1.24.1

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

@@ -177,6 +177,7 @@ export const ChartInner = (props) => {
     }, [
         initialized,
         preparedRangeSlider.defaultRange,
+        preparedSeries,
         setInitialized,
         updateRangeSliderState,
         xScale,
@@ -201,7 +202,7 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_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, 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, width: width, xAxis: data.xAxis, yAxis: data.yAxis, zoomState: zoomState })),
         (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.js

@@ -79,14 +79,13 @@ export function useChartInnerProps(props) {
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
-        hasZoomX: Boolean(zoomState.x),
-        hasZoomY: Boolean(zoomState.y),
         rangeSliderState,
         series: preparedSeries,
         seriesOptions: preparedSeriesOptions,
         split: preparedSplit,
         xAxis,
         yAxis,
+        zoomState,
     });
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;

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

@@ -1,5 +1,5 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import type { PreparedAxis, PreparedSeries, PreparedSeriesOptions, PreparedSplit, RangeSliderState } from '../../hooks';
+import type { PreparedAxis, PreparedSeries, PreparedSeriesOptions, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
@@ -10,9 +10,8 @@ type Args = {
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
-    hasZoomX?: boolean;
-    hasZoomY?: boolean;
     rangeSliderState?: RangeSliderState;
+    zoomState?: Partial<ZoomState>;
 };
 type ReturnValue = {
     xScale?: ChartScale;
@@ -22,14 +21,15 @@ export declare function createYScale(args: {
     axis: PreparedAxis;
     boundsHeight: number;
     series: (PreparedSeries | ChartSeries)[];
+    zoomStateY?: [number, number];
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
     seriesOptions: PreparedSeriesOptions;
-    hasZoomX?: boolean;
     rangeSliderState?: RangeSliderState;
+    zoomStateX?: [number, number];
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
 /**
  * Uses to create scales for axis related series

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

@@ -5,6 +5,7 @@ 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 { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 import { getBandSize } from '../utils/get-band-size';
+import { checkIsPointDomain, getMinMaxPropsOrState, hasOnlyMarkerSeries } from './utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function validateArrayData(data) {
     let hasNumberAndNullValues;
@@ -65,9 +66,12 @@ function isSeriesWithYAxisOffset(series) {
 }
 // eslint-disable-next-line complexity
 export function createYScale(args) {
-    const { axis, boundsHeight, series } = args;
-    const yMinProps = get(axis, 'min');
-    const yMaxProps = get(axis, 'max');
+    const { axis, boundsHeight, series, zoomStateY } = args;
+    const [yMinPropsOrState, yMaxPropsOrState] = getMinMaxPropsOrState({
+        axis,
+        maxValues: [zoomStateY === null || zoomStateY === void 0 ? void 0 : zoomStateY[1]],
+        minValues: [zoomStateY === null || zoomStateY === void 0 ? void 0 : zoomStateY[0]],
+    });
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
     const range = getYScaleRange({ axis, boundsHeight });
@@ -84,10 +88,15 @@ export function createYScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
-                const yMin = typeof yMinProps === 'number' ? yMinProps : yMinDomain;
+                const isPointDomain = hasOnlyMarkerSeries(series)
+                    ? checkIsPointDomain([yMinDomain, yMaxDomain])
+                    : false;
+                const yMin = typeof yMinPropsOrState === 'number' && !isPointDomain
+                    ? yMinPropsOrState
+                    : yMinDomain;
                 let yMax;
-                if (typeof yMaxProps === 'number') {
-                    yMax = yMaxProps;
+                if (typeof yMaxPropsOrState === 'number' && !isPointDomain) {
+                    yMax = yMaxPropsOrState;
                 }
                 else {
                     const hasSeriesWithVolumeOnYAxis = series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type));
@@ -128,8 +137,19 @@ export function createYScale(args) {
         case 'datetime': {
             if (yTimestamps) {
                 const [yMinTimestamp, yMaxTimestamp] = extent(yTimestamps);
-                const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
-                const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
+                const isPointDomain = hasOnlyMarkerSeries(series)
+                    ? checkIsPointDomain([yMinTimestamp, yMaxTimestamp])
+                    : false;
+                const yMin = typeof yMinPropsOrState === 'number' &&
+                    !isPointDomain &&
+                    yMinPropsOrState > yMinTimestamp
+                    ? yMinPropsOrState
+                    : yMinTimestamp;
+                const yMax = typeof yMaxPropsOrState === 'number' &&
+                    !isPointDomain &&
+                    yMaxPropsOrState < yMaxTimestamp
+                    ? yMaxPropsOrState
+                    : yMaxTimestamp;
                 return scaleUtc().domain([yMin, yMax]).range(range).nice();
             }
             else {
@@ -140,8 +160,19 @@ export function createYScale(args) {
                 }
                 if (hasNumberAndNullValues) {
                     const [yMinTimestamp, yMaxTimestamp] = extent(domain);
-                    const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
-                    const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
+                    const isPointDomain = hasOnlyMarkerSeries(series)
+                        ? checkIsPointDomain([yMinTimestamp, yMaxTimestamp])
+                        : false;
+                    const yMin = typeof yMinPropsOrState === 'number' &&
+                        !isPointDomain &&
+                        yMinPropsOrState > yMinTimestamp
+                        ? yMinPropsOrState
+                        : yMinTimestamp;
+                    const yMax = typeof yMaxPropsOrState === 'number' &&
+                        !isPointDomain &&
+                        yMaxPropsOrState < yMaxTimestamp
+                        ? yMaxPropsOrState
+                        : yMaxTimestamp;
                     const scale = scaleUtc().domain([yMin, yMax]).range(range);
                     let offsetMin = 0;
                     let offsetMax = boundsHeight * axis.maxPadding;
@@ -208,11 +239,14 @@ function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, ma
 }
 // eslint-disable-next-line complexity
 export function createXScale(args) {
-    var _a, _b;
-    const { axis, boundsWidth, series, seriesOptions, hasZoomX, rangeSliderState } = args;
-    const xMinProps = (_a = rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.min) !== null && _a !== void 0 ? _a : get(axis, 'min');
-    const xMaxProps = (_b = rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.max) !== null && _b !== void 0 ? _b : get(axis, 'max');
+    const { axis, boundsWidth, series, seriesOptions, rangeSliderState, zoomStateX } = args;
+    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],
+    });
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
+    const hasZoomX = Boolean(zoomStateX);
     let xCategories = get(axis, 'categories');
     if (rangeSliderState && xCategories) {
         xCategories = getAxisCategories({
@@ -251,17 +285,20 @@ export function createXScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [xMinDomain, xMaxDomain] = extent(domainData);
+                const isPointDomain = hasOnlyMarkerSeries(series)
+                    ? checkIsPointDomain([xMinDomain, xMaxDomain])
+                    : false;
                 let xMin;
                 let xMax;
-                if (typeof xMinProps === 'number') {
-                    xMin = xMinProps;
+                if (typeof xMinPropsOrState === 'number' && !isPointDomain) {
+                    xMin = xMinPropsOrState;
                 }
                 else {
                     const xMinDefault = getDefaultMinXAxisValue(series);
                     xMin = xMinDefault !== null && xMinDefault !== void 0 ? xMinDefault : xMinDomain;
                 }
-                if (typeof xMaxProps === 'number') {
-                    xMax = xMaxProps;
+                if (typeof xMaxPropsOrState === 'number' && !isPointDomain) {
+                    xMax = xMaxPropsOrState;
                 }
                 else {
                     const xMaxDefault = getDefaultMaxXAxisValue(series);
@@ -320,8 +357,17 @@ export function createXScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [xMinTimestamp, xMaxTimestamp] = extent(domainData);
-                const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
-                const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
+                const isPointDomain = checkIsPointDomain([xMinTimestamp, xMaxTimestamp]);
+                const xMin = typeof xMinPropsOrState === 'number' &&
+                    xMinPropsOrState > xMinTimestamp &&
+                    !isPointDomain
+                    ? xMinPropsOrState
+                    : xMinTimestamp;
+                const xMax = typeof xMaxPropsOrState === 'number' &&
+                    xMaxPropsOrState < xMaxTimestamp &&
+                    !isPointDomain
+                    ? xMaxPropsOrState
+                    : xMaxTimestamp;
                 domain = [xMin, xMax];
                 const scale = scaleUtc().domain(domain).range(range);
                 let offsetMin = 0;
@@ -352,7 +398,7 @@ export function createXScale(args) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, hasZoomX, rangeSliderState, series, seriesOptions, split, xAxis, yAxis, } = args;
+    const { boundsWidth, boundsHeight, rangeSliderState, series, seriesOptions, split, xAxis, yAxis, zoomState, } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
@@ -365,20 +411,23 @@ const createScales = (args) => {
                 rangeSliderState,
                 series: visibleSeries,
                 seriesOptions,
-                hasZoomX,
+                zoomStateX: zoomState === null || zoomState === void 0 ? void 0 : zoomState.x,
             })
             : undefined,
         yScale: yAxis.map((axis, index) => {
+            var _a;
             const axisSeries = series.filter((s) => {
                 const seriesAxisIndex = get(s, 'yAxis', 0);
                 return seriesAxisIndex === index;
             });
             const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
             const axisHeight = getAxisHeight({ boundsHeight, split });
+            const zoomStateY = (_a = zoomState === null || zoomState === void 0 ? void 0 : zoomState.y) === null || _a === void 0 ? void 0 : _a[index];
             return createYScale({
                 axis,
                 boundsHeight: axisHeight,
                 series: visibleAxisSeries.length ? visibleAxisSeries : axisSeries,
+                zoomStateY,
             });
         }),
     };
@@ -387,7 +436,7 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, hasZoomX, hasZoomY, rangeSliderState, series, seriesOptions, split, xAxis, yAxis, } = args;
+    const { boundsWidth, boundsHeight, rangeSliderState, series, seriesOptions, split, xAxis, yAxis, zoomState, } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -396,27 +445,25 @@ export const useAxisScales = (args) => {
             ({ xScale, yScale } = createScales({
                 boundsWidth,
                 boundsHeight,
-                hasZoomX,
-                hasZoomY,
                 rangeSliderState,
                 series,
                 seriesOptions,
                 split,
                 xAxis,
                 yAxis,
+                zoomState,
             }));
         }
         return { xScale, yScale };
     }, [
         boundsWidth,
         boundsHeight,
-        hasZoomX,
-        hasZoomY,
         rangeSliderState,
         series,
         seriesOptions,
         split,
         xAxis,
         yAxis,
+        zoomState,
     ]);
 };

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

@@ -0,0 +1,19 @@
+import type { PreparedAxis, PreparedSeries } from '../../hooks';
+import type { ChartAxis, ChartSeries } from '../../types';
+type OptionalNumber = number | undefined;
+export declare function getMinMaxPropsOrState(args: {
+    axis: PreparedAxis | ChartAxis;
+    maxValues: OptionalNumber[];
+    minValues: OptionalNumber[];
+}): [OptionalNumber, OptionalNumber];
+/**
+ * Checks whether a domain represents a single point (when minimum and maximum values are equal).
+ *
+ * This is necessary for cases where exactly one marker needs to be rendered on an axis.
+ * In such cases, it is not allowed to use axis extremums (min/max)
+ * that differ from those in the domain, as this can lead to incorrect visualization
+ * and scale stretching around a single point.
+ */
+export declare function checkIsPointDomain(domain: [number, number]): boolean;
+export declare function hasOnlyMarkerSeries(series: (PreparedSeries | ChartSeries)[]): boolean;
+export {};

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

@@ -0,0 +1,34 @@
+import get from 'lodash/get';
+import { SERIES_TYPE } from '../../constants';
+const MARKER_SERIES_TYPES = [SERIES_TYPE.Area, SERIES_TYPE.Line, SERIES_TYPE.Scatter];
+function getNormilizedMinMax(args) {
+    const { maxValues, minValues } = args;
+    const filteredMaxValues = maxValues.filter((v) => typeof v === 'number');
+    const filteredMinValues = minValues.filter((v) => typeof v === 'number');
+    const max = filteredMaxValues.length ? Math.max(...filteredMaxValues) : undefined;
+    const min = filteredMinValues.length ? Math.min(...filteredMinValues) : undefined;
+    return [min, max];
+}
+export function getMinMaxPropsOrState(args) {
+    const { axis, maxValues, minValues } = args;
+    const minProps = get(axis, 'min');
+    const maxProps = get(axis, 'max');
+    const [minState, maxState] = getNormilizedMinMax({ maxValues, minValues });
+    const min = minState !== null && minState !== void 0 ? minState : minProps;
+    const max = maxState !== null && maxState !== void 0 ? maxState : maxProps;
+    return [min, max];
+}
+/**
+ * Checks whether a domain represents a single point (when minimum and maximum values are equal).
+ *
+ * This is necessary for cases where exactly one marker needs to be rendered on an axis.
+ * In such cases, it is not allowed to use axis extremums (min/max)
+ * that differ from those in the domain, as this can lead to incorrect visualization
+ * and scale stretching around a single point.
+ */
+export function checkIsPointDomain(domain) {
+    return domain[0] === domain[1];
+}
+export function hasOnlyMarkerSeries(series) {
+    return series.every((s) => MARKER_SERIES_TYPES.includes(s.type));
+}

package/dist/cjs/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, } = props;
+    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, zoomState, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
@@ -45,6 +45,7 @@ export function useRangeSlider(props) {
         split: EMPTY_PREPARED_SPLIT,
         xAxis: preparedXAxis,
         yAxis: preparedYAxis,
+        zoomState,
     });
     const { shapes } = useShapes({
         boundsHeight: preparedRangeSlider.height,

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

@@ -4,6 +4,7 @@ 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;
@@ -23,6 +24,7 @@ export interface RangeSliderProps {
     rangeSliderState?: RangeSliderState;
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis[];
+    zoomState?: Partial<ZoomState>;
 }
 export interface UseRangeSliderProps extends RangeSliderProps {
     clipPathId: string;

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

@@ -1,6 +1,7 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedAreaData } from './types';
 export declare const prepareAreaData: (args: {
     series: PreparedAreaSeries[];
@@ -9,5 +10,6 @@ export declare const prepareAreaData: (args: {
     yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     boundsHeight: number;
+    split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedAreaData[]>;