@gravity-ui/charts 1.11.4 → 1.13.0

package/dist/cjs/components/Axis/AxisX.js

@@ -51,17 +51,6 @@ export const AxisX = React.memo(function AxisX(props) {
             }
             const svgElement = select(ref.current);
             svgElement.selectAll('*').remove();
-            const plotDataAttr = 'data-plot-x';
-            let plotBeforeContainer = null;
-            let plotAfterContainer = null;
-            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
-                plotBeforeContainer = select(plotBeforeRef.current);
-                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
-            }
-            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
-                plotAfterContainer = select(plotAfterRef.current);
-                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
-            }
             if (!axis.visible) {
                 return;
             }
@@ -122,6 +111,17 @@ export const AxisX = React.memo(function AxisX(props) {
                     }
                 });
             }
+            const plotDataAttr = 'data-plot-x';
+            let plotBeforeContainer = null;
+            let plotAfterContainer = null;
+            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+                plotBeforeContainer = select(plotBeforeRef.current);
+                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+                plotAfterContainer = select(plotAfterRef.current);
+                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
             // add plot bands
             if (axis.plotBands.length > 0) {
                 const plotBandDataAttr = 'plot-x-band';
@@ -136,25 +136,38 @@ export const AxisX = React.memo(function AxisX(props) {
                         .join('g')
                         .attr(plotDataAttr, 1)
                         .attr(plotBandDataAttr, 1);
-                    plotBandsSelection
-                        .append('rect')
-                        .attr('x', (band) => {
-                        var _a, _b;
+                    plotBandsSelection.each(function () {
+                        var _a, _b, _c, _e;
+                        const plotBandSelection = select(this);
+                        const band = plotBandSelection.datum();
                         const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
                         const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
                         const startPos = halfBandwidth + Math.min(from, to);
-                        return Math.max(0, startPos);
-                    })
-                        .attr('width', (band) => {
-                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                        const startPos = width - Math.min(from, to);
-                        const endPos = Math.min(Math.abs(to - from), startPos);
-                        return Math.min(endPos, width);
-                    })
-                        .attr('y', 0)
-                        .attr('height', totalHeight)
-                        .attr('fill', (band) => band.color)
-                        .attr('opacity', (band) => band.opacity);
+                        const x = Math.max(0, startPos);
+                        plotBandSelection
+                            .append('rect')
+                            .attr('x', x)
+                            .attr('width', () => {
+                            const endPos = Math.min(Math.abs(to - from), width - Math.min(from, to));
+                            return Math.min(endPos, width);
+                        })
+                            .attr('y', 0)
+                            .attr('height', totalHeight)
+                            .attr('fill', () => band.color)
+                            .attr('opacity', () => band.opacity);
+                        if (band.label.text) {
+                            const labelPadding = (_e = (_c = band.label) === null || _c === void 0 ? void 0 : _c.padding) !== null && _e !== void 0 ? _e : 0;
+                            plotBandSelection
+                                .append('text')
+                                .text(band.label.text)
+                                .style('fill', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontColor) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-size', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-weight', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontWeight) !== null && _b !== void 0 ? _b : null; })
+                                .style('dominant-baseline', 'text-before-edge')
+                                .style('text-anchor', 'end')
+                                .style('transform', `translate(${x + labelPadding}px, ${labelPadding}px) rotate(-90deg)`);
+                        }
+                    });
                 };
                 setPlotBands(plotBeforeContainer, axis.plotBands.filter((d) => d.layerPlacement === 'before'));
                 setPlotBands(plotAfterContainer, axis.plotBands.filter((d) => d.layerPlacement === 'after'));
