@gravity-ui/charts 1.42.4 → 1.43.0

package/dist/esm/components/AxisX/AxisX.js

@@ -23,6 +23,7 @@ export const AxisX = (props) => {
         const plotDataAttr = 'data-plot-x';
         const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
         const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
+        const plotShapeDataAttr = `data-plot-x-shape-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
         }
@@ -186,14 +187,40 @@ export const AxisX = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        if (preparedAxisData.plotShapes.length > 0) {
+            const setPlotShapes = (plotContainer, plotShapes) => {
+                if (!plotContainer || !plotShapes.length) {
+                    return;
+                }
+                plotContainer
+                    .selectAll(`[${plotShapeDataAttr}]`)
+                    .remove()
+                    .data(plotShapes)
+                    .join('g')
+                    .attr(plotDataAttr, 1)
+                    .attr(plotShapeDataAttr, 1)
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
+                    .attr('opacity', (d) => d.opacity)
+                    .html((d) => d.renderer({
+                    x: d.x,
+                    y: 0,
+                    plotHeight: d.plotHeight,
+                    plotWidth: d.plotWidth,
+                }));
+            };
+            setPlotShapes(plotBeforeContainer, preparedAxisData.plotShapes.filter((item) => item.layerPlacement === 'before'));
+            setPlotShapes(plotAfterContainer, preparedAxisData.plotShapes.filter((item) => item.layerPlacement === 'after'));
+        }
         return () => {
             if (plotBeforeContainer) {
                 plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
                 plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotShapeDataAttr}]`).remove();
             }
             if (plotAfterContainer) {
                 plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
                 plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotShapeDataAttr}]`).remove();
             }
         };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);

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

@@ -1,4 +1,5 @@
 import { getUniqId } from '@gravity-ui/uikit';
+import { select } from 'd3-selection';
 import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
 import { getXAxisTickValues } from '../../core/utils/axis/x-axis';
 import { getMultilineTitleContentRows } from '../utils/axis-title';
@@ -328,6 +329,45 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 dashStyle: plotLine.dashStyle,
             });
         }
+        const plotShapes = [];
+        const measureContainer = axis.plotShapes.length
+            ? select(document.body)
+                .append('svg')
+                .style('visibility', 'hidden')
+                .style('position', 'absolute')
+                .style('top', '-200vw')
+            : null;
+        for (let i = 0; i < axis.plotShapes.length; i++) {
+            if (!measureContainer) {
+                break;
+            }
+            const plotShape = axis.plotShapes[i];
+            const axisScale = scale;
+            const shapeX = Number(axisScale(plotShape.value));
+            if (shapeX < 0 || shapeX > boundsWidth) {
+                continue;
+            }
+            const markup = plotShape.renderer({
+                x: shapeX,
+                y: 0,
+                plotHeight: axisHeight,
+                plotWidth: axisWidth,
+            });
+            const wrapper = measureContainer.append('g').html(markup);
+            const bbox = wrapper.node().getBBox();
+            wrapper.remove();
+            plotShapes.push({
+                hitbox: { x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height },
+                layerPlacement: plotShape.layerPlacement,
+                opacity: plotShape.opacity,
+                plotHeight: axisHeight,
+                plotWidth: axisWidth,
+                renderer: plotShape.renderer,
+                x: shapeX,
+                y: axisTop,
+            });
+        }
+        measureContainer === null || measureContainer === void 0 ? void 0 : measureContainer.remove();
         xAxisItems.push({
             id: getUniqId(),
             gridEnabled: axis.grid.enabled,
@@ -336,6 +376,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             domain,
             plotBands,
             plotLines,
+            plotShapes,
         });
     }
     return xAxisItems;

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

@@ -1,4 +1,5 @@
 import type { DashStyle } from 'src/core/constants';
+import type { AxisPlotShape } from '../../core/types/chart/axis';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
 import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
@@ -67,6 +68,21 @@ export type AxisPlotBandData = {
     opacity: number;
     label: AxisPlotLineLabel | null;
 };
+export type AxisPlotShapeData = {
+    hitbox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    layerPlacement: PlotLayerPlacement;
+    opacity: number;
+    plotHeight: number;
+    plotWidth: number;
+    renderer: AxisPlotShape['renderer'];
+    x: number;
+    y: number;
+};
 export type AxisDomainData = {
     start: [number, number];
     end: [number, number];
@@ -78,6 +94,7 @@ export type AxisXData = {
     title: AxisTitleData | null;
     domain: AxisDomainData | null;
     ticks: AxisTickData[];
-    plotLines: AxisPlotLineData[];
     plotBands: AxisPlotBandData[];
+    plotLines: AxisPlotLineData[];
+    plotShapes: AxisPlotShapeData[];
 };

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

@@ -28,6 +28,7 @@ export const AxisY = (props) => {
         const plotDataAttr = 'data-plot-y';
         const plotBandDataAttr = `data-plot-y-band-${preparedAxisData.id}`;
         const plotLineDataAttr = `data-plot-y-line-${preparedAxisData.id}`;
+        const plotShapeDataAttr = `data-plot-y-shape-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
         }
