@gravity-ui/charts 1.15.0 → 1.17.0

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.d.ts

@@ -2,11 +2,13 @@ import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
 type Props = {
     hovered: TooltipDataChunk[];
+    pinned?: boolean;
+    rowRenderer?: ChartTooltip['rowRenderer'];
     totals?: ChartTooltip['totals'];
     valueFormat?: ValueFormat;
+    headerFormat?: ChartTooltip['headerFormat'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
-    rowRenderer?: ChartTooltip['rowRenderer'];
 };
-export declare const DefaultTooltipContent: ({ hovered, xAxis, yAxis, valueFormat, totals, rowRenderer, }: Props) => React.JSX.Element;
+export declare const DefaultTooltipContent: ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }: Props) => React.JSX.Element;
 export {};

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

@@ -1,15 +1,26 @@
 import React from 'react';
 import { Divider } from '@gravity-ui/uikit';
 import get from 'lodash/get';
-import { block } from '../../../utils';
+import isEqual from 'lodash/isEqual';
+import { usePrevious } from '../../../hooks';
+import { i18n } from '../../../i18n';
+import { block, hasVerticalScrollbar } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
-import { RowTotals } from './RowTotals';
+import { RowWithAggregation } from './RowWithAggregation';
 import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
 const b = block('tooltip');
