@gravity-ui/charts 1.45.0 → 1.46.1

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -1,20 +1,14 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { line as lineGenerator } from 'd3-shape';
-import get from 'lodash/get';
-import { DASH_STYLE } from '../../../core/constants';
-import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../../core/utils';
+import { renderWaterfall } from '../../../core/shapes/waterfall/renderer';
+import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-export { prepareWaterfallData } from './prepare-data';
-export * from './types';
+export { prepareWaterfallData } from '../../../core/shapes/waterfall/prepare-data';
+export * from '../../../core/shapes/waterfall/types';
 const b = block('waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
-    const connectorSelector = `.${b('connector')}`;
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -22,115 +16,8 @@ export const WaterfallSeriesShapes = (args) => {
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'waterfall.states.hover');
-        const inactiveOptions = get(seriesOptions, 'waterfall.states.inactive');
-        svgElement.selectAll('*').remove();
-        const rectSelection = svgElement
-            .selectAll('allRects')
-            .data(preparedData)
-            .join('rect')
-            .attr('class', b('segment'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => getWaterfallPointColor(d.data, d.series))
-            .attr('opacity', (d) => d.opacity)
-            .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!allowOverlapDataLabels) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
-        const labelSelection = svgElement
-            .selectAll('text')
-            .data(dataLabels)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('text-anchor', (d) => d.textAnchor)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null);
-        // Add the connector line between bars
-        svgElement
-            .selectAll(connectorSelector)
-            .data(preparedData)
-            .join('path')
-            .attr('class', b('connector'))
-            .attr('d', (d, index) => {
-            const line = lineGenerator();
-            const prev = preparedData[index - 1];
-            if (!prev) {
-                return null;
-            }
-            const points = [];
-            if (Number(prev.data.y) > 0) {
-                points.push([prev.x, prev.y]);
-            }
-            else {
-                points.push([prev.x, prev.y + prev.height]);
-            }
-            if (Number(d.data.y) > 0 && !d.data.total) {
-                points.push([d.x + d.width, d.y + d.height]);
-            }
-            else {
-                points.push([d.x + d.width, d.y]);
-            }
-            return line(points);
-        })
-            .attr('stroke-width', 1)
-            .attr('stroke-dasharray', () => getLineDashArray(DASH_STYLE.Dash, 1));
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            if (!data) {
-                if (hoverEnabled) {
-                    rectSelection.attr('fill', (d) => getWaterfallPointColor(d.data, d.series));
-                }
-                if (inactiveEnabled) {
-                    rectSelection.attr('opacity', null);
-                    labelSelection.attr('opacity', null);
-                }
-                return;
-            }
-            if (hoverEnabled) {
-                const hoveredValues = data.map((d) => d.data.x);
-                rectSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = getWaterfallPointColor(d.data, d.series);
-                    if (hoveredValues.includes(d.data.x)) {
-                        const brightness = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness;
-                        return ((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(brightness).toString()) || fillColor;
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveEnabled) {
-                const hoveredSeries = data.map((d) => d.series.id);
-                rectSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-                labelSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
-        };
-    }, [allowOverlapDataLabels, connectorSelector, dispatcher, preparedData, seriesOptions]);
+        return renderWaterfall({ plot: ref.current }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
         const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
         if (allowOverlapDataLabels) {

package/dist/cjs/hooks/useShapes/x-range/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-export { prepareXRangeData } from './prepare-data';
-export type { PreparedXRangeData } from './types';
-import type { PreparedXRangeData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedXRangeData } from '../../../core/shapes/x-range/types';
+export { prepareXRangeData } from '../../../core/shapes/x-range/prepare-data';
+export type { PreparedXRangeData } from '../../../core/shapes/x-range/types';
 type Args = {
     clipPathId: string;
     htmlLayout: HTMLElement | null;

package/dist/cjs/hooks/useShapes/x-range/index.js

@@ -1,112 +1,17 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
-import { getLineDashArray } from '../../../core/utils';
+import { renderXRange } from '../../../core/shapes/x-range/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getRectPath } from '../utils';
-export { prepareXRangeData } from './prepare-data';
+export { prepareXRangeData } from '../../../core/shapes/x-range/prepare-data';
 const b = block('x-range');
 export function XRangeSeriesShapes(args) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
-        var _a;
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const segmentSelection = svgElement
-            .selectAll(`path.${b('segment')}`)
-            .data(preparedData)
-            .join('path')
-            .attr('d', (d) => {
-            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
-            return getRectPath({
-                x: d.x,
-                y: d.y,
-                width: d.width,
-                height: d.height,
-                borderRadius,
-            }).toString();
-        })
-            .attr('class', b('segment'))
-            .attr('fill', (d) => d.color)
-            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
-            .attr('cursor', (d) => d.series.cursor);
-        svgElement
-            .selectAll(`path.${b('segment-border')}`)
-            .data(preparedData.filter((d) => d.series.borderWidth > 0))
-            .join('path')
-            .attr('d', (d) => {
-            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
-            return getRectPath({
-                x: d.x,
-                y: d.y,
-                width: d.width,
-                height: d.height,
-                borderRadius,
-            }).toString();
-        })
-            .attr('class', b('segment-border'))
-            .attr('fill', 'none')
-            .attr('stroke', (d) => d.series.borderColor)
-            .attr('stroke-width', (d) => d.series.borderWidth)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.series.borderDashStyle, d.series.borderWidth))
-            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
-            .attr('pointer-events', 'none');
-        const svgLabels = preparedData.flatMap((d) => d.svgLabels);
-        svgElement
-            .selectAll(`text.${b('label')}`)
-            .data(svgLabels)
-            .join('text')
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('text-anchor', (d) => d.textAnchor)
-            .attr('dominant-baseline', 'central')
-            .attr('pointer-events', 'none')
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null)
-            .html((d) => d.text);
-        const hoverOptions = get(seriesOptions, 'x-range.states.hover');
-        const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
-                const hoveredSet = new Set(data === null || data === void 0 ? void 0 : data.map((d) => d.data));
-                segmentSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hoveredSet.has(d.data)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
-                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
-                segmentSelection.attr('opacity', (d) => {
-                    var _a, _b;
-                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
-                        return inactiveOptions.opacity || null;
-                    }
-                    return (_b = (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity) !== null && _b !== void 0 ? _b : null;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover((_a = hoveredDataRef.current) !== null && _a !== void 0 ? _a : undefined);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', null);
-        };
+        return renderXRange({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
     return (React.createElement(React.Fragment, null,

package/dist/cjs/setup-jsdom.js

@@ -10,6 +10,13 @@ if (typeof document !== 'undefined') {
         });
     }
 }
+if (typeof ResizeObserver === 'undefined') {
+    global.ResizeObserver = class ResizeObserver {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+}
 if (typeof HTMLCanvasElement !== 'undefined') {
     // jsdom does not implement HTMLCanvasElement.prototype.getContext (used for text measurement)
     HTMLCanvasElement.prototype.getContext = (() => ({

package/dist/cjs/types/chart-ui.d.ts

@@ -24,6 +24,8 @@ export interface HtmlItem {
         height: number;
     };
     style?: BaseTextStyle & React.CSSProperties;
+    /** Coordinate space for positioning: 'plot' uses the plot area origin, 'chart' uses the full chart origin. Defaults to 'plot'. */
+    scope?: 'plot' | 'chart';
 }
 export interface ShapeDataWithLabels {
     svgLabels: LabelData[];

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

@@ -256,7 +256,7 @@ export const ChartInner = (props) => {
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
-        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle)),
+        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { htmlLayout: htmlLayout })),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
@@ -285,7 +285,7 @@ export const ChartInner = (props) => {
             // when starting to select an area, the tooltip remains in the position where the selection began
             onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
-                '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
+                '--g-html-layout-plot-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
         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;

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

@@ -10,6 +10,6 @@
 .gcharts-chart__html-layer {
   display: contents;
 }
-.gcharts-chart__html-layer-item {
-  transform: var(--g-html-layout-transform);
+.gcharts-chart__html-layer-item_plot {
+  transform: var(--g-html-layout-plot-transform);
 }

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

@@ -3,9 +3,9 @@ import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../core/constants';
 import { getLegendComponents, getPreparedLegend } from '../../core/series/prepare-legend';
 import { getPreparedOptions } from '../../core/series/prepare-options';
+import { getActiveLegendItems, getAllLegendItems } from '../../core/series/utils';
 import { getChartDimensions, getEffectiveXRange, getSortedSeriesData, getYAxisWidth, getZoomedSeriesData, isAxisRelatedSeries, } from '../../core/utils';
 import { createScales, getAxes, getPreparedSeries, getShapes, getSplit, getVisibleSeries, useZoom, } from '../../hooks';
-import { getActiveLegendItems, getAllLegendItems } from '../../hooks/useSeries/utils';
 import { getNormalizedXAxis, getNormalizedYAxis, getPreparedChart, getPreparedTitle, recalculateYAxisLabelsWidth, } from './utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils/common';
 const CLIP_PATH_BY_SERIES_TYPE = {
@@ -53,6 +53,7 @@ export function useChartInnerProps(props) {
             const preparedTitle = await getPreparedTitle({
                 title: data.title,
                 chartWidth: width,
+                chartHeight: height,
                 chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
             });
             const preparedChart = getPreparedChart({
@@ -203,7 +204,6 @@ export function useChartInnerProps(props) {
                 getYAxisWidth,
                 legendConfig,
             });
-            //end
             const newStateValue = {
                 allPreparedSeries,
                 boundsHeight,

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

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

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

@@ -1,26 +1,64 @@
-import get from 'lodash/get';
-import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
+import { calculateNumericProperty, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const DEFAULT_TITLE_MARGIN = 10;
-export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+const DEFAULT_TITLE_MAX_HEIGHT = '50%';
+export const getPreparedTitle = async ({ title, chartWidth, chartHeight, chartMargin, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const titleText = title === null || title === void 0 ? void 0 : title.text;
+    if (!titleText) {
+        return undefined;
+    }
     const chartMarginTop = (_a = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.top) !== null && _a !== void 0 ? _a : 0;
     const chartMarginLeft = (_b = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.left) !== null && _b !== void 0 ? _b : 0;
     const chartMarginRight = (_c = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.right) !== null && _c !== void 0 ? _c : 0;
-    const titleText = get(title, 'text');
     const titleStyle = {
         fontSize: (_e = (_d = title === null || title === void 0 ? void 0 : title.style) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : DEFAULT_TITLE_FONT_SIZE,
         fontWeight: (_g = (_f = title === null || title === void 0 ? void 0 : title.style) === null || _f === void 0 ? void 0 : _f.fontWeight) !== null && _g !== void 0 ? _g : 'var(--g-text-subheader-font-weight)',
         fontColor: (_j = (_h = title === null || title === void 0 ? void 0 : title.style) === null || _h === void 0 ? void 0 : _h.fontColor) !== null && _j !== void 0 ? _j : 'var(--g-color-text-primary)',
     };
-    if (!titleText) {
-        return undefined;
+    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
+    const titleMargin = (_k = title === null || title === void 0 ? void 0 : title.margin) !== null && _k !== void 0 ? _k : DEFAULT_TITLE_MARGIN;
+    if (title === null || title === void 0 ? void 0 : title.html) {
+        const titleSize = await getLabelsSize({
+            labels: [titleText],
+            style: Object.assign(Object.assign({}, titleStyle), { maxWidth: `${usableWidth}px` }),
+            html: true,
+        });
+        const resolvedMaxHeight = calculateNumericProperty({
+            value: (_l = title.maxHeight) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MAX_HEIGHT,
+            base: chartHeight,
+        });
+        const titleHeight = resolvedMaxHeight === undefined
+            ? titleSize.maxHeight
+            : Math.min(titleSize.maxHeight, resolvedMaxHeight);
+        const qa = title === null || title === void 0 ? void 0 : title.qa;
+        const qaAttr = qa ? ` data-qa="${qa}"` : '';
+        const maxHeightStyle = resolvedMaxHeight === undefined ? '' : ` max-height: ${resolvedMaxHeight}px;`;
+        const htmlContent = `<div${qaAttr} style="max-width: ${usableWidth}px; overflow: hidden;${maxHeightStyle}">${titleText}</div>`;
+        const titleWidth = Math.min(titleSize.maxWidth, usableWidth);
+        return {
+            text: titleText,
+            style: titleStyle,
+            height: titleHeight,
+            margin: titleMargin,
+            qa,
+            html: true,
+            htmlElements: [
+                {
+                    x: chartMarginLeft + (usableWidth - titleWidth) / 2,
+                    y: chartMarginTop,
+                    content: htmlContent,
+                    size: { width: titleWidth, height: titleHeight },
+                    style: titleStyle,
+                    scope: 'chart',
+                },
+            ],
+        };
     }
+    const xCenter = chartMarginLeft + usableWidth / 2;
     const getTitleTextSize = getTextSizeFn({ style: titleStyle });
-    const maxRowCount = (_k = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _k !== void 0 ? _k : 1;
+    const maxRowCount = (_m = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _m !== void 0 ? _m : 1;
     const contentRows = [];
-    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
-    const xCenter = chartMarginLeft + usableWidth / 2;
     if (maxRowCount > 1) {
         let titleTextRows = await wrapText({
             text: titleText,
@@ -33,7 +71,7 @@ export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
                 acc.push(row);
             }
             else {
-                acc[maxRowCount - 1].text += row.text;
+                acc[maxRowCount - 1] = Object.assign(Object.assign({}, acc[maxRowCount - 1]), { text: acc[maxRowCount - 1].text + row.text });
             }
             return acc;
         }, []);
@@ -71,12 +109,11 @@ export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
         });
     }
     const totalTextHeight = contentRows.reduce((acc, row) => acc + row.size.height, 0);
-    const titleHeight = totalTextHeight;
     return {
         text: titleText,
         style: titleStyle,
-        height: titleHeight,
-        margin: (_l = title === null || title === void 0 ? void 0 : title.margin) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MARGIN,
+        height: totalTextHeight,
+        margin: titleMargin,
         qa: title === null || title === void 0 ? void 0 : title.qa,
         contentRows,
     };

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

@@ -24,11 +24,16 @@ const getLegendPosition = (args) => {
     const { offsetLeft, offsetTop, contentWidth, width } = args;
     return { top: offsetTop, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
-const appendPaginator = (args) => {
+async function appendPaginator(args) {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
     const paginationLine = container.append('g').attr('class', b('pagination'));
     const maxPage = pages.length;
-    let computedWidth = 0;
+    const paginationCounterText = `${pageIndex + 1}/${maxPage}`;
+    const getTextSize = getTextSizeFn({ style: legend.itemStyle });
+    const [arrowIcon, counter] = await Promise.all([
+        getTextSize('▲'),
+        getTextSize(paginationCounterText),
+    ]);
     paginationLine
         .append('text')
         .text('▲')
@@ -36,9 +41,6 @@ const appendPaginator = (args) => {
         return b('pagination-arrow', { inactive: pageIndex === 0 });
     })
         .style('font-size', legend.itemStyle.fontSize)
-        .each(function () {
-        computedWidth += this.getComputedTextLength();
-    })
         .on('click', function () {
         if (pageIndex - 1 >= 0) {
             onArrowClick(pageIndex - 1);
@@ -46,20 +48,17 @@ const appendPaginator = (args) => {
     });
     paginationLine
         .append('text')
-        .text(`${pageIndex + 1}/${maxPage}`)
+        .text(paginationCounterText)
         .attr('class', b('pagination-counter'))
-        .attr('x', computedWidth)
-        .style('font-size', legend.itemStyle.fontSize)
-        .each(function () {
-        computedWidth += this.getComputedTextLength();
-    });
+        .attr('x', arrowIcon.width)
+        .style('font-size', legend.itemStyle.fontSize);
     paginationLine
         .append('text')
         .text('▼')
         .attr('class', function () {
         return b('pagination-arrow', { inactive: pageIndex === maxPage - 1 });
     })
-        .attr('x', computedWidth)
+        .attr('x', arrowIcon.width + counter.width)
         .style('font-size', legend.itemStyle.fontSize)
         .on('click', function () {
         if (pageIndex + 1 < maxPage) {
@@ -67,7 +66,7 @@ const appendPaginator = (args) => {
         }
     });
     paginationLine.attr('transform', transform);
-};
+}
 function renderLegendSymbol(args) {
     const { selection, legend, legendLineHeight } = args;
     const line = selection.data();
@@ -277,7 +276,7 @@ export const Legend = (props) => {
                 });
                 if (config.pagination) {
                     const transform = `translate(${[0, legend.height - legend.lineHeight / 2].join(',')})`;
-                    appendPaginator({
+                    await appendPaginator({
                         container: svgElement,
                         pageIndex: pageIndex,
                         legend,

package/dist/esm/components/Title/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { PreparedTitle } from '../../hooks';
-type Props = PreparedTitle;
-export declare const Title: (props: Props) => React.JSX.Element;
+type Props = PreparedTitle & {
+    htmlLayout?: HTMLElement | null;
+};
+export declare const Title: (props: Props) => React.JSX.Element | null;
 export {};

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

@@ -1,9 +1,16 @@
 import React from 'react';
+import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 export const Title = (props) => {
-    const { style, qa, contentRows } = props;
+    const { style, qa, contentRows, html, htmlElements, htmlLayout } = props;
+    if (html) {
+        if (!htmlLayout || !htmlElements) {
+            return null;
+        }
+        return React.createElement(HtmlLayer, { htmlLayout: htmlLayout, preparedData: { htmlElements } });
+    }
     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,
-        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
+        }, "data-qa": qa }, contentRows === null || contentRows === void 0 ? void 0 : contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

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

@@ -13,7 +13,28 @@ export const Tooltip = (props) => {
         xAxis,
         yAxis,
     });
-    const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
+    const containerRectRef = React.useRef({ left: 0, top: 0 });
+    React.useEffect(() => {
+        if (!svgContainer)
+            return undefined;
+        const updateRect = (e) => {
+            // Skip synthetic events (e.g. the CustomEvent('scroll') dispatched by the
+            // sibling useEffect below to reposition the Popup). Only native browser
+            // scroll events have isTrusted === true, so those still update the rect.
+            if (e && !e.isTrusted)
+                return;
+            containerRectRef.current = svgContainer.getBoundingClientRect();
+        };
+        updateRect();
+        const resizeObserver = new ResizeObserver(() => updateRect());
+        resizeObserver.observe(svgContainer);
+        window.addEventListener('scroll', updateRect, { passive: true, capture: true });
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('scroll', updateRect, { capture: true });
+        };
+    }, [svgContainer]);
+    const containerRect = containerRectRef.current;
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
     const { anchor } = useVirtualElement({ left, top });

package/dist/esm/core/axes/x-axis.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
-import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, PLOT_LINE_HOVER_THRESHOLD, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../constants';
 import { createXScale } from '../scales/x-scale';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
 import { getXAxisTickValues } from '../utils/axis/x-axis';
 import { getPreparedRangeSlider } from './range-slider';
 import { prepareAxisPlotLabel } from './utils';

package/dist/esm/core/axes/y-axis.js

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
-import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../utils';
 import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, PLOT_LINE_HOVER_THRESHOLD, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, yAxisTitleDefaults, } from '../constants';
 import { createYScale } from '../scales/y-scale';
+import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../utils';
 import { prepareAxisPlotLabel } from './utils';
 export const getYAxisLabelMaxWidth = async (args) => {
     const { axis, scale, seriesData } = args;

package/dist/esm/core/scales/utils.d.ts

@@ -1,7 +1,7 @@
-import type { AxisDirection } from '../utils';
 import type { ChartAxis, ChartSeries } from '../../types';
 import type { PreparedAxis, PreparedYAxis } from '../axes/types';
 import type { PreparedSeries } from '../series';
+import type { AxisDirection } from '../utils';
 type OptionalNumber = number | undefined;
 export declare function getMinMaxPropsOrState(args: {
     axis: PreparedAxis | ChartAxis;

package/dist/esm/core/scales/utils.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { getDataCategoryValue, isSeriesWithCategoryValues } from '../utils';
 import { SERIES_TYPE } from '../constants';
+import { getDataCategoryValue, isSeriesWithCategoryValues } from '../utils';
 const MARKER_SERIES_TYPES = [SERIES_TYPE.Area, SERIES_TYPE.Line, SERIES_TYPE.Scatter];
 function getNormilizedMinMax(args) {
     const { maxValues, minValues } = args;