@@ -174,20 +187,33 @@ export const AxisX = React.memo(function AxisX(props) {
                         .attr(plotDataAttr, 1)
                         .attr(plotLineDataAttr, 1);
                     const lineGenerator = line();
-                    plotLinesSelection
-                        .append('path')
-                        .attr('d', (plotLine) => {
+                    plotLinesSelection.each(function () {
+                        const itemSelection = select(this);
+                        const plotLine = itemSelection.datum();
                         const plotLineValue = Number(axisScale(plotLine.value));
                         const points = [
                             [plotLineValue, 0],
                             [plotLineValue, totalHeight],
                         ];
-                        return lineGenerator(points);
-                    })
-                        .attr('stroke', (plotLine) => plotLine.color)
-                        .attr('stroke-width', (plotLine) => plotLine.width)
-                        .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
-                        .attr('opacity', (plotLine) => plotLine.opacity);
+                        itemSelection
+                            .append('path')
+                            .attr('d', lineGenerator(points))
+                            .attr('stroke', plotLine.color)
+                            .attr('stroke-width', plotLine.width)
+                            .attr('stroke-dasharray', getLineDashArray(plotLine.dashStyle, plotLine.width))
+                            .attr('opacity', plotLine.opacity);
+                        if (plotLine.label.text) {
+                            itemSelection
+                                .append('text')
+                                .text(plotLine.label.text)
+                                .style('fill', () => { var _a; return (_a = plotLine.label.style.fontColor) !== null && _a !== void 0 ? _a : null; })
+                                .attr('font-size', plotLine.label.style.fontSize)
+                                .style('font-weight', () => { var _a; return (_a = plotLine.label.style.fontWeight) !== null && _a !== void 0 ? _a : null; })
+                                .style('dominant-baseline', 'text-after-edge')
+                                .style('text-anchor', 'end')
+                                .style('transform', `translate(${plotLineValue - plotLine.label.padding}px, ${plotLine.label.padding}px) rotate(-90deg)`);
+                        }
+                    });
                 };
                 setPlotLines(plotBeforeContainer, axis.plotLines.filter((d) => d.layerPlacement === 'before'));
                 setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));

package/dist/cjs/components/Axis/AxisY.js