-export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals, rowRenderer, }) => {
+export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }) => {
+    var _a;
+    const [visibleRows, setVisibleRows] = React.useState();
+    const [maxContentRowsHeight, setMaxContentRowsHeight] = React.useState();
+    const [scrollBarWidth, setScrollBarWidth] = React.useState(0);
+    const contentRowsRef = React.useRef(null);
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
+    const prevHoveredValues = usePrevious(hoveredValues);
+    const visibleHovered = pinned || !visibleRows ? hovered : hovered.slice(0, visibleRows);
+    const restHoveredValues = pinned || !visibleRows ? [] : hoveredValues.slice(visibleRows);
     const renderRow = ({ id, name, color, active, striped, value, formattedValue, }) => {
         if (typeof rowRenderer === 'function') {
             return rowRenderer({
@@ -26,120 +37,169 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
         }
         return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
     };
-    return (React.createElement("div", { className: b('content') },
-        measureValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: measureValue } })),
-        // eslint-disable-next-line complexity
-        hovered.map((seriesItem, i) => {
-            var _a;
-            const { data, series, closest } = seriesItem;
-            const id = `${get(series, 'id')}_${i}`;
-            const color = get(data, 'color') || get(series, 'color');
-            const active = closest && hovered.length > 1;
-            const striped = (i + 1) % 2 === 0;
-            switch (series.type) {
-                case 'scatter':
-                case 'line':
-                case 'area':
-                case 'bar-x': {
-                    const format = valueFormat || getDefaultValueFormat({ axis: yAxis });
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format,
-                    });
-                    return renderRow({
-                        id,
-                        active,
-                        color,
-                        name: series.name,
-                        striped,
-                        value: hoveredValues[i],
-                        formattedValue,
-                    });
-                }
-                case 'waterfall': {
-                    const isTotal = get(data, 'total', false);
-                    const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                    const format = valueFormat || getDefaultValueFormat({ axis: yAxis });
-                    const subTotal = getFormattedValue({
-                        value: subTotalValue,
-                        format,
-                    });
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format,
-                    });
-                    return (React.createElement(React.Fragment, { key: id },
-                        !isTotal && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
-                            React.createElement(Row, { label: series.name, value: formattedValue }))),
-                        React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
-                }
-                case 'bar-y': {
-                    const format = valueFormat || getDefaultValueFormat({ axis: xAxis });
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format,
-                    });
-                    return renderRow({
-                        id,
-                        active,
-                        color,
-                        name: series.name,
-                        striped,
-                        value: hoveredValues[i],
-                        formattedValue,
-                    });
-                }
-                case 'pie':
-                case 'treemap': {
-                    const seriesData = data;
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format: valueFormat || { type: 'number' },
-                    });
-                    return renderRow({
-                        id,
-                        color,
-                        name: [seriesData.name || seriesData.id].flat().join('\n'),
-                        value: hoveredValues[i],
-                        formattedValue,
-                    });
-                }
-                case 'sankey': {
-                    const { target, data: source } = seriesItem;
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format: valueFormat || { type: 'number' },
-                    });
-                    return renderRow({
-                        id,
-                        color,
-                        name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
-                        value: hoveredValues[i],
-                        formattedValue,
-                    });
-                }
-                case 'radar': {
-                    const radarSeries = series;
-                    const formattedValue = getFormattedValue({
-                        value: hoveredValues[i],
-                        format: valueFormat || { type: 'number' },
-                    });
-                    return renderRow({
-                        id,
-                        color,
-                        active,
-                        name: radarSeries.name || radarSeries.id,
-                        value: hoveredValues[i],
-                        formattedValue,
-                    });
+    const formattedHeadValue = headerFormat
+        ? getFormattedValue({
+            value: measureValue === null || measureValue === void 0 ? void 0 : measureValue.value,
+            format: headerFormat,
+        })
+        : measureValue === null || measureValue === void 0 ? void 0 : measureValue.formattedValue;
+    React.useEffect(() => {
+        if (!contentRowsRef.current) {
+            return;
+        }
+        if (!hasVerticalScrollbar(contentRowsRef.current)) {
+            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;
                 }
-                default: {
-                    return null;
+                else {
+                    break;
                 }
             }
-        }),
+            setVisibleRows(nextVisibleRows - 1);
+            setMaxContentRowsHeight(nextMaxContentRowsHeight);
+        }
+    }, [hoveredValues, prevHoveredValues]);
+    React.useEffect(() => {
+        if (!contentRowsRef.current) {
+            return;
+        }
+        if (pinned) {
+            const { offsetWidth, clientWidth } = contentRowsRef.current;
+            setScrollBarWidth(offsetWidth - clientWidth);
+        }
+        else {
+            setScrollBarWidth(0);
+        }
+    }, [pinned]);
+    return (React.createElement("div", { className: b('content') },
+        formattedHeadValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: formattedHeadValue } })),
+        React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
+            visibleHovered.map((seriesItem, i) => {
+                var _a;
+                const { data, series, closest } = seriesItem;
+                const id = `${get(series, 'id')}_${i}`;
+                const color = get(data, 'color') || get(series, 'color');
+                // TODO: improve action item display https://github.com/gravity-ui/charts/issues/208
+                const active = closest && hovered.length > 1;
+                const striped = (i + 1) % 2 === 0;
+                const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
+                switch (series.type) {
+                    case 'scatter':
+                    case 'line':
+                    case 'area':
+                    case 'bar-x': {
+                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format,
+                        });
+                        return renderRow({
+                            id,
+                            active,
+                            color,
+                            name: series.name,
+                            striped,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'waterfall': {
+                        const isTotal = get(data, 'total', false);
+                        const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
+                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                        const subTotal = getFormattedValue({
+                            value: subTotalValue,
+                            format,
+                        });
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format,
+                        });
+                        return (React.createElement(React.Fragment, { key: id },
+                            !isTotal && (React.createElement(React.Fragment, null,
+                                React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
+                                React.createElement(Row, { label: series.name, value: formattedValue }))),
+                            React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
+                    }
+                    case 'bar-y': {
+                        const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format,
+                        });
+                        return renderRow({
+                            id,
+                            active,
+                            color,
+                            name: series.name,
+                            striped,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'pie':
+                    case 'treemap': {
+                        const seriesData = data;
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format: rowValueFormat || { type: 'number' },
+                        });
+                        return renderRow({
+                            id,
+                            color,
+                            name: [seriesData.name || seriesData.id].flat().join('\n'),
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'sankey': {
+                        const { target, data: source } = seriesItem;
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format: rowValueFormat || { type: 'number' },
+                        });
+                        return renderRow({
+                            id,
+                            color,
+                            name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    case 'radar': {
+                        const radarSeries = series;
+                        const formattedValue = getFormattedValue({
+                            value: hoveredValues[i],
+                            format: rowValueFormat || { type: 'number' },
+                        });
+                        return renderRow({
+                            id,
+                            color,
+                            active,
+                            name: radarSeries.name || radarSeries.id,
+                            value: hoveredValues[i],
+                            formattedValue,
+                        });
+                    }
+                    default: {
+                        return null;
+                    }
+                }
+            }),
+            Boolean(restHoveredValues.length) && (React.createElement(Row, { label: i18n('tooltip', 'label_more', { count: restHoveredValues.length }), striped: (visibleHovered.length + 1) % 2 === 0 }))),
         (totals === null || totals === void 0 ? void 0 : totals.enabled) && hovered.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(Divider, { className: b('content-row-totals-divider') }),
-            React.createElement(RowTotals, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, values: hoveredValues, valueFormat: valueFormat })))));
+            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
 };

