@gravity-ui/charts 1.11.3 → 1.12.0

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

@@ -100,7 +100,7 @@ export const ChartInner = (props) => {
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),
-            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -31,6 +31,7 @@ export declare function useChartInnerProps(props: Props): {
                 end: number;
             }[];
         } | undefined;
+        maxWidth: number;
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
     preparedLegend: import("../../hooks").PreparedLegend | null;

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapeSeries, useShapes, useSplit, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
+import { getActiveLegendItems } from '../../hooks/useSeries/utils';
 import { useZoom } from '../../hooks/useZoom';
 import { getSortedSeriesData, getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
@@ -20,6 +21,9 @@ 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);
@@ -40,11 +44,13 @@ 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,
@@ -52,12 +58,13 @@ export function useChartInnerProps(props) {
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
     });
-    const { preparedSeries: preparedShapesSeries } = useSeries({
+    const activeLegendItems = React.useMemo(() => getActiveLegendItems(preparedSeries), [preparedSeries]);
+    const { preparedSeries: preparedShapesSeries } = useShapeSeries({
         colors,
-        legend: data.legend,
-        originalSeriesData: data.series.data,
         seriesData: zoomedShapesSeriesData,
         seriesOptions: data.series.options,
+        activeLegendItems,
+        preparedLegend,
     });
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
@@ -69,9 +76,8 @@ export function useChartInnerProps(props) {
             chartMargin: chart.margin,
             series: preparedSeries,
             preparedLegend,
-            preparedYAxis: yAxis,
         });
-    }, [width, height, chart.margin, preparedSeries, preparedLegend, yAxis]);
+    }, [width, height, chart.margin, preparedSeries, preparedLegend]);
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
@@ -88,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/Legend/index.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
 import './styles.css';
 type Props = {
-    boundsWidth: number;
     chartSeries: PreparedSeries[];
     legend: PreparedLegend;
     items: LegendItem[][];

package/dist/cjs/components/Legend/index.js

@@ -7,15 +7,15 @@ import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
 const getLegendPosition = (args) => {
-    const { align, offsetWidth = 0, width, contentWidth } = args;
+    const { align, offsetLeft = 0, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
-        return { top, left: offsetWidth };
+        return { top, left: offsetLeft };
     }
     if (align === 'right') {
-        return { top, left: offsetWidth + width - contentWidth };
+        return { top, left: offsetLeft + width - contentWidth };
     }
-    return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
+    return { top, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
@@ -135,12 +135,12 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
+    const { chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
     const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {
         setPageIndex(0);
-    }, [boundsWidth]);
+    }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -250,12 +250,12 @@ export const Legend = (props) => {
                         case 'center': {
                             const legendLinePostion = getLegendPosition({
                                 align: legend.align,
-                                width: boundsWidth,
-                                offsetWidth: 0,
+                                width: config.maxWidth,
                                 contentWidth,
+                                offsetLeft: config.offset.left,
                             });
                             left = legendLinePostion.left;
-                            legendWidth = boundsWidth;
+                            legendWidth = config.maxWidth;
                             break;
                         }
                         case 'start': {
@@ -361,9 +361,9 @@ export const Legend = (props) => {
             }
             const { left } = getLegendPosition({
                 align: legend.align,
-                width: boundsWidth,
-                offsetWidth: config.offset.left,
+                width: config.maxWidth,
                 contentWidth: legendWidth,
+                offsetLeft: config.offset.left,
             });
             svgElement
                 .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
@@ -371,19 +371,9 @@ export const Legend = (props) => {
             htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
         }
         prepareLegend();
-    }, [
-        boundsWidth,
-        chartSeries,
-        onItemClick,
-        onUpdate,
-        legend,
-        items,
-        config,
-        pageIndex,
-        htmlLayout,
-    ]);
+    }, [chartSeries, onItemClick, onUpdate, legend, items, config, pageIndex, htmlLayout]);
     // due to asynchronous processing, we only need to work with the actual element
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const key = React.useMemo(() => getUniqId(), [legend, config]);
-    return React.createElement("g", { key: key, className: b(), ref: ref, width: boundsWidth, height: legend.height });
+    return React.createElement("g", { key: key, className: b(), ref: ref, width: config.maxWidth, height: legend.height });
 };

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(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);

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

