@gravity-ui/charts 1.15.0 → 1.16.0

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

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

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, totals } = props;
+    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
-    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat, totals: totals, rowRenderer: rowRenderer })) : (customTooltip);
+    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
 };

package/dist/cjs/components/Tooltip/DefaultTooltipContent/Row.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 export declare function Row(props: {
     label: React.ReactNode;
-    value: React.ReactNode;
     active?: boolean;
     className?: string;
     color?: string;
     striped?: boolean;
+    style?: React.CSSProperties;
+    value?: React.ReactNode;
 }): React.JSX.Element;

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { block } from '../../../utils';
 const b = block('tooltip');
 export function Row(props) {
-    const { label, value, active, color, className, striped } = props;
-    return (React.createElement("div", { className: b('content-row', { active, striped }, className) },
+    const { label, value, active, color, className, striped, style } = props;
+    return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
         color && React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } }),
         label,
-        React.createElement("span", { className: b('content-row-value') }, value)));
+        value && React.createElement("span", { className: b('content-row-value') }, value)));
 }

package/dist/cjs/components/Tooltip/DefaultTooltipContent/{RowTotals.d.ts → RowWithAggregation.d.ts}

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ValueFormat } from '../../../types';
 import type { HoveredValue } from './utils';
-export declare function RowTotals(props: {
+export declare function RowWithAggregation(props: {
     aggregation: ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);
     values: HoveredValue[];
     label?: string;
+    style?: React.CSSProperties;
     valueFormat?: ValueFormat;
 }): React.JSX.Element;

package/dist/cjs/components/Tooltip/DefaultTooltipContent/{RowTotals.js → RowWithAggregation.js}

@@ -4,8 +4,8 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
 import { getBuiltInAggregatedValue, getBuiltInAggregationLabel } from './utils';
 const b = block('tooltip');
-export function RowTotals(props) {
-    const { aggregation, label, valueFormat, values } = props;
+export function RowWithAggregation(props) {
+    const { aggregation, label, style, valueFormat, values } = props;
     let resultLabel = label;
     if (!resultLabel && typeof aggregation === 'string') {
         resultLabel = getBuiltInAggregationLabel({ aggregation });
@@ -19,5 +19,5 @@ export function RowTotals(props) {
             format: valueFormat || { type: 'number' },
         })
         : resultValue;
-    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, value: formattedResultValue }));
+    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, style: style, value: formattedResultValue }));
 }

package/dist/cjs/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/cjs/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,166 @@ 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, format: headerFormat })
+        : measureValue;
+    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/cjs/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/cjs/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/cjs/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;
     }, []);

package/dist/cjs/hooks/useSeries/prepare-bar-x.js

@@ -36,6 +36,7 @@ export function prepareBarXSeries(args) {
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
             borderRadius: get(series, 'borderRadius', get(seriesOptions, 'bar-x.borderRadius', 0)),
+            tooltip: series.tooltip,
         };
     }, []);
 }

package/dist/cjs/hooks/useSeries/prepare-bar-y.d.ts

@@ -35,5 +35,6 @@ export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<
         symbol: import("./types").PreparedLegendSymbol;
     };
     cursor: string | null;
+    tooltip: import("../../types").ChartSeries["tooltip"];
 })[]>;
 export {};

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -52,6 +52,7 @@ export function prepareBarYSeries(args) {
             borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
             borderWidth: (_f = (_d = series.borderWidth) !== null && _d !== void 0 ? _d : (_e = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _e === void 0 ? void 0 : _e.borderWidth) !== null && _f !== void 0 ? _f : 0,
             borderColor: (_j = (_g = series.borderColor) !== null && _g !== void 0 ? _g : (_h = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _h === void 0 ? void 0 : _h.borderColor) !== null && _j !== void 0 ? _j : 'var(--gcharts-shape-border-color)',
+            tooltip: series.tooltip,
         };
     }));
 }

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

