@gravity-ui/charts 1.21.0 → 1.22.0

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

@@ -14,13 +14,14 @@ import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
-import { useAsyncState } from './utils';
+import { getResetZoomButtonStyle, useAsyncState } from './utils';
 import './styles.css';
 const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
+    const resetZoomButtonRef = React.useRef(null);
     const [htmlLayout, setHtmlLayout] = React.useState(null);
     const plotRef = React.useRef(null);
     const plotBeforeRef = React.useRef(null);
@@ -39,7 +40,7 @@ export const ChartInner = (props) => {
         dispatcher,
         tooltip: preparedTooltip,
     });
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, xAxis, xScale, yAxis, yScale, svgXPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
@@ -143,7 +144,10 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: () => updateZoomState({}) },
+        Object.keys(zoomState).length > 0 && preparedZoom && (React.createElement(Button, { onClick: () => updateZoomState({}), ref: resetZoomButtonRef, style: getResetZoomButtonStyle(Object.assign({ boundsHeight,
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                boundsWidth, node: resetZoomButtonRef.current, titleHeight: title === null || title === void 0 ? void 0 : title.height }, preparedZoom.resetButton)) },
             React.createElement(ButtonIcon, null,
                 React.createElement(ArrowRotateLeft, null)))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: preparedTooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));

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

@@ -12,8 +12,6 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
 };
 export declare function useChartInnerProps(props: Props): {
-    svgBottomPos: number | undefined;
-    svgTopPos: number | undefined;
     svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
@@ -38,6 +36,22 @@ export declare function useChartInnerProps(props: Props): {
     preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
+    preparedZoom: Required<{
+        type?: ("x" | "y" | "xy") | undefined;
+        brush?: Required<{
+            style?: Required<{
+                fillOpacity?: number | undefined;
+            } | undefined>;
+        } | undefined>;
+        resetButton?: Required<{
+            align?: ("bottom-left" | "bottom-right" | "top-left" | "top-right") | undefined;
+            offset?: Required<{
+                x?: number | undefined;
+                y?: number | undefined;
+            } | undefined>;
+            relativeTo?: ("chart-box" | "plot-box") | undefined;
+        } | undefined>;
+    }> | null;
     prevHeight: number | undefined;
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -138,10 +138,8 @@ export function useChartInnerProps(props) {
             }
             return acc;
         }, 0);
-    const { bottom, top, x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
-        svgBottomPos: bottom,
-        svgTopPos: top,
         svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
@@ -154,6 +152,7 @@ export function useChartInnerProps(props) {
         preparedLegend,
         preparedSeries,
         preparedSplit,
+        preparedZoom: chart.zoom,
         prevHeight,
         prevWidth,
         shapes,

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

@@ -1,4 +1,13 @@
+import React from 'react';
 import type { PreparedSeries } from '../../hooks';
-import type { PreparedAxis } from '../../hooks/useChartOptions/types';
+import type { PreparedAxis, PreparedZoom } from '../../hooks/useChartOptions/types';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
 export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;
+export declare function getResetZoomButtonStyle(args: {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    node: HTMLElement | null;
+    titleHeight?: number;
+} & PreparedZoom['resetButton']): React.CSSProperties;

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

@@ -47,3 +47,63 @@ export function useAsyncState(value, setState) {
     }, [setState]);
     return stateValue;
 }
