@gravity-ui/charts 1.38.1 → 1.38.3

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -13,19 +13,8 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
 };
-type LegendState = {
-    legendConfig?: LegendConfig;
-    legendItems: LegendItem[][];
-};
-export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
-    preparedLegend: PreparedLegend | null;
-    preparedChart: PreparedChart;
-    preparedSeries: PreparedSeries[];
-    width: number;
-    height: number;
-}): LegendState;
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: PreparedSeries[];
+    allPreparedSeries: import("../../hooks").PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
@@ -33,9 +22,9 @@ export declare function useChartInnerProps(props: Props): {
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: LegendConfig | undefined;
-    legendItems: LegendItem[][];
+    legendItems: import("../../hooks").LegendItem[][];
     preparedLegend: PreparedLegend | null;
-    preparedSeries: PreparedSeries[];
+    preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
 import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
-import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
 import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
+import { useLegend } from './useLegend';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -35,45 +34,6 @@ function getBoundsOffsetLeft(args) {
     }, 0);
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
-export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
-    const [legendState, setLegend] = React.useState({
-        legendConfig: undefined,
-        legendItems: [],
-    });
-    const legendStateRunRef = React.useRef(0);
-    const prevLegendStateValue = React.useRef(legendState);
-    const legendStateReady = React.useRef(false);
-    React.useEffect(() => {
-        legendStateRunRef.current++;
-        legendStateReady.current = false;
-        (async function () {
-            const currentRun = legendStateRunRef.current;
-            if (!preparedLegend) {
-                return;
-            }
-            const newStateValue = await getLegendComponents({
-                chartWidth: width,
-                chartHeight: height,
-                chartMargin: preparedChart.margin,
-                series: preparedSeries,
-                preparedLegend,
-            });
-            if (legendStateRunRef.current === currentRun) {
-                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
-                    setLegend(newStateValue);
-                    prevLegendStateValue.current = newStateValue;
-                }
-                legendStateReady.current = true;
-            }
-        })();
-    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
-    return legendStateReady.current
-        ? legendState
-        : {
-            legendConfig: undefined,
-            legendItems: [],
-        };
-}
 export function useChartInnerProps(props) {
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);

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

@@ -0,0 +1,14 @@
+import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendConfig } from '../../types';
+type LegendState = {
+    legendConfig?: LegendConfig;
+    legendItems: LegendItem[][];
+};
+export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
+    preparedLegend: PreparedLegend | null;
+    preparedChart: PreparedChart;
+    preparedSeries: PreparedSeries[];
+    width: number;
+    height: number;
+}): LegendState;
+export {};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
+export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
+    const [legendState, setLegend] = React.useState({
+        legendConfig: undefined,
+        legendItems: [],
+    });
+    const legendStateRunRef = React.useRef(0);
+    const prevLegendStateValue = React.useRef(legendState);
+    const legendStateReady = React.useRef(false);
+    React.useEffect(() => {
+        legendStateRunRef.current++;
+        legendStateReady.current = false;
+        (async function () {
+            const currentRun = legendStateRunRef.current;
+            if (!preparedLegend) {
+                return;
+            }
+            const newStateValue = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            if (legendStateRunRef.current === currentRun) {
+                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
+                    setLegend(newStateValue);
+                    prevLegendStateValue.current = newStateValue;
+                }
+                legendStateReady.current = true;
+            }
+        })();
+    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
+    return legendState;
+}

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/useAxis/x-axis.js

@@ -142,7 +142,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
                 : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
         },
         tickMarks: {
-            enabled: get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+            enabled: isAxisVisible && get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
             length: get(xAxis, 'tickMarks.length', axisTickMarksDefaults.length),
         },
         position: 'bottom',

package/dist/cjs/hooks/useAxis/y-axis.js

@@ -52,7 +52,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
     return Promise.all(
     // eslint-disable-next-line complexity
     axisItems.map(async (axisItem, axisIndex) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -62,7 +62,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
         const axisPosition = get(axisItem, 'position', defaultAxisPosition);
         const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === axisIndex);
-        const labelsEnabled = get(axisItem, 'labels.enabled', true);
+        const isAxisVisible = (_a = axisItem.visible) !== null && _a !== void 0 ? _a : true;
+        const labelsEnabled = isAxisVisible && get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
         };
@@ -70,7 +71,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
             : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
-        const titleText = get(axisItem, 'title.text', '');
+        const titleText = isAxisVisible ? get(axisItem, 'title.text', '') : '';
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
         const estimatedTitleRows = (await wrapText({
@@ -78,24 +79,23 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             style: titleStyle,
             width: height,
         })).slice(0, titleMaxRowsCount);