@@ -172,16 +172,28 @@ export const AxisY = (props) => {
                 let elementY = 0;
                 axisItem
                     .selectAll('.tick')
-                    .filter(function (_d, tickIndex) {
-                    const tickNode = this;
-                    const r = tickNode.getBoundingClientRect();
-                    if (r.bottom > elementY && tickIndex !== 0) {
+                    .nodes()
+                    .map((element) => {
+                    const r = element.getBoundingClientRect();
+                    return {
+                        top: r.top,
+                        bottom: r.bottom,
+                        node: element,
+                    };
+                }, {})
+                    .sort((item1, item2) => {
+                    return item2.top - item1.top;
+                })
+                    .filter(function ({ top, bottom }, tickIndex) {
+                    if (bottom > elementY && tickIndex !== 0) {
                         return true;
                     }
-                    elementY = r.top - d.labels.padding;
+                    elementY = top - d.labels.padding;
                     return false;
                 })
-                    .remove();
+                    .forEach((item) => {
+                    item.node.remove();
+                });
             }
             if (d.plotBands.length > 0) {
                 const plotBandDataAttr = `data-plot-y-band-${index}`;
@@ -197,25 +209,36 @@ export const AxisY = (props) => {
                         .attr(plotDataAttr, 1)
                         .attr(plotBandDataAttr, 1)
                         .style('transform', getAxisPlotsPosition(d, split));
-                    plotBandsSelection
-                        .append('rect')
-                        .attr('x', 0)
-                        .attr('width', width)
-                        .attr('y', (band) => {
-                        var _a, _b;
+                    plotBandsSelection.each(function () {
+                        var _a, _b, _c, _e;
+                        const plotBandSelection = select(this);
+                        const band = plotBandSelection.datum();
                         const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
                         const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
                         const startPos = halfBandwidth + Math.min(from, to);
-                        return Math.max(0, startPos);
-                    })
-                        .attr('height', (band) => {
-                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                        const startPos = height - Math.min(from, to);
-                        const endPos = Math.min(Math.abs(to - from), startPos);
-                        return Math.min(endPos, height);
-                    })
-                        .attr('fill', (band) => band.color)
-                        .attr('opacity', (band) => band.opacity);
+                        const endPos = Math.min(Math.abs(to - from), height - Math.min(from, to));
+                        const y = Math.max(0, startPos);
+                        plotBandSelection
+                            .append('rect')
+                            .attr('x', 0)
+                            .attr('width', width)
+                            .attr('y', y)
+                            .attr('height', Math.min(endPos, height))
+                            .attr('fill', () => band.color)
+                            .attr('opacity', () => band.opacity);
+                        if (band.label.text) {
+                            const labelPadding = (_e = (_c = band.label) === null || _c === void 0 ? void 0 : _c.padding) !== null && _e !== void 0 ? _e : 0;
+                            plotBandSelection
+                                .append('text')
+                                .text(band.label.text)
+                                .style('fill', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontColor) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-size', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-weight', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontWeight) !== null && _b !== void 0 ? _b : null; })
+                                .style('dominant-baseline', 'text-before-edge')
+                                .attr('x', labelPadding)
+                                .attr('y', y + labelPadding);
+                        }
+                    });
                 };
                 setPlotBands(plotBeforeContainer, d.plotBands.filter((item) => item.layerPlacement === 'before'));
                 setPlotBands(plotAfterContainer, d.plotBands.filter((item) => item.layerPlacement === 'after'));
@@ -234,20 +257,32 @@ export const AxisY = (props) => {
                         .attr(plotDataAttr, 1)
                         .attr(plotLineDataAttr, 1)
                         .style('transform', getAxisPlotsPosition(d, split));
-                    plotLinesSelection
-                        .append('path')
-                        .attr('d', (plotLine) => {
+                    plotLinesSelection.each(function () {
+                        const itemSelection = select(this);
+                        const plotLine = itemSelection.datum();
                         const plotLineValue = Number(axisScale(plotLine.value));
                         const points = [
                             [0, plotLineValue],
                             [width, plotLineValue],
                         ];
-                        return lineGenerator(points);
-                    })
-                        .attr('stroke', (plotLine) => plotLine.color)
-                        .attr('stroke-width', (plotLine) => plotLine.width)
-                        .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
-                        .attr('opacity', (plotLine) => plotLine.opacity);
+                        itemSelection
+                            .append('path')
+                            .attr('d', lineGenerator(points))
+                            .attr('stroke', plotLine.color)
+                            .attr('stroke-width', plotLine.width)
+                            .attr('stroke-dasharray', getLineDashArray(plotLine.dashStyle, plotLine.width))
+                            .attr('opacity', plotLine.opacity);
+                        if (plotLine.label.text) {
+                            itemSelection
+                                .append('text')
+                                .text(plotLine.label.text)
+                                .style('fill', () => { var _a; return (_a = plotLine.label.style.fontColor) !== null && _a !== void 0 ? _a : null; })
+                                .attr('font-size', plotLine.label.style.fontSize)
+                                .style('font-weight', () => { var _a; return (_a = plotLine.label.style.fontWeight) !== null && _a !== void 0 ? _a : null; })
+                                .attr('x', plotLine.label.padding)
+                                .attr('y', plotLineValue - plotLine.label.padding);
+                        }
+                    });
                 };
                 setPlotLines(plotBeforeContainer, d.plotLines.filter((item) => item.layerPlacement === 'before'));
                 setPlotLines(plotAfterContainer, d.plotLines.filter((item) => item.layerPlacement === 'after'));
@@ -317,6 +352,7 @@ export const AxisY = (props) => {
         lineGenerator,
         plotBeforeRef,
         plotAfterRef,
+        topLimit,
     ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

package/dist/cjs/components/ChartInner/styles.css

@@ -1,5 +1,6 @@
 .gcharts-chart {
   --gcharts-data-labels: var(--g-color-text-secondary);
+  --gcharts-shape-border-color: var(--g-color-base-background);
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;

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

@@ -21,10 +21,13 @@ export function useChartInnerProps(props) {
         title: data.title,
         tooltip: data.tooltip,
     });
+    const preparedSeriesOptions = React.useMemo(() => {
+        return getPreparedOptions(data.series.options);
+    }, [data.series.options]);
     const [zoomState, setZoomState] = React.useState({});
     const sortedSeriesData = React.useMemo(() => {
-        return getSortedSeriesData(data.series.data);
-    }, [data.series.data]);
+        return getSortedSeriesData({ seriesData: data.series.data, yAxes: data.yAxis });
+    }, [data.series.data, data.yAxis]);
     const { zoomedSeriesData, zoomedShapesSeriesData } = React.useMemo(() => {
         return getZoomedSeriesData({
             seriesData: sortedSeriesData,
@@ -41,15 +44,17 @@ export function useChartInnerProps(props) {
     const [yAxis, setYAxis] = React.useState([]);
     React.useEffect(() => {
         setYAxis([]);
-        getPreparedYAxis({ yAxis: data.yAxis, height, seriesData: zoomedSeriesData }).then((val) => setYAxis(val));
-    }, [data.yAxis, height, zoomedSeriesData]);
-    const preparedSeriesOptions = React.useMemo(() => {
-        return getPreparedOptions(data.series.options);
-    }, [data.series.options]);
+        getPreparedYAxis({
+            height,
+            seriesData: zoomedSeriesData,
+            seriesOptions: preparedSeriesOptions,
+            yAxis: data.yAxis,
+        }).then((val) => setYAxis(val));
+    }, [data.yAxis, height, preparedSeriesOptions, zoomedSeriesData]);
     const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,
-        originalSeriesData: data.series.data,
+        originalSeriesData: sortedSeriesData,
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
     });
@@ -89,9 +94,10 @@ export function useChartInnerProps(props) {
         hasZoomX: Boolean(zoomState.x),
         hasZoomY: Boolean(zoomState.y),
         series: preparedSeries,
+        seriesOptions: preparedSeriesOptions,
+        split: preparedSplit,
         xAxis,
         yAxis,
-        split: preparedSplit,
     });
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;

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

