@gravity-ui/charts 1.7.1 → 1.9.0

package/dist/esm/hooks/useChartOptions/types.d.ts

@@ -1,5 +1,5 @@
-import type { DashStyle } from 'src/constants';
-import type { AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
+import type { DashStyle } from '../../constants';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -12,6 +12,7 @@ export type PreparedChart = {
     margin: ChartMargin;
 };
 export type PreparedAxisPlotBand = Required<AxisPlotBand>;
+export type PreparedAxisCrosshair = Required<AxisCrosshair>;
 export type PreparedAxisPlotLine = {
     value: number;
     color: string;
@@ -44,6 +45,7 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'pl
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
     plotBands: PreparedAxisPlotBand[];
+    crosshair: PreparedAxisCrosshair;
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DashStyle, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
@@ -106,7 +106,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             value: get(d, 'value', 0),
             color: get(d, 'color', 'var(--g-color-base-brand)'),
             width: get(d, 'width', 1),
-            dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+            dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
@@ -117,6 +117,15 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             to: get(d, 'to', 0),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
+        crosshair: {
+            enabled: get(xAxis, 'crosshair.enabled', axisCrosshairDefaults.enabled),
+            color: get(xAxis, 'crosshair.color', axisCrosshairDefaults.color),
+            layerPlacement: get(xAxis, 'crosshair.layerPlacement', axisCrosshairDefaults.layerPlacement),
+            snap: get(xAxis, 'crosshair.snap', axisCrosshairDefaults.snap),
+            dashStyle: get(xAxis, 'crosshair.dashStyle', axisCrosshairDefaults.dashStyle),
+            width: get(xAxis, 'crosshair.width', axisCrosshairDefaults.width),
+            opacity: get(xAxis, 'crosshair.opacity', axisCrosshairDefaults.opacity),
+        },
         visible: get(xAxis, 'visible', true),
     };
     const { height, rotation } = getLabelSettings({

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, DashStyle, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
@@ -50,6 +50,7 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
         return [];
     }
     return axisItems.map((axisItem) => {
+        var _a;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -105,7 +106,8 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
             min: getAxisMin(axisItem, series),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
-                enabled: get(axisItem, 'grid.enabled', firstPlotAxis),
+                enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
+                    (!firstPlotAxis && !((_a = axisByPlot[plotIndex][0].visible) !== null && _a !== void 0 ? _a : true))),
             },
             ticks: {
                 pixelInterval: get(axisItem, 'ticks.pixelInterval'),
@@ -116,7 +118,7 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 value: get(d, 'value', 0),
                 color: get(d, 'color', 'var(--g-color-base-brand)'),
                 width: get(d, 'width', 1),
-                dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+                dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
             })),
@@ -127,6 +129,15 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 to: get(d, 'to', 0),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
             })),