-        const titleRotation = getAxisTitleRotation((_a = axisItem.title) === null || _a === void 0 ? void 0 : _a.rotation, axisPosition);
+        const titleRotation = getAxisTitleRotation((_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.rotation, axisPosition);
         const titleMaxWidth = titleRotation === 0
             ? calculateNumericProperty({
-                value: (_c = (_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.maxWidth) !== null && _c !== void 0 ? _c : '20%',
+                value: (_d = (_c = axisItem.title) === null || _c === void 0 ? void 0 : _c.maxWidth) !== null && _d !== void 0 ? _d : '20%',
                 base: width,
             })
             : calculateNumericProperty({
-                value: (_e = (_d = axisItem.title) === null || _d === void 0 ? void 0 : _d.maxWidth) !== null && _e !== void 0 ? _e : '100%',
+                value: (_f = (_e = axisItem.title) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : '100%',
                 base: height,
             });
         const titleSize = await getLabelsSize({
             labels: [titleText],
             style: titleStyle,
-            html: (_f = axisItem.title) === null || _f === void 0 ? void 0 : _f.html,
+            html: (_g = axisItem.title) === null || _g === void 0 ? void 0 : _g.html,
         });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
-        const shouldHideGrid = axisItem.visible === false ||
-            axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
+        const shouldHideGrid = !isAxisVisible || axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
         let gridEnabled;
         if (shouldHideGrid) {
             gridEnabled = false;
@@ -108,7 +108,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             else {
                 gridEnabled = shouldSyncAxisWithPrimary(axisItem, axisByPlot[plotIndex][0])
                     ? false
-                    : !((_g = axisByPlot[plotIndex][0].visible) !== null && _g !== void 0 ? _g : true);
+                    : !((_h = axisByPlot[plotIndex][0].visible) !== null && _h !== void 0 ? _h : true);
             }
         }
         const preparedAxis = {
@@ -126,7 +126,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: (_j = calculateNumericProperty({ base: width, value: (_h = axisItem.labels) === null || _h === void 0 ? void 0 : _h.maxWidth })) !== null && _j !== void 0 ? _j : axisLabelsDefaults.maxWidth,
+                maxWidth: (_k = calculateNumericProperty({ base: width, value: (_j = axisItem.labels) === null || _j === void 0 ? void 0 : _j.maxWidth })) !== null && _k !== void 0 ? _k : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -140,11 +140,11 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 height: titleSize.maxHeight * estimatedTitleRows.length,
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
-                html: (_l = (_k = axisItem.title) === null || _k === void 0 ? void 0 : _k.html) !== null && _l !== void 0 ? _l : false,
+                html: (_m = (_l = axisItem.title) === null || _l === void 0 ? void 0 : _l.html) !== null && _m !== void 0 ? _m : false,
                 maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
                 rotation: titleRotation,
             },
-            min: (_m = get(axisItem, 'min')) !== null && _m !== void 0 ? _m : getDefaultMinYAxisValue(axisSeriesData),
+            min: (_o = get(axisItem, 'min')) !== null && _o !== void 0 ? _o : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
             startOnTick: get(axisItem, 'startOnTick'),
             endOnTick: get(axisItem, 'endOnTick'),
@@ -153,15 +153,16 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 enabled: gridEnabled,
             },
             ticks: {
-                pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
+                pixelInterval: ((_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval)
                     ? calculateNumericProperty({
                         base: height,
-                        value: (_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval,
+                        value: (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.interval,
                     })
-                    : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
+                    : (_r = axisItem.ticks) === null || _r === void 0 ? void 0 : _r.pixelInterval,
             },
             tickMarks: {
-                enabled: get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+                enabled: isAxisVisible &&
+                    get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
                 length: get(axisItem, 'tickMarks.length', axisTickMarksDefaults.length),
             },
             position: axisPosition,

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/types/chart/axis.d.ts

@@ -97,6 +97,9 @@ export interface ChartAxisTitle {
 }
 export interface ChartAxisTickMarks {
     /** Enable or disable the tick marks on the axis.
+     *
+     * Note: tick marks are always hidden when the axis `visible` is set to `false`.
+     *
      * @default false
      */
     enabled?: boolean;
@@ -172,9 +175,12 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
-    /** Small perpendicular marks on the axis line at each tick position. */
+    /** Small perpendicular marks on the axis line at each tick position.
+     *
+     * Hidden when the axis `visible` is set to `false`.
+     */
     tickMarks?: ChartAxisTickMarks;
-    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    /** Whether axis, including axis title, line, tick marks, and labels, should be visible. */
     visible?: boolean;
     /** Setting the order of the axis values. It is not applied by default.
      * the "reverse" value is needed to use the reverse order without sorting

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/ChartInner/useChartInnerProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -13,19 +13,8 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
 };
-type LegendState = {
-    legendConfig?: LegendConfig;
-    legendItems: LegendItem[][];
-};
-export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
-    preparedLegend: PreparedLegend | null;
-    preparedChart: PreparedChart;
-    preparedSeries: PreparedSeries[];
-    width: number;
-    height: number;
-}): LegendState;
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: PreparedSeries[];
+    allPreparedSeries: import("../../hooks").PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
@@ -33,9 +22,9 @@ export declare function useChartInnerProps(props: Props): {
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: LegendConfig | undefined;
-    legendItems: LegendItem[][];
+    legendItems: import("../../hooks").LegendItem[][];
     preparedLegend: PreparedLegend | null;
-    preparedSeries: PreparedSeries[];
+    preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
 import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
-import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
 import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
+import { useLegend } from './useLegend';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -35,45 +34,6 @@ function getBoundsOffsetLeft(args) {
     }, 0);
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
-export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
-    const [legendState, setLegend] = React.useState({
-        legendConfig: undefined,
-        legendItems: [],
-    });
-    const legendStateRunRef = React.useRef(0);
-    const prevLegendStateValue = React.useRef(legendState);
-    const legendStateReady = React.useRef(false);
-    React.useEffect(() => {
-        legendStateRunRef.current++;
-        legendStateReady.current = false;
-        (async function () {
-            const currentRun = legendStateRunRef.current;
-            if (!preparedLegend) {
-                return;
-            }
-            const newStateValue = await getLegendComponents({
-                chartWidth: width,
-                chartHeight: height,
-                chartMargin: preparedChart.margin,
-                series: preparedSeries,
-                preparedLegend,
-            });
-            if (legendStateRunRef.current === currentRun) {
-                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
-                    setLegend(newStateValue);
-                    prevLegendStateValue.current = newStateValue;
-                }
-                legendStateReady.current = true;
-            }
-        })();
-    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
-    return legendStateReady.current
-        ? legendState
-        : {
-            legendConfig: undefined,
-            legendItems: [],
-        };
-}
 export function useChartInnerProps(props) {
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);

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

@@ -0,0 +1,14 @@
+import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendConfig } from '../../types';
+type LegendState = {
+    legendConfig?: LegendConfig;
+    legendItems: LegendItem[][];
+};
+export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
+    preparedLegend: PreparedLegend | null;
+    preparedChart: PreparedChart;
+    preparedSeries: PreparedSeries[];
+    width: number;
+    height: number;
+}): LegendState;
+export {};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
+export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
+    const [legendState, setLegend] = React.useState({
+        legendConfig: undefined,
+        legendItems: [],
+    });
+    const legendStateRunRef = React.useRef(0);
+    const prevLegendStateValue = React.useRef(legendState);
+    const legendStateReady = React.useRef(false);
+    React.useEffect(() => {
+        legendStateRunRef.current++;
+        legendStateReady.current = false;
+        (async function () {
+            const currentRun = legendStateRunRef.current;
+            if (!preparedLegend) {
+                return;
+            }
+            const newStateValue = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            if (legendStateRunRef.current === currentRun) {
+                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
+                    setLegend(newStateValue);
+                    prevLegendStateValue.current = newStateValue;
+                }
+                legendStateReady.current = true;
+            }
+        })();
+    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
+    return legendState;
+}

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/useAxis/x-axis.js

@@ -142,7 +142,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
                 : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
         },
         tickMarks: {
-            enabled: get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+            enabled: isAxisVisible && get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
             length: get(xAxis, 'tickMarks.length', axisTickMarksDefaults.length),
         },
         position: 'bottom',

package/dist/esm/hooks/useAxis/y-axis.js

@@ -52,7 +52,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
     return Promise.all(
     // eslint-disable-next-line complexity
     axisItems.map(async (axisItem, axisIndex) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -62,7 +62,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
         const axisPosition = get(axisItem, 'position', defaultAxisPosition);
         const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === axisIndex);
-        const labelsEnabled = get(axisItem, 'labels.enabled', true);
+        const isAxisVisible = (_a = axisItem.visible) !== null && _a !== void 0 ? _a : true;
+        const labelsEnabled = isAxisVisible && get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
         };
@@ -70,7 +71,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
             : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
-        const titleText = get(axisItem, 'title.text', '');
+        const titleText = isAxisVisible ? get(axisItem, 'title.text', '') : '';
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
         const estimatedTitleRows = (await wrapText({
@@ -78,24 +79,23 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             style: titleStyle,
             width: height,
         })).slice(0, titleMaxRowsCount);
-        const titleRotation = getAxisTitleRotation((_a = axisItem.title) === null || _a === void 0 ? void 0 : _a.rotation, axisPosition);
+        const titleRotation = getAxisTitleRotation((_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.rotation, axisPosition);
         const titleMaxWidth = titleRotation === 0
             ? calculateNumericProperty({
-                value: (_c = (_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.maxWidth) !== null && _c !== void 0 ? _c : '20%',
+                value: (_d = (_c = axisItem.title) === null || _c === void 0 ? void 0 : _c.maxWidth) !== null && _d !== void 0 ? _d : '20%',
                 base: width,
             })
             : calculateNumericProperty({
-                value: (_e = (_d = axisItem.title) === null || _d === void 0 ? void 0 : _d.maxWidth) !== null && _e !== void 0 ? _e : '100%',
+                value: (_f = (_e = axisItem.title) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : '100%',
                 base: height,
             });
         const titleSize = await getLabelsSize({
             labels: [titleText],
             style: titleStyle,
-            html: (_f = axisItem.title) === null || _f === void 0 ? void 0 : _f.html,
+            html: (_g = axisItem.title) === null || _g === void 0 ? void 0 : _g.html,
         });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
-        const shouldHideGrid = axisItem.visible === false ||
-            axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
+        const shouldHideGrid = !isAxisVisible || axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
         let gridEnabled;
         if (shouldHideGrid) {
             gridEnabled = false;
@@ -108,7 +108,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             else {
                 gridEnabled = shouldSyncAxisWithPrimary(axisItem, axisByPlot[plotIndex][0])
                     ? false
-                    : !((_g = axisByPlot[plotIndex][0].visible) !== null && _g !== void 0 ? _g : true);
+                    : !((_h = axisByPlot[plotIndex][0].visible) !== null && _h !== void 0 ? _h : true);
             }
         }
         const preparedAxis = {
@@ -126,7 +126,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: (_j = calculateNumericProperty({ base: width, value: (_h = axisItem.labels) === null || _h === void 0 ? void 0 : _h.maxWidth })) !== null && _j !== void 0 ? _j : axisLabelsDefaults.maxWidth,
+                maxWidth: (_k = calculateNumericProperty({ base: width, value: (_j = axisItem.labels) === null || _j === void 0 ? void 0 : _j.maxWidth })) !== null && _k !== void 0 ? _k : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -140,11 +140,11 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 height: titleSize.maxHeight * estimatedTitleRows.length,
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
-                html: (_l = (_k = axisItem.title) === null || _k === void 0 ? void 0 : _k.html) !== null && _l !== void 0 ? _l : false,
+                html: (_m = (_l = axisItem.title) === null || _l === void 0 ? void 0 : _l.html) !== null && _m !== void 0 ? _m : false,
                 maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
                 rotation: titleRotation,
             },
-            min: (_m = get(axisItem, 'min')) !== null && _m !== void 0 ? _m : getDefaultMinYAxisValue(axisSeriesData),
+            min: (_o = get(axisItem, 'min')) !== null && _o !== void 0 ? _o : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
             startOnTick: get(axisItem, 'startOnTick'),
             endOnTick: get(axisItem, 'endOnTick'),
@@ -153,15 +153,16 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 enabled: gridEnabled,
             },
             ticks: {
-                pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
+                pixelInterval: ((_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval)
                     ? calculateNumericProperty({
                         base: height,
-                        value: (_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval,
+                        value: (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.interval,
                     })
-                    : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
+                    : (_r = axisItem.ticks) === null || _r === void 0 ? void 0 : _r.pixelInterval,
             },
             tickMarks: {
-                enabled: get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+                enabled: isAxisVisible &&
+                    get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
                 length: get(axisItem, 'tickMarks.length', axisTickMarksDefaults.length),
             },
             position: axisPosition,

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/types/chart/axis.d.ts

@@ -97,6 +97,9 @@ export interface ChartAxisTitle {
 }
 export interface ChartAxisTickMarks {
     /** Enable or disable the tick marks on the axis.
+     *
+     * Note: tick marks are always hidden when the axis `visible` is set to `false`.
+     *
      * @default false
      */
     enabled?: boolean;
@@ -172,9 +175,12 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
-    /** Small perpendicular marks on the axis line at each tick position. */
+    /** Small perpendicular marks on the axis line at each tick position.
+     *
+     * Hidden when the axis `visible` is set to `false`.
+     */
     tickMarks?: ChartAxisTickMarks;
-    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    /** Whether axis, including axis title, line, tick marks, and labels, should be visible. */
     visible?: boolean;
     /** Setting the order of the axis values. It is not applied by default.
      * the "reverse" value is needed to use the reverse order without sorting

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