@gravity-ui/charts 1.20.0 → 1.22.0

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

@@ -118,6 +118,10 @@ export const prepareBarXData = async (args) => {
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
+                    const xBandScaleDomain = xBandScale.domain();
+                    if (xBandScaleDomain.indexOf(xValue) === -1) {
+                        continue;
+                    }
                     xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
                 }
                 else {

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -67,6 +67,10 @@ export async function prepareBarYData(args) {
                 let center;
                 if (yAxis[0].type === 'category') {
                     const bandScale = yScale;
+                    const bandScaleDomain = bandScale.domain();
+                    if (bandScaleDomain.indexOf(yValue) === -1) {
+                        return;
+                    }
                     center = (bandScale(yValue) || 0) + bandSize / 2;
                 }
                 else {

package/dist/esm/hooks/useShapes/scatter/prepare-data.d.ts

@@ -2,11 +2,11 @@ import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedScatterSeries } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
-export declare const prepareScatterData: (args: {
+export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
-}) => PreparedScatterData[];
+}): PreparedScatterData[];

package/dist/esm/hooks/useShapes/scatter/prepare-data.js

@@ -1,9 +1,38 @@
 import get from 'lodash/get';
+import { getDataCategoryValue } from '../../../utils';
 import { getXValue, getYValue } from '../utils';
-const getFilteredLinearScatterData = (data) => {
+function getFilteredLinearScatterData(data) {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
-};
-export const prepareScatterData = (args) => {
+}
+function getFilteredCategoryScatterData(args) {
+    const { data, xAxis, xScale, yAxis, yScale } = args;
+    const xDomain = xScale.domain();
+    const xCategories = get(xAxis, 'categories', []);
+    const yDomain = yScale.domain();
+    const yCategories = get(yAxis, 'categories', []);
+    return data.filter((d) => {
+        let xInRange = true;
+        let yInRange = true;
+        if (xAxis.type === 'category') {
+            const dataCategory = getDataCategoryValue({
+                axisDirection: 'x',
+                categories: xCategories,
+                data: d,
+            });
+            xInRange = xDomain.indexOf(dataCategory) !== -1;
+        }
+        if (yAxis.type === 'category') {
+            const dataCategory = getDataCategoryValue({
+                axisDirection: 'y',
+                categories: yCategories,
+                data: d,
+            });
+            yInRange = yDomain.indexOf(dataCategory) !== -1;
+        }
+        return xInRange && yInRange;
+    });
+}
+export function prepareScatterData(args) {
     const { series, xAxis, xScale, yAxis, yScale, isOutsideBounds } = args;
     return series.reduce((acc, s) => {
         const yAxisIndex = get(s, 'yAxis', 0);
@@ -13,7 +42,13 @@ export const prepareScatterData = (args) => {
             return acc;
         }
         const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
-            ? s.data
+            ? getFilteredCategoryScatterData({
+                data: s.data,
+                xAxis,
+                xScale,
+                yAxis: seriesYAxis,
+                yScale: seriesYScale,
+            })
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
             var _a;
@@ -39,4 +74,4 @@ export const prepareScatterData = (args) => {
         });
         return acc;
     }, []);
-};
+}

package/dist/esm/types/chart/axis.d.ts

@@ -65,9 +65,27 @@ export interface ChartAxis {
          */
         maxRowCount?: number;
     };
-    /** The minimum value of the axis. If undefined the min value is automatically calculate. */
+    /**
+     * The minimum value of the axis. If undefined the min value is automatically calculated.
+     *
+     * The value type depends on the axis scale:
+     * - For `linear` and `logarithmic` axes: numeric value
+     * - For `datetime` axes: timestamp (milliseconds since Unix epoch)
+     * - For `category` axes: index of the element in the categories array (which has been processed according to the specified `order` property)
+     *
+     * Note: min/max is not supported for category axes in waterfall and heatmap visualizations.
+     */
     min?: number;
-    /** The maximum value of the axis. If undefined the max value is automatically calculate. */
+    /**
+     * The maximum value of the axis. If undefined the max value is automatically calculated.
+     *
+     * The value type depends on the axis scale:
+     * - For `linear` and `logarithmic` axes: numeric value
+     * - For `datetime` axes: timestamp (milliseconds since Unix epoch)
+     * - For `category` axes: index of the element in the categories array (which has been processed according to the specified `order` property)
+     *
+     * Note: min/max is not supported for category axes in waterfall and heatmap visualizations.
+     */
     max?: number;
     /** The grid lines settings.
      * Unavailable for some visualizations, such as a heatmap.

package/dist/esm/types/chart/zoom.d.ts

@@ -33,4 +33,33 @@ export interface ChartZoom {
             fillOpacity?: number;
         };
     };
+    /**
+     * Reset zoom button configuration.
+     * The button appears only after the zoom has been applied.
+     */
+    resetButton?: {
+        /**
+         * The alignment of the button.
+         *
+         * @default 'top-right'
+         */
+        align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+        /**
+         * The offset of the button.
+         *
+         * @default {x: 0, y: 0}
+         */
+        offset?: {
+            x?: number;
+            y?: number;
+        };
+        /**
+         * The box to which the button is positioned relative to.
+         * - `chart-box` refers to the entire chart area, including titles and legends.
+         * - `plot-box` refers to the area where the series are drawn.
+         *
+         * @default 'chart-box'
+         */
+        relativeTo?: 'chart-box' | 'plot-box';
+    };
 }