package/dist/esm/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -9,7 +9,13 @@ export declare const getMeasureValue: ({ data, xAxis, yAxis, valueFormat, }: {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     valueFormat?: ValueFormat;
-}) => string | null;
+}) => {
+    value: string | null;
+    formattedValue?: undefined;
+} | {
+    value: string | number | undefined;
+    formattedValue: string;
+} | null;
 export declare function getHoveredValues(args: {
     hovered: TooltipDataChunk[];
     xAxis?: ChartXAxis | null;

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

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
+import { DEFAULT_DATE_FORMAT } from '../../../constants';
 import { i18n } from '../../../i18n';
 import { getDataCategoryValue } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 function getRowData(fieldName, data, axis) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'category': {
@@ -39,25 +39,30 @@ export function getDefaultValueFormat({ axis, }) {
     }
 }
 export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'radar')) {
-        return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
+        const value = (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
+        return { value };
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
+        const value = getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
         const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-        return getFormattedValue({
-            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
+        const formattedValue = getFormattedValue({
+            value: getYRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, yAxis),
             format,
         });
+        return { value, formattedValue };
     }
+    const value = getXRowData((_e = data[0]) === null || _e === void 0 ? void 0 : _e.data, xAxis);
     const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
-    return getFormattedValue({
-        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
+    const formattedValue = getFormattedValue({
+        value: getXRowData((_f = data[0]) === null || _f === void 0 ? void 0 : _f.data, xAxis),
         format,
     });
+    return { value, formattedValue };
 };
 export function getHoveredValues(args) {
     const { hovered, xAxis, yAxis } = args;

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

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis })))) : null;
 };

package/dist/esm/components/Tooltip/styles.css

