@gravity-ui/charts 1.36.0 → 1.37.2

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

@@ -248,7 +248,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;
@@ -13,30 +14,29 @@ type Props = ChartInnerProps & {
     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;
@@ -47,10 +47,10 @@ export declare function useChartInnerProps(props: Props): {
     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 +62,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 +82,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,6 +35,45 @@ 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;
@@ -76,21 +117,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 +143,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 +204,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,6 +212,7 @@ 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 {

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/components/Tooltip/ChartTooltipContent.js

@@ -6,7 +6,14 @@ export const ChartTooltipContent = React.memo((props) => {
     if (!hovered) {
         return null;
     }
-    const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, hoveredPlotLines, hoveredPlotBands, xAxis, yAxis });
+    const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({
+        headerFormat,
+        hovered,
+        hoveredPlotLines,
+        hoveredPlotBands,
+        xAxis,
+        yAxis,
+    });
     return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis, qa: qa })) : (customTooltip);
 });
 ChartTooltipContent.displayName = 'ChartTooltipContent';

package/dist/cjs/components/Tooltip/styles.css

@@ -1,12 +1,12 @@
 .gcharts-tooltip {
   padding: var(--gcharts-tooltip-content-padding, 8px 0);
+  background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
 .gcharts-tooltip__popup-content {
   max-width: 450px;
   text-wrap: nowrap;
   border-radius: 4px;
-  background-color: var(--g-color-infographics-tooltip-bg);
 }
 .gcharts-tooltip__content {
   display: flex;

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/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[][];
-};
+}>;