@gravity-ui/charts 1.11.2 → 1.11.4

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -10,6 +10,7 @@ type Props = {
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
+    topLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

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

@@ -4,11 +4,8 @@ import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight,
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
-    const { node, axis, isTopOffsetOverload = false } = args;
-    let topOffset = axis.labels.lineHeight / 2;
-    if (isTopOffsetOverload) {
-        topOffset = 0;
-    }
+    const { node, axis, startTopOffset } = args;
+    let topOffset = startTopOffset !== null && startTopOffset !== void 0 ? startTopOffset : axis.labels.lineHeight / 2;
     let leftOffset = axis.labels.margin;
     if (axis.position === 'left') {
         leftOffset = leftOffset * -1;
@@ -85,7 +82,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, topLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -140,16 +137,20 @@ export const AxisY = (props) => {
                     .style('transform', function () {
                     return transformLabel({ node: this, axis: d });
                 });
-                labels.each(function (_d, i) {
-                    if (i === 0) {
-                        const currentElement = this;
-                        const currentElementPosition = currentElement.getBoundingClientRect();
-                        const text = select(currentElement);
-                        if (currentElementPosition.bottom > bottomLimit) {
+                labels.each(function (_d, i, nodes) {
+                    const isFirstNode = i === 0;
+                    const isLastNode = i === nodes.length - 1;
+                    if (isFirstNode || isLastNode) {
+                        const labelNode = this;
+                        const labelNodeRect = labelNode.getBoundingClientRect();
+                        const shouldBeTransformed = (isFirstNode && labelNodeRect.bottom > bottomLimit) ||
+                            (isLastNode && labelNodeRect.top < topLimit);
+                        if (shouldBeTransformed) {
+                            const text = select(labelNode);
                             const transform = transformLabel({
                                 node: this,
                                 axis: d,
-                                isTopOffsetOverload: true,
+                                startTopOffset: isLastNode ? labelNodeRect.height : 0,
                             });
                             text.style('transform', transform);
                             if (d.labels.rotation) {

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

@@ -23,7 +23,7 @@ export const ChartInner = (props) => {
     const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, svgTopPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
         htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current, clipPathId }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
@@ -94,13 +94,13 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, topLimit: svgTopPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
                     xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),
-            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+            (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 }))),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -11,6 +11,7 @@ type Props = ChartInnerProps & {
 };
 export declare function useChartInnerProps(props: Props): {
     svgBottomPos: number | undefined;
+    svgTopPos: number | undefined;
     svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
@@ -30,6 +31,7 @@ export declare function useChartInnerProps(props: Props): {
                 end: number;
             }[];
         } | undefined;
+        maxWidth: number;
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
     preparedLegend: import("../../hooks").PreparedLegend | null;

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapeSeries, useShapes, useSplit, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
+import { getActiveLegendItems } from '../../hooks/useSeries/utils';
 import { useZoom } from '../../hooks/useZoom';
 import { getSortedSeriesData, getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
@@ -13,8 +14,14 @@ export function useChartInnerProps(props) {
     const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode, clipPathId } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
+    const { chart, title, tooltip, colors } = useChartOptions({
+        seriesData: data.series.data,
+        chart: data.chart,
+        colors: data.colors,
+        title: data.title,
+        tooltip: data.tooltip,
+    });
     const [zoomState, setZoomState] = React.useState({});
-    const { chart, title, tooltip, colors } = useChartOptions({ data });
     const sortedSeriesData = React.useMemo(() => {
         return getSortedSeriesData(data.series.data);
     }, [data.series.data]);
@@ -46,12 +53,13 @@ export function useChartInnerProps(props) {
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
     });
-    const { preparedSeries: preparedShapesSeries } = useSeries({
+    const activeLegendItems = React.useMemo(() => getActiveLegendItems(preparedSeries), [preparedSeries]);
+    const { preparedSeries: preparedShapesSeries } = useShapeSeries({
         colors,
-        legend: data.legend,
-        originalSeriesData: data.series.data,
         seriesData: zoomedShapesSeriesData,
         seriesOptions: data.series.options,
+        activeLegendItems,
+        preparedLegend,
     });
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
@@ -63,9 +71,8 @@ export function useChartInnerProps(props) {
             chartMargin: chart.margin,
             series: preparedSeries,
             preparedLegend,
-            preparedYAxis: yAxis,
         });
-    }, [width, height, chart.margin, preparedSeries, preparedLegend, yAxis]);
+    }, [width, height, chart.margin, preparedSeries, preparedLegend]);
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
@@ -141,12 +148,13 @@ export function useChartInnerProps(props) {
             }
             return acc;
         }, 0);
-    const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const { bottom, top, x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     const handleZoomReset = React.useCallback(() => {
         setZoomState({});
     }, []);
     return {
         svgBottomPos: bottom,
+        svgTopPos: top,
         svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,

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

@@ -2,7 +2,6 @@ import React from 'react';
 import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
 import './styles.css';
 type Props = {
-    boundsWidth: number;
     chartSeries: PreparedSeries[];
     legend: PreparedLegend;
     items: LegendItem[][];

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

@@ -2,20 +2,20 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, handleOverflowingText, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
 const getLegendPosition = (args) => {
-    const { align, offsetWidth = 0, width, contentWidth } = args;
+    const { align, offsetLeft = 0, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
-        return { top, left: offsetWidth };
+        return { top, left: offsetLeft };
     }
     if (align === 'right') {
-        return { top, left: offsetWidth + width - contentWidth };
+        return { top, left: offsetLeft + width - contentWidth };
     }
-    return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
+    return { top, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
@@ -135,12 +135,12 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
+    const { chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
     const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {
         setPageIndex(0);
-    }, [boundsWidth]);
+    }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -250,12 +250,12 @@ export const Legend = (props) => {
                         case 'center': {
                             const legendLinePostion = getLegendPosition({
                                 align: legend.align,
-                                width: boundsWidth,
-                                offsetWidth: 0,
+                                width: config.maxWidth,
                                 contentWidth,
+                                offsetLeft: config.offset.left,
                             });
                             left = legendLinePostion.left;
-                            legendWidth = boundsWidth;
+                            legendWidth = config.maxWidth;
                             break;
                         }
                         case 'start': {
@@ -305,6 +305,7 @@ export const Legend = (props) => {
                         maxTickCount: 4,
                         tickColor: '#fff',
                         labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
+                        labelsStyle: legend.ticks.style,
                     },
                     domain: {
                         size: legend.width,
@@ -360,9 +361,9 @@ export const Legend = (props) => {
             }
             const { left } = getLegendPosition({
                 align: legend.align,
-                width: boundsWidth,
-                offsetWidth: config.offset.left,
+                width: config.maxWidth,
                 contentWidth: legendWidth,
+                offsetLeft: config.offset.left,
             });
             svgElement
                 .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
@@ -370,16 +371,9 @@ export const Legend = (props) => {
             htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
         }
         prepareLegend();
-    }, [
-        boundsWidth,
-        chartSeries,
-        onItemClick,
-        onUpdate,
-        legend,
-        items,
-        config,
-        pageIndex,
-        htmlLayout,
-    ]);
-    return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
+    }, [chartSeries, onItemClick, onUpdate, legend, items, config, pageIndex, htmlLayout]);
+    // due to asynchronous processing, we only need to work with the actual element
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const key = React.useMemo(() => getUniqId(), [legend, config]);
+    return React.createElement("g", { key: key, className: b(), ref: ref, width: config.maxWidth, height: legend.height });
 };

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

@@ -1,7 +1,11 @@
-import type { ChartData } from '../../types';
+import type { ChartSeries, ChartTitle, ChartTooltip, ChartOptions as GeneralChartOptions } from '../../types';
 import type { ChartOptions } from './types';
 type Args = {
-    data: ChartData;
+    seriesData: ChartSeries[];
+    chart?: GeneralChartOptions;
+    colors?: string[];
+    title?: ChartTitle;
+    tooltip?: ChartTooltip;
 };
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

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

@@ -4,21 +4,21 @@ import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip, colors, series }, } = args;
+    const { chart, colors, seriesData, title, tooltip } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
-            seriesData: series.data,
+            seriesData,
         });
         return {
+            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
             chart: preparedChart,
             title: preparedTitle,
             tooltip: preparedTooltip,
-            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
         };
-    }, [chart, colors, title, tooltip, series.data]);
+    }, [chart, colors, seriesData, title, tooltip]);
     return options;
 };

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

