@gravity-ui/charts 1.11.1 → 1.11.3

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,7 +94,7 @@ 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 }),

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;

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

@@ -1,26 +1,37 @@
 import React from 'react';
 import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
-import { getZoomedSeriesData } from '../../hooks/hooks-utils';
 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 { useZoom } from '../../hooks/useZoom';
+import { getSortedSeriesData, getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 export function useChartInnerProps(props) {
     var _a;
     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 zoomedSeriesData = React.useMemo(() => {
+    const sortedSeriesData = React.useMemo(() => {
+        return getSortedSeriesData(data.series.data);
+    }, [data.series.data]);
+    const { zoomedSeriesData, zoomedShapesSeriesData } = React.useMemo(() => {
         return getZoomedSeriesData({
-            seriesData: data.series.data,
+            seriesData: sortedSeriesData,
             xAxis: data.xAxis,
             yAxes: data.yAxis,
             zoomState,
         });
-    }, [data.series.data, data.xAxis, data.yAxis, zoomState]);
+    }, [data.xAxis, data.yAxis, sortedSeriesData, zoomState]);
     const [xAxis, setXAxis] = React.useState(null);
     React.useEffect(() => {
         setXAxis(null);
@@ -31,17 +42,36 @@ export function useChartInnerProps(props) {
         setYAxis([]);
         getPreparedYAxis({ yAxis: data.yAxis, height, seriesData: zoomedSeriesData }).then((val) => setYAxis(val));
     }, [data.yAxis, height, zoomedSeriesData]);
-    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
-        chartWidth: width,
-        chartHeight: height,
-        chartMargin: chart.margin,
+    const preparedSeriesOptions = React.useMemo(() => {
+        return getPreparedOptions(data.series.options);
+    }, [data.series.options]);
+    const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,
         originalSeriesData: data.series.data,
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
-        preparedYAxis: yAxis,
     });
+    const { preparedSeries: preparedShapesSeries } = useSeries({
+        colors,
+        legend: data.legend,
+        originalSeriesData: data.series.data,
+        seriesData: zoomedShapesSeriesData,
+        seriesOptions: data.series.options,
+    });
+    const { legendConfig, legendItems } = React.useMemo(() => {
+        if (!preparedLegend) {
+            return { legendConfig: undefined, legendItems: [] };
+        }
+        return getLegendComponents({
+            chartWidth: width,
+            chartHeight: height,
+            chartMargin: chart.margin,
+            series: preparedSeries,
+            preparedLegend,
+            preparedYAxis: yAxis,
+        });
+    }, [width, height, chart.margin, preparedSeries, preparedLegend, yAxis]);
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
@@ -69,7 +99,7 @@ export function useChartInnerProps(props) {
         boundsWidth,
         boundsHeight,
         dispatcher,
-        series: preparedSeries,
+        series: preparedShapesSeries,
         seriesOptions: preparedSeriesOptions,
         xAxis,
         xScale,
@@ -81,7 +111,7 @@ export function useChartInnerProps(props) {
         isOutsideBounds,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
-        const nextZoomedSeriesData = getZoomedSeriesData({
+        const { zoomedSeriesData: nextZoomedSeriesData } = getZoomedSeriesData({
             seriesData: zoomedSeriesData,
             xAxis: data.xAxis,
             yAxes: data.yAxis,
@@ -117,12 +147,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.js

@@ -2,7 +2,7 @@ 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');
@@ -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,
@@ -381,5 +382,8 @@ export const Legend = (props) => {
         pageIndex,
         htmlLayout,
     ]);
-    return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
+    // 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: boundsWidth, height: legend.height });
 };

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import get from 'lodash/get';
-import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
+import { block, getDataCategoryValue } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 const b = block('tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
@@ -62,7 +62,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
         measureValue && React.createElement("div", { className: b('series-name') }, measureValue),
         // eslint-disable-next-line complexity
         hovered.map((seriesItem, i) => {
-            var _a;
+            var _a, _b;
             const { data, series, closest } = seriesItem;
             const id = `${get(series, 'id')}_${i}`;
             const color = get(series, 'color');
@@ -87,7 +87,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
-                    const subTotalValue = getWaterfallPointSubtotal(data, series);
+                    const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
                     const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const subTotal = getFormattedValue({
                         value: subTotalValue,
@@ -145,7 +145,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 }
                 case 'sankey': {
                     const { target, data: source } = seriesItem;
-                    const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+                    const value = (_b = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _b === void 0 ? void 0 : _b.value;
                     const formattedValue = getFormattedValue({
                         value,
                         format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },

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

@@ -3,6 +3,7 @@ import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+const X_AXIS_ZOOM_PADDING = 0.02;
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
@@ -103,8 +104,10 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
     const maxPadding = get(axis, 'maxPadding', 0);
-    const xAxisMinPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
-    const xRange = [0, boundsWidth - xAxisMinPadding];
+    const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
+    const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
+    const xRange = [0, boundsWidth - xAxisMaxPadding];
+    const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
     switch (xType) {
         case 'linear':
         case 'logarithmic': {
@@ -131,7 +134,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
                             : xMaxDomain;
                 }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn().domain([xMin, xMax]).range(xRange);
+                const scale = scaleFn()
+                    .domain([xMin, xMax])
+                    .range(hasZoomX ? xRangeZoom : xRange);
                 if (!hasZoomX) {
                     scale.nice();
                 }
@@ -147,7 +152,7 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
                     series: series,
                 });
                 const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
-                if (xScale.step() / 2 < xAxisMinPadding) {
+                if (xScale.step() / 2 < xAxisMaxPadding) {
                     xScale.range(xRange);
                 }
                 return xScale;
@@ -159,7 +164,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
                 const [xMinTimestamp, xMaxTimestamp] = extent(xTimestamps);
                 const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
                 const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
+                const scale = scaleUtc()
+                    .domain([xMin, xMax])
+                    .range(hasZoomX ? xRangeZoom : xRange);
                 if (!hasZoomX) {
                     scale.nice();
                 }
@@ -171,7 +178,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
                     const [xMinTimestamp, xMaxTimestamp] = extent(domain);
                     const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
                     const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
-                    const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
+                    const scale = scaleUtc()
+                        .domain([xMin, xMax])
+                        .range(hasZoomX ? xRangeZoom : xRange);
                     if (!hasZoomX) {
                         scale.nice();
                     }

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

@@ -1,34 +1,16 @@
 import type { ChartData } from '../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from './types';
 type Args = {
-    chartWidth: number;
-    chartHeight: number;
-    chartMargin: PreparedChart['margin'];
     colors: string[];
     legend: ChartData['legend'];
     originalSeriesData: ChartData['series']['data'];
     seriesData: ChartData['series']['data'];
     seriesOptions: ChartData['series']['options'];
-    preparedYAxis: PreparedAxis[];
+    preparedLegend?: PreparedLegend;
 };
 export declare const useSeries: (args: Args) => {
-    legendItems: never[] | import("./types").LegendItem[][];
-    legendConfig: {
-        offset: {
-            left: number;
-            top: number;
-        };
-        pagination: {
-            pages: {
-                start: number;
-                end: number;
-            }[];
-        } | undefined;
-    } | undefined;
     preparedLegend: PreparedLegend | null;
     preparedSeries: PreparedSeries[];
-    preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     handleLegendItemClick: OnLegendItemClick;
 };
 export {};

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

@@ -2,16 +2,17 @@ import React from 'react';
 import { group, scaleOrdinal } from 'd3';
 import { getSeriesNames } from '../../utils';
 import { usePrevious } from '../usePrevious';
-import { getLegendComponents, getPreparedLegend } from './prepare-legend';
-import { getPreparedOptions } from './prepare-options';
+import { getPreparedLegend } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
 export const useSeries = (args) => {
-    const { chartWidth, chartHeight, chartMargin, legend, originalSeriesData, preparedYAxis, seriesData, seriesOptions, colors, } = args;
-    const [preparedLegend, setPreparedLegend] = React.useState(null);
+    const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
+    const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
     React.useEffect(() => {
-        getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
-    }, [legend, seriesData]);
+        if (!preparedLegendProps) {
+            getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
+        }
+    }, [legend, preparedLegendProps, seriesData]);
     const [preparedSeries, setPreparedSeries] = React.useState([]);
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     React.useEffect(() => {
@@ -39,9 +40,6 @@ export const useSeries = (args) => {
             setActiveLegendItems(getActiveLegendItems(acc));
         })();
     }, [seriesData, seriesOptions, preparedLegend, colors]);
-    const preparedSeriesOptions = React.useMemo(() => {
-        return getPreparedOptions(seriesOptions);
-    }, [seriesOptions]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);
     const chartSeries = React.useMemo(() => {
         return preparedSeries.map((singleSeries) => {
@@ -51,19 +49,6 @@ export const useSeries = (args) => {
             return singleSeries;
         });
     }, [preparedSeries, activeLegendItems]);
-    const { legendConfig, legendItems } = React.useMemo(() => {
-        if (!preparedLegend) {
-            return { legendConfig: undefined, legendItems: [] };
-        }
-        return getLegendComponents({
-            chartHeight,
-            chartMargin,
-            chartWidth,
-            series: chartSeries,
-            preparedLegend,
-            preparedYAxis,
-        });
-    }, [chartWidth, chartHeight, chartMargin, chartSeries, preparedLegend, preparedYAxis]);
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const allItems = getAllLegendItems(preparedSeries);
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
@@ -91,11 +76,8 @@ export const useSeries = (args) => {
         }
     }, [originalSeriesData, prevOriginalSeriesData, preparedSeries]);
     return {
-        legendItems,
-        legendConfig,
         preparedLegend,
         preparedSeries: chartSeries,
-        preparedSeriesOptions,
         handleLegendItemClick,
     };
 };

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

@@ -1,4 +1,3 @@
-import { sort } from 'd3';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../constants';
@@ -46,7 +45,7 @@ export function prepareArea(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: sort(series.data, (d) => d.x),
+            data: series.data,
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: {

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

@@ -21,9 +21,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: [],

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[];

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -36,7 +36,7 @@ function getXValues(series, xAxis, xScale) {
                 ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
                 : d.x);
             if (!acc.has(key)) {
-                acc.set(key, getXValue({ point: d, xAxis, xScale }));
+                acc.set(key, getXValue({ point: d, points: s.data, xAxis, xScale }));
             }
         });
         return acc;
@@ -73,6 +73,7 @@ export const prepareAreaData = async (args) => {
             const seriesYScale = yScale[yAxisIndex];
             const yMin = getYValue({
                 point: { y: 0 },
+                points: s.data,
                 yAxis: seriesYAxis,
                 yScale: seriesYScale,
             });

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -51,8 +51,9 @@ export const prepareLineData = async (args) => {
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
         const points = s.data.map((d) => ({
-            x: getXValue({ point: d, xAxis, xScale }),
-            y: yAxisTop + getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
+            x: getXValue({ point: d, points: s.data, xAxis, xScale }),
+            y: yAxisTop +
+                getYValue({ point: d, points: s.data, yAxis: seriesYAxis, yScale: seriesYScale }),
             active: true,
             data: d,
             series: s,

package/dist/cjs/hooks/useShapes/utils.d.ts

@@ -6,6 +6,9 @@ export declare function getXValue(args: {
     point: {
         x?: number | string;
     };
+    points?: {
+        x?: number | string;
+    }[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
 }): number;
@@ -13,6 +16,9 @@ export declare function getYValue(args: {
     point: {
         y?: number | string;
     };
+    points?: {
+        y?: number | string;
+    }[];
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;

package/dist/cjs/hooks/useShapes/utils.js

@@ -1,26 +1,51 @@
 import { path, select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
+const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;
 export function getXValue(args) {
-    const { point, xAxis, xScale } = args;
+    const { point, points, xAxis, xScale } = args;
     if (xAxis.type === 'category') {
         const xBandScale = xScale;
         const categories = get(xAxis, 'categories', []);
         const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
         return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
     }
-    const xLinearScale = xScale;
+    let xLinearScale = xScale;
+    const [xMinDomain, xMaxDomain] = xLinearScale.domain();
+    if (Number(xMinDomain) === Number(xMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const x1 = points[0].x;
+        const xTarget = points[1].x;
+        const x3 = points[2].x;
+        const xMin = Math.min(x1, xTarget, x3);
+        const xMax = Math.max(x1, xTarget, x3);
+        xLinearScale = xLinearScale
+            .copy()
+            .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+    }
     return xLinearScale(point.x);
 }
 export function getYValue(args) {
-    const { point, yAxis, yScale } = args;
+    const { point, points, yAxis, yScale } = args;
     if (yAxis.type === 'category') {
         const yBandScale = yScale;
         const categories = get(yAxis, 'categories', []);
         const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
         return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
     }
-    const yLinearScale = yScale;
+    let yLinearScale = yScale;
+    const [yMinDomain, yMaxDomain] = yLinearScale.domain();
+    if (Number(yMinDomain) === Number(yMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const y1 = points[0].y;
+        const yTarget = points[1].y;
+        const y2 = points[2].y;
+        const yMin = Math.min(y1, yTarget, y2);
+        const yMax = Math.max(y1, yTarget, y2);
+        yLinearScale = yLinearScale
+            .copy()
+            .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+    }
     return yLinearScale(point.y);
 }
 export function shapeKey(d) {

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

@@ -125,7 +125,7 @@ export const WaterfallSeriesShapes = (args) => {
         return () => {
             dispatcher.on('hover-shape.waterfall', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));

package/dist/cjs/libs/format-number/index.d.ts

@@ -1,5 +1,9 @@
 import type { FormatNumberOptions, FormatOptions } from './types';
-export declare const formatBytes: (value: number, options?: FormatOptions) => string;
-export declare const formatDuration: (value: number, options?: FormatOptions) => string;
-export declare const getNumberUnitRate: (value: number) => number;
+export declare const formatBytes: (value: number, options?: FormatOptions & {
+    unitRate?: number;
+}) => string;
+export declare const formatDuration: (value: number, options?: FormatOptions & {
+    unitRate?: number;
+}) => string;
+export declare const getDefaultUnit: (value: number) => string | undefined;
 export declare const formatNumber: (value: number | string, options?: FormatNumberOptions) => string;