@@ -1,4 +1,5 @@
 .gcharts-tooltip {
+  padding: var(--gcharts-tooltip-content-padding, 8px 0);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
 .gcharts-tooltip__popup-content {
@@ -7,7 +8,16 @@
   background-color: var(--g-color-infographics-tooltip-bg);
 }
 .gcharts-tooltip__content {
-  padding: var(--gcharts-tooltip-content-padding, 8px 0);
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  max-height: 90vh;
+}
+.gcharts-tooltip__content-rows {
+  overflow: hidden;
+}
+.gcharts-tooltip__content-rows_pinned {
+  overflow: auto;
 }
 .gcharts-tooltip__series-name {
   padding: 2px 14px 6px;

package/dist/esm/constants/date.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_DATE_FORMAT = "DD.MM.YY";

package/dist/esm/constants/date.js

@@ -0,0 +1 @@
+export const DEFAULT_DATE_FORMAT = 'DD.MM.YY';

package/dist/esm/constants/index.d.ts

@@ -1,5 +1,6 @@
 export * from './axis';
 export * from './chart-types';
+export * from './date';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';

package/dist/esm/constants/index.js

@@ -1,5 +1,6 @@
 export * from './axis';
 export * from './chart-types';
+export * from './date';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';

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

@@ -13,7 +13,13 @@ export type PreparedChart = {
     margin: ChartMargin;
     zoom: PreparedZoom | null;
 };
-export type PreparedAxisPlotBand = Required<AxisPlotBand>;
+export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
+    label: {
+        text: string;
+        style: BaseTextStyle;
+        padding: number;
+    };
+};
 export type PreparedAxisCrosshair = Required<AxisCrosshair>;
 export type PreparedAxisPlotLine = {
     value: number;

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -1,12 +1,12 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
     const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
     const tickCount = getTicksCount({ axis, range: width });
-    const ticks = getXAxisItems({
+    const ticks = getAxisItems({
         scale: scale,
         count: tickCount,
         maxCount: getMaxTickCount({ width, axis }),
@@ -41,7 +41,7 @@ async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
 export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
-    var _a;
+    var _a, _b, _c;
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
     const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
@@ -74,7 +74,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
             width: 0,
             height: 0,
             lineHeight: labelsLineHeight,
-            maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+            maxWidth: (_b = calculateNumericProperty({ base: width, value: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.maxWidth })) !== null && _b !== void 0 ? _b : axisLabelsDefaults.maxWidth,
             html: labelsHtml,
         },
         lineColor: get(xAxis, 'lineColor'),
@@ -134,7 +134,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
         seriesData,
         seriesOptions,
         width,
-        autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
+        autoRotation: (_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _c === void 0 ? void 0 : _c.autoRotation,
     });
     preparedXAxis.labels.height = height;
     preparedXAxis.labels.rotation = rotation;

package/dist/esm/hooks/useChartOptions/y-axis.d.ts

@@ -1,8 +1,10 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
 import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ height, seriesData, seriesOptions, yAxis, }: {
+export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }: {
     height: number;
+    boundsHeight: number;
+    width: number;
     seriesData: ChartSeries[];
     seriesOptions: PreparedSeriesOptions;
     yAxis: ChartYAxis[] | undefined;

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

@@ -1,27 +1,25 @@
 import get from 'lodash/get';
+import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { calculateNumericProperty, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelFormatter, getLabelsSize, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
-    const { axis, seriesData, seriesOptions } = args;
+    const { axis, seriesData, seriesOptions, height } = args;
     if (!axis.labels.enabled) {
         return { height: 0, width: 0 };
     }
     const scale = createYScale({
         axis,
-        boundsHeight: 1,
+        boundsHeight: height,
         series: seriesData,
         seriesOptions,
     });
-    const ticks = getScaleTicks(scale);
-    // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
-    const step = getClosestPointsRange(axis, ticks);
-    const labels = ticks.map((tick) => formatAxisTickLabel({
-        axis,
-        value: tick,
-        step,
-    }));
+    const getTextSize = getTextSizeFn({ style: axis.labels.style });
+    const labelLineHeight = (await getTextSize('Tmp')).height;
+    const tickValues = getTickValues({ axis, scale, labelLineHeight });
+    const labelFormatter = getLabelFormatter({ axis, scale });
+    const labels = tickValues.map((tick) => labelFormatter(tick.value));
     const size = await getLabelsSize({
         labels,
         style: axis.labels.style,
@@ -30,7 +28,7 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return { height: size.maxHeight, width: size.maxWidth };
 };
-export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, }) => {
+export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
@@ -38,7 +36,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
         return Promise.resolve([]);
     }
     return Promise.all(axisItems.map(async (axisItem) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -71,9 +69,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 margin: labelsEnabled
                     ? get(axisItem, 'labels.margin', axisLabelsDefaults.margin)
                     : 0,
-                padding: labelsEnabled
-                    ? get(axisItem, 'labels.padding', axisLabelsDefaults.padding)
-                    : 0,
+                padding: labelsEnabled ? get(axisItem, 'labels.padding', 4) : 0,
                 dateFormat: get(axisItem, 'labels.dateFormat'),
                 numberFormat: get(axisItem, 'labels.numberFormat'),
                 style: labelsStyle,
@@ -81,7 +77,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+                maxWidth: (_b = calculateNumericProperty({ base: width, value: (_a = axisItem.labels) === null || _a === void 0 ? void 0 : _a.maxWidth })) !== null && _b !== void 0 ? _b : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -96,15 +92,18 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: (_a = get(axisItem, 'min')) !== null && _a !== void 0 ? _a : getDefaultMinYAxisValue(seriesData),
+            min: (_c = get(axisItem, 'min')) !== null && _c !== void 0 ? _c : getDefaultMinYAxisValue(seriesData),
             max: get(axisItem, 'max'),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
                 enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
-                    (!firstPlotAxis && !((_b = axisByPlot[plotIndex][0].visible) !== null && _b !== void 0 ? _b : true))),
+                    (!firstPlotAxis && !((_d = axisByPlot[plotIndex][0].visible) !== null && _d !== void 0 ? _d : true))),
             },
             ticks: {
-                pixelInterval: get(axisItem, 'ticks.pixelInterval'),
+                pixelInterval: (_f = (_e = axisItem.ticks) === null || _e === void 0 ? void 0 : _e.pixelInterval) !== null && _f !== void 0 ? _f : calculateNumericProperty({
+                    base: height,
+                    value: (_g = axisItem.ticks) === null || _g === void 0 ? void 0 : _g.interval,
+                }),
             },
             position: get(axisItem, 'position', defaultAxisPosition),
             plotIndex: get(axisItem, 'plotIndex', 0),
@@ -142,6 +141,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 axis: preparedAxis,
                 seriesData,
                 seriesOptions,
+                height: boundsHeight,
             });
             preparedAxis.labels.height = labelsHeight;
             preparedAxis.labels.width =

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

@@ -68,6 +68,7 @@ export const useCrosshair = (props) => {
             }
             if (yAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
                 const crosshairDataAttr = `data-crosshair-y-line-${index}`;
+                const crosshairPosition = getAxisPlotsPosition(yAxis, split);
                 const crosshairSelection = svgElement
                     .selectAll(`[${crosshairDataAttr}]`)
                     .data(hovered.filter((node) => {
@@ -82,7 +83,7 @@ export const useCrosshair = (props) => {
                     .attr(plotCrosshairDataAttr, 1)
                     .attr(crosshairDataAttr, 1)
                     .style('transform', yAxis.crosshair.snap
-                    ? getAxisPlotsPosition(yAxis, split)
+                    ? `translate(${crosshairPosition[0]}px, ${crosshairPosition[1]}px)`
                     : 'translate(0, 0)');
                 crosshairSelection
                     .append('path')

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

@@ -59,6 +59,7 @@ export function prepareArea(args) {
             marker: prepareMarker(series, seriesOptions),
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
+            tooltip: series.tooltip,
         };
         return prepared;
     }, []);