@gravity-ui/charts 1.37.1 → 1.38.0

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

@@ -66,7 +66,8 @@ export const ChartInner = (props) => {
     const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        rangeSliderState,
+        updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
@@ -248,7 +249,7 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { 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 })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { 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 })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
+import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries, RangeSliderState, ZoomState } from '../../hooks';
+import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
@@ -8,35 +9,33 @@ type Props = ChartInnerProps & {
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
     preparedChart: PreparedChart;
-    svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
 };
+type LegendState = {
+    legendConfig?: LegendConfig;
+    legendItems: LegendItem[][];
+};
+export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
+    preparedLegend: PreparedLegend | null;
+    preparedChart: PreparedChart;
+    preparedSeries: PreparedSeries[];
+    width: number;
+    height: number;
+}): LegendState;
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: import("../../hooks").PreparedSeries[];
+    allPreparedSeries: PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     isOutsideBounds: (x: number, y: number) => boolean;
-    legendConfig: {
-        offset: {
-            left: number;
-            top: number;
-        };
-        pagination: {
-            pages: {
-                start: number;
-                end: number;
-            }[];
-        } | undefined;
-        maxWidth: number;
-    } | undefined;
-    legendItems: never[] | import("../../hooks").LegendItem[][];
+    legendConfig: LegendConfig | undefined;
+    legendItems: LegendItem[][];
     preparedLegend: PreparedLegend | null;