@@ -13,4 +13,13 @@ export declare const useSeries: (args: Args) => {
     preparedSeries: PreparedSeries[];
     handleLegendItemClick: OnLegendItemClick;
 };
+export declare const useShapeSeries: ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }: {
+    colors: string[];
+    seriesData: ChartData["series"]["data"];
+    seriesOptions: ChartData["series"]["options"];
+    activeLegendItems: string[];
+    preparedLegend?: PreparedLegend | null;
+}) => {
+    preparedSeries: PreparedSeries[];
+};
 export {};

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

@@ -5,6 +5,38 @@ import { usePrevious } from '../usePrevious';
 import { getPreparedLegend } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
+const useVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
+    return React.useMemo(() => {
+        return preparedSeries.map((singleSeries) => {
+            if (singleSeries.legend.enabled) {
+                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
+            }
+            return singleSeries;
+        });
+    }, [preparedSeries, activeLegendItems]);
+};
+const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
+    const seriesNames = getSeriesNames(seriesData);
+    const colorScale = scaleOrdinal(seriesNames, colors);
+    const groupedSeries = group(seriesData, (item) => item.type);
+    const acc = [];
+    if (!preparedLegend) {
+        return acc;
+    }
+    const list = Array.from(groupedSeries);
+    for (let i = 0; i < list.length; i++) {
+        const [seriesType, seriesList] = list[i];
+        acc.push(...(await prepareSeries({
+            type: seriesType,
+            series: seriesList,
+            seriesOptions,
+            legend: preparedLegend,
+            colorScale,
+            colors,
+        })));
+    }
+    return acc;
+};
 export const useSeries = (args) => {
     const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
     const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
@@ -17,38 +49,18 @@ export const useSeries = (args) => {
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     React.useEffect(() => {
         (async () => {
-            const seriesNames = getSeriesNames(seriesData);
-            const colorScale = scaleOrdinal(seriesNames, colors);
-            const groupedSeries = group(seriesData, (item) => item.type);
-            const acc = [];
-            if (!preparedLegend) {
-                return;
-            }
-            const list = Array.from(groupedSeries);
-            for (let i = 0; i < list.length; i++) {
-                const [seriesType, seriesList] = list[i];
-                acc.push(...(await prepareSeries({
-                    type: seriesType,
-                    series: seriesList,
-                    seriesOptions,
-                    legend: preparedLegend,
-                    colorScale,
-                    colors,
-                })));
-            }
-            setPreparedSeries(acc);
-            setActiveLegendItems(getActiveLegendItems(acc));
+            const items = await getPreparedSeries({
+                seriesData,
+                seriesOptions,
+                preparedLegend,
+                colors,
+            });
+            setPreparedSeries(items);
+            setActiveLegendItems(getActiveLegendItems(items));
         })();
     }, [seriesData, seriesOptions, preparedLegend, colors]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);
-    const chartSeries = React.useMemo(() => {
-        return preparedSeries.map((singleSeries) => {
-            if (singleSeries.legend.enabled) {
-                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
-            }
-            return singleSeries;
-        });
-    }, [preparedSeries, activeLegendItems]);
+    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const allItems = getAllLegendItems(preparedSeries);
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
@@ -81,3 +93,21 @@ export const useSeries = (args) => {
         handleLegendItemClick,
     };
 };
+export const useShapeSeries = ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }) => {
+    const [preparedSeries, setPreparedSeries] = React.useState([]);
+    React.useEffect(() => {
+        (async () => {
+            const items = await getPreparedSeries({
+                seriesData,
+                seriesOptions,
+                preparedLegend,
+                colors,
+            });
+            setPreparedSeries(items);
+        })();
+    }, [seriesData, seriesOptions, preparedLegend, colors]);
+    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
+    return {
+        preparedSeries: chartSeries,
+    };
+};

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

