@gravity-ui/charts 1.7.1 → 1.9.0

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -6,7 +6,7 @@ import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getHorisontalSvgTextHeight, getLabelsSize, } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
 import { getYAxisWidth } from '../useChartDimensions/utils';
-export const getPreparedLegend = (args) => {
+export function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
     const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
@@ -69,40 +69,65 @@ export const getPreparedLegend = (args) => {
         width: legendWidth,
         ticks,
         colorScale,
+        html: get(legend, 'html', false),
     };
-};
-const getFlattenLegendItems = (series) => {
+}
+function getFlattenLegendItems(series, preparedLegend) {
     return series.reduce((acc, s) => {
         const legendEnabled = get(s, 'legend.enabled', true);
         if (legendEnabled) {
-            acc.push(Object.assign(Object.assign({}, s), { symbol: s.legend.symbol }));
+            acc.push(Object.assign(Object.assign({}, s), { height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
         }
         return acc;
     }, []);
-};
-const getGroupedLegendItems = (args) => {
+}
+function getGroupedLegendItems(args) {
     const { maxLegendWidth, items, preparedLegend } = args;
     const result = [[]];
+    const bodySelection = select(document.body);
     let textWidthsInLine = [0];
     let lineIndex = 0;
     items.forEach((item) => {
-        select(document.body)
-            .append('text')
-            .text(item.name)
+        const itemSelection = preparedLegend.html
+            ? bodySelection
+                .append('div')
+                .html(item.name)
+                .style('position', 'absolute')
+                .style('display', 'inline-block')
+                .style('white-space', 'nowrap')
+            : bodySelection.append('text').text(item.name).style('white-space', 'nowrap');
+        itemSelection
             .style('font-size', preparedLegend.itemStyle.fontSize)
             .each(function () {
             const resultItem = clone(item);
-            const textWidth = this.getBoundingClientRect().width;
-            resultItem.textWidth = textWidth;
+            const { height, width: textWidth } = this.getBoundingClientRect();
+            resultItem.height = height;
+            if (textWidth >
+                maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding) {
+                resultItem.overflowed = true;
+                resultItem.textWidth =
+                    maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+            }
+            else {
+                resultItem.textWidth = textWidth;
+            }
             textWidthsInLine.push(textWidth);
             const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
+            if (!result[lineIndex]) {
+                result[lineIndex] = [];
+            }
             result[lineIndex].push(resultItem);
             const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
                 return acc + symbol.width + symbol.padding;
             }, 0);
             const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
-            const isOverfilled = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
-            if (isOverfilled) {
+            const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;
+            const isCurrentLineOverMaxWidth = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
+            if (isOverflowedAsOnlyItemInLine) {
+                lineIndex += 1;
+                textWidthsInLine = [];
+            }
+            else if (isCurrentLineOverMaxWidth) {
                 result[lineIndex].pop();
                 lineIndex += 1;
                 textWidthsInLine = [textWidth];
@@ -114,12 +139,36 @@ const getGroupedLegendItems = (args) => {
             .remove();
     });
     return result;
-};
-export const getLegendComponents = (args) => {
+}
+function getPagination(args) {
+    const { items, maxLegendHeight, paginatorHeight } = args;
+    const pages = [];
+    let currentPageIndex = 0;
+    let currentHeight = 0;
+    items.forEach((item, i) => {
+        if (!pages[currentPageIndex]) {
+            pages[currentPageIndex] = { start: i, end: i };
+        }
+        const legendLineHeight = Math.max(...item.map((item) => item.height));
+        currentHeight += legendLineHeight;
+        if (currentHeight > maxLegendHeight - paginatorHeight) {
+            pages[currentPageIndex].end = i;
+            currentPageIndex += 1;
+            currentHeight = legendLineHeight;
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#end
+            pages[currentPageIndex] = { start: i, end: i + (i === items.length - 1 ? 1 : 0) };
+        }
+        else if (i === items.length - 1) {
+            pages[currentPageIndex].end = i + 1;
+        }
+    });
+    return { pages };
+}
+export function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
     const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
     const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
-    const flattenLegendItems = getFlattenLegendItems(series);
+    const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
         maxLegendWidth,
         items: flattenLegendItems,
@@ -127,13 +176,19 @@ export const getLegendComponents = (args) => {
     });
     let pagination;
     if (preparedLegend.type === 'discrete') {
-        let legendHeight = preparedLegend.lineHeight * items.length;
+        const lineHeights = items.reduce((acc, item) => {
+            acc.push(Math.max(...item.map((item) => item.height)));
+            return acc;
+        }, []);
+        let legendHeight = lineHeights.reduce((acc, height) => acc + height, 0);
         if (maxLegendHeight < legendHeight) {
-            // extra line for paginator
-            const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
-            const maxPage = Math.ceil(items.length / limit);
-            pagination = { limit, maxPage };
-            legendHeight = preparedLegend.lineHeight * (limit + 1);
+            const lines = Math.floor(maxLegendHeight / preparedLegend.lineHeight);
+            legendHeight = preparedLegend.lineHeight * lines;
+            pagination = getPagination({
+                items,
+                maxLegendHeight: legendHeight,
+                paginatorHeight: preparedLegend.lineHeight,
+            });
         }
         preparedLegend.height = legendHeight;
     }
@@ -143,4 +198,4 @@ export const getLegendComponents = (args) => {
         top,
     };
     return { legendConfig: { offset, pagination }, legendItems: items };
-};
+}

package/dist/cjs/hooks/useSeries/prepare-line.d.ts

@@ -1,10 +1,9 @@
 import type { ScaleOrdinal } from 'd3';
-import { DashStyle } from '../../constants';
 import type { ChartSeriesOptions, LineSeries } from '../../types';
 import type { PreparedLegend, PreparedLineSeries } from './types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export declare const DEFAULT_LINE_WIDTH = 1;
-export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
+export declare const DEFAULT_DASH_STYLE: "Solid";
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;

package/dist/cjs/hooks/useSeries/prepare-line.js

@@ -1,14 +1,14 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_STYLE, DashStyle, LineCap } from '../../constants';
+import { DASH_STYLE, DEFAULT_DATALABELS_STYLE, LineCap } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export const DEFAULT_LINE_WIDTH = 1;
-export const DEFAULT_DASH_STYLE = DashStyle.Solid;
+export const DEFAULT_DASH_STYLE = DASH_STYLE.Solid;
 export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });
 function prepareLinecap(dashStyle, series, seriesOptions) {
-    const defaultLineCap = dashStyle === DashStyle.Solid ? LineCap.Round : LineCap.None;
+    const defaultLineCap = dashStyle === DASH_STYLE.Solid ? LineCap.Round : LineCap.None;
     const lineCapFromSeriesOptions = get(seriesOptions, 'line.linecap', defaultLineCap);
     return get(series, 'linecap', lineCapFromSeriesOptions);
 }

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -39,11 +39,13 @@ export type OnLegendItemClick = (data: {
 }) => void;
 export type LegendItem = {
     color: string;
+    height: number;
     name: string;
     symbol: PreparedLegendSymbol;
     textWidth: number;
-    visible?: boolean;
     dashStyle?: DashStyle;
+    overflowed?: boolean;
+    visible?: boolean;
 };
 export type LegendConfig = {
     offset: {
@@ -51,8 +53,10 @@ export type LegendConfig = {
         top: number;
     };
     pagination?: {
-        limit: number;
-        maxPage: number;
+        pages: {
+            start: number;
+            end: number;
+        }[];
     };
 };
 export type PreparedHaloOptions = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
-import { DashStyle } from '../../../constants';
+import { DASH_STYLE } from '../../../constants';
 import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColor, } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 export { prepareWaterfallData } from './prepare-data';