-    preparedSeries: import("../../hooks").PreparedSeries[];
+    preparedSeries: PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;
@@ -44,13 +43,12 @@ export declare function useChartInnerProps(props: Props): {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
     shapesReady: boolean;
-    svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
-    yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-        type: import("../..").ChartAxisType;
-        labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "html" | "enabled" | "rotation" | "padding">> & {
-            style: import("../..").BaseTextStyle;
+    yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
+        type: import("../../types").ChartAxisType;
+        labels: Omit<import("../../types").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "html" | "enabled" | "rotation" | "padding">> & {
+            style: import("../../types").BaseTextStyle;
             rotation: number;
             height: number;
             width: number;
@@ -62,8 +60,8 @@ export declare function useChartInnerProps(props: Props): {
             width: number;
             text: string;
             margin: number;
-            style: import("../..").BaseTextStyle;
-            align: import("../..").ChartAxisTitleAlignment;
+            style: import("../../types").BaseTextStyle;
+            align: import("../../types").ChartAxisTitleAlignment;
             maxRowCount: number;
             rotation: number;
             maxWidth: number;
@@ -82,7 +80,7 @@ export declare function useChartInnerProps(props: Props): {
         plotIndex: number;
         plotLines: import("../../hooks").PreparedAxisPlotLine[];
         plotBands: import("../../hooks").PreparedAxisPlotBand[];
-        crosshair: Required<import("../..").AxisCrosshair>;
+        crosshair: Required<import("../../types").AxisCrosshair>;
     })[];
     yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
 };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
 import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
@@ -9,17 +10,18 @@ import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
 };
-function getBoundsOffsetTop(args) {
-    const { chartMarginTop, preparedLegend } = args;
+function getBoundsOffsetTop({ chartMarginTop, preparedLegend, legendConfig, }) {
+    var _a;
     return (chartMarginTop +
         ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
-            ? preparedLegend.height + preparedLegend.margin
+            ? ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin
             : 0));
 }
 function getBoundsOffsetLeft(args) {
-    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth } = args;
+    var _a;
+    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth, legendConfig, } = args;
     const legendOffset = (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left'
-        ? preparedLegend.width + preparedLegend.margin
+        ? ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.width) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin
         : 0;
     const leftAxisWidth = yAxis.reduce((acc, axis) => {
         if (axis.position !== 'left') {
@@ -33,9 +35,47 @@ function getBoundsOffsetLeft(args) {
     }, 0);
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
+export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
+    const [legendState, setLegend] = React.useState({
+        legendConfig: undefined,
+        legendItems: [],
+    });
+    const legendStateRunRef = React.useRef(0);
+    const prevLegendStateValue = React.useRef(legendState);
+    const legendStateReady = React.useRef(false);
+    React.useEffect(() => {
+        legendStateRunRef.current++;
+        legendStateReady.current = false;
+        (async function () {
+            const currentRun = legendStateRunRef.current;
+            if (!preparedLegend) {
+                return;
+            }
+            const newStateValue = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            if (legendStateRunRef.current === currentRun) {
+                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
+                    setLegend(newStateValue);
+                    prevLegendStateValue.current = newStateValue;
+                }
+                legendStateReady.current = true;
+            }
+        })();
+    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
+    return legendStateReady.current
+        ? legendState
+        : {
+            legendConfig: undefined,
+            legendItems: [],
+        };
+}
 export function useChartInnerProps(props) {
-    var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const colors = React.useMemo(() => {
@@ -76,21 +116,17 @@ export function useChartInnerProps(props) {
             zoomState: effectiveZoomState,
         });
     }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, effectiveZoomState]);
-    const { legendConfig, legendItems } = React.useMemo(() => {
-        if (!preparedLegend) {
-            return { legendConfig: undefined, legendItems: [] };
-        }
-        return getLegendComponents({
-            chartWidth: width,
-            chartHeight: height,
-            chartMargin: preparedChart.margin,
-            series: preparedSeries,
-            preparedLegend,
-        });
-    }, [width, height, preparedChart.margin, preparedSeries, preparedLegend]);
+    const { legendConfig, legendItems } = useLegend({
+        width,
+        height,
+        preparedChart,
+        preparedSeries,
+        preparedLegend,
+    });
     const { xAxis, yAxis, setAxes } = useAxis({
         height,
         preparedChart,
+        legendConfig,
         preparedLegend,
         preparedSeries,
         preparedSeriesOptions,
@@ -106,6 +142,7 @@ export function useChartInnerProps(props) {
         preparedYAxis: yAxis,
         preparedXAxis: xAxis,
         width,
+        legendConfig,
     });
     const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
     const { xScale, yScale } = useAxisScales({
@@ -166,6 +203,7 @@ export function useChartInnerProps(props) {
     const boundsOffsetTop = getBoundsOffsetTop({
         chartMarginTop: preparedChart.margin.top,
         preparedLegend,
+        legendConfig,
     });
     // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = getBoundsOffsetLeft({
@@ -173,8 +211,8 @@ export function useChartInnerProps(props) {
         preparedLegend,
         yAxis,
         getYAxisWidth,
+        legendConfig,
     });
-    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,
         boundsHeight,
@@ -194,7 +232,6 @@ export function useChartInnerProps(props) {
         shapes,
         shapesData,
         shapesReady,
-        svgXPos: x,
         xAxis,
         xScale,
         yAxis,

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendConfig } from '../../types';
 import './styles.css';
 type Props = {
     chartSeries: PreparedSeries[];

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import { appendLinePathElement } from '../utils';
 import './styles.css';
@@ -163,7 +163,6 @@ export const Legend = (props) => {
                     : items;
                 const legendLineHeights = [];
                 pageItems.forEach((line) => {
-                    var _a;
                     const legendLine = svgElement.append('g').attr('class', b('line'));
                     const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
                     const legendItemTemplate = legendLine
@@ -214,9 +213,8 @@ export const Legend = (props) => {
                             .on('click', function (e, d) {
                             onItemClick({ id: d.id, name: d.name, metaKey: e.metaKey });
                             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
-                        })[legend.html ? 'html' : 'text'](function (d) {
-                            return d.name;
-                        });
+                        })
+                            .html((d) => d.text);
                     }
                     else {
                         legendItemTemplate
@@ -231,19 +229,22 @@ export const Legend = (props) => {
                             const mods = { selected: d.visible, unselected: !d.visible };
                             return b('item-text', mods);
                         })
-                            .html(function (d) {
-                            return ('name' in d && d.name);
-                        })
-                            .style('font-size', legend.itemStyle.fontSize)
-                            .each((d, index, nodes) => {
-                            if (d.overflowed) {
-                                handleOverflowingText(nodes[index], d.textWidth);
+                            .html((d) => d.text)
+                            .style('font-size', legend.itemStyle.fontSize);
+                    }
+                    let contentWidth = 0;
+                    if (legend.html) {
+                        contentWidth = getXPosition(line.length) - legend.itemDistance;
+                    }
+                    else {
+                        contentWidth = line.reduce((sum, l, index) => {
+                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            if (index > 0) {
+                                sum += legend.itemDistance;
                             }
-                        });
+                            return sum;
+                        }, 0);
                     }
-                    const contentWidth = (legend.html
-                        ? getXPosition(line.length) - legend.itemDistance
-                        : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
                     let left = 0;
                     switch (legend.justifyContent) {
                         case 'center': {

package/dist/cjs/hooks/useAxis/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis, LegendConfig } from '../../types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { AxesState } from './types';
 interface UseAxesProps {
     height: number;
     preparedChart: PreparedChart;
+    legendConfig: LegendConfig | undefined;
     preparedLegend: PreparedLegend | null;
     preparedSeries: PreparedSeries[];
     preparedSeriesOptions: PreparedSeriesOptions;

package/dist/cjs/hooks/useAxis/index.js

@@ -4,15 +4,20 @@ import { getWidthOccupiedByYAxis } from '../useChartDimensions/utils';
 import { getPreparedXAxis } from './x-axis';
 import { getPreparedYAxis } from './y-axis';
 export function useAxis(props) {
-    const { boundsHeight, height, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
+    const { boundsHeight, height, preparedChart, legendConfig, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
     const [axesState, setAxes] = React.useState({ xAxis: null, yAxis: [] });
     const axesStateRunRef = React.useRef(0);
     const prevAxesStateValue = React.useRef(axesState);
     const axesStateReady = React.useRef(false);
     React.useEffect(() => {
+        const shouldWaitForLegendReady = !preparedLegend || ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && !legendConfig);
+        if (shouldWaitForLegendReady) {
+            return;
+        }
         axesStateRunRef.current++;
         axesStateReady.current = false;
         (async function () {
+            var _a, _b;
             const currentRun = axesStateRunRef.current;
             const seriesData = preparedSeries.filter((s) => s.visible);
             const estimatedPreparedYAxis = await getPreparedYAxis({
@@ -41,7 +46,8 @@ export function useAxis(props) {
                             (preparedXAxis.rangeSlider.enabled
                                 ? preparedXAxis.rangeSlider.height + preparedXAxis.rangeSlider.margin
                                 : 0) +
-                            (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
+                            ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) +
+                            ((_b = preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.margin) !== null && _b !== void 0 ? _b : 0) +
                             preparedChart.margin.top +
                             preparedChart.margin.bottom);
             }
@@ -65,6 +71,7 @@ export function useAxis(props) {
         boundsHeight,
         height,
         preparedChart.margin,
+        legendConfig,
         preparedLegend,
         preparedSeries,
         preparedSeriesOptions,

package/dist/cjs/hooks/useChartDimensions/index.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedLegend, PreparedSeries, PreparedXAxis, PreparedYAxis } from '../../hooks';
-import type { ChartMargin } from '../../types';
+import type { ChartMargin, LegendConfig } from '../../types';
 export { getBoundsWidth } from './utils';
 type Args = {
     height: number;
@@ -9,6 +9,7 @@ type Args = {
     preparedXAxis: PreparedXAxis | null;
     preparedYAxis: PreparedYAxis[] | null;
     width: number;
+    legendConfig: LegendConfig | undefined;
 };
 export declare const useChartDimensions: (args: Args) => {
     boundsWidth: number;

package/dist/cjs/hooks/useChartDimensions/index.js

@@ -3,10 +3,11 @@ import { isAxisRelatedSeries } from '../../utils';
 import { getBoundsWidth } from './utils';
 export { getBoundsWidth } from './utils';
 const getBottomOffset = (args) => {
-    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
+    var _a;
+    const { hasAxisRelatedSeries, preparedLegend, legendConfig, preparedXAxis } = args;
     let result = 0;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'bottom') {
-        result += preparedLegend.height + preparedLegend.margin;
+        result += ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     if (!(preparedXAxis === null || preparedXAxis === void 0 ? void 0 : preparedXAxis.visible)) {
         return result;
@@ -24,26 +25,29 @@ const getBottomOffset = (args) => {
     }
     return result;
 };
-const getTopOffset = ({ preparedLegend }) => {
+const getTopOffset = ({ preparedLegend, legendConfig, }) => {
+    var _a;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top') {
-        return preparedLegend.height + preparedLegend.margin;
+        return ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     return 0;
 };
-const getRightOffset = ({ preparedLegend }) => {
+const getRightOffset = ({ preparedLegend, legendConfig, }) => {
+    var _a;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'right') {
-        return preparedLegend.width + preparedLegend.margin;
+        return ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.width) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     return 0;
 };
-const getLeftOffset = ({ preparedLegend }) => {
+const getLeftOffset = ({ preparedLegend, legendConfig, }) => {
+    var _a;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left') {
-        return preparedLegend.width + preparedLegend.margin;
+        return ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.width) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     return 0;
 };
 export const useChartDimensions = (args) => {
-    const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width } = args;
+    const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width, legendConfig, } = args;
     return React.useMemo(() => {
         const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
         const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
@@ -51,12 +55,22 @@ export const useChartDimensions = (args) => {
             hasAxisRelatedSeries,
             preparedLegend,
             preparedXAxis,
+            legendConfig,
         });
-        const topOffset = getTopOffset({ preparedLegend });
-        const rightOffset = getRightOffset({ preparedLegend });
-        const leftOffset = getLeftOffset({ preparedLegend });
+        const topOffset = getTopOffset({ preparedLegend, legendConfig });
+        const rightOffset = getRightOffset({ preparedLegend, legendConfig });
+        const leftOffset = getLeftOffset({ preparedLegend, legendConfig });
         const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
         const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
         return { boundsWidth: adjustedBoundsWidth, boundsHeight };
-    }, [height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width]);
+    }, [
+        height,
+        margin,
+        preparedLegend,
+        legendConfig,
+        preparedSeries,
+        preparedXAxis,
+        preparedYAxis,
+        width,
+    ]);
 };

package/dist/cjs/hooks/useChartOptions/tooltip.d.ts

@@ -1,5 +1,10 @@
 import type { ChartData, ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedTooltip } from './types';
+export declare function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }: {
+    seriesData: ChartSeries[];
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
+}): import("../../types").ValueFormat | undefined;
 export declare const getPreparedTooltip: (args: {
     tooltip: ChartData["tooltip"];
     seriesData: ChartSeries[];

package/dist/cjs/hooks/useChartOptions/tooltip.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
 import { getDomainDataXBySeries, getDomainDataYBySeries, getMinSpaceBetween } from '../../utils';
-function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
+export function getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis, }) {
     if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar', 'heatmap', 'funnel'].includes(item.type))) {
         return undefined;
     }
@@ -17,5 +17,5 @@ function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
 export const getPreparedTooltip = (args) => {
     var _a, _b;
     const { tooltip, seriesData, yAxes, xAxis } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultHeaderFormat({ seriesData, yAxes, xAxis }) });
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultTooltipHeaderFormat({ seriesData, yAxes, xAxis }) });
 };

package/dist/cjs/hooks/useRangeSlider/index.js

@@ -17,7 +17,7 @@ const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: true,
 };
 export function useRangeSlider(props) {
-    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
+    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
@@ -31,6 +31,7 @@ export function useRangeSlider(props) {
         height,
         preparedChart,
         preparedLegend,
+        legendConfig,
         preparedSeries,
         preparedSeriesOptions,
         width,

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

@@ -1,4 +1,4 @@
-import type { ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis, LegendConfig } from '../../types';
 import type { PreparedRangeSlider, PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { BrushSelection, UseBrushProps } from '../useBrush/types';
@@ -16,6 +16,7 @@ export interface RangeSliderProps {
     onUpdate: (nextRangeSliderState?: RangeSliderState) => void;
     preparedChart: PreparedChart;
     preparedLegend: PreparedLegend | null;
+    legendConfig: LegendConfig | undefined;
     preparedRangeSlider: PreparedRangeSlider;
     preparedSeries: PreparedSeries[];
     preparedSeriesOptions: PreparedSeriesOptions;

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

@@ -11,7 +11,7 @@ export declare function getLegendComponents(args: {
     chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
-}): {
+}): Promise<{
     legendConfig: {
         offset: {
             left: number;
@@ -24,6 +24,8 @@ export declare function getLegendComponents(args: {
             }[];
         } | undefined;
         maxWidth: number;
+        height: number;
+        width: number;
     };
     legendItems: LegendItem[][];
-};
+}>;