@@ -0,0 +1,126 @@
+import get from 'lodash/get';
+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': {
+            const categories = get(axis, 'categories', []);
+            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
+        }
+        default: {
+            return get(data, fieldName);
+        }
+    }
+}
+export function getXRowData(data, xAxis) {
+    return getRowData('x', data, xAxis);
+}
+function getYRowData(data, yAxis) {
+    return getRowData('y', data, yAxis);
+}
+export function getDefaultValueFormat({ axis, }) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'linear':
+        case 'logarithmic': {
+            return {
+                type: 'number',
+            };
+        }
+        case 'datetime': {
+            return {
+                type: 'date',
+                format: DEFAULT_DATE_FORMAT,
+            };
+        }
+        default:
+            return undefined;
+    }
+}
+export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
+    var _a, _b, _c, _d;
+    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;
+    }
+    if (data.some((item) => item.series.type === 'bar-y')) {
+        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),
+            format,
+        });
+    }
+    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),
+        format,
+    });
+};
+export function getHoveredValues(args) {
+    const { hovered, xAxis, yAxis } = args;
+    return hovered.map((seriesItem) => {
+        var _a;
+        const { data, series } = seriesItem;
+        switch (series.type) {
+            case 'area':
+            case 'line':
+            case 'bar-x':
+            case 'scatter': {
+                return getYRowData(data, yAxis);
+            }
+            case 'bar-y': {
+                return getXRowData(data, xAxis);
+            }
+            case 'pie':
+            case 'radar':
+            case 'treemap': {
+                const seriesData = data;
+                return seriesData.value;
+            }
+            case 'sankey': {
+                const { target, data: source } = seriesItem;
+                return (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+            }
+            case 'waterfall': {
+                return getYRowData(data, yAxis);
+            }
+            default: {
+                return undefined;
+            }
+        }
+    });
+}
+export function getBuiltInAggregatedValue(args) {
+    const { aggregation, values } = args;
+    switch (aggregation) {
+        case 'sum':
+            return values.reduce((acc, value) => {
+                return acc + (typeof value === 'number' ? value : 0);
+            }, 0);
+        default:
+            return undefined;
+    }
+}
+export function getBuiltInAggregationLabel(args) {
+    const { aggregation } = args;
+    switch (aggregation) {
+        case 'sum':
+            return i18n('tooltip', 'label_totals_sum');
+        default:
+            return '';
+    }
+}
+export function getPreparedAggregation(args) {
+    const { hovered, totals, xAxis, yAxis } = args;
+    const aggregation = totals === null || totals === void 0 ? void 0 : totals.aggregation;
+    if (typeof aggregation === 'string') {
+        return aggregation;
+    }
+    if (typeof aggregation === 'function') {
+        return () => aggregation({ hovered, xAxis, yAxis });
+    }
+    return 'sum';
+}

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, valueFormat: tooltip.valueFormat })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
 };

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

@@ -17,18 +17,30 @@
 .gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
+  column-gap: 8px;
   padding: 2px 14px;
   font-size: 12px;
 }
+.gcharts-tooltip__content-row_striped {
+  background-color: var(--g-color-base-generic);
+}
 .gcharts-tooltip__content-row_active {
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
-.gcharts-tooltip__color {
+.gcharts-tooltip__content-row-color {
   display: inline-block;
   width: 16px;
   height: 8px;
-  margin-inline-end: 8px;
   border-radius: 2px;
   background-color: #dddddd;
+}
+.gcharts-tooltip__content-row-value {
+  margin-inline-start: auto;
+}
+.gcharts-tooltip__content-row-totals {
+  color: var(--g-color-text-complementary);
+}
+.gcharts-tooltip__content-row-totals-divider {
+  margin-block: 5px 5px;
 }

package/dist/cjs/components/Tooltip/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);