@@ -191,14 +192,40 @@ export const AxisY = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        if (preparedAxisData.plotShapes.length > 0) {
+            const setPlotShapes = (plotContainer, plotShapes) => {
+                if (!plotContainer || !plotShapes.length) {
+                    return;
+                }
+                plotContainer
+                    .selectAll(`[${plotShapeDataAttr}]`)
+                    .remove()
+                    .data(plotShapes)
+                    .join('g')
+                    .attr(plotDataAttr, 1)
+                    .attr(plotShapeDataAttr, 1)
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
+                    .attr('opacity', (d) => d.opacity)
+                    .html((d) => d.renderer({
+                    x: 0,
+                    y: d.y,
+                    plotHeight: d.plotHeight,
+                    plotWidth: d.plotWidth,
+                }));
+            };
+            setPlotShapes(plotBeforeContainer, preparedAxisData.plotShapes.filter((item) => item.layerPlacement === 'before'));
+            setPlotShapes(plotAfterContainer, preparedAxisData.plotShapes.filter((item) => item.layerPlacement === 'after'));
+        }
         return () => {
             if (plotBeforeContainer) {
                 plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
                 plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotShapeDataAttr}]`).remove();
             }
             if (plotAfterContainer) {
                 plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
                 plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotShapeDataAttr}]`).remove();
             }
         };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);

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

@@ -1,4 +1,5 @@
 import { getUniqId } from '@gravity-ui/uikit';
+import { select } from 'd3-selection';
 import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../core/utils';
 import { prepareHtmlYAxisTitle, prepareSvgYAxisTitle } from './prepare-axis-title';
 import { getTickValues } from './utils';
@@ -290,6 +291,45 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
             dashStyle: plotLine.dashStyle,
         });
     }
+    const plotShapes = [];
+    const measureContainer = axis.plotShapes.length
+        ? select(document.body)
+            .append('svg')
+            .style('visibility', 'hidden')
+            .style('position', 'absolute')
+            .style('top', '-200vw')
+        : null;
+    for (let i = 0; i < axis.plotShapes.length; i++) {
+        if (!measureContainer) {
+            break;
+        }
+        const plotShape = axis.plotShapes[i];
+        const axisScale = scale;
+        const shapeY = Number(axisScale(plotShape.value));
+        if (shapeY < 0 || shapeY > axisHeight) {
+            continue;
+        }
+        const markup = plotShape.renderer({
+            x: 0,
+            y: shapeY,
+            plotHeight: axisHeight,
+            plotWidth: width,
+        });
+        const wrapper = measureContainer.append('g').html(markup);
+        const bbox = wrapper.node().getBBox();
+        wrapper.remove();
+        plotShapes.push({
+            hitbox: { x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height },
+            layerPlacement: plotShape.layerPlacement,
+            opacity: plotShape.opacity,
+            plotHeight: axisHeight,
+            plotWidth: width,
+            renderer: plotShape.renderer,
+            x: 0,
+            y: axisPlotTopPosition + shapeY,
+        });
+    }
+    measureContainer === null || measureContainer === void 0 ? void 0 : measureContainer.remove();
     return {
         id: getUniqId(),
         gridEnabled: axis.grid.enabled,
@@ -298,5 +338,6 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         domain,
         plotBands,
         plotLines,
+        plotShapes,
     };
 }

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

@@ -1,4 +1,5 @@
 import type { DashStyle } from 'src/core/constants';
+import type { AxisPlotShape } from '../../core/types/chart/axis';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
 import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