+export function getResetZoomButtonStyle(args) {
+    const { align, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, node, offset, relativeTo, titleHeight, } = args;
+    const style = {
+        position: 'absolute',
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+    };
+    switch (relativeTo) {
+        case 'chart-box': {
+            switch (align) {
+                case 'bottom-left': {
+                    style.bottom = 0;
+                    style.left = 0;
+                    break;
+                }
+                case 'bottom-right': {
+                    style.bottom = 0;
+                    style.right = 0;
+                    break;
+                }
+                case 'top-left': {
+                    style.top = 0;
+                    style.left = 0;
+                    break;
+                }
+                case 'top-right': {
+                    style.top = 0;
+                    style.right = 0;
+                    break;
+                }
+            }
+            break;
+        }
+        case 'plot-box': {
+            switch (align) {
+                case 'bottom-left': {
+                    style.left = boundsOffsetLeft;
+                    style.top = boundsHeight - ((node === null || node === void 0 ? void 0 : node.clientHeight) || 0) + (titleHeight || 0);
+                    break;
+                }
+                case 'bottom-right': {
+                    style.left = boundsWidth + boundsOffsetLeft - ((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
+                    style.top = boundsHeight - ((node === null || node === void 0 ? void 0 : node.clientHeight) || 0) + (titleHeight || 0);
+                    break;
+                }
+                case 'top-left': {
+                    style.left = boundsOffsetLeft;
+                    style.top = boundsOffsetTop;
+                    break;
+                }
+                case 'top-right': {
+                    style.left = boundsWidth + boundsOffsetLeft - ((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
+                    style.top = boundsOffsetTop;
+                    break;
+                }
+            }
+            break;
+        }
+    }
+    return style;
+}

package/dist/cjs/hooks/useChartOptions/chart.js

@@ -72,7 +72,7 @@ function getZoomType(args) {
     return undefined;
 }
 function getPreparedZoom(args) {
-    var _a;
+    var _a, _b, _c, _d;
     const { zoom, seriesData } = args;
     if (!(zoom === null || zoom === void 0 ? void 0 : zoom.enabled)) {
         return null;
@@ -86,6 +86,11 @@ function getPreparedZoom(args) {
         brush: {
             style: Object.assign({ fillOpacity: 1 }, (_a = zoom === null || zoom === void 0 ? void 0 : zoom.brush) === null || _a === void 0 ? void 0 : _a.style),
         },
+        resetButton: {
+            align: ((_b = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _b === void 0 ? void 0 : _b.align) || 'top-right',
+            offset: Object.assign({ x: 0, y: 0 }, (_c = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _c === void 0 ? void 0 : _c.offset),
+            relativeTo: ((_d = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _d === void 0 ? void 0 : _d.relativeTo) || 'chart-box',
+        },
     };
 }
 export const getPreparedChart = (args) => {

package/dist/cjs/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/cjs/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/components/ChartInner/index.js

@@ -14,13 +14,14 @@ import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
-import { useAsyncState } from './utils';
+import { getResetZoomButtonStyle, useAsyncState } from './utils';
 import './styles.css';
 const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
+    const resetZoomButtonRef = React.useRef(null);
     const [htmlLayout, setHtmlLayout] = React.useState(null);
     const plotRef = React.useRef(null);
     const plotBeforeRef = React.useRef(null);
@@ -39,7 +40,7 @@ export const ChartInner = (props) => {
         dispatcher,
         tooltip: preparedTooltip,
     });
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, xAxis, xScale, yAxis, yScale, svgXPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
@@ -143,7 +144,10 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: () => updateZoomState({}) },
+        Object.keys(zoomState).length > 0 && preparedZoom && (React.createElement(Button, { onClick: () => updateZoomState({}), ref: resetZoomButtonRef, style: getResetZoomButtonStyle(Object.assign({ boundsHeight,
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                boundsWidth, node: resetZoomButtonRef.current, titleHeight: title === null || title === void 0 ? void 0 : title.height }, preparedZoom.resetButton)) },
             React.createElement(ButtonIcon, null,
                 React.createElement(ArrowRotateLeft, null)))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: preparedTooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));

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

@@ -12,8 +12,6 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
 };
 export declare function useChartInnerProps(props: Props): {
-    svgBottomPos: number | undefined;
-    svgTopPos: number | undefined;
     svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
@@ -38,6 +36,22 @@ export declare function useChartInnerProps(props: Props): {
     preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
+    preparedZoom: Required<{
+        type?: ("x" | "y" | "xy") | undefined;
+        brush?: Required<{
+            style?: Required<{
+                fillOpacity?: number | undefined;
+            } | undefined>;
+        } | undefined>;
+        resetButton?: Required<{
+            align?: ("bottom-left" | "bottom-right" | "top-left" | "top-right") | undefined;
+            offset?: Required<{
+                x?: number | undefined;
+                y?: number | undefined;
+            } | undefined>;
+            relativeTo?: ("chart-box" | "plot-box") | undefined;
+        } | undefined>;
+    }> | null;
     prevHeight: number | undefined;
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -138,10 +138,8 @@ export function useChartInnerProps(props) {
             }
             return acc;
         }, 0);
-    const { bottom, top, x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
-        svgBottomPos: bottom,
-        svgTopPos: top,
         svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
@@ -154,6 +152,7 @@ export function useChartInnerProps(props) {
         preparedLegend,
         preparedSeries,
         preparedSplit,
+        preparedZoom: chart.zoom,
         prevHeight,
         prevWidth,
         shapes,

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

@@ -1,4 +1,13 @@
+import React from 'react';
 import type { PreparedSeries } from '../../hooks';
-import type { PreparedAxis } from '../../hooks/useChartOptions/types';
+import type { PreparedAxis, PreparedZoom } from '../../hooks/useChartOptions/types';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
 export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;
+export declare function getResetZoomButtonStyle(args: {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    node: HTMLElement | null;
+    titleHeight?: number;
+} & PreparedZoom['resetButton']): React.CSSProperties;

package/dist/esm/components/ChartInner/utils.js

@@ -47,3 +47,63 @@ export function useAsyncState(value, setState) {
     }, [setState]);
     return stateValue;
 }
+export function getResetZoomButtonStyle(args) {
+    const { align, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, node, offset, relativeTo, titleHeight, } = args;
+    const style = {
+        position: 'absolute',
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+    };
+    switch (relativeTo) {
+        case 'chart-box': {
+            switch (align) {
+                case 'bottom-left': {
+                    style.bottom = 0;
+                    style.left = 0;
+                    break;
+                }
+                case 'bottom-right': {
+                    style.bottom = 0;
+                    style.right = 0;
+                    break;
+                }
+                case 'top-left': {
+                    style.top = 0;
+                    style.left = 0;
+                    break;
+                }
+                case 'top-right': {
+                    style.top = 0;
+                    style.right = 0;
+                    break;
+                }
+            }
+            break;
+        }
+        case 'plot-box': {
+            switch (align) {
+                case 'bottom-left': {
+                    style.left = boundsOffsetLeft;
+                    style.top = boundsHeight - ((node === null || node === void 0 ? void 0 : node.clientHeight) || 0) + (titleHeight || 0);
+                    break;
+                }
+                case 'bottom-right': {
+                    style.left = boundsWidth + boundsOffsetLeft - ((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
+                    style.top = boundsHeight - ((node === null || node === void 0 ? void 0 : node.clientHeight) || 0) + (titleHeight || 0);
+                    break;
+                }
+                case 'top-left': {
+                    style.left = boundsOffsetLeft;
+                    style.top = boundsOffsetTop;
+                    break;
+                }
+                case 'top-right': {
+                    style.left = boundsWidth + boundsOffsetLeft - ((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
+                    style.top = boundsOffsetTop;
+                    break;
+                }
+            }
+            break;
+        }
+    }
+    return style;
+}

package/dist/esm/hooks/useChartOptions/chart.js

@@ -72,7 +72,7 @@ function getZoomType(args) {
     return undefined;
 }
 function getPreparedZoom(args) {
-    var _a;
+    var _a, _b, _c, _d;
     const { zoom, seriesData } = args;
     if (!(zoom === null || zoom === void 0 ? void 0 : zoom.enabled)) {
         return null;
@@ -86,6 +86,11 @@ function getPreparedZoom(args) {
         brush: {
             style: Object.assign({ fillOpacity: 1 }, (_a = zoom === null || zoom === void 0 ? void 0 : zoom.brush) === null || _a === void 0 ? void 0 : _a.style),
         },
+        resetButton: {
+            align: ((_b = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _b === void 0 ? void 0 : _b.align) || 'top-right',
+            offset: Object.assign({ x: 0, y: 0 }, (_c = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _c === void 0 ? void 0 : _c.offset),
+            relativeTo: ((_d = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _d === void 0 ? void 0 : _d.relativeTo) || 'chart-box',
+        },
     };
 }
 export const getPreparedChart = (args) => {

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",