@gravity-ui/charts 1.38.2 → 1.38.3

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { usePrevious } from '../../../hooks';
 import { i18n } from '../../../i18n';
-import { block, hasVerticalScrollbar } from '../../../utils';
+import { block } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
 import { RowWithAggregation } from './RowWithAggregation';
@@ -52,30 +52,17 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
         if (!contentRowsRef.current) {
             return;
         }
-        if (!hasVerticalScrollbar(contentRowsRef.current)) {
+        if (isEqual(hoveredValues, prevHoveredValues)) {
             return;
         }
-        if (!isEqual(hoveredValues, prevHoveredValues)) {
-            const { clientHeight } = contentRowsRef.current;
-            const { top: containerTop } = contentRowsRef.current.getBoundingClientRect();
-            const rows = contentRowsRef.current.querySelectorAll(`.${b('content-row')}`);
-            let nextVisibleRows = 0;
-            let nextMaxContentRowsHeight = 0;
-            for (let i = 0; i < rows.length; i++) {
-                const row = rows[i];
-                const { top, height } = row.getBoundingClientRect();
-                if (top - containerTop + height <= clientHeight) {
-                    nextVisibleRows += 1;
-                    nextMaxContentRowsHeight += height;
-                }
-                else {
-                    break;
-                }
-            }
-            setVisibleRows(nextVisibleRows - 1);
-            setMaxContentRowsHeight(nextMaxContentRowsHeight);
+        const { scrollHeight, clientHeight } = contentRowsRef.current;
+        if (scrollHeight <= clientHeight) {
+            return;
         }
-    }, [hoveredValues, prevHoveredValues]);
+        const nextVisibleRows = Math.floor(hovered.length * (clientHeight / scrollHeight));
+        setVisibleRows(Math.max(nextVisibleRows - 1, 1));
+        setMaxContentRowsHeight((scrollHeight / hovered.length) * nextVisibleRows);
+    }, [hovered.length, hoveredValues, prevHoveredValues]);
     React.useEffect(() => {
         if (!contentRowsRef.current) {
             return;
@@ -91,7 +78,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name') },
             React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
-        React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
+        React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: pinned ? { maxHeight: maxContentRowsHeight } : undefined },
             visibleHovered.map((seriesItem, i) => {
                 var _a;
                 const { data, series, closest } = seriesItem;

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

@@ -10,12 +10,12 @@ export function useAxis(props) {
     const prevAxesStateValue = React.useRef(axesState);
     const axesStateReady = React.useRef(false);
     React.useEffect(() => {
+        axesStateRunRef.current++;
+        axesStateReady.current = false;
         const shouldWaitForLegendReady = !preparedLegend || ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && !legendConfig);
         if (shouldWaitForLegendReady) {
             return;
         }
-        axesStateRunRef.current++;
-        axesStateReady.current = false;
         (async function () {
             var _a, _b;
             const currentRun = axesStateRunRef.current;
@@ -79,5 +79,10 @@ export function useAxis(props) {
         xAxis,
         yAxis,
     ]);
-    return axesStateReady.current ? Object.assign(Object.assign({}, axesState), { setAxes }) : { xAxis: null, yAxis: [], setAxes };
+    const isAxesReady = axesStateReady.current;
+    const result = React.useMemo(() => {
+        return isAxesReady ? Object.assign(Object.assign({}, axesState), { setAxes }) : { xAxis: null, yAxis: [], setAxes };
+    }, [isAxesReady, axesState]);
+    prevAxesStateValue.current = result;
+    return result;
 }

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

@@ -49,6 +49,9 @@ const getLeftOffset = ({ preparedLegend, legendConfig, }) => {
 export const useChartDimensions = (args) => {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width, legendConfig, } = args;
     return React.useMemo(() => {
+        if (!preparedLegend || (!legendConfig && (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled))) {
+            return { boundsWidth: 0, boundsHeight: 0 };
+        }
         const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
         const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
         const bottomOffset = getBottomOffset({

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

@@ -38,6 +38,9 @@ export const useShapes = (args) => {
     const countedRef = React.useRef(0);
     React.useEffect(() => {
         countedRef.current++;
+        if (!boundsHeight || !boundsWidth) {
+            return;
+        }
         (async () => {
             const currentRun = countedRef.current;
             const visibleSeries = getOnlyVisibleSeries(series);

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

@@ -32,7 +32,7 @@ export function useYAxisLabelWidth(props) {
             }
             if (runRef.current === currentRun && axisIndexesToRecalculateMap.size > 0) {
                 setAxes((prevState) => {
-                    prevState.yAxis = prevState.yAxis.map((axis, i) => {
+                    const newYAxis = prevState.yAxis.map((axis, i) => {
                         const width = axisIndexesToRecalculateMap.get(i);
                         if (width) {
                             const axisWithRecalculatedLabels = Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { width }) });
@@ -40,7 +40,7 @@ export function useYAxisLabelWidth(props) {
                         }
                         return axis;
                     });
-                    return prevState;
+                    return Object.assign(Object.assign({}, prevState), { yAxis: newYAxis });
                 });
             }
         })();

package/dist/cjs/utils/misc.d.ts

@@ -11,4 +11,3 @@ export declare function isMacintosh(): boolean;
 export declare function measurePerformance(): {
     end(): number;
 };
-export declare function hasVerticalScrollbar(node: HTMLElement | null): boolean;

package/dist/cjs/utils/misc.js

@@ -26,9 +26,3 @@ export function measurePerformance() {
         },
     };
 }
-export function hasVerticalScrollbar(node) {
-    if (!node) {
-        return false;
-    }
-    return node.scrollHeight > node.clientHeight;
-}

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { usePrevious } from '../../../hooks';
 import { i18n } from '../../../i18n';
-import { block, hasVerticalScrollbar } from '../../../utils';
+import { block } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
 import { RowWithAggregation } from './RowWithAggregation';
@@ -52,30 +52,17 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
         if (!contentRowsRef.current) {
             return;
         }
-        if (!hasVerticalScrollbar(contentRowsRef.current)) {
+        if (isEqual(hoveredValues, prevHoveredValues)) {
             return;
         }
-        if (!isEqual(hoveredValues, prevHoveredValues)) {
-            const { clientHeight } = contentRowsRef.current;
-            const { top: containerTop } = contentRowsRef.current.getBoundingClientRect();
-            const rows = contentRowsRef.current.querySelectorAll(`.${b('content-row')}`);
-            let nextVisibleRows = 0;
-            let nextMaxContentRowsHeight = 0;
-            for (let i = 0; i < rows.length; i++) {
-                const row = rows[i];
-                const { top, height } = row.getBoundingClientRect();
-                if (top - containerTop + height <= clientHeight) {
-                    nextVisibleRows += 1;
-                    nextMaxContentRowsHeight += height;
-                }
-                else {
-                    break;
-                }
-            }
-            setVisibleRows(nextVisibleRows - 1);
-            setMaxContentRowsHeight(nextMaxContentRowsHeight);
+        const { scrollHeight, clientHeight } = contentRowsRef.current;
+        if (scrollHeight <= clientHeight) {
+            return;
         }
-    }, [hoveredValues, prevHoveredValues]);
+        const nextVisibleRows = Math.floor(hovered.length * (clientHeight / scrollHeight));
+        setVisibleRows(Math.max(nextVisibleRows - 1, 1));
+        setMaxContentRowsHeight((scrollHeight / hovered.length) * nextVisibleRows);
+    }, [hovered.length, hoveredValues, prevHoveredValues]);
     React.useEffect(() => {
         if (!contentRowsRef.current) {
             return;
@@ -91,7 +78,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name') },
             React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
-        React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
+        React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: pinned ? { maxHeight: maxContentRowsHeight } : undefined },
             visibleHovered.map((seriesItem, i) => {
                 var _a;
                 const { data, series, closest } = seriesItem;

package/dist/esm/hooks/useAxis/index.js

@@ -10,12 +10,12 @@ export function useAxis(props) {
     const prevAxesStateValue = React.useRef(axesState);
     const axesStateReady = React.useRef(false);
     React.useEffect(() => {
+        axesStateRunRef.current++;
+        axesStateReady.current = false;
         const shouldWaitForLegendReady = !preparedLegend || ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && !legendConfig);
         if (shouldWaitForLegendReady) {
             return;
         }
-        axesStateRunRef.current++;
-        axesStateReady.current = false;
         (async function () {
             var _a, _b;
             const currentRun = axesStateRunRef.current;
@@ -79,5 +79,10 @@ export function useAxis(props) {
         xAxis,
         yAxis,
     ]);
-    return axesStateReady.current ? Object.assign(Object.assign({}, axesState), { setAxes }) : { xAxis: null, yAxis: [], setAxes };
+    const isAxesReady = axesStateReady.current;
+    const result = React.useMemo(() => {
+        return isAxesReady ? Object.assign(Object.assign({}, axesState), { setAxes }) : { xAxis: null, yAxis: [], setAxes };
+    }, [isAxesReady, axesState]);
+    prevAxesStateValue.current = result;
+    return result;
 }

package/dist/esm/hooks/useChartDimensions/index.js

@@ -49,6 +49,9 @@ const getLeftOffset = ({ preparedLegend, legendConfig, }) => {
 export const useChartDimensions = (args) => {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width, legendConfig, } = args;
     return React.useMemo(() => {
+        if (!preparedLegend || (!legendConfig && (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled))) {
+            return { boundsWidth: 0, boundsHeight: 0 };
+        }
         const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
         const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
         const bottomOffset = getBottomOffset({

package/dist/esm/hooks/useShapes/index.js

@@ -38,6 +38,9 @@ export const useShapes = (args) => {
     const countedRef = React.useRef(0);
     React.useEffect(() => {
         countedRef.current++;
+        if (!boundsHeight || !boundsWidth) {
+            return;
+        }
         (async () => {
             const currentRun = countedRef.current;
             const visibleSeries = getOnlyVisibleSeries(series);

package/dist/esm/hooks/useYAxisLabelWidth/index.js

@@ -32,7 +32,7 @@ export function useYAxisLabelWidth(props) {
             }
             if (runRef.current === currentRun && axisIndexesToRecalculateMap.size > 0) {
                 setAxes((prevState) => {
-                    prevState.yAxis = prevState.yAxis.map((axis, i) => {
+                    const newYAxis = prevState.yAxis.map((axis, i) => {
                         const width = axisIndexesToRecalculateMap.get(i);
                         if (width) {
                             const axisWithRecalculatedLabels = Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { width }) });
@@ -40,7 +40,7 @@ export function useYAxisLabelWidth(props) {
                         }
                         return axis;
                     });
-                    return prevState;
+                    return Object.assign(Object.assign({}, prevState), { yAxis: newYAxis });
                 });
             }
         })();

package/dist/esm/utils/misc.d.ts

@@ -11,4 +11,3 @@ export declare function isMacintosh(): boolean;
 export declare function measurePerformance(): {
     end(): number;
 };
-export declare function hasVerticalScrollbar(node: HTMLElement | null): boolean;

package/dist/esm/utils/misc.js

@@ -26,9 +26,3 @@ export function measurePerformance() {
         },
     };
 }
-export function hasVerticalScrollbar(node) {
-    if (!node) {
-        return false;
-    }
-    return node.scrollHeight > node.clientHeight;
-}

package/package.json

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