@@ -78,6 +79,21 @@ export type AxisPlotBandData = {
     opacity: number;
     label: AxisPlotLineLabel | null;
 };
+export type AxisPlotShapeData = {
+    hitbox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    layerPlacement: PlotLayerPlacement;
+    opacity: number;
+    plotHeight: number;
+    plotWidth: number;
+    renderer: AxisPlotShape['renderer'];
+    x: number;
+    y: number;
+};
 export type AxisDomainData = {
     start: [number, number];
     end: [number, number];
@@ -89,6 +105,7 @@ export type AxisYData = {
     title: HtmlAxisTitleData | SvgAxisTitleData | null;
     domain: AxisDomainData | null;
     ticks: AxisTickData[];
-    plotLines: AxisPlotLineData[];
     plotBands: AxisPlotBandData[];
+    plotLines: AxisPlotLineData[];
+    plotShapes: AxisPlotShapeData[];
 };

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

@@ -154,6 +154,13 @@ export const ChartInner = (props) => {
                     split: preparedSplit,
                     series: preparedSeries.filter((s) => s.visible),
                 });
+                axisData.plotShapes.forEach((shapeData, j) => {
+                    if (axis.plotShapes[j]) {
+                        axis.plotShapes[j].hitbox = shapeData.hitbox;
+                        axis.plotShapes[j].x = shapeData.x;
+                        axis.plotShapes[j].y = shapeData.y;
+                    }
+                });
                 items.push(axisData);
             }
         }
@@ -180,6 +187,15 @@ export const ChartInner = (props) => {
                 split: preparedSplit,
                 yAxis,
             });
+            axisData.forEach((data) => {
+                data.plotShapes.forEach((shapeData, i) => {
+                    if (axis.plotShapes[i]) {
+                        axis.plotShapes[i].hitbox = shapeData.hitbox;
+                        axis.plotShapes[i].x = shapeData.x;
+                        axis.plotShapes[i].y = shapeData.y;
+                    }
+                });
+            });
             items.push(...axisData);
         }
         return items;

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

@@ -29,7 +29,7 @@ export function useChartInnerHandlers(props) {
             boundsHeight,
             boundsWidth,
         });