@@ -1,5 +1,5 @@
 import type { ChartData } from '../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedChart } from '../useChartOptions/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];
@@ -11,7 +11,6 @@ export declare function getLegendComponents(args: {
     chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
-    preparedYAxis: PreparedAxis[];
 }): {
     legendConfig: {
         offset: {
@@ -24,6 +23,7 @@ export declare function getLegendComponents(args: {
                 end: number;
             }[];
         } | undefined;
+        maxWidth: number;
     };
     legendItems: LegendItem[][];
 };

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

@@ -4,8 +4,6 @@ import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize } from '../../utils';
-import { getBoundsWidth } from '../useChartDimensions';
-import { getYAxisWidth } from '../useChartDimensions/utils';
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
@@ -21,9 +19,13 @@ export async function getPreparedLegend(args) {
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
     const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
     const titleHeight = isTitleEnabled ? titleSize.maxHeight : 0;
+    const tickStyle = {
+        fontSize: '12px',
+    };
     const ticks = {
         labelsMargin: 4,
-        labelsLineHeight: 12,
+        labelsLineHeight: (await getLabelsSize({ labels: ['Tmp'], style: tickStyle })).maxHeight,
+        style: tickStyle,
     };
     const colorScale = {
         colors: [],
@@ -164,8 +166,8 @@ function getPagination(args) {
     return { pages };
 }
 export function getLegendComponents(args) {
-    const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
-    const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
+    const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
+    const maxLegendWidth = chartWidth - chartMargin.right - chartMargin.left;
     const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
@@ -195,8 +197,8 @@ export function getLegendComponents(args) {
     }
     const top = chartHeight - chartMargin.bottom - preparedLegend.height;
     const offset = {
-        left: chartMargin.left + getYAxisWidth(preparedYAxis[0]),
+        left: chartMargin.left,
         top,
     };
-    return { legendConfig: { offset, pagination }, legendItems: items };
+    return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
 }

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

@@ -26,6 +26,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
     ticks: {
         labelsMargin: number;
         labelsLineHeight: number;
+        style: BaseTextStyle;
     };
     colorScale: {
         colors: string[];
@@ -52,6 +53,7 @@ export type LegendConfig = {
         left: number;
         top: number;
     };
+    maxWidth: number;
     pagination?: {
         pages: {
             start: number;

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -90,27 +90,15 @@ export async function axisBottom(args) {
             });
         }
         else {
-            // remove overlapping labels
             let elementX = 0;
-            selection
-                .selectAll('.tick')
-                .filter(function () {
-                const node = this;
-                const r = node.getBoundingClientRect();
-                if (r.left < elementX) {
-                    return true;
-                }
-                elementX = r.right + labelsPaddings;
-                return false;
-            })
-                .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
+            // and remove overlapping labels
             labels.each(function (_d, i, nodes) {
-                var _a;
+                var _a, _b;
+                const currentElement = this;
+                const currentElementPosition = currentElement.getBoundingClientRect();
                 if (i === 0) {
-                    const currentElement = this;
                     const text = select(currentElement);
-                    const currentElementPosition = currentElement.getBoundingClientRect();
                     const nextElement = nodes[i + 1];
                     const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
                     if (currentElementPosition.left < leftmostLimit) {
@@ -123,18 +111,23 @@ export async function axisBottom(args) {
                         setEllipsisForOverflowText(text, remainSpace);
                     }
                 }
-                if (i === nodes.length - 1) {
-                    const currentElement = this;
-                    const prevElement = nodes[i - 1];
-                    const text = select(currentElement);
-                    const currentElementPosition = currentElement.getBoundingClientRect();
-                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
-                    const lackingSpace = Math.max(0, currentElementPosition.right - right);
-                    if (lackingSpace) {
-                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
-                        const translateX = -lackingSpace;
-                        text.style('transform', `translate(${translateX}px,${translateY}px)`);
-                        setEllipsisForOverflowText(text, remainSpace);
+                else {
+                    if (currentElementPosition.left < elementX) {
+                        (_b = currentElement.closest('.tick')) === null || _b === void 0 ? void 0 : _b.remove();
+                        return;
+                    }
+                    elementX = currentElementPosition.right + labelsPaddings;
+                    if (i === nodes.length - 1) {
+                        const prevElement = nodes[i - 1];
+                        const text = select(currentElement);
+                        const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                        const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                        if (lackingSpace) {
+                            const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
+                            const translateX = -lackingSpace;
+                            text.style('transform', `translate(${translateX}px,${translateY}px)`);
+                            setEllipsisForOverflowText(text, remainSpace);
+                        }
                     }
                 }
             });

package/dist/esm/components/Axis/AxisY.d.ts

@@ -10,6 +10,7 @@ type Props = {
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
+    topLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

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

@@ -4,11 +4,8 @@ import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight,
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
-    const { node, axis, isTopOffsetOverload = false } = args;
-    let topOffset = axis.labels.lineHeight / 2;
-    if (isTopOffsetOverload) {
-        topOffset = 0;
-    }
+    const { node, axis, startTopOffset } = args;
+    let topOffset = startTopOffset !== null && startTopOffset !== void 0 ? startTopOffset : axis.labels.lineHeight / 2;
     let leftOffset = axis.labels.margin;
     if (axis.position === 'left') {
         leftOffset = leftOffset * -1;
@@ -85,7 +82,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, topLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -140,16 +137,20 @@ export const AxisY = (props) => {
                     .style('transform', function () {
                     return transformLabel({ node: this, axis: d });
                 });
-                labels.each(function (_d, i) {
-                    if (i === 0) {
-                        const currentElement = this;
-                        const currentElementPosition = currentElement.getBoundingClientRect();
-                        const text = select(currentElement);
-                        if (currentElementPosition.bottom > bottomLimit) {
+                labels.each(function (_d, i, nodes) {
+                    const isFirstNode = i === 0;
+                    const isLastNode = i === nodes.length - 1;
+                    if (isFirstNode || isLastNode) {
+                        const labelNode = this;
+                        const labelNodeRect = labelNode.getBoundingClientRect();
+                        const shouldBeTransformed = (isFirstNode && labelNodeRect.bottom > bottomLimit) ||
+                            (isLastNode && labelNodeRect.top < topLimit);
+                        if (shouldBeTransformed) {
+                            const text = select(labelNode);
                             const transform = transformLabel({
                                 node: this,
                                 axis: d,
-                                isTopOffsetOverload: true,
+                                startTopOffset: isLastNode ? labelNodeRect.height : 0,
                             });
                             text.style('transform', transform);
                             if (d.labels.rotation) {

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

@@ -23,7 +23,7 @@ export const ChartInner = (props) => {
     const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, svgTopPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
         htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current, clipPathId }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
@@ -94,13 +94,13 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, topLimit: svgTopPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
                     xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),
-            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+            (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 }))),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -11,6 +11,7 @@ type Props = ChartInnerProps & {
 };
 export declare function useChartInnerProps(props: Props): {
     svgBottomPos: number | undefined;
+    svgTopPos: number | undefined;
     svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
@@ -30,6 +31,7 @@ export declare function useChartInnerProps(props: Props): {
                 end: number;
             }[];
         } | undefined;
+        maxWidth: number;
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
     preparedLegend: import("../../hooks").PreparedLegend | null;

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapeSeries, useShapes, useSplit, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
+import { getActiveLegendItems } from '../../hooks/useSeries/utils';
 import { useZoom } from '../../hooks/useZoom';
 import { getSortedSeriesData, getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
@@ -13,8 +14,14 @@ export function useChartInnerProps(props) {
     const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode, clipPathId } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
+    const { chart, title, tooltip, colors } = useChartOptions({
+        seriesData: data.series.data,
+        chart: data.chart,
+        colors: data.colors,
+        title: data.title,
+        tooltip: data.tooltip,
+    });
     const [zoomState, setZoomState] = React.useState({});
-    const { chart, title, tooltip, colors } = useChartOptions({ data });
     const sortedSeriesData = React.useMemo(() => {
         return getSortedSeriesData(data.series.data);
     }, [data.series.data]);
@@ -46,12 +53,13 @@ export function useChartInnerProps(props) {
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
     });
-    const { preparedSeries: preparedShapesSeries } = useSeries({
+    const activeLegendItems = React.useMemo(() => getActiveLegendItems(preparedSeries), [preparedSeries]);
+    const { preparedSeries: preparedShapesSeries } = useShapeSeries({
         colors,
-        legend: data.legend,
-        originalSeriesData: data.series.data,
         seriesData: zoomedShapesSeriesData,
         seriesOptions: data.series.options,
+        activeLegendItems,
+        preparedLegend,
     });
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
@@ -63,9 +71,8 @@ export function useChartInnerProps(props) {
             chartMargin: chart.margin,
             series: preparedSeries,
             preparedLegend,
-            preparedYAxis: yAxis,
         });
-    }, [width, height, chart.margin, preparedSeries, preparedLegend, yAxis]);
+    }, [width, height, chart.margin, preparedSeries, preparedLegend]);
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
@@ -141,12 +148,13 @@ export function useChartInnerProps(props) {
             }
             return acc;
         }, 0);
-    const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const { bottom, top, x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     const handleZoomReset = React.useCallback(() => {
         setZoomState({});
     }, []);
     return {
         svgBottomPos: bottom,
+        svgTopPos: top,
         svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,

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

@@ -2,7 +2,6 @@ import React from 'react';
 import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
 import './styles.css';
 type Props = {
-    boundsWidth: number;
     chartSeries: PreparedSeries[];
     legend: PreparedLegend;
     items: LegendItem[][];

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

@@ -2,20 +2,20 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, handleOverflowingText, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
 const getLegendPosition = (args) => {
-    const { align, offsetWidth = 0, width, contentWidth } = args;
+    const { align, offsetLeft = 0, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
-        return { top, left: offsetWidth };
+        return { top, left: offsetLeft };
     }
     if (align === 'right') {
-        return { top, left: offsetWidth + width - contentWidth };
+        return { top, left: offsetLeft + width - contentWidth };
     }
-    return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
+    return { top, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
@@ -135,12 +135,12 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
+    const { chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
     const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {
         setPageIndex(0);
-    }, [boundsWidth]);
+    }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -250,12 +250,12 @@ export const Legend = (props) => {
                         case 'center': {
                             const legendLinePostion = getLegendPosition({
                                 align: legend.align,
-                                width: boundsWidth,
-                                offsetWidth: 0,
+                                width: config.maxWidth,
                                 contentWidth,
+                                offsetLeft: config.offset.left,
                             });
                             left = legendLinePostion.left;
-                            legendWidth = boundsWidth;
+                            legendWidth = config.maxWidth;
                             break;
                         }
                         case 'start': {
@@ -305,6 +305,7 @@ export const Legend = (props) => {
                         maxTickCount: 4,
                         tickColor: '#fff',
                         labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
+                        labelsStyle: legend.ticks.style,
                     },
                     domain: {
                         size: legend.width,
@@ -360,9 +361,9 @@ export const Legend = (props) => {
             }
             const { left } = getLegendPosition({
                 align: legend.align,
-                width: boundsWidth,
-                offsetWidth: config.offset.left,
+                width: config.maxWidth,
                 contentWidth: legendWidth,
+                offsetLeft: config.offset.left,
             });
             svgElement
                 .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
@@ -370,16 +371,9 @@ export const Legend = (props) => {
             htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
         }
         prepareLegend();
-    }, [
-        boundsWidth,
-        chartSeries,
-        onItemClick,
-        onUpdate,
-        legend,
-        items,
-        config,
-        pageIndex,
-        htmlLayout,
-    ]);
-    return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
+    }, [chartSeries, onItemClick, onUpdate, legend, items, config, pageIndex, htmlLayout]);
+    // due to asynchronous processing, we only need to work with the actual element
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const key = React.useMemo(() => getUniqId(), [legend, config]);
+    return React.createElement("g", { key: key, className: b(), ref: ref, width: config.maxWidth, height: legend.height });
 };

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

@@ -1,7 +1,11 @@
-import type { ChartData } from '../../types';
+import type { ChartSeries, ChartTitle, ChartTooltip, ChartOptions as GeneralChartOptions } from '../../types';
 import type { ChartOptions } from './types';
 type Args = {
-    data: ChartData;
+    seriesData: ChartSeries[];
+    chart?: GeneralChartOptions;
+    colors?: string[];
+    title?: ChartTitle;
+    tooltip?: ChartTooltip;
 };
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

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

@@ -4,21 +4,21 @@ import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip, colors, series }, } = args;
+    const { chart, colors, seriesData, title, tooltip } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
-            seriesData: series.data,
+            seriesData,
         });
         return {
+            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
             chart: preparedChart,
             title: preparedTitle,
             tooltip: preparedTooltip,
-            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
         };
-    }, [chart, colors, title, tooltip, series.data]);
+    }, [chart, colors, seriesData, title, tooltip]);
     return options;
 };

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

@@ -13,4 +13,13 @@ export declare const useSeries: (args: Args) => {
     preparedSeries: PreparedSeries[];
     handleLegendItemClick: OnLegendItemClick;
 };
+export declare const useShapeSeries: ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }: {
+    colors: string[];
+    seriesData: ChartData["series"]["data"];
+    seriesOptions: ChartData["series"]["options"];
+    activeLegendItems: string[];
+    preparedLegend?: PreparedLegend | null;
+}) => {
+    preparedSeries: PreparedSeries[];
+};
 export {};

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

@@ -5,6 +5,38 @@ import { usePrevious } from '../usePrevious';
 import { getPreparedLegend } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
+const useVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
+    return React.useMemo(() => {
+        return preparedSeries.map((singleSeries) => {
+            if (singleSeries.legend.enabled) {
+                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
+            }
+            return singleSeries;
+        });
+    }, [preparedSeries, activeLegendItems]);
+};
+const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
+    const seriesNames = getSeriesNames(seriesData);
+    const colorScale = scaleOrdinal(seriesNames, colors);
+    const groupedSeries = group(seriesData, (item) => item.type);
+    const acc = [];
+    if (!preparedLegend) {
+        return acc;
+    }
+    const list = Array.from(groupedSeries);
+    for (let i = 0; i < list.length; i++) {
+        const [seriesType, seriesList] = list[i];
+        acc.push(...(await prepareSeries({
+            type: seriesType,
+            series: seriesList,
+            seriesOptions,
+            legend: preparedLegend,
+            colorScale,
+            colors,
+        })));
+    }
+    return acc;
+};
 export const useSeries = (args) => {
     const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
     const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
@@ -17,38 +49,18 @@ export const useSeries = (args) => {
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     React.useEffect(() => {
         (async () => {
-            const seriesNames = getSeriesNames(seriesData);
-            const colorScale = scaleOrdinal(seriesNames, colors);
-            const groupedSeries = group(seriesData, (item) => item.type);
-            const acc = [];
-            if (!preparedLegend) {
-                return;
-            }
-            const list = Array.from(groupedSeries);
-            for (let i = 0; i < list.length; i++) {
-                const [seriesType, seriesList] = list[i];
-                acc.push(...(await prepareSeries({
-                    type: seriesType,
-                    series: seriesList,
-                    seriesOptions,
-                    legend: preparedLegend,
-                    colorScale,
-                    colors,
-                })));
-            }
-            setPreparedSeries(acc);
-            setActiveLegendItems(getActiveLegendItems(acc));
+            const items = await getPreparedSeries({
+                seriesData,
+                seriesOptions,
+                preparedLegend,
+                colors,
+            });
+            setPreparedSeries(items);
+            setActiveLegendItems(getActiveLegendItems(items));
         })();
     }, [seriesData, seriesOptions, preparedLegend, colors]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);
-    const chartSeries = React.useMemo(() => {
-        return preparedSeries.map((singleSeries) => {
-            if (singleSeries.legend.enabled) {
-                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
-            }
-            return singleSeries;
-        });
-    }, [preparedSeries, activeLegendItems]);
+    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const allItems = getAllLegendItems(preparedSeries);
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
@@ -81,3 +93,21 @@ export const useSeries = (args) => {
         handleLegendItemClick,
     };
 };
+export const useShapeSeries = ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }) => {
+    const [preparedSeries, setPreparedSeries] = React.useState([]);
+    React.useEffect(() => {
+        (async () => {
+            const items = await getPreparedSeries({
+                seriesData,
+                seriesOptions,
+                preparedLegend,
+                colors,
+            });
+            setPreparedSeries(items);
+        })();
+    }, [seriesData, seriesOptions, preparedLegend, colors]);
+    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
+    return {
+        preparedSeries: chartSeries,
+    };
+};

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

