@gravity-ui/charts 1.42.3 → 1.43.0

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

@@ -1,5 +1,6 @@
 import { getUniqId } from '@gravity-ui/uikit';
-import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
+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';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
@@ -56,7 +57,9 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
         x = left + actualTextWidth / 2 - xOffset;
     }
     const yOffset = rotation <= 0 ? textSize.width * calculateSin(a) : 0;
-    const y = top + yOffset + axis.labels.margin;
+    const hOffset = textSize.hangingOffset;
+    const y = top + yOffset + axis.labels.margin + hOffset * calculateCos(rotation);
+    x -= hOffset * calculateSin(rotation);
     const svgLabel = {
         title: ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) === text ? undefined : text,
         content,
@@ -69,7 +72,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
     for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
@@ -201,7 +204,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             const titleContent = [];
             const titleMaxWidth = axisWidth;
             if (axis.title.maxRowCount > 1) {
-                titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
+                const rows = await getMultilineTitleContentRows({ axis, titleMaxWidth });
+                titleContent.push(...rows);
             }
             else {
                 const text = await getTextWithElipsis({
@@ -209,11 +213,12 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     maxWidth: titleMaxWidth,
                     getTextWidth: async (s) => (await getTitleTextSize(s)).width,
                 });
+                const titleSize = await getTitleTextSize(text);
                 titleContent.push({
                     text,
                     x: 0,
-                    y: 0,
-                    size: await getTitleTextSize(text),
+                    y: titleSize.hangingOffset,
+                    size: titleSize,
                 });
             }
             const titleTextSize = titleContent.reduce((acc, item) => {
@@ -258,14 +263,14 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             const halfBandwidth = ((_f = (_e = axisScale.bandwidth) === null || _e === void 0 ? void 0 : _e.call(axisScale)) !== null && _f !== void 0 ? _f : 0) / 2;
             const startPos = halfBandwidth + Math.min(from, to);
             const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
-            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
-            const labelSize = plotBand.label.text
-                ? await getPlotLabelSize(plotBand.label.text)
-                : null;
             const plotBandWidth = Math.min(endPos, axisWidth);
             if (plotBandWidth < 0) {
                 continue;
             }
+            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
+            const labelSize = plotBand.label.text
+                ? await getPlotLabelSize(plotBand.label.text)
+                : null;
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
@@ -278,8 +283,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     ? {
                         text: plotBand.label.text,
                         style: plotBand.label.style,
-                        x: plotBand.label.padding,
-                        y: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _g !== void 0 ? _g : 0),
+                        x: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _g !== void 0 ? _g : 0),
+                        y: plotBand.label.padding + ((_h = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _h !== void 0 ? _h : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }
@@ -305,7 +310,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 label = {
                     text: plotLine.label.text,
                     style: plotLine.label.style,
-                    x: plotLineValue - plotLine.label.padding - size.height,
+                    x: plotLineValue - plotLine.label.padding - size.height + size.hangingOffset,
                     y: plotLine.label.padding + size.width,
                     rotate: -90,
                     qa: plotLine.label.qa,
@@ -324,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,
@@ -332,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);
         }
@@ -50,7 +51,7 @@ export const AxisY = (props) => {
                 .html((d) => d.text)
                 .attr('x', (d) => d.x)
                 .attr('y', (d) => d.y)
-                .attr('dominant-baseline', 'text-after-edge')
+                .attr('dominant-baseline', 'hanging')
                 .attr('text-anchor', 'start');
         }
         if (preparedAxisData.domain) {
@@ -103,7 +104,7 @@ export const AxisY = (props) => {
                     .attr('y', (d) => d.y)
                     .attr('text-anchor', 'start')
                     .attr('class', labelClassName)
-                    .style('dominant-baseline', 'text-before-edge')
+                    .style('dominant-baseline', 'hanging')
                     .style('font-size', label.style.fontSize)
                     .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '');
             }
@@ -139,7 +140,7 @@ export const AxisY = (props) => {
                             .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
-                            .style('dominant-baseline', 'text-before-edge')
+                            .style('dominant-baseline', 'hanging')
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
@@ -181,7 +182,7 @@ export const AxisY = (props) => {
                             .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
-                            .style('dominant-baseline', 'text-before-edge')
+                            .style('dominant-baseline', 'hanging')
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
@@ -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,9 +1,10 @@
 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';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, topOffset, }) {
-    var _a;
+    var _a, _b;
     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.
@@ -59,7 +60,9 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
             }
         }
         content.forEach((row) => {
+            var _a;
             row.y -= newLabelHeight / 2;
+            row.y += (_a = originalTextSize.hangingOffset) !== null && _a !== void 0 ? _a : 0;
         });
         size.width = newLabelWidth;
         size.height = newLabelHeight;
@@ -87,7 +90,8 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
             ? textSize.height / calculateSin(axis.labels.rotation)
             : textSize.height;
         const x = axis.position === 'left' ? -textSize.width : 0;
-        const y = Math.max(-topOffset - top, -actualTextHeight / 2);
+        const y = Math.max(-topOffset - top, -actualTextHeight / 2) +
+            ((_a = originalTextSize.hangingOffset) !== null && _a !== void 0 ? _a : 0);
         content.push({
             text: rowText,
             x,
@@ -98,7 +102,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     const x = axis.position === 'left' ? left - axis.labels.margin : left + axis.labels.margin;
     const y = top;
     const svgLabel = {
-        title: content.length > 1 || ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) !== text ? text : undefined,
+        title: content.length > 1 || ((_b = content[0]) === null || _b === void 0 ? void 0 : _b.text) !== text ? text : undefined,
         content: content,
         style: axis.labels.style,
         size: size,
@@ -109,7 +113,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     return svgLabel;
 }
 export async function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const axisPlotTopPosition = ((_a = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
@@ -212,23 +216,22 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
             axisLabelsWidth: labelsWidth,
         });
     const plotBands = [];
-    axis.plotBands.forEach((plotBand) => {
-        var _a, _b;
+    for (const plotBand of axis.plotBands) {
         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 halfBandwidth = ((_e = (_d = axisScale.bandwidth) === null || _d === void 0 ? void 0 : _d.call(axisScale)) !== null && _e !== void 0 ? _e : 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);
         const plotBandHeight = Math.min(endPos, axisHeight);
         if (plotBandHeight < 0) {
-            return;
+            continue;
         }
-        plotBands.push({
+        const plotBandItem = {
             layerPlacement: plotBand.layerPlacement,
             x: 0,
             y: axisPlotTopPosition + top,
@@ -236,17 +239,21 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
             height: plotBandHeight,
             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,
-                    qa: plotBand.label.qa,
-                }
-                : null,
-        });
-    });
+            label: null,
+        };
+        if (plotBand.label.text) {
+            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
+            const labelSize = await getPlotLabelSize(plotBand.label.text);
+            plotBandItem.label = {
+                text: plotBand.label.text,
+                style: plotBand.label.style,
+                x: plotBand.label.padding,
+                y: plotBand.label.padding + labelSize.hangingOffset,
+                qa: plotBand.label.qa,
+            };
+        }
+        plotBands.push(plotBandItem);
+    }
     const plotLines = [];
     for (let i = 0; i < axis.plotLines.length; i++) {
         const plotLine = axis.plotLines[i];
@@ -267,7 +274,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                 text: plotLine.label.text,
                 style: plotLine.label.style,
                 x: plotLine.label.padding,
-                y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
+                y: Math.max(0, plotLineValue - size.height - plotLine.label.padding + size.hangingOffset),
                 qa: plotLine.label.qa,
             };
         }