-        const { plotLines, plotBands } = getHoveredPlots({
+        const { plotBands, plotLines, plotShapes } = getHoveredPlots({
             pointerX: x,
             pointerY: y,
             xAxis,
@@ -37,7 +37,7 @@ export function useChartInnerHandlers(props) {
             xScale,
             yScale,
         });
-        const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+        const hoveredPlotsArg = { bands: plotBands, lines: plotLines, shapes: plotShapes };
         dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY], hoveredPlotsArg);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
             hovered: closest,
@@ -93,7 +93,7 @@ export function useChartInnerHandlers(props) {
         dispatcher.call(EventType.CLICK_CHART, undefined, { point: selected.data, series: selected.series }, event);
         const nextTooltipFixed = !tooltipPinned;
         if (!nextTooltipFixed) {
-            const { plotLines, plotBands } = getHoveredPlots({
+            const { plotBands, plotLines, plotShapes } = getHoveredPlots({
                 pointerX: x,
                 pointerY: y,
                 xAxis,
@@ -101,14 +101,15 @@ export function useChartInnerHandlers(props) {
                 xScale,
                 yScale,
             });
-            const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+            const hoveredPlotsArg = { bands: plotBands, lines: plotLines, shapes: plotShapes };
             dispatcher.call(EventType.HOVER_SHAPE, event.target, items, [pointerX, pointerY], hoveredPlotsArg);
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: items,
                 xAxis,
                 yAxis: yAxis[0],
-                hoveredPlotLines: plotLines,
                 hoveredPlotBands: plotBands,
+                hoveredPlotLines: plotLines,
+                hoveredPlotShapes: plotShapes,
             }, event);
         }
         togglePinTooltip === null || togglePinTooltip === void 0 ? void 0 : togglePinTooltip(nextTooltipFixed, event);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
-import type { PreparedChart } from '../../hooks/types';
+import type { PreparedChart, PreparedTitle } from '../../hooks/types';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -24,9 +24,7 @@ export declare function useChartInnerProps(props: Props): {
     shapesData: ShapeData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;
-    preparedTitle: (import("../..").ChartTitle & {
-        height: number;
-    }) | undefined;
+    preparedTitle: PreparedTitle | undefined;
     preparedChart: PreparedChart | undefined;
     allPreparedSeries?: PreparedSeries[] | undefined;
     legendConfig?: LegendConfig | undefined;

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

@@ -50,7 +50,7 @@ export function useChartInnerProps(props) {
         (async function () {
             var _a, _b, _c;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
-            const preparedTitle = await getPreparedTitle({ title: data.title });
+            const preparedTitle = await getPreparedTitle({ title: data.title, chartWidth: width });
             const preparedChart = getPreparedChart({
                 chart: data.chart,
                 seriesData: data.series.data,

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

@@ -29,7 +29,7 @@ export function useDefaultState(props) {
                 boundsHeight,
                 boundsWidth,
             });
-            const { plotLines, plotBands } = getHoveredPlots({
+            const { plotBands, plotLines, plotShapes } = getHoveredPlots({
                 pointerX: x,
                 pointerY: y,
                 xAxis,
@@ -37,7 +37,7 @@ export function useDefaultState(props) {
                 xScale,
                 yScale,
             });
-            const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+            const hoveredPlotsArg = { bands: plotBands, lines: plotLines, shapes: plotShapes };
             const svgPointerX = x + boundsOffsetLeft;
             const svgPointerY = y + boundsOffsetTop;
             dispatcher.call(EventType.HOVER_SHAPE, undefined, closest, [svgPointerX, svgPointerY], hoveredPlotsArg);
@@ -55,8 +55,9 @@ export function useDefaultState(props) {
                 hovered: closest,
                 xAxis,
                 yAxis: yAxis[0],
-                hoveredPlotLines: plotLines,
                 hoveredPlotBands: plotBands,
+                hoveredPlotLines: plotLines,
+                hoveredPlotShapes: plotShapes,
             }, syntheticEvent);
         });
     }, [

package/dist/esm/components/ChartInner/utils/chart.js

@@ -4,7 +4,7 @@ const getMarginTop = (args) => {
     const { chart, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
     if (preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height) {
-        marginTop += preparedTitle.height;
+        marginTop += preparedTitle.height + preparedTitle.margin;
     }
     return marginTop;
 };

package/dist/esm/components/ChartInner/utils/normalized-original-data.d.ts

@@ -22,6 +22,7 @@ export declare function getNormalizedXAxis(props: {
     maxPadding?: number;
     plotLines?: import("../../..").AxisPlotLine[];
     plotBands?: import("../../..").AxisPlotBand[];
+    plotShapes?: import("../../..").AxisPlotShape[];
     tickMarks?: import("../../..").ChartAxisTickMarks;
     visible?: boolean;
     order?: "sortAsc" | "sortDesc" | "reverse";

package/dist/esm/components/ChartInner/utils/title.d.ts

@@ -1,5 +1,6 @@
 import type { PreparedTitle } from '../../../hooks/types';
 import type { ChartData } from '../../../types';
-export declare const getPreparedTitle: ({ title, }: {
+export declare const getPreparedTitle: ({ title, chartWidth, }: {
     title: ChartData["title"];
+    chartWidth: number;
 }) => Promise<PreparedTitle | undefined>;

package/dist/esm/components/ChartInner/utils/title.js

@@ -1,20 +1,78 @@
 import get from 'lodash/get';
-import { getTextSizeFn } from '../../../core/utils';
+import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
-const TITLE_PADDINGS = 8 * 2;
-export const getPreparedTitle = async ({ title, }) => {
-    var _a, _b, _c, _d, _e, _f;
+const DEFAULT_TITLE_MARGIN = 10;
+export const getPreparedTitle = async ({ title, chartWidth, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const titleText = get(title, 'text');
     const titleStyle = {
         fontSize: (_b = (_a = title === null || title === void 0 ? void 0 : title.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_FONT_SIZE,
         fontWeight: (_d = (_c = title === null || title === void 0 ? void 0 : title.style) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : 'var(--g-text-subheader-font-weight)',
         fontColor: (_f = (_e = title === null || title === void 0 ? void 0 : title.style) === null || _e === void 0 ? void 0 : _e.fontColor) !== null && _f !== void 0 ? _f : 'var(--g-color-text-primary)',
     };
-    const titleHeight = titleText
-        ? (await getTextSizeFn({ style: titleStyle })(titleText)).height + TITLE_PADDINGS
-        : 0;
-    const preparedTitle = titleText
-        ? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }
-        : undefined;
-    return preparedTitle;
+    if (!titleText) {
+        return undefined;
+    }
+    const getTitleTextSize = getTextSizeFn({ style: titleStyle });
+    const maxRowCount = (_g = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _g !== void 0 ? _g : 1;
+    const contentRows = [];
+    if (maxRowCount > 1) {
+        let titleTextRows = await wrapText({
+            text: titleText,
+            style: titleStyle,
+            width: chartWidth,
+            getTextSize: getTitleTextSize,
+        });
+        titleTextRows = titleTextRows.reduce((acc, row, index) => {
+            if (index < maxRowCount) {
+                acc.push(row);
+            }
+            else {
+                acc[maxRowCount - 1].text += row.text;
+            }
+            return acc;
+        }, []);
+        for (let i = 0; i < titleTextRows.length; i++) {
+            const textRow = titleTextRows[i];
+            let textRowContent = textRow.text.trim();
+            if (i === titleTextRows.length - 1) {
+                textRowContent = await getTextWithElipsis({
+                    text: textRowContent,
+                    maxWidth: chartWidth,
+                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+                });
+            }
+            const textRowSize = await getTitleTextSize(textRowContent);
+            contentRows.push({
+                text: textRowContent,
+                x: 0,
+                y: textRow.y + textRowSize.hangingOffset,
+                size: textRowSize,
+            });
+        }
+    }
+    else {
+        const truncatedText = await getTextWithElipsis({
+            text: titleText,
+            maxWidth: chartWidth,
+            getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+        });
+        const textSize = await getTitleTextSize(truncatedText);
+        contentRows.push({
+            text: truncatedText,
+            x: 0,
+            y: textSize.hangingOffset,
+            size: textSize,
+        });
+    }
+    const totalTextHeight = contentRows.reduce((acc, row) => acc + row.size.height, 0);
+    const titleHeight = totalTextHeight;
+    return {
+        text: titleText,
+        style: titleStyle,
+        height: titleHeight,
+        margin: (_h = title === null || title === void 0 ? void 0 : title.margin) !== null && _h !== void 0 ? _h : DEFAULT_TITLE_MARGIN,
+        qa: title === null || title === void 0 ? void 0 : title.qa,
+        contentRows,
+    };
 };

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

@@ -1,11 +1,9 @@
 import React from 'react';
 export const Title = (props) => {
-    const { chartWidth, text, height, style, qa } = props;
-    return (React.createElement("text", { dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: {
+    const { chartWidth, style, qa, contentRows } = props;
+    return (React.createElement("text", { dominantBaseline: "hanging", textAnchor: "middle", style: {
             fill: style === null || style === void 0 ? void 0 : style.fontColor,
             fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
             fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
-            lineHeight: `${height}px`,
-        }, "data-qa": qa },
-        React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
+        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: chartWidth / 2, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

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

@@ -7,8 +7,9 @@ export interface ChartTooltipContentProps {
     rowRenderer?: ChartTooltip['rowRenderer'];
     valueFormat?: ChartTooltip['valueFormat'];
     headerFormat?: ChartTooltip['headerFormat'];
-    hoveredPlotLines?: ChartTooltipRendererArgs['hoveredPlotLines'];
     hoveredPlotBands?: ChartTooltipRendererArgs['hoveredPlotBands'];
+    hoveredPlotLines?: ChartTooltipRendererArgs['hoveredPlotLines'];
+    hoveredPlotShapes?: ChartTooltipRendererArgs['hoveredPlotShapes'];
     totals?: ChartTooltip['totals'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;

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

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

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

@@ -7,7 +7,7 @@ import './styles.css';
 const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
-    const { hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition } = useTooltip({
+    const { hovered, hoveredPlotBands, hoveredPlotLines, hoveredPlotShapes, pointerPosition } = useTooltip({
         dispatcher,
         tooltip,
         xAxis,
@@ -28,5 +28,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, hoveredPlotLines: hoveredPlotLines, hoveredPlotBands: hoveredPlotBands, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, hoveredPlotBands: hoveredPlotBands, hoveredPlotLines: hoveredPlotLines, hoveredPlotShapes: hoveredPlotShapes, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
 };