@@ -1,5 +1,5 @@
 import type { ChartData } from '../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedChart } from '../useChartOptions/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];
@@ -11,7 +11,6 @@ export declare function getLegendComponents(args: {
     chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
-    preparedYAxis: PreparedAxis[];
 }): {
     legendConfig: {
         offset: {
@@ -24,6 +23,7 @@ export declare function getLegendComponents(args: {
                 end: number;
             }[];
         } | undefined;
+        maxWidth: number;
     };
     legendItems: LegendItem[][];
 };

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

@@ -4,8 +4,6 @@ import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize } from '../../utils';
-import { getBoundsWidth } from '../useChartDimensions';
-import { getYAxisWidth } from '../useChartDimensions/utils';
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
@@ -21,9 +19,13 @@ export async function getPreparedLegend(args) {
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
     const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
     const titleHeight = isTitleEnabled ? titleSize.maxHeight : 0;
+    const tickStyle = {
+        fontSize: '12px',
+    };
     const ticks = {
         labelsMargin: 4,
-        labelsLineHeight: 12,
+        labelsLineHeight: (await getLabelsSize({ labels: ['Tmp'], style: tickStyle })).maxHeight,
+        style: tickStyle,
     };
     const colorScale = {
         colors: [],
@@ -164,8 +166,8 @@ function getPagination(args) {
     return { pages };
 }
 export function getLegendComponents(args) {
-    const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
-    const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
+    const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
+    const maxLegendWidth = chartWidth - chartMargin.right - chartMargin.left;
     const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
@@ -195,8 +197,8 @@ export function getLegendComponents(args) {
     }
     const top = chartHeight - chartMargin.bottom - preparedLegend.height;
     const offset = {
-        left: chartMargin.left + getYAxisWidth(preparedYAxis[0]),
+        left: chartMargin.left,
         top,
     };
-    return { legendConfig: { offset, pagination }, legendItems: items };
+    return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
 }

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

@@ -26,6 +26,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
     ticks: {
         labelsMargin: number;
         labelsLineHeight: number;
+        style: BaseTextStyle;
     };
     colorScale: {
         colors: string[];
@@ -52,6 +53,7 @@ export type LegendConfig = {
         left: number;
         top: number;
     };
+    maxWidth: number;
     pagination?: {
         pages: {
             start: number;

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -90,27 +90,15 @@ export async function axisBottom(args) {
             });
         }
         else {
-            // remove overlapping labels
             let elementX = 0;
-            selection
-                .selectAll('.tick')
-                .filter(function () {
-                const node = this;
-                const r = node.getBoundingClientRect();
-                if (r.left < elementX) {
-                    return true;
-                }
-                elementX = r.right + labelsPaddings;
-                return false;
-            })
-                .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
+            // and remove overlapping labels
             labels.each(function (_d, i, nodes) {
-                var _a;
+                var _a, _b;
+                const currentElement = this;
+                const currentElementPosition = currentElement.getBoundingClientRect();
                 if (i === 0) {
-                    const currentElement = this;
                     const text = select(currentElement);
-                    const currentElementPosition = currentElement.getBoundingClientRect();
                     const nextElement = nodes[i + 1];
                     const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
                     if (currentElementPosition.left < leftmostLimit) {
@@ -123,18 +111,23 @@ export async function axisBottom(args) {
                         setEllipsisForOverflowText(text, remainSpace);
                     }
                 }
-                if (i === nodes.length - 1) {
-                    const currentElement = this;
-                    const prevElement = nodes[i - 1];
-                    const text = select(currentElement);
-                    const currentElementPosition = currentElement.getBoundingClientRect();
-                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
-                    const lackingSpace = Math.max(0, currentElementPosition.right - right);
-                    if (lackingSpace) {
-                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
-                        const translateX = -lackingSpace;
-                        text.style('transform', `translate(${translateX}px,${translateY}px)`);
-                        setEllipsisForOverflowText(text, remainSpace);
+                else {
+                    if (currentElementPosition.left < elementX) {
+                        (_b = currentElement.closest('.tick')) === null || _b === void 0 ? void 0 : _b.remove();
+                        return;
+                    }
+                    elementX = currentElementPosition.right + labelsPaddings;
+                    if (i === nodes.length - 1) {
+                        const prevElement = nodes[i - 1];
+                        const text = select(currentElement);
+                        const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                        const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                        if (lackingSpace) {
+                            const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
+                            const translateX = -lackingSpace;
+                            text.style('transform', `translate(${translateX}px,${translateY}px)`);
+                            setEllipsisForOverflowText(text, remainSpace);
+                        }
                     }
                 }
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",