@gravity-ui/charts 1.37.2 → 1.38.0

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/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/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/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/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/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/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.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",