@@ -77,7 +77,7 @@ export const WaterfallSeriesShapes = (args) => {
             return line(points);
         })
             .attr('stroke-width', 1)
-            .attr('stroke-dasharray', () => getLineDashArray(DashStyle.Dash, 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;

package/dist/cjs/types/chart/axis.d.ts

@@ -1,4 +1,4 @@
-import type { DashStyle } from 'src/constants';
+import type { DashStyle } from '../../constants';
 import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
 export type ChartAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
@@ -7,14 +7,12 @@ export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
     /** The label's pixel distance from the perimeter of the plot area.
-     *
-     * @default: 10
+     * @default 10
      */
     margin?: number;
     /** The pixel padding for axis labels, to ensure white space between them.
-     *
-     * @defaults: 5
-     * */
+     * @default 5
+     */
     padding?: number;
     dateFormat?: string;
     numberFormat?: FormatNumberOptions;
@@ -24,13 +22,14 @@ export interface ChartAxisLabels {
      * As the chart gets narrower, it will start rotating the labels -45 degrees. */
     autoRotation?: boolean;
     /** Rotation of the labels in degrees.
-     *
-     * @default: 0
+     * @default 0
      */
     rotation?: number;
 }
 export interface ChartAxis {
     categories?: string[];
+    /** Configure a crosshair that follows either the mouse pointer or the hovered point. */
+    crosshair?: AxisCrosshair;
     timestamps?: number[];
     type?: ChartAxisType;
     /** The axis labels show the number or category for each tick. */
@@ -42,14 +41,14 @@ export interface ChartAxis {
         /** CSS styles for the title */
         style?: Partial<BaseTextStyle>;
         /** The pixel distance between the axis labels or line and the title.
-         *
-         * Defaults to 4 for horizontal axes, 8 for vertical.
-         * */
+         * @default 4 for horizontal axes, 8 for vertical
+         */
         margin?: number;
         /** Alignment of the title. */
         align?: ChartAxisTitleAlignment;
         /** Allows limiting of the contents of a title block to the specified number of lines.
-         *  Defaults to 1. */
+         * @default 1
+         */
         maxRowCount?: number;
     };
     /** The minimum value of the axis. If undefined the min value is automatically calculate. */
@@ -57,9 +56,8 @@ export interface ChartAxis {
     /** The grid lines settings. */
     grid?: {
         /** Enable or disable the grid lines.
-         *
-         * Defaults to true.
-         * */
+         * @default true
+         */
         enabled?: boolean;
     };
     ticks?: {
@@ -69,9 +67,8 @@ export interface ChartAxis {
     };
     /** Padding of the max value relative to the length of the axis.
      * A padding of 0.05 will make a 100px axis 5px longer.
-     *
-     * Defaults to 0.05 for Y axis and to 0.01 for X axis.
-     * */
+     * @default 0.05 for Y axis, 0.01 for X axis
+     */
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
@@ -90,7 +87,6 @@ export interface AxisPlot {
     color?: string;
     /**
      * Individual opacity for the line.
-     *
      * @default 1
      * */
     opacity?: number;
@@ -101,12 +97,11 @@ export interface AxisPlotLine extends AxisPlot {
     /** The color of the plot line (hex, rgba). */
     color?: string;
     /** Pixel width of the plot line.
-     *
      * @default 1
      * */
     width?: number;
     /** Option for line stroke style. */
-    dashStyle?: `${DashStyle}`;
+    dashStyle?: DashStyle;
 }
 export interface AxisPlotBand extends AxisPlot {
     /**
@@ -124,6 +119,16 @@ export interface AxisPlotBand extends AxisPlot {
      */
     to: number | string;
 }
+export interface AxisCrosshair extends Omit<AxisPlotLine, 'value'> {
+    /** Whether the crosshair should snap to the point or follow the pointer independent of points.
+     * @default true
+     */
+    snap?: boolean;
+    /** Enable or disable the axis crosshair.
+     * @default false
+     */
+    enabled?: boolean;
+}
 export interface ChartYAxis extends ChartAxis {
     /** Axis location.
      * Possible values - 'left' and 'right'.

package/dist/cjs/types/chart/legend.d.ts

@@ -53,6 +53,12 @@ export interface ChartLegend {
         domain?: number[];
     };
     width?: number;
+    /**
+     * Allows to use any html-tags to display the content.
+     *
+     * @default false
+     * */
+    html?: boolean;
 }
 export interface BaseLegendSymbol {
     /**

package/dist/cjs/types/chart/line.d.ts

@@ -47,7 +47,7 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
     /** Options for the point markers of line series */
     marker?: PointMarkerOptions;
     /** Option for line stroke style */
-    dashStyle?: `${DashStyle}`;
+    dashStyle?: DashStyle;
     /** Option for line cap style */
     linecap?: `${LineCap}`;
     /** Individual opacity for the line. */

package/dist/cjs/types/chart/series.d.ts

@@ -183,7 +183,7 @@ export interface ChartSeriesOptions {
          *
          * @default 'Solid'
          * */
-        dashStyle?: `${DashStyle}`;
+        dashStyle?: DashStyle;
         /** Options for line cap style
          *
          * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'

package/dist/cjs/utils/chart/axis.d.ts

@@ -35,6 +35,7 @@ interface GetBandsPositionArgs {
     axisScale: AxisScale<AxisDomain>;
     axis: AxisDirection;
 }
+export declare const getAxisPlotsPosition: (axis: PreparedAxis, split: PreparedSplit, width?: number) => string;
 export declare function getBandsPosition(args: GetBandsPositionArgs): {
     from: number;
     to: number;

package/dist/cjs/utils/chart/axis.js

@@ -70,6 +70,14 @@ export function getAxisTitleRows(args) {
         return acc;
     }, []);
 }
+export const getAxisPlotsPosition = (axis, split, width = 0) => {
+    var _a;
+    const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+    if (axis.position === 'left') {
+        return `translate(0, ${top}px)`;
+    }
+    return `translate(${width}px, ${top}px)`;
+};
 export function getBandsPosition(args) {
     var _a, _b, _c;
     const { band, axisScale } = args;

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

@@ -50,11 +50,11 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const plotClassName = b('plot-x');
+        const plotDataAttr = 'data-plot-x';
         let plotContainer = null;
         if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
             plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (!axis.visible) {
             return;
@@ -116,12 +116,13 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         // add plot bands
         if (plotContainer && axis.plotBands.length > 0) {
-            const plotBandClassName = b('plot-x-band');
+            const plotBandDataAttr = 'plot-x-band';
             const plotBandsSelection = plotContainer
-                .selectAll(`.${plotBandClassName}-x`)
+                .selectAll(`[${plotBandDataAttr}]`)
                 .data(axis.plotBands)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
+                .attr(plotDataAttr, 1)
+                .attr(plotBandDataAttr, 1);
             plotBandsSelection
                 .append('rect')
                 .attr('x', (band) => {
@@ -153,12 +154,13 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         // add plot lines
         if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plot-x-line');
+            const plotLineDataAttr = 'plot-x-line';
             const plotLinesSelection = plotContainer
-                .selectAll(`.${plotLineClassName}`)
+                .selectAll(`[${plotLineDataAttr}]`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotLineClassName}`);
+                .attr(plotDataAttr, 1)
+                .attr(plotLineDataAttr, 1);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
@@ -97,39 +97,17 @@ export const AxisY = (props) => {
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotContainer = null;
-        const plotClassName = b('plot-y');
+        const plotDataAttr = 'data-plot-y';
         if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
             plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-        const getAxisPosition = (axis) => {
-            var _a;
-            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (axis.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        };
-        const plotLines = axes.reduce((acc, axis) => {
-            if (axis.plotLines.length) {
-                acc.push(...axis.plotLines.map((plotLine) => {
-                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
-                }));
-            }
-            return acc;
-        }, []);
-        const plotBands = axes.reduce((acc, axis) => {
-            if (axis.plotBands.length) {
-                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
-            }
-            return acc;
-        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => getAxisPosition(d));
+            .style('transform', (d) => getAxisPlotsPosition(d, split, width));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
@@ -197,13 +175,14 @@ export const AxisY = (props) => {
                     .remove();
             }
             if (plotContainer && d.plotBands.length > 0) {
-                const plotBandClassName = b('plot-y-band');
+                const plotBandDataAttr = `data-plot-y-band-${index}`;
                 const plotBandsSelection = plotContainer
-                    .selectAll(`.${plotBandClassName}`)
-                    .data(plotBands)
+                    .selectAll(`[${plotBandDataAttr}]`)
+                    .data(d.plotBands)
                     .join('g')
-                    .attr('class', `${plotClassName} ${plotBandClassName}`)
-                    .style('transform', (plotBand) => plotBand.transform);
+                    .attr(plotDataAttr, 1)
+                    .attr(plotBandDataAttr, 1)
+                    .style('transform', getAxisPlotsPosition(d, split));
                 plotBandsSelection
                     .append('rect')
                     .attr('x', 0)
@@ -234,13 +213,14 @@ export const AxisY = (props) => {
                 });
             }
             if (plotContainer && d.plotLines.length > 0) {
-                const plotLineClassName = b('plot-y-line');
+                const plotLineDataAttr = `data-plot-y-line-${index}`;
                 const plotLinesSelection = plotContainer
-                    .selectAll(`.${plotLineClassName}`)
-                    .data(plotLines)
+                    .selectAll(`[${plotLineDataAttr}]`)
+                    .data(d.plotLines)
                     .join('g')
-                    .attr('class', `${plotClassName} ${plotLineClassName}`)
-                    .style('transform', (plotLine) => plotLine.transform);
+                    .attr(plotDataAttr, 1)
+                    .attr(plotLineDataAttr, 1)
+                    .style('transform', getAxisPlotsPosition(d, split));
                 plotLinesSelection
                     .append('path')
                     .attr('d', (plotLine) => {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
@@ -39,6 +40,19 @@ export const ChartInner = (props) => {
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
+    useCrosshair({
+        split: preparedSplit,
+        plotElement: plotRef.current,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        width: boundsWidth,
+        height: boundsHeight,
+        xAxis,
+        yAxes: yAxis,
+        yScale,
+        xScale,
+        dispatcher,
+    });
     React.useEffect(() => {
         if (clickHandler) {
             dispatcher.on(EventType.CLICK_CHART, clickHandler);
@@ -71,7 +85,7 @@ export const ChartInner = (props) => {
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -20,8 +20,10 @@ export declare function useChartInnerProps(props: Props): {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: import("../../hooks").LegendItem[][];

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

@@ -56,9 +56,12 @@ export function useChartInnerProps(props) {
         htmlLayout,
     });
     const boundsOffsetTop = chart.margin.top;
-    // We need to calculate the width of each axis because the first axis can be hidden
+    // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
         yAxis.reduce((acc, axis) => {
+            if (axis.position !== 'left') {
+                return acc;
+            }
             const axisWidth = getYAxisWidth(axis);
             if (acc < axisWidth) {
                 acc = axisWidth;

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

@@ -7,6 +7,7 @@ type Props = {
     legend: PreparedLegend;
     items: LegendItem[][];
     config: LegendConfig;
+    htmlLayout: HTMLElement | null;
     onItemClick: OnLegendItemClick;
     onUpdate?: () => void;
 };