@gravity-ui/charts 1.37.2 → 1.38.1

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

@@ -66,7 +66,8 @@ export const ChartInner = (props) => {
     const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        rangeSliderState,
+        updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,

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

@@ -9,7 +9,6 @@ type Props = ChartInnerProps & {
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
     preparedChart: PreparedChart;
-    svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
@@ -44,7 +43,6 @@ export declare function useChartInnerProps(props: Props): {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
     shapesReady: boolean;
-    svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {

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

@@ -75,8 +75,7 @@ export function useLegend({ preparedLegend, preparedChart, preparedSeries, width
         };
 }
 export function useChartInnerProps(props) {
-    var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const colors = React.useMemo(() => {
@@ -214,7 +213,6 @@ export function useChartInnerProps(props) {
         getYAxisWidth,
         legendConfig,
     });
-    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,
         boundsHeight,
@@ -234,7 +232,6 @@ export function useChartInnerProps(props) {
         shapes,
         shapesData,
         shapesReady,
-        svgXPos: x,
         xAxis,
         xScale,
         yAxis,

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

@@ -71,7 +71,7 @@ function renderLegendSymbol(args) {
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
             return (acc +
-                legendItem.symbol.width +
+                legendItem.symbol.bboxWidth +
                 legendItem.symbol.padding +
                 legendItem.textWidth +
                 legend.itemDistance);
@@ -82,13 +82,15 @@ function renderLegendSymbol(args) {
         const x = getXPosition(i);
         const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
         const color = d.visible ? d.color : '';
+        const symbolType = d.symbol.symbolType;
+        const scatterSymbol = getSymbol(symbolType);
         switch (d.symbol.shape) {
             case 'path': {
                 appendLinePathElement({
                     svgRootElement: element.node(),
                     x,
                     height: legendLineHeight,
-                    width: d.symbol.width,
+                    width: d.symbol.bboxWidth,
                     color,
                     className,
                     dashStyle: d.dashStyle,
@@ -102,7 +104,7 @@ function renderLegendSymbol(args) {
                     .append('rect')
                     .attr('x', x)
                     .attr('y', y)
-                    .attr('width', d.symbol.width)
+                    .attr('width', d.symbol.bboxWidth)
                     .attr('height', d.symbol.height)
                     .attr('rx', d.symbol.radius)
                     .attr('class', className)
@@ -110,18 +112,14 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
+                const symbolAreaSize = Math.pow(d.symbol.width, 2);
                 const y = legendLineHeight / 2;
+                const bboxWidth = d.symbol.bboxWidth;
                 element
                     .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', (_d, _index, elements) => {
-                    var _a, _b;
-                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
+                    .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
+                    .attr('transform', () => {
+                    const translateX = x + bboxWidth / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -140,7 +138,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -157,7 +155,7 @@ export const Legend = (props) => {
             let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -178,7 +176,7 @@ export const Legend = (props) => {
                     const getXPosition = (i) => {
                         return line.slice(0, i).reduce((acc, legendItem) => {
                             return (acc +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding +
                                 legendItem.textWidth +
                                 legend.itemDistance);
@@ -202,7 +200,7 @@ export const Legend = (props) => {
                             return `${d.textWidth}px`;
                         })
                             .style('left', function (d, i) {
-                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                            return `${getXPosition(i) + d.symbol.bboxWidth + d.symbol.padding}px`;
                         })
                             .style('top', function (d) {
                             if (d.height < legendLineHeight) {
@@ -221,7 +219,7 @@ export const Legend = (props) => {
                             .append('text')
                             .attr('x', function (legendItem, i) {
                             return (getXPosition(i) +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
                             .attr('height', legend.height)
@@ -238,7 +236,7 @@ export const Legend = (props) => {
                     }
                     else {
                         contentWidth = line.reduce((sum, l, index) => {
-                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            sum += l.textWidth + l.symbol.bboxWidth + l.symbol.padding;
                             if (index > 0) {
                                 sum += legend.itemDistance;
                             }
@@ -311,7 +309,7 @@ export const Legend = (props) => {
                 legendLeft = left;
                 legendTop = top;
                 // gradient rect
-                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -380,9 +378,9 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
-                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
-                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }

package/dist/cjs/hooks/useChartOptions/tooltip.d.ts

@@ -1,5 +1,10 @@
 import type { ChartData, ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedTooltip } from './types';
+export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }: {
+    seriesData: ChartSeries[];
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
+}): import("../../types").ValueFormat | undefined;
 export declare const getPreparedTooltip: (args: {
     tooltip: ChartData["tooltip"];
     seriesData: ChartSeries[];

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getDomainDataXBySeries, getDomainDataYBySeries, getMinSpaceBetween } from '../../utils';
-function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
+export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }) {
     if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap', 'funnel'].includes(item.type))) {
         return undefined;
     }
@@ -17,5 +17,5 @@ function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
 export const getPreparedTooltip = (args) => {
     var _a, _b;
     const { tooltip, seriesData, yAxes, xAxis } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultHeaderFormat({ seriesData, yAxes, xAxis }) });
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis }) });
 };

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -101,7 +101,7 @@ async function getGroupedLegendItems(args) {
         const item = items[i];
         const resultItem = clone(item);
         resultItem.text = item.name;
-        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.bboxWidth - resultItem.symbol.padding;
         let textHeight = 0;
         let textWidth = 0;
         if (preparedLegend.html) {
@@ -143,7 +143,7 @@ async function getGroupedLegendItems(args) {
         }
         result[lineIndex].push(resultItem);
         const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-            return acc + symbol.width + symbol.padding;
+            return acc + symbol.bboxWidth + symbol.padding;
         }, 0);
         const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
         const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;

package/dist/cjs/hooks/useSeries/prepare-line.js

@@ -22,9 +22,11 @@ function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
         shape: 'path',
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        width: width,
+        bboxWidth: width,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };

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

@@ -11,7 +11,9 @@ export type SymbolLegendSymbol = {
     shape: 'symbol';
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol) & {
+    bboxWidth: number;
+};
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;

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

@@ -1,5 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
+import { getSymbolBBoxWidth } from '../../utils';
 import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -16,10 +17,13 @@ export const getAllLegendItems = (series) => {
 export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    const type = symbolType || SymbolType.Circle;
     return {
         shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        symbolType: type,
+        width,
+        bboxWidth: getSymbolBBoxWidth({ symbolSize: Math.pow(width, 2), symbolType: type }),
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

package/dist/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
+export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
 export * from './components';
 export * from './types';

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
+export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
 export * from './components';
 export * from './types';

package/dist/cjs/utils/chart/symbol.d.ts

@@ -1,3 +1,7 @@
 import { SymbolType } from '../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
 export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;
+export declare function getSymbolBBoxWidth({ symbolSize, symbolType, }: {
+    symbolSize: number;
+    symbolType: `${SymbolType}`;
+}): number;

package/dist/cjs/utils/chart/symbol.js

@@ -34,3 +34,18 @@ export const getSymbol = (symbolType) => {
             return symbolCircle;
     }
 };
+export function getSymbolBBoxWidth({ symbolSize, symbolType, }) {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return Math.sqrt(symbolSize * 2);
+        case SymbolType.Circle:
+            return Math.sqrt(symbolSize / Math.PI) * 2;
+        case SymbolType.Square:
+            return Math.sqrt(symbolSize);
+        case SymbolType.Triangle:
+        case SymbolType.TriangleDown:
+            return Math.sqrt((4 * symbolSize * Math.sqrt(3)) / 3);
+        default:
+            return 0;
+    }
+}

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

@@ -176,9 +176,6 @@ 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 }) {
     var _a;
@@ -188,9 +185,10 @@ export function getTextSizeFn({ style }) {
         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);
+    const computedStyle = window.getComputedStyle(element, null);
+    const defaultFontFamily = computedStyle.getPropertyValue('font-family');
+    const defaultFontSize = computedStyle.getPropertyValue('font-size');
+    const defaultFontWeight = computedStyle.getPropertyValue('font-weight');
     return async (str) => {
         var _a, _b;
         await document.fonts.ready;

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

@@ -66,7 +66,8 @@ export const ChartInner = (props) => {
     const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        rangeSliderState,
+        updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,

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

@@ -9,7 +9,6 @@ type Props = ChartInnerProps & {
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
     preparedChart: PreparedChart;
-    svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
@@ -44,7 +43,6 @@ export declare function useChartInnerProps(props: Props): {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
     shapesReady: boolean;
-    svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {

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

@@ -75,8 +75,7 @@ export function useLegend({ preparedLegend, preparedChart, preparedSeries, width
         };
 }
 export function useChartInnerProps(props) {
-    var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const colors = React.useMemo(() => {
@@ -214,7 +213,6 @@ export function useChartInnerProps(props) {
         getYAxisWidth,
         legendConfig,
     });
-    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,
         boundsHeight,
@@ -234,7 +232,6 @@ export function useChartInnerProps(props) {
         shapes,
         shapesData,
         shapesReady,
-        svgXPos: x,
         xAxis,
         xScale,
         yAxis,

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

@@ -71,7 +71,7 @@ function renderLegendSymbol(args) {
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
             return (acc +
-                legendItem.symbol.width +
+                legendItem.symbol.bboxWidth +
                 legendItem.symbol.padding +
                 legendItem.textWidth +
                 legend.itemDistance);
@@ -82,13 +82,15 @@ function renderLegendSymbol(args) {
         const x = getXPosition(i);
         const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
         const color = d.visible ? d.color : '';
+        const symbolType = d.symbol.symbolType;
+        const scatterSymbol = getSymbol(symbolType);
         switch (d.symbol.shape) {
             case 'path': {
                 appendLinePathElement({
                     svgRootElement: element.node(),
                     x,
                     height: legendLineHeight,
-                    width: d.symbol.width,
+                    width: d.symbol.bboxWidth,
                     color,
                     className,
                     dashStyle: d.dashStyle,
@@ -102,7 +104,7 @@ function renderLegendSymbol(args) {
                     .append('rect')
                     .attr('x', x)
                     .attr('y', y)
-                    .attr('width', d.symbol.width)
+                    .attr('width', d.symbol.bboxWidth)
                     .attr('height', d.symbol.height)
                     .attr('rx', d.symbol.radius)
                     .attr('class', className)
@@ -110,18 +112,14 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
+                const symbolAreaSize = Math.pow(d.symbol.width, 2);
                 const y = legendLineHeight / 2;
+                const bboxWidth = d.symbol.bboxWidth;
                 element
                     .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', (_d, _index, elements) => {
-                    var _a, _b;
-                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
+                    .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
+                    .attr('transform', () => {
+                    const translateX = x + bboxWidth / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -140,7 +138,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -157,7 +155,7 @@ export const Legend = (props) => {
             let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -178,7 +176,7 @@ export const Legend = (props) => {
                     const getXPosition = (i) => {
                         return line.slice(0, i).reduce((acc, legendItem) => {
                             return (acc +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding +
                                 legendItem.textWidth +
                                 legend.itemDistance);
@@ -202,7 +200,7 @@ export const Legend = (props) => {
                             return `${d.textWidth}px`;
                         })
                             .style('left', function (d, i) {
-                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                            return `${getXPosition(i) + d.symbol.bboxWidth + d.symbol.padding}px`;
                         })
                             .style('top', function (d) {
                             if (d.height < legendLineHeight) {
@@ -221,7 +219,7 @@ export const Legend = (props) => {
                             .append('text')
                             .attr('x', function (legendItem, i) {
                             return (getXPosition(i) +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
                             .attr('height', legend.height)
@@ -238,7 +236,7 @@ export const Legend = (props) => {
                     }
                     else {
                         contentWidth = line.reduce((sum, l, index) => {
-                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            sum += l.textWidth + l.symbol.bboxWidth + l.symbol.padding;
                             if (index > 0) {
                                 sum += legend.itemDistance;
                             }
@@ -311,7 +309,7 @@ export const Legend = (props) => {
                 legendLeft = left;
                 legendTop = top;
                 // gradient rect
-                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -380,9 +378,9 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
-                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
-                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }

package/dist/esm/hooks/useChartOptions/tooltip.d.ts

@@ -1,5 +1,10 @@
 import type { ChartData, ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedTooltip } from './types';
+export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }: {
+    seriesData: ChartSeries[];
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
+}): import("../..").ValueFormat | undefined;
 export declare const getPreparedTooltip: (args: {
     tooltip: ChartData["tooltip"];
     seriesData: ChartSeries[];

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getDomainDataXBySeries, getDomainDataYBySeries, getMinSpaceBetween } from '../../utils';
-function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
+export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }) {
     if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap', 'funnel'].includes(item.type))) {
         return undefined;
     }
@@ -17,5 +17,5 @@ function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
 export const getPreparedTooltip = (args) => {
     var _a, _b;
     const { tooltip, seriesData, yAxes, xAxis } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultHeaderFormat({ seriesData, yAxes, xAxis }) });
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis }) });
 };

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -101,7 +101,7 @@ async function getGroupedLegendItems(args) {
         const item = items[i];
         const resultItem = clone(item);
         resultItem.text = item.name;
-        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.bboxWidth - resultItem.symbol.padding;
         let textHeight = 0;
         let textWidth = 0;
         if (preparedLegend.html) {
@@ -143,7 +143,7 @@ async function getGroupedLegendItems(args) {
         }
         result[lineIndex].push(resultItem);
         const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-            return acc + symbol.width + symbol.padding;
+            return acc + symbol.bboxWidth + symbol.padding;
         }, 0);
         const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
         const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;

package/dist/esm/hooks/useSeries/prepare-line.js

@@ -22,9 +22,11 @@ function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
         shape: 'path',
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        width: width,
+        bboxWidth: width,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };

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

@@ -11,7 +11,9 @@ export type SymbolLegendSymbol = {
     shape: 'symbol';
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol) & {
+    bboxWidth: number;
+};
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;

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

@@ -1,5 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
+import { getSymbolBBoxWidth } from '../../utils';
 import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -16,10 +17,13 @@ export const getAllLegendItems = (series) => {
 export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    const type = symbolType || SymbolType.Circle;
     return {
         shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        symbolType: type,
+        width,
+        bboxWidth: getSymbolBBoxWidth({ symbolSize: Math.pow(width, 2), symbolType: type }),
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

package/dist/esm/index.d.ts

@@ -1,3 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
+export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
 export * from './components';
 export * from './types';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
+export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
 export * from './components';
 export * from './types';

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

@@ -1,3 +1,7 @@
 import { SymbolType } from '../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
 export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;
+export declare function getSymbolBBoxWidth({ symbolSize, symbolType, }: {
+    symbolSize: number;
+    symbolType: `${SymbolType}`;
+}): number;

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

@@ -34,3 +34,18 @@ export const getSymbol = (symbolType) => {
             return symbolCircle;
     }
 };
+export function getSymbolBBoxWidth({ symbolSize, symbolType, }) {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return Math.sqrt(symbolSize * 2);
+        case SymbolType.Circle:
+            return Math.sqrt(symbolSize / Math.PI) * 2;
+        case SymbolType.Square:
+            return Math.sqrt(symbolSize);
+        case SymbolType.Triangle:
+        case SymbolType.TriangleDown:
+            return Math.sqrt((4 * symbolSize * Math.sqrt(3)) / 3);
+        default:
+            return 0;
+    }
+}

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

@@ -176,9 +176,6 @@ 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 }) {
     var _a;
@@ -188,9 +185,10 @@ export function getTextSizeFn({ style }) {
         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);
+    const computedStyle = window.getComputedStyle(element, null);
+    const defaultFontFamily = computedStyle.getPropertyValue('font-family');
+    const defaultFontSize = computedStyle.getPropertyValue('font-size');
+    const defaultFontWeight = computedStyle.getPropertyValue('font-weight');
     return async (str) => {
         var _a, _b;
         await document.fonts.ready;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.37.2",
+  "version": "1.38.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",