+            crosshair: {
+                enabled: get(axisItem, 'crosshair.enabled', axisCrosshairDefaults.enabled),
+                color: get(axisItem, 'crosshair.color', axisCrosshairDefaults.color),
+                layerPlacement: get(axisItem, 'crosshair.layerPlacement', axisCrosshairDefaults.layerPlacement),
+                snap: get(axisItem, 'crosshair.snap', axisCrosshairDefaults.snap),
+                dashStyle: get(axisItem, 'crosshair.dashStyle', axisCrosshairDefaults.dashStyle),
+                width: get(axisItem, 'crosshair.width', axisCrosshairDefaults.width),
+                opacity: get(axisItem, 'crosshair.opacity', axisCrosshairDefaults.opacity),
+            },
             visible: get(axisItem, 'visible', true),
         };
         if (labelsEnabled) {

package/dist/esm/hooks/useCrosshair/index.d.ts

@@ -0,0 +1,17 @@
+import type { Dispatch } from 'd3';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+type Props = {
+    xAxis: PreparedAxis;
+    yAxes: PreparedAxis[];
+    width: number;
+    height: number;
+    xScale?: ChartScale;
+    yScale?: ChartScale[];
+    split: PreparedSplit;
+    plotElement: SVGGElement | null;
+    dispatcher: Dispatch<object>;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+};
+export declare const useCrosshair: (props: Props) => void;
+export {};

package/dist/esm/hooks/useCrosshair/index.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { line, select } from 'd3';
+import { getAxisPlotsPosition, getLineDashArray } from '../../utils';
+import { useCrosshairHover } from './useCrosshairHover';
+export const useCrosshair = (props) => {
+    var _a, _b;
+    const { xScale, plotElement, yScale, dispatcher, xAxis, yAxes, split, width, height: totalHeight, boundsOffsetTop, boundsOffsetLeft, } = props;
+    const crosshairEnabled = xAxis.crosshair.enabled || yAxes.some((axis) => axis.crosshair.enabled);
+    const { hovered, pointerPosition } = useCrosshairHover({ dispatcher, enabled: crosshairEnabled });
+    const pointerXPos = (_a = pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) !== null && _a !== void 0 ? _a : 0;
+    const pointerYPos = (_b = pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) !== null && _b !== void 0 ? _b : 0;
+    React.useEffect(() => {
+        if (!plotElement || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length) || !crosshairEnabled) {
+            return;
+        }
+        const plotCrosshairDataAttr = 'data-crosshair';
+        const svgElement = select(plotElement);
+        svgElement.selectAll(`[${plotCrosshairDataAttr}]`).remove();
+        const lineGenerator = line();
+        if (xAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
+            const xAxisScale = xScale;
+            const crosshairDataAttr = 'data-crosshair-x-line';
+            const crosshairSelection = svgElement
+                .selectAll(`[${crosshairDataAttr}]`)
+                .data(hovered)
+                .join('g')
+                .attr(plotCrosshairDataAttr, 1)
+                .attr(crosshairDataAttr, 1);
+            crosshairSelection
+                .append('path')
+                .attr('d', (hoveredElement) => {
+                var _a, _b, _c;
+                let lineValue = 0;
+                if (xAxis.crosshair.snap) {
+                    const offset = ((_b = (_a = xAxisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(xAxisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                    if (typeof hoveredElement.data === 'object' && 'x' in hoveredElement.data) {
+                        lineValue = Number(xAxisScale((_c = hoveredElement.data.x) !== null && _c !== void 0 ? _c : 0)) + offset;
+                    }
+                }
+                else {
+                    lineValue = pointerXPos - boundsOffsetLeft;
+                }
+                const points = [
+                    [lineValue, 0],
+                    [lineValue, totalHeight],
+                ];
+                return lineGenerator(points);
+            })
+                .attr('stroke', xAxis.crosshair.color)
+                .attr('stroke-width', xAxis.crosshair.width)
+                .attr('stroke-dasharray', getLineDashArray(xAxis.crosshair.dashStyle, xAxis.crosshair.width))
+                .attr('opacity', xAxis.crosshair.opacity);
+            // set layer placement
+            crosshairSelection.each((_, i, nodes) => {
+                const crossSelection = select(nodes[i]);
+                if (xAxis.crosshair.layerPlacement === 'before') {
+                    crossSelection.lower();
+                }
+                else {
+                    crossSelection.raise();
+                }
+            });
+        }
+        yAxes.forEach((yAxis, index, currentArr) => {
+            const yAxisScale = yScale[index];
+            if (index !== 0 && !yAxis.crosshair.snap && !currentArr[0].crosshair.snap) {
+                return;
+            }
+            if (yAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {
+                const crosshairDataAttr = `data-crosshair-y-line-${index}`;
+                const crosshairSelection = svgElement
+                    .selectAll(`[${crosshairDataAttr}]`)
+                    .data(hovered.filter((node) => {
+                    var _a;
+                    const n = node;
+                    const yAxisIndex = (_a = n.series.yAxis) !== null && _a !== void 0 ? _a : 0;
+                    return yAxis.crosshair.snap
+                        ? yAxisIndex === index && node.closest
+                        : true;
+                }))
+                    .join('g')
+                    .attr(plotCrosshairDataAttr, 1)
+                    .attr(crosshairDataAttr, 1)
+                    .style('transform', yAxis.crosshair.snap
+                    ? getAxisPlotsPosition(yAxis, split)
+                    : 'translate(0, 0)');
+                crosshairSelection
+                    .append('path')
+                    .attr('d', (hoveredElement) => {
+                    var _a, _b, _c;
+                    let lineValue = 0;
+                    if (yAxis.crosshair.snap) {
+                        const offset = ((_b = (_a = yAxisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(yAxisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        if (typeof hoveredElement.data === 'object' &&
+                            'y' in hoveredElement.data) {
+                            lineValue = Number(yAxisScale((_c = hoveredElement.data.y) !== null && _c !== void 0 ? _c : 0)) + offset;
+                        }
+                    }
+                    else {
+                        lineValue = pointerYPos - boundsOffsetTop;
+                    }
+                    const points = [
+                        [0, lineValue],
+                        [width, lineValue],
+                    ];
+                    return lineGenerator(points);
+                })
+                    .attr('stroke', yAxis.crosshair.color)
+                    .attr('stroke-width', yAxis.crosshair.width)
+                    .attr('stroke-dasharray', getLineDashArray(yAxis.crosshair.dashStyle, yAxis.crosshair.width))
+                    .attr('opacity', yAxis.crosshair.opacity);
+                crosshairSelection.each((_, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (yAxis.crosshair.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
+        });
+    }, [
+        plotElement,
+        hovered,
+        crosshairEnabled,
+        xAxis,
+        yAxes,
+        xScale,
+        totalHeight,
+        pointerXPos,
+        boundsOffsetLeft,
+        yScale,
+        split,
+        width,
+        pointerYPos,
+        boundsOffsetTop,
+    ]);
+};

package/dist/esm/hooks/useCrosshair/useCrosshairHover.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from 'd3';
+import type { PointPosition, TooltipDataChunk } from '../../types';
+type Args = {
+    dispatcher: Dispatch<object>;
+    enabled: boolean;
+};
+export declare const useCrosshairHover: ({ dispatcher, enabled }: Args) => {
+    hovered: TooltipDataChunk[] | undefined;
+    pointerPosition: PointPosition | undefined;
+};
+export {};

package/dist/esm/hooks/useCrosshair/useCrosshairHover.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { EventType } from '../../utils';
+export const useCrosshairHover = ({ dispatcher, enabled }) => {
+    const [{ hovered, pointerPosition }, setCrosshairState] = React.useState({});
+    React.useEffect(() => {
+        if (enabled) {
+            dispatcher.on(`${EventType.HOVER_SHAPE}.crosshair`, (nextHovered, nextPointerPosition) => {
+                setCrosshairState({ hovered: nextHovered, pointerPosition: nextPointerPosition });
+            });
+        }
+        return () => {
+            if (enabled) {
+                dispatcher.on(`${EventType.HOVER_SHAPE}.crosshair`, null);
+            }
+        };
+    }, [dispatcher, enabled]);
+    return { hovered, pointerPosition };
+};

package/dist/esm/hooks/useSeries/index.d.ts

@@ -18,8 +18,10 @@ export declare const useSeries: (args: Args) => {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     preparedLegend: import("./types").PreparedLegend;

package/dist/esm/hooks/useSeries/prepare-legend.d.ts

@@ -1,26 +1,28 @@
 import type { ChartData } from '../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
-export declare const getPreparedLegend: (args: {
-    legend: ChartData["legend"];
-    series: ChartData["series"]["data"];
-}) => PreparedLegend;
-export declare const getLegendComponents: (args: {
+export declare function getPreparedLegend(args: {
+    legend: ChartData['legend'];
+    series: ChartData['series']['data'];
+}): PreparedLegend;
+export declare function getLegendComponents(args: {
     chartWidth: number;
     chartHeight: number;
-    chartMargin: PreparedChart["margin"];
+    chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
     preparedYAxis: PreparedAxis[];
-}) => {
+}): {
     legendConfig: {
         offset: {
             left: number;
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: LegendItem[][];

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