@@ -284,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,
@@ -292,5 +338,6 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         domain,
         plotBands,
         plotLines,
+        plotShapes,
     };
 }

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

@@ -11,7 +11,11 @@ export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidt
     const titleContent = [];
     const titleMaxWidth = rotateAngle === 0 ? axis.title.maxWidth : sin * axisHeight;
     if (axis.title.maxRowCount > 1) {
-        titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
+        const rows = await getMultilineTitleContentRows({ axis, titleMaxWidth });
+        rows.forEach((r) => {
+            r.y -= r.size.height;
+        });
+        titleContent.push(...rows);
     }
     else {
         const text = await getTextWithElipsis({
@@ -19,11 +23,12 @@ export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidt
             maxWidth: titleMaxWidth,
             getTextWidth: async (s) => (await getTitleTextSize(s)).width,
         });
+        const titleSize = await getTitleTextSize(text);
         titleContent.push({
             text,
             x: 0,
-            y: 0,
-            size: await getTitleTextSize(text),
+            y: titleSize.hangingOffset - titleSize.height,
+            size: titleSize,
         });
     }
     const originalTextSize = titleContent.reduce((acc, item) => {

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

@@ -4,7 +4,7 @@
 .gcharts-y-axis__label {
   fill: var(--g-color-text-secondary);
   stroke: none;
-  dominant-baseline: text-after-edge;
+  dominant-baseline: text-bottom;
 }
 .gcharts-y-axis__tick {
   stroke: var(--gcharts-axis-tick-color);

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

@@ -20,7 +20,7 @@ import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
 import { useDefaultState } from './useDefaultState';
-import { getPreparedChart, getPreparedTitle, getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
+import { getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
 import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
@@ -36,16 +36,6 @@ export const ChartInner = (props) => {
     const rangeSliderRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const preparedTitle = React.useMemo(() => {
-        return getPreparedTitle({ title: data.title });
-    }, [data.title]);
-    const preparedChart = React.useMemo(() => {
-        return getPreparedChart({
-            chart: data.chart,
-            seriesData: data.series.data,
-            preparedTitle,
-        });
-    }, [data.chart, data.series.data, preparedTitle]);
     const preparedTooltip = React.useMemo(() => {
         return getPreparedTooltip({
             tooltip: data.tooltip,
@@ -62,10 +52,9 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, preparedTitle, preparedChart, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState,
+        htmlLayout, plotNode: plotRef.current, rangeSliderState,
         updateZoomState,
         zoomState }));
     const prevWidth = usePrevious(width);
@@ -165,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);
             }
         }
@@ -191,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;
@@ -269,6 +274,7 @@ export const ChartInner = (props) => {
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
+            preparedChart &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
             preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
@@ -281,7 +287,7 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && preparedChart.zoom && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
+        Object.keys(zoomState).length > 0 && (preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.zoom) && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
                 var _a;
                 updateZoomState({});
                 (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.resetState();

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 & {
@@ -9,7 +9,6 @@ type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
-    preparedChart: PreparedChart;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
@@ -25,6 +24,8 @@ export declare function useChartInnerProps(props: Props): {
     shapesData: ShapeData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;
+    preparedTitle: PreparedTitle | undefined;
+    preparedChart: PreparedChart | undefined;
     allPreparedSeries?: PreparedSeries[] | undefined;
     legendConfig?: LegendConfig | undefined;
     legendItems?: LegendItem[][] | undefined;