@gravity-ui/charts 1.15.0 → 1.17.0

package/dist/esm/components/AxisY/prepare-axis-data.js

@@ -0,0 +1,306 @@
+import { getUniqId } from '@gravity-ui/uikit';
+import { calculateCos, calculateSin, getBandsPosition, getLabelFormatter, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { getTickValues } from './utils';
+async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, }) {
+    var _a;
+    const originalTextSize = await getTextSize(text);
+    // Currently, a preliminary label calculation is used to build the chart - we cannot exceed it here.
+    // Therefore, we rely on a pre-calculated number instead of the current maximum label width.
+    const labelMaxWidth = axis.labels.width; //axis.labels.maxWidth;
+    const size = originalTextSize;
+    const content = [];
+    // Warp label text only for categories - it will look strange for numbers or dates.
+    if (originalTextSize.width > labelMaxWidth && axis.type === 'category') {
+        const textRows = await wrapText({
+            text,
+            style: axis.labels.style,
+            width: labelMaxWidth,
+            getTextSize,
+        });
+        let topOffset = top;
+        let newLabelWidth = 0;
+        let newLabelHeight = 0;
+        for (let textRowIndex = 0; textRowIndex < textRows.length; textRowIndex++) {
+            const textRow = textRows[textRowIndex];
+            let textSize = await getTextSize(textRow.text);
+            if (newLabelHeight + textSize.height <= labelMaxHeight) {
+                newLabelWidth = Math.max(newLabelWidth, textSize.width);
+                newLabelHeight += textSize.height;
+                let rowText = textRow.text.trim();
+                if (textRowIndex < textRows.length - 1) {
+                    const nextTextRow = textRows[textRowIndex + 1];
+                    if (newLabelHeight + (await getTextSize(nextTextRow.text)).height >
+                        labelMaxHeight) {
+                        rowText = textRow.text + nextTextRow.text;
+                    }
+                }
+                textSize = await getTextSize(rowText);
+                if (textSize.width > labelMaxWidth) {
+                    rowText = await getTextWithElipsis({
+                        text: rowText,
+                        getTextWidth: async (str) => (await getTextSize(str)).width,
+                        maxWidth: labelMaxWidth,
+                    });
+                    textSize = await getTextSize(rowText);
+                }
+                const x = axis.position === 'left'
+                    ? left - textSize.width - axis.labels.margin
+                    : left + axis.labels.margin;
+                content.push({
+                    text: rowText,
+                    x,
+                    y: topOffset,
+                    size: textSize,
+                });
+                topOffset += textSize.height;
+            }
+        }
+        content.forEach((row) => {
+            row.y -= newLabelHeight / 2;
+        });
+        size.width = newLabelWidth;
+        size.height = newLabelHeight;
+    }
+    else {
+        const x = axis.position === 'left'
+            ? left - size.width - axis.labels.margin
+            : left + axis.labels.margin;
+        content.push({
+            text,
+            x,
+            y: Math.max(0, top - size.height / 2),
+            size,
+        });
+    }
+    const svgLabel = {
+        title: content.length > 1 || ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) !== text ? text : undefined,
+        content: content,
+        style: axis.labels.style,
+        size: size,
+    };
+    return svgLabel;
+}
+// eslint-disable-next-line complexity
+export async function prepareAxisData({ axis, split, scale, width, height, }) {
+    var _a, _b, _c;
+    const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+    const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
+    const domainX = axis.position === 'left' ? 0 : width;
+    const domain = {
+        start: [domainX, axisPlotTopPosition],
+        end: [domainX, axisPlotTopPosition + axisHeight],
+        lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
+    };
+    const ticks = [];
+    const getTextSize = getTextSizeFn({ style: axis.labels.style });
+    const labelLineHeight = (await getTextSize('Tmp')).height;
+    const values = getTickValues({ scale, axis, labelLineHeight });
+    const labelMaxHeight = values.length > 1 ? values[0].y - values[1].y - axis.labels.padding * 2 : axisHeight;
+    const labelFormatter = getLabelFormatter({ axis, scale });
+    for (let i = 0; i < values.length; i++) {
+        const tickValue = values[i];
+        const y = axisPlotTopPosition + tickValue.y;
+        let svgLabel = null;
+        let htmlLabel = null;
+        if (axis.labels.enabled) {
+            if (axis.labels.html) {
+                const content = String(tickValue.value);
+                const labelSize = await getLabelsSize({
+                    labels: [content],
+                    html: true,
+                    style: axis.labels.style,
+                });
+                const size = { width: labelSize.maxWidth, height: labelSize.maxHeight };
+                const left = domainX;
+                const top = y;
+                const x = axis.position === 'left'
+                    ? left - size.width - axis.labels.margin
+                    : left + axis.labels.margin;
+                htmlLabel = {
+                    content,
+                    x,
+                    y: top - size.height / 2,
+                    size,
+                    style: axis.labels.style,
+                };
+            }
+            else {
+                const text = labelFormatter(tickValue.value);
+                svgLabel = await getSvgAxisLabel({
+                    getTextSize,
+                    text,
+                    axis,
+                    top: y,
+                    left: domainX,
+                    labelMaxHeight,
+                });
+            }
+        }
+        const tickLine = axis.grid.enabled
+            ? {
+                points: [
+                    [0, y],
+                    [width, y],
+                ],
+            }
+            : null;
+        ticks.push({
+            line: tickLine,
+            svgLabel,
+            htmlLabel,
+        });
+    }
+    let labelsWidth = ticks.reduce((acc, item) => { var _a, _b, _c, _d; return Math.max(acc, (_d = (_b = (_a = item.svgLabel) === null || _a === void 0 ? void 0 : _a.size.width) !== null && _b !== void 0 ? _b : (_c = item.htmlLabel) === null || _c === void 0 ? void 0 : _c.size.width) !== null && _d !== void 0 ? _d : 0); }, 0);
+    labelsWidth = Math.min(axis.labels.width, labelsWidth);
+    let title = null;
+    if (axis.title.text) {
+        const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
+        const rotateAngle = axis.position === 'left' ? -90 : 90;
+        const sin = Math.abs(calculateSin(rotateAngle));
+        const cos = Math.abs(calculateCos(rotateAngle));
+        const titleContent = [];
+        const titleMaxWidth = sin * axisHeight;
+        if (axis.title.maxRowCount > 1) {
+            const titleTextRows = await wrapText({
+                text: axis.title.text,
+                style: axis.title.style,
+                width: titleMaxWidth,
+                getTextSize: getTitleTextSize,
+            });
+            for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
+                const textRow = titleTextRows[i];
+                const textRowContent = textRow.text.trim();
+                const textRowSize = await getTitleTextSize(textRowContent);
+                titleContent.push({
+                    text: textRowContent,
+                    x: 0,
+                    y: textRow.y,
+                    size: textRowSize,
+                });
+            }
+        }
+        else {
+            const text = await getTextWithElipsis({
+                text: axis.title.text,
+                maxWidth: titleMaxWidth,
+                getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+            });
+            titleContent.push({
+                text,
+                x: 0,
+                y: 0,
+                size: await getTitleTextSize(text),
+            });
+        }
+        const originalTextSize = titleContent.reduce((acc, item) => {
+            acc.width = Math.max(acc.width, item.size.width);
+            acc.height += item.size.height;
+            return acc;
+        }, { width: 0, height: 0 });
+        const rotatedTitleSize = {
+            width: sin * originalTextSize.height + cos * originalTextSize.width,
+            height: sin * originalTextSize.width + cos * originalTextSize.height,
+        };
+        const bottom = Math.max(0, calculateSin(rotateAngle) * originalTextSize.width);
+        let y = 0;
+        switch (axis.title.align) {
+            case 'left': {
+                y = -bottom + axisHeight;
+                break;
+            }
+            case 'center': {
+                y = -bottom + axisHeight / 2 + rotatedTitleSize.height / 2;
+                break;
+            }
+            case 'right': {
+                y = -bottom + rotatedTitleSize.height;
+                break;
+            }
+        }
+        const left = Math.min(0, calculateCos(rotateAngle) * originalTextSize.width);
+        const x = axis.position === 'left'
+            ? -left - labelsWidth - axis.labels.margin - axis.title.margin
+            : -left + width + labelsWidth + axis.labels.margin + axis.title.margin;
+        title = {
+            content: titleContent,
+            style: axis.title.style,
+            size: rotatedTitleSize,
+            x: x,
+            y: axisPlotTopPosition + y,
+            rotate: rotateAngle,
+            offset: -(originalTextSize.height / titleContent.length) * (titleContent.length - 1),
+        };
+    }
+    const plotBands = [];
+    axis.plotBands.forEach((plotBand) => {
+        var _a, _b;
+        const axisScale = scale;
+        const { from, to } = getBandsPosition({
+            band: plotBand,
+            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);
+        const endPos = Math.min(Math.abs(to - from), axisHeight - Math.min(from, to));
+        const top = Math.max(0, startPos);
+        plotBands.push({
+            layerPlacement: plotBand.layerPlacement,
+            x: 0,
+            y: axisPlotTopPosition + top,
+            width,
+            height: Math.min(endPos, axisHeight),
+            color: plotBand.color,
+            opacity: plotBand.opacity,
+            label: plotBand.label.text
+                ? {
+                    text: plotBand.label.text,
+                    style: plotBand.label.style,
+                    x: plotBand.label.padding,
+                    y: plotBand.label.padding,
+                }
+                : null,
+        });
+    });
+    const plotLines = [];
+    for (let i = 0; i < axis.plotLines.length; i++) {
+        const plotLine = axis.plotLines[i];
+        const axisScale = scale;
+        const plotLineValue = Number(axisScale(plotLine.value));
+        const points = [
+            [0, plotLineValue],
+            [width, plotLineValue],
+        ];
+        let label = null;
+        if (plotLine.label.text) {
+            const getTitleTextSize = getTextSizeFn({ style: plotLine.label.style });
+            const size = await getTitleTextSize(plotLine.label.text);
+            label = {
+                text: plotLine.label.text,
+                style: plotLine.label.style,
+                x: plotLine.label.padding,
+                y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
+            };
+        }
+        plotLines.push({
+            layerPlacement: plotLine.layerPlacement,
+            x: 0,
+            y: axisPlotTopPosition,
+            width,
+            color: plotLine.color,
+            opacity: plotLine.opacity,
+            label,
+            points,
+            lineWidth: plotLine.width,
+            dashStyle: plotLine.dashStyle,
+        });
+    }
+    return {
+        id: getUniqId(),
+        title,
+        ticks,
+        domain,
+        plotBands,
+        plotLines,
+    };
+}

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