@@ -77,6 +77,7 @@ export function prepareLineSeries(args) {
             opacity: get(series, 'opacity', null),
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
+            tooltip: series.tooltip,
         };
         return prepared;
     }, []);

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

@@ -57,6 +57,7 @@ export function preparePieSeries(args) {
             renderCustomShape: series.renderCustomShape,
             opacity: get(dataItem, 'opacity', null),
             cursor: get(series, 'cursor', null),
+            tooltip: series.tooltip,
         };
         return result;
     });

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

@@ -58,6 +58,7 @@ export function prepareRadarSeries(args) {
             },
             cursor: get(series, 'cursor', null),
             marker: prepareMarker(series, seriesOptions),
+            tooltip: series.tooltip,
         };
         return preparedSeries;
     });

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

@@ -33,6 +33,7 @@ export function prepareSankeySeries(args) {
                 symbol: prepareLegendSymbol(s),
             },
             cursor: get(s, 'cursor', null),
+            tooltip: s.tooltip,
         };
         return preparedSeries;
     });

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

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

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

@@ -34,6 +34,7 @@ export function prepareTreemap(args) {
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
             cursor: get(s, 'cursor', null),
             sorting: Object.assign({ enabled: false, direction: 'desc' }, s.sorting),
+            tooltip: s.tooltip,
         };
         return preparedSeries;
     });

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

@@ -28,6 +28,7 @@ export function prepareWaterfallSeries(args) {
         },
         cursor: get(series, 'cursor', null),
         data: [],
+        tooltip: series.tooltip,
     };
     const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
     const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });

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

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -76,6 +76,7 @@ type BasePreparedSeries = {
         symbol: PreparedLegendSymbol;
     };
     cursor: string | null;
+    tooltip: ChartSeries['tooltip'];
 };
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];

package/dist/cjs/i18n/keysets/en.json

@@ -21,6 +21,7 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis."
   },
   "tooltip": {
-    "label_totals_sum": "Sum"
+    "label_totals_sum": "Sum",
+    "label_more": "{{count}} more"
   }
 }

package/dist/cjs/i18n/keysets/ru.json

@@ -21,6 +21,7 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\"."
   },
   "tooltip": {
-    "label_totals_sum": "Сумма"
+    "label_totals_sum": "Сумма",
+    "label_more": "Еще {{count}}"
   }
 }

package/dist/cjs/types/chart/base.d.ts

@@ -7,6 +7,12 @@ type DateFormat = {
     type: 'date';
     format?: string;
 };
+export type CustomFormat = {
+    type: 'custom';
+    formatter: (args: {
+        value: unknown;
+    }) => string;
+};
 export type ValueFormat = NumberFormat | DateFormat;
 export interface BaseSeries {
     /** Initial visibility of the series */
@@ -41,6 +47,13 @@ export interface BaseSeries {
     };
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;
+    /**
+     * Options for the tooltip that appears when the user hovers over a series or point.
+     */
+    tooltip?: {
+        /** Formatting settings for tooltip value. */
+        valueFormat?: ValueFormat;
+    };
 }
 export interface BaseSeriesData<T = MeaningfulAny> {
     /**

package/dist/cjs/types/chart/tooltip.d.ts

@@ -4,7 +4,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { ValueFormat } from './base';
+import type { CustomFormat, ValueFormat } from './base';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { RadarSeries, RadarSeriesCategory, RadarSeriesData } from './radar';
@@ -110,6 +110,8 @@ export interface ChartTooltip<T = MeaningfulAny> {
     throttle?: number;
     /** Formatting settings for tooltip value. */
     valueFormat?: ValueFormat;
+    /** Formatting settings for tooltip header row. */
+    headerFormat?: ValueFormat | CustomFormat;
     /** Settings for totals block in tooltip */
     totals?: {
         /**
@@ -125,5 +127,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
         enabled?: boolean;
         /** The label text for the totals. For built-in aggregations, the label can be omitted. */
         label?: string;
+        /** Formatting settings for totals tooltip value. */
+        valueFormat?: ValueFormat;
     };
 }