@gravity-ui/charts 1.41.0 → 1.41.2

package/dist/cjs/components/AxisX/AxisX.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { line, select } from 'd3';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
 import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 import { block, getLineDashArray } from '../../utils';
 import './styles.css';

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { line, select } from 'd3';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
 import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 import { block, getLineDashArray } from '../../utils';
 import './styles.css';

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

@@ -61,7 +61,7 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
         rangeSliderState,
@@ -270,7 +270,7 @@ export const ChartInner = (props) => {
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
-            preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
+            preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
 import type { ChartScale } from '../../hooks/useAxisScales/types';
 import type { useChartInnerState } from './useChartInnerState';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { pointer } from 'd3';
+import { pointer } from 'd3-selection';
 import get from 'lodash/get';
 import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
 import type { PreparedChart } from '../../hooks/types';
 import type { LegendConfig } from '../../types';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
 type Props = {
     dispatcher: Dispatch<object>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
 import type { ChartScale } from '../../hooks/useAxisScales/types';
 type Props = {

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

@@ -16,7 +16,7 @@ export function useDefaultState(props) {
         // Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
         // listeners first; parent effects run before child effects in React.
         queueMicrotask(() => {
-            var _a;
+            var _a, _b;
             const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
             const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
             if (x === undefined || y === undefined) {
@@ -48,6 +48,9 @@ export function useDefaultState(props) {
                     clientX: rect.left + svgPointerX,
                     clientY: rect.top + svgPointerY,
                 });
+            if (syntheticEvent) {
+                (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.dispatchEvent(syntheticEvent);
+            }
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: closest,
                 xAxis,

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { scaleLinear, select, symbol } from 'd3';
+import { scaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import { symbol } from 'd3-shape';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, } from '../../utils';

package/dist/cjs/components/RangeSlider/utils.js

@@ -1,4 +1,4 @@
-import { path } from 'd3';
+import { path } from 'd3-path';
 export function getFramedPath(args) {
     const { height, strokeWidth, width } = args;
     const p = path();

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedTooltip, PreparedXAxis, PreparedYAxis } from '../../hooks';
 import './styles.css';
 type TooltipProps = {

package/dist/cjs/components/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import debounce from 'lodash/debounce';
 import { i18nFactory } from '../i18n';
 import { getUniqId } from '../utils';

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

@@ -1,6 +1,6 @@
 import { duration } from '@gravity-ui/date-utils';
-import { line as lineGenerator } from 'd3';
 import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
 import { getLineDashArray, isTimeScale } from '../../utils';
 export function getInitialRangeSliderState(args) {
     const { defaultRange, xScale } = args;

package/dist/cjs/hooks/useAxis/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../../constants';
-import { TIME_UNITS, calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
@@ -49,7 +49,10 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
             html: axis.labels.html,
         })).maxHeight
         : axis.labels.lineHeight;
-    const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
+    const maxHeight = rotation
+        ? Math.abs(calculateSin(rotation)) * axis.labels.maxWidth +
+            Math.abs(calculateCos(rotation)) * axis.labels.lineHeight
+        : labelsHeight;
     axis.labels.height = Math.min(maxHeight, labelsHeight);
     axis.labels.rotation = rotation;
 }

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

@@ -1,4 +1,4 @@
-import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 type ChartScaleBand = ScaleBand<string>;
 export type ChartScaleLinear = ScaleLinear<number, number>;
 export type ChartScaleTime = ScaleTime<number, number>;

package/dist/cjs/hooks/useAxisScales/x-scale.js

@@ -1,4 +1,5 @@
-import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
+import { extent } from 'd3-array';
+import { scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3-scale';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SERIES_TYPE } from '../../constants';
 import { getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getEffectiveXRange, } from '../../utils';

package/dist/cjs/hooks/useAxisScales/y-scale.js

@@ -1,4 +1,5 @@
-import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc, tickStep, ticks } from 'd3';
+import { extent, tickStep, ticks } from 'd3-array';
+import { scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3-scale';
 import get from 'lodash/get';
 import { getTickValues } from '../../components/AxisY/utils';
 import { SERIES_TYPE } from '../../constants';

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { brush, brushX, brushY, pointer, select } from 'd3';
+import { brush, brushX, brushY } from 'd3-brush';
+import { pointer, select } from 'd3-selection';
 import { block } from '../../utils';
 import { getDefaultSelection, getNormalizedSelection, setBrushBorder, setBrushHandles, } from './utils';
 import './styles.css';

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

@@ -1,4 +1,4 @@
-import type { BrushBehavior } from 'd3';
+import type { BrushBehavior } from 'd3-brush';
 import type { ZoomType } from '../../constants';
 import type { ChartBrush, DeepRequired } from '../../types';
 export type BrushSelection = [number, number] | [[number, number], [number, number]];

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

@@ -1,4 +1,4 @@
-import type { BrushBehavior } from 'd3';
+import type { BrushBehavior } from 'd3-brush';
 import type { ChartBrush, DeepRequired } from '../../types';
 import type { BrushSelection } from './types';
 export declare function isOneDimensionalSelection(selection?: BrushSelection | null): selection is [number, number];

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

@@ -1,4 +1,5 @@
-import { path, select } from 'd3';
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
 import round from 'lodash/round';
 export function isOneDimensionalSelection(selection) {
     if (!Array.isArray(selection)) {

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

@@ -1,4 +1,4 @@
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale, PreparedSplit, PreparedXAxis, PreparedYAxis } from '../../hooks';
 type Props = {
     xAxis: PreparedXAxis | null;

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { line, select } from 'd3';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
 import { getAxisPlotsPosition, getLineDashArray } from '../../utils';
 import { getXValue, getYValue } from '../useShapes/utils';
 import { useCrosshairHover } from './useCrosshairHover';

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

@@ -1,4 +1,4 @@
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PointPosition, TooltipDataChunk } from '../../types';
 type Args = {
     dispatcher: Dispatch<object>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { pointer } from 'd3';
+import { pointer } from 'd3-selection';
 import { isEqual } from 'lodash';
 import { SERIES_TYPE } from '../../constants';
 import { isBandScale } from '../../utils';
@@ -17,15 +17,18 @@ const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: true,
 };
 export function useRangeSlider(props) {
-    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
+    const { activeLegendItems, boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
+            if (s.legend.enabled && !activeLegendItems.includes(s.legend.groupId)) {
+                return false;
+            }
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
                 return false;
             }
             return true;
         });
-    }, [preparedSeries]);
+    }, [preparedSeries, activeLegendItems]);
     const { xAxis: preparedXAxis, yAxis: preparedYAxis } = useAxis({
         boundsHeight: preparedRangeSlider.height,
         height,

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

@@ -9,6 +9,7 @@ export type RangeSliderState = {
     min: number;
 };
 export interface RangeSliderProps {
+    activeLegendItems: string[];
     boundsOffsetLeft: number;
     boundsWidth: number;
     height: number;

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

@@ -1,4 +1,5 @@
-import { group, scaleOrdinal } from 'd3';
+import { group } from 'd3-array';
+import { scaleOrdinal } from 'd3-scale';
 import { getSeriesNames } from '../../utils';
 import { prepareSeries } from './prepareSeries';
 export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { AreaSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedAreaSeries, PreparedLegend } from './types';
 export declare const DEFAULT_LINE_WIDTH = 1;

package/dist/cjs/hooks/useSeries/prepare-bar-x.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { BarXSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareBarXSeriesArgs = {

package/dist/cjs/hooks/useSeries/prepare-bar-y.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { BarYSeries, BarYSeriesData, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend } from './types';
 type PrepareBarYSeriesArgs = {

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

@@ -1,4 +1,4 @@
-import { scaleOrdinal } from 'd3';
+import { scaleOrdinal } from 'd3-scale';
 import get from 'lodash/get';
 import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { ChartSeriesOptions, HeatmapSeries } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareHeatmapSeriesArgs = {

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { ChartSeriesOptions, LineSeries } from '../../types';
 import type { PreparedLegend, PreparedLineSeries } from './types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;

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

@@ -1,4 +1,4 @@
-import { scaleOrdinal } from 'd3';
+import { scaleOrdinal } from 'd3-scale';
 import get from 'lodash/get';
 import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';

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

@@ -1,4 +1,4 @@
-import { scaleOrdinal } from 'd3';
+import { scaleOrdinal } from 'd3-scale';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../constants';

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { ChartSeriesOptions, SankeySeries } from '../../types';
 import type { PreparedLegend, PreparedSankeySeries } from './types';
 type PrepareSankeySeriesArgs = {

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { ChartSeriesOptions, ScatterSeries } from '../../types';
 import type { PreparedLegend, PreparedScatterSeries } from './types';
 interface PrepareScatterSeriesArgs {

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { ChartSeriesOptions, TreemapSeries } from '../../types';
 import type { PreparedLegend, PreparedTreemapSeries } from './types';
 type PrepareTreemapSeriesArgs = {

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { WaterfallSeries } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareWaterfallSeriesArgs = {

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

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal } from 'd3';
+import type { ScaleOrdinal } from 'd3-scale';
 import type { ChartSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 export declare function prepareSeries(args: {

package/dist/cjs/hooks/useShapes/area/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedAreaData } from './types';
 type Args = {

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { area as areaGenerator, color, line as lineGenerator, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { area as areaGenerator, line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
 import { block, filterOverlappingLabels } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/area/prepare-data.d.ts

@@ -9,7 +9,6 @@ export declare const prepareAreaData: (args: {
     xScale: ChartScale;
     yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
-    boundsHeight: number;
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
     isRangeSlider?: boolean;

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

@@ -1,4 +1,6 @@
-import { group } from 'd3';
+import { group } from 'd3-array';
+import isNil from 'lodash/isNil';
+import round from 'lodash/round';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
@@ -75,7 +77,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
 }
 export const prepareAreaData = async (args) => {
     var _a, _b, _c;
-    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, isRangeSlider, } = args;
+    const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const result = [];
@@ -92,6 +94,38 @@ export const prepareAreaData = async (args) => {
         for (let i = 0; i < list.length; i++) {
             const [_stackId, seriesStack] = list[i];
             const xValues = getXValues(seriesStack, xAxis, xScale);
+            const isPercentStacking = seriesStack.some((s) => s.stacking === 'percent');
+            const stackValues = Object.fromEntries(xValues.map(([key]) => [key, 0]));
+            const ratio = Object.fromEntries(xValues.map(([key]) => [key, 1]));
+            if (isPercentStacking) {
+                seriesStack.forEach((s) => {
+                    const yAxisIndex = s.yAxis;
+                    const seriesYScale = yScale[yAxisIndex];
+                    if (!seriesYScale) {
+                        return;
+                    }
+                    s.data.forEach((d, index) => {
+                        var _a, _b, _c;
+                        const yDataValue = (_a = d.y) !== null && _a !== void 0 ? _a : null;
+                        if (yDataValue &&
+                            !(isNil((_b = s.data[index - 1]) === null || _b === void 0 ? void 0 : _b.y) && isNil((_c = s.data[index + 1]) === null || _c === void 0 ? void 0 : _c.y))) {
+                            const x = String(xAxis.type === 'category'
+                                ? getDataCategoryValue({
+                                    axisDirection: 'x',
+                                    categories: xAxis.categories || [],
+                                    data: d,
+                                })
+                                : d.x);
+                            stackValues[x] += Number(yDataValue);
+                        }
+                    });
+                });
+                xValues.forEach(([x]) => {
+                    if (stackValues[x]) {
+                        ratio[x] = 100 / stackValues[x];
+                    }
+                });
+            }
             const positiveStackValues = new Map();
             const negativeStackValues = new Map();
             xValues.forEach(([key]) => {
@@ -132,12 +166,22 @@ export const prepareAreaData = async (args) => {
                         x,
                         y: 0,
                     };
-                    const yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
+                    let yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
                     if (s.nullMode === 'connect' && yDataValue === null) {
                         return pointsAcc;
                     }
-                    const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
+                    if (yDataValue && isPercentStacking) {
+                        yDataValue = Number(yDataValue) * ratio[x];
+                    }
+                    let yValue = getYValue({
+                        point: {
+                            y: yDataValue,
+                        },
+                        yAxis: seriesYAxis,
+                        yScale: seriesYScale,
+                    });
                     if (typeof yDataValue === 'number' && yValue !== null) {
+                        yValue = round(yValue, 2);
                         const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
                         const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
                         const currentPointStackHeight = Math.abs(yMin - yValue);
@@ -145,21 +189,30 @@ export const prepareAreaData = async (args) => {
                             const positiveStackHeights = positiveStackValues.get(x);
                             let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
                             let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
-                            pointsAcc.push({
+                            const point = {
                                 y0: yAxisTop + yMin - prevSectionStackHeight,
                                 x: xValue,
                                 y: yAxisTop + yValue - prevSectionStackHeight,
                                 data: d,
                                 series: s,
-                            });
+                            };
+                            pointsAcc.push(point);
                             if (prevSectionStackHeight !== nextSectionStackHeight) {
-                                pointsAcc.push({
+                                const point2 = {
                                     y0: yAxisTop + yMin - nextSectionStackHeight,
                                     x: xValue,
                                     y: yAxisTop + yValue - nextSectionStackHeight,
                                     data: d,
                                     series: s,
-                                });
+                                };
+                                pointsAcc.push(point2);
+                                if (isPercentStacking) {
+                                    const newYValue = yAxisTop +
+                                        yValue -
+                                        Math.max(prevSectionStackHeight, nextSectionStackHeight);
+                                    point.y = newYValue;
+                                    point2.y = newYValue;
+                                }
                             }
                             if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
                                 prevSectionStackHeight =
@@ -253,29 +306,6 @@ export const prepareAreaData = async (args) => {
                     htmlElements: [],
                 });
             }
-            if (seriesStack.some((s) => s.stacking === 'percent')) {
-                xValues.forEach(([x], index) => {
-                    var _a;
-                    const stackHeight = ((_a = positiveStackValues.get(x)) === null || _a === void 0 ? void 0 : _a.prev) || 0;
-                    let acc = 0;
-                    const ratio = plotHeight / stackHeight;
-                    seriesStackData.forEach((item) => {
-                        const point = item.points[index];
-                        if (point.y !== null && point.y !== undefined) {
-                            const height = (point.y0 - point.y) * ratio;
-                            const nextAcc = acc + height;
-                            point.y0 = plotHeight - acc;
-                            point.y = plotHeight - nextAcc;
-                            acc = nextAcc;
-                        }
-                    });
-                });
-                seriesStackData.forEach((item) => {
-                    item.markers.forEach((marker) => {
-                        marker.clipped = isOutsideBounds(marker.point.x, marker.point.y);
-                    });
-                });
-            }
             for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
                 const item = seriesStackData[itemIndex];
                 const currentYAxis = yAxis[item.series.yAxis];

package/dist/cjs/hooks/useShapes/bar-x/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedBarXData } from './types';
 export { prepareBarXData } from './prepare-data';

package/dist/cjs/hooks/useShapes/bar-x/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { color, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block, filterOverlappingLabels } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -1,4 +1,4 @@
-import { ascending, descending, max, reverse, sort } from 'd3';
+import { ascending, descending, max, reverse, sort } from 'd3-array';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';

package/dist/cjs/hooks/useShapes/bar-y/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { BarYShapesArgs } from './types';
 export { prepareBarYData } from './prepare-data';

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { color, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -1,4 +1,4 @@
-import { ascending, descending, sort } from 'd3';
+import { ascending, descending, sort } from 'd3-array';
 import get from 'lodash/get';
 import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';

package/dist/cjs/hooks/useShapes/funnel/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedFunnelData } from './types';
 export { prepareFunnelData } from './prepare-data';