@@ -0,0 +1,15 @@
+.gcharts-y-axis__domain {
+  stroke: var(--g-color-line-generic-active);
+}
+.gcharts-y-axis__label {
+  fill: var(--g-color-text-secondary);
+  stroke: none;
+  dominant-baseline: text-after-edge;
+}
+.gcharts-y-axis__tick {
+  stroke: var(--g-color-line-generic);
+}
+.gcharts-y-axis__title {
+  dominant-baseline: text-after-edge;
+  fill: var(--g-color-text-secondary);
+}

package/dist/esm/components/AxisY/types.d.ts

@@ -0,0 +1,81 @@
+import type { DashStyle } from 'src/constants';
+import type { BaseTextStyle, HtmlItem, PlotLayerPlacement } from '../../types';
+export type TextRowData = {
+    text: string;
+    x: number;
+    y: number;
+    size: {
+        width: number;
+        height: number;
+    };
+};
+export type AxisSvgLabelData = {
+    content: TextRowData[];
+    title?: string;
+    style: BaseTextStyle;
+    size: {
+        width: number;
+        height: number;
+    };
+};
+export type AxisTickLine = {
+    points: [number, number][];
+};
+export type AxisTickData = {
+    line: AxisTickLine | null;
+    svgLabel: AxisSvgLabelData | null;
+    htmlLabel: HtmlItem | null;
+};
+export type AxisTitleData = {
+    content: TextRowData[];
+    style: BaseTextStyle;
+    size: {
+        width: number;
+        height: number;
+    };
+    x: number;
+    y: number;
+    rotate: number;
+    offset: number;
+};
+export type AxisPlotLineLabel = {
+    text: string;
+    style: BaseTextStyle;
+    x: number;
+    y: number;
+};
+export type AxisPlotLineData = {
+    layerPlacement: PlotLayerPlacement;
+    x: number;
+    y: number;
+    width: number;
+    points: [number, number][];
+    color: string;
+    lineWidth: number;
+    opacity: number;
+    label: AxisPlotLineLabel | null;
+    dashStyle: DashStyle;
+};
+export type AxisPlotBandData = {
+    layerPlacement: PlotLayerPlacement;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    label: AxisPlotLineLabel | null;
+};
+export type AxisDomainData = {
+    start: [number, number];
+    end: [number, number];
+    lineColor: string;
+};
+export type AxisYData = {
+    id: string;
+    title: AxisTitleData | null;
+    domain: AxisDomainData;
+    ticks: AxisTickData[];
+    plotLines: AxisPlotLineData[];
+    plotBands: AxisPlotBandData[];
+};