@@ -6,5 +6,6 @@ export interface ChartTooltipContentProps {
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
     valueFormat?: ChartTooltip['valueFormat'];
+    totals?: ChartTooltip['totals'];
 }
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

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

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

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

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

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

@@ -0,0 +1,10 @@
+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) },
+        color && React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } }),
+        label,
+        React.createElement("span", { className: b('content-row-value') }, value)));
+}

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { block } from '../../../utils';
+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;
+    let resultLabel = label;
+    if (!resultLabel && typeof aggregation === 'string') {
+        resultLabel = getBuiltInAggregationLabel({ aggregation });
+    }
+    const resultValue = typeof aggregation === 'function'
+        ? aggregation()
+        : getBuiltInAggregatedValue({ aggregation, values });
+    const formattedResultValue = typeof resultValue === 'number'
+        ? getFormattedValue({
+            value: resultValue,
+            format: valueFormat || { type: 'number' },
+        })
+        : resultValue;
+    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, value: formattedResultValue }));
+}

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

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

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Divider } from '@gravity-ui/uikit';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
+import { Row } from './Row';
+import { RowTotals } from './RowTotals';
+import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
+const b = block('tooltip');
+export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, totals }) => {
+    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
+    const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
+    return (React.createElement("div", { className: b('content') },
+        measureValue && React.createElement("div", { className: b('series-name') }, 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 (React.createElement(Row, { key: id, active: active, color: color, label: series.name, striped: striped, value: 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 (React.createElement(Row, { key: id, active: active, color: color, label: series.name, striped: striped, value: formattedValue }));
+                }
+                case 'pie':
+                case 'treemap': {
+                    const seriesData = data;
+                    const formattedValue = getFormattedValue({
+                        value: hoveredValues[i],
+                        format: valueFormat || { type: 'number' },
+                    });
+                    return (React.createElement(Row, { key: id, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: [seriesData.name || seriesData.id]
+                                    .flat()
+                                    .join('\n'),
+                            } }), value: formattedValue }));
+                }
+                case 'sankey': {
+                    const { target, data: source } = seriesItem;
+                    const formattedValue = getFormattedValue({
+                        value: hoveredValues[i],
+                        format: valueFormat || { type: 'number' },
+                    });
+                    return (React.createElement(Row, { key: id, color: source.color, label: React.createElement("span", null,
+                            source.name,
+                            " \u2192 ", target === null || target === void 0 ? void 0 :
+                            target.name,
+                            ":"), value: formattedValue }));
+                }
+                case 'radar': {
+                    const radarSeries = series;
+                    const formattedValue = getFormattedValue({
+                        value: hoveredValues[i],
+                        format: valueFormat || { type: 'number' },
+                    });
+                    return (React.createElement(Row, { key: id, active: active, color: color, label: radarSeries.name || radarSeries.id, value: formattedValue }));
+                }
+                default: {
+                    return null;
+                }
+            }
+        }),
+        (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 })))));
+};

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

@@ -0,0 +1,30 @@
+import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
+export type HoveredValue = string | number | null | undefined;
+export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
+export declare function getDefaultValueFormat({ axis, }: {
+    axis?: ChartXAxis | ChartYAxis | null;
+}): ValueFormat | undefined;
+export declare const getMeasureValue: ({ data, xAxis, yAxis, valueFormat, }: {
+    data: TooltipDataChunk[];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+    valueFormat?: ValueFormat;
+}) => string | null;
+export declare function getHoveredValues(args: {
+    hovered: TooltipDataChunk[];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+}): HoveredValue[];
+export declare function getBuiltInAggregatedValue(args: {
+    aggregation: ChartTooltipTotalsBuiltInAggregation;
+    values: HoveredValue[];
+}): number | undefined;
+export declare function getBuiltInAggregationLabel(args: {
+    aggregation: ChartTooltipTotalsBuiltInAggregation;
+}): string;
+export declare function getPreparedAggregation(args: {
+    hovered: TooltipDataChunk[];
+    totals?: ChartTooltip['totals'];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+}): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);