package/dist/esm/utils/chart/get-closest-data.js

@@ -105,7 +105,7 @@ export function getClosestPoints(args) {
             case 'bar-y': {
                 const points = list;
                 const sorted = sort(points, (p) => p.y);
-                const closestYIndex = bisector((p) => p.y).center(sorted, pointerY);
+                const closestYIndex = bisector((p) => p.y + p.height / 2).center(sorted, pointerY);
                 const closestYPoint = sorted[closestYIndex];
                 let selectedPoints = [];
                 let closestPointXValue = -1;

package/dist/esm/utils/chart/series/sorting.d.ts

@@ -1,6 +1,6 @@
 import type { ChartAxis, ChartSeries } from '../../../types';
-export declare function getSortedSeriesData({ seriesData, yAxes, xAxis, }: {
+export declare function getSortedSeriesData({ seriesData, xAxis, yAxis, }: {
     seriesData: ChartSeries[];
-    yAxes?: ChartAxis[];
     xAxis?: ChartAxis;
+    yAxis?: ChartAxis[];
 }): ChartSeries[];

package/dist/esm/utils/chart/series/sorting.js

@@ -20,11 +20,11 @@ function applyAxisCategoriesOrder({ series, axis, key, }) {
     });
     return Object.assign(Object.assign({}, series), { data: newSeriesData });
 }
-export function getSortedSeriesData({ seriesData, yAxes, xAxis, }) {
+export function getSortedSeriesData({ seriesData, xAxis, yAxis, }) {
     return seriesData.map((s) => {
-        const yAxis = yAxes === null || yAxes === void 0 ? void 0 : yAxes[0];
+        const yAxisItem = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
         let sortedSeries = s;
-        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxis, key: 'y' });
+        sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: yAxisItem, key: 'y' });
         sortedSeries = applyAxisCategoriesOrder({ series: sortedSeries, axis: xAxis, key: 'x' });
         switch (sortedSeries.type) {
             case SeriesType.Area: {

package/dist/esm/utils/chart/text.js

@@ -1,4 +1,6 @@
 import { select } from 'd3-selection';
+import { block } from '../cn';
+const b = block('chart');
 export function handleOverflowingText(tSpan, maxWidth, textWidth) {
     var _a, _b, _c;
     if (!tSpan) {
@@ -186,29 +188,30 @@ function unescapeHtml(str) {
         return result.replace(value, key);
     }, str);
 }
+function getCssStyle(prop, el = document.body) {
+    return window.getComputedStyle(el, null).getPropertyValue(prop);
+}
+let measureCanvas = null;
 export function getTextSizeFn({ style }) {
-    const map = {};
-    const setSymbolSize = async (s) => {
-        const labels = [s === ' ' ? ' ' : s];
-        const size = await getLabelsSize({
-            labels,
-            style,
-        });
-        map[s] = { width: size.maxWidth, height: size.maxHeight };
-    };
+    var _a;
+    const canvas = measureCanvas || (measureCanvas = document.createElement('canvas'));
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw new Error("Couldn't get canvas context");
+    }
+    const element = (_a = document.getElementsByClassName(b())[0]) !== null && _a !== void 0 ? _a : document.body;
+    const defaultFontFamily = getCssStyle('font-family', element);
+    const defaultFontSize = getCssStyle('font-size', element);
+    const defaultFontWeight = getCssStyle('font-weight', element);
     return async (str) => {
-        let width = 0;
-        let height = 0;
-        const symbols = unescapeHtml(str);
-        for (let i = 0; i < symbols.length; i++) {
-            const s = symbols[i];
-            if (!map[s]) {
-                await setSymbolSize(s);
-            }
-            width += map[s].width;
-            height = Math.max(height, map[s].height);
-        }
-        return { width, height };
+        var _a, _b;
+        await document.fonts.ready;
+        context.font = `${(_a = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _a !== void 0 ? _a : defaultFontWeight} ${(_b = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _b !== void 0 ? _b : defaultFontSize} ${defaultFontFamily}`;
+        const textMetric = context.measureText(unescapeHtml(str));
+        return {
+            width: textMetric.width,
+            height: textMetric.fontBoundingBoxDescent + textMetric.fontBoundingBoxAscent,
+        };
     };
 }
 // We ignore an inaccuracy of less than a pixel.

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

@@ -1,11 +1,12 @@
+import type { PreparedAxis, PreparedSeries } from '../../hooks';
 import type { ZoomState } from '../../hooks/useZoom/types';
-import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis } from '../../types';
 export declare function getZoomedSeriesData(args: {
-    seriesData: ChartSeries[];
+    seriesData: PreparedSeries[];
     zoomState: Partial<ZoomState>;
-    xAxis?: ChartXAxis;
-    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis | PreparedAxis | null;
+    yAxis?: ChartYAxis[] | PreparedAxis[] | null;
 }): {
-    zoomedSeriesData: ChartSeries[];
-    zoomedShapesSeriesData: ChartSeries[];
+    preparedSeries: PreparedSeries[];
+    preparedShapesSeries: PreparedSeries[];
 };

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

@@ -1,5 +1,4 @@
 import { SeriesType } from '../../constants';
-import { getAxisCategories } from '../../hooks/useChartOptions/utils';
 const SERIES_TYPE_WITH_HIDDEN_POINTS = [SeriesType.Area, SeriesType.Line];
 // eslint-disable-next-line complexity
 function isValueInRange(args) {
@@ -21,7 +20,7 @@ function isValueInRange(args) {
             return numValue >= numMin && numValue <= numMax;
         }
         case 'category': {
-            const categories = getAxisCategories(axis) || [];
+            const categories = (axis === null || axis === void 0 ? void 0 : axis.categories) || [];
             if (typeof value === 'string' && typeof min === 'number' && typeof max === 'number') {
                 const valueIndex = categories.indexOf(value);
                 if (min === -1 || max === -1 || valueIndex === -1) {
@@ -42,10 +41,13 @@ function isValueInRange(args) {
         }
     }
 }
+function isPreparedZoomableSeries(series) {
+    return Array.isArray(series.data);
+}
 export function getZoomedSeriesData(args) {
-    const { seriesData, xAxis, yAxes, zoomState } = args;
+    const { seriesData, xAxis, yAxis, zoomState } = args;
     if (Object.keys(zoomState).length <= 0) {
-        return { zoomedSeriesData: seriesData, zoomedShapesSeriesData: seriesData };
+        return { preparedSeries: seriesData, preparedShapesSeries: seriesData };
     }
     const zoomedSeriesData = [];
     const zoomedShapesSeriesData = [];
@@ -56,6 +58,9 @@ export function getZoomedSeriesData(args) {
         const filteredShapesData = SERIES_TYPE_WITH_HIDDEN_POINTS.includes(seriesItem.type) && (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) !== 'category'
             ? []
             : undefined;
+        if (!isPreparedZoomableSeries(seriesItem)) {
+            return;
+        }
         seriesItem.data.forEach((point, i) => {
             const prevPoint = seriesItem.data[i - 1];
             const isFirstPoint = i === 0;
@@ -81,7 +86,7 @@ export function getZoomedSeriesData(args) {
                     const [yMin, yMax] = zoomStateY;
                     const y = 'y' in point ? point.y : undefined;
                     inYRange = isValueInRange({
-                        axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[yAxisIndex],
+                        axis: yAxis === null || yAxis === void 0 ? void 0 : yAxis[yAxisIndex],
                         value: y,
                         min: yMin,
                         max: yMax,
@@ -111,5 +116,8 @@ export function getZoomedSeriesData(args) {
         zoomedSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredData }));
         zoomedShapesSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredShapesData || filteredData }));
     });
-    return { zoomedSeriesData, zoomedShapesSeriesData };
+    return {
+        preparedSeries: zoomedSeriesData,
+        preparedShapesSeries: zoomedShapesSeriesData,
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -83,22 +83,13 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^7.4.0",
-    "@playwright/experimental-ct-react": "^1.51.1",
-    "@playwright/test": "^1.51.1",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-storysource": "^8.2.9",
-    "@storybook/addon-viewport": "^8.2.9",
+    "@playwright/experimental-ct-react": "^1.56.1",
+    "@playwright/test": "^1.56.1",
+    "@storybook/addon-a11y": "^9.1.16",
+    "@storybook/addon-docs": "^9.1.16",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
-    "@storybook/types": "^8.2.9",
+    "@storybook/react-webpack5": "^9.1.16",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -129,7 +120,7 @@
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.7",
     "sass": "^1.77.1",
-    "storybook": "^8.2.9",
+    "storybook": "^9.1.16",
     "stylelint": "^15.11.0",
     "stylelint-use-logical": "^2.1.2",
     "ts-jest": "^29.2.5",

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

@@ -1,5 +0,0 @@
-.gcharts-title {
-  font-size: var(--g-text-subheader-2-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  fill: var(--g-color-text-primary);
-}

package/dist/esm/components/Title/styles.css

@@ -1,5 +0,0 @@
-.gcharts-title {
-  font-size: var(--g-text-subheader-2-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  fill: var(--g-color-text-primary);
-}