package/dist/esm/components/AxisY/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/AxisY/utils.d.ts

@@ -0,0 +1,12 @@
+import type { ChartScale, PreparedAxis } from '../../hooks';
+export declare function getTickValues({ scale, axis, labelLineHeight, }: {
+    scale: ChartScale;
+    axis: PreparedAxis;
+    labelLineHeight: number;
+}): {
+    y: number;
+    value: number | Date;
+}[] | {
+    y: number;
+    value: string;
+}[];

package/dist/esm/components/AxisY/utils.js

@@ -0,0 +1,71 @@
+import { getTicksCount, isBandScale } from '../../utils';
+function thinOut(items, delta) {
+    const arr = [];
+    for (let i = 0; i < items.length; i = i + delta) {
+        arr.push(items[i]);
+    }
+    return arr;
+}
+function getMinSpaceBetween(arr, iterator) {
+    return arr.reduce((acc, item, index) => {
+        const prev = arr[index - 1];
+        if (prev) {
+            return Math.min(acc, Math.abs(iterator(prev) - iterator(item)));
+        }
+        return acc;
+    }, Infinity);
+}
+export function getTickValues({ scale, axis, labelLineHeight, }) {
+    if ('ticks' in scale && typeof scale.ticks === 'function') {
+        const range = scale.range();
+        const height = Math.abs(range[0] - range[1]);
+        if (!height) {
+            return [];
+        }
+        let ticksCount = getTicksCount({ axis, range: height });
+        let result = scale.ticks(ticksCount).map((t) => ({
+            y: scale(t),
+            value: t,
+        }));
+        if (result.length <= 1) {
+            return result;
+        }
+        let labelHeight = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+        ticksCount = result.length - 1;
+        while (labelHeight < labelLineHeight && result.length > 1) {
+            ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            result = scale.ticks(ticksCount).map((t) => ({
+                y: scale(t),
+                value: t,
+            }));
+            labelHeight = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+        }
+        return result;
+    }
+    if (isBandScale(scale)) {
+        const domain = scale.domain();
+        const bandWidth = scale.bandwidth();
+        const items = domain.map((d) => {
+            var _a;
+            return ({
+                y: ((_a = scale(d)) !== null && _a !== void 0 ? _a : 0) + bandWidth / 2,
+                value: d,
+            });
+        });
+        if (items.length <= 1) {
+            return items;
+        }
+        let result = [...items];
+        let labelHeight = result[0].y - result[1].y - axis.labels.padding * 2;
+        let delta = 2;
+        while (labelHeight < labelLineHeight && result.length > 1) {
+            result = thinOut(items, delta);
+            if (result.length > 1) {
+                delta += 1;
+                labelHeight = result[0].y - result[1].y - axis.labels.padding * 2;
+            }
+        }
+        return result;
+    }
+    return [];
+}

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

@@ -3,7 +3,9 @@ import { ArrowRotateLeft } from '@gravity-ui/icons';
 import { Button, ButtonIcon, useUniqId } from '@gravity-ui/uikit';
 import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
-import { AxisX, AxisY } from '../Axis';
+import { AxisX } from '../AxisX/AxisX';
+import { AxisY } from '../AxisY/AxisY';
+import { prepareAxisData } from '../AxisY/prepare-axis-data';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
 import { Title } from '../Title';
@@ -23,7 +25,7 @@ export const ChartInner = (props) => {
     const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, svgTopPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
         htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current, clipPathId }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
@@ -80,6 +82,32 @@ export const ChartInner = (props) => {
             unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
+    const [yAxisDataItems, setYAxisDataItems] = React.useState([]);
+    const countedRef = React.useRef(0);
+    React.useEffect(() => {
+        countedRef.current++;
+        (async function () {
+            const currentRun = countedRef.current;
+            const items = [];
+            for (let i = 0; i < yAxis.length; i++) {
+                const axis = yAxis[i];
+                const scale = yScale === null || yScale === void 0 ? void 0 : yScale[i];
+                if (scale) {
+                    const axisData = await prepareAxisData({
+                        axis,
+                        scale,
+                        width: boundsWidth,
+                        height: boundsHeight,
+                        split: preparedSplit,
+                    });
+                    items.push(axisData);
+                }
+            }
+            if (countedRef.current === currentRun) {
+                setYAxisDataItems(items);
+            }
+        })();
+    }, [boundsHeight, boundsWidth, preparedSplit, yAxis, yScale]);
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
@@ -94,7 +122,7 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, bottomLimit: svgBottomPos, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: yScale, split: preparedSplit, topLimit: svgTopPos, width: boundsWidth }),
+                    yAxisDataItems.map((axisData, index) => (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }))),
                     xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))))),
                 React.createElement("g", { ref: plotBeforeRef }),

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

@@ -46,16 +46,28 @@ export function useChartInnerProps(props) {
             seriesOptions: preparedSeriesOptions,
         }).then((val) => setXAxis(val));
     }, [data.xAxis, preparedSeriesOptions, width, zoomedSeriesData]);
+    const estimatedBoundsHeight = React.useMemo(() => {
+        if (xAxis) {
+            return (height -
+                xAxis.title.height +
+                xAxis.title.margin +
+                xAxis.labels.margin +
+                parseInt(xAxis.labels.style.fontSize, 10));
+        }
+        return 0;
+    }, [height, xAxis]);
     const [yAxis, setYAxis] = React.useState([]);
     React.useEffect(() => {
         setYAxis([]);
         getPreparedYAxis({
             height,
+            boundsHeight: estimatedBoundsHeight,
+            width,
             seriesData: zoomedSeriesData,
             seriesOptions: preparedSeriesOptions,
             yAxis: data.yAxis,
         }).then((val) => setYAxis(val));
-    }, [data.yAxis, height, preparedSeriesOptions, zoomedSeriesData]);
+    }, [data.yAxis, estimatedBoundsHeight, height, preparedSeriesOptions, width, zoomedSeriesData]);
     const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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 }));
 }