@gravity-ui/charts 1.40.0 → 1.41.1

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';

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';
@@ -162,6 +162,7 @@ export const prepareBarXData = async (args) => {
                             : yAxisTop + base + negativeStackHeight,
                         width: rectWidth,
                         height: shapeHeight,
+                        _height: height,
                         opacity: get(yValue.data, 'opacity', null),
                         data: yValue.data,
                         series: yValue.series,
@@ -178,9 +179,9 @@ export const prepareBarXData = async (args) => {
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (positiveStackHeight - (stackItems.length - 1) * stackGap);
+                    const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
-                        item.height = item.height * ratio;
+                        item.height = item._height * ratio;
                         item.y = plotHeight - item.height - acc;
                         acc += item.height + 1;
                     });

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

@@ -10,4 +10,9 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     label?: LabelData;
     htmlElements: HtmlItem[];
     isLastStackItem: boolean;
+    /**
+     * the utility field for storing the original height (for recalculations, etc.)
+     * should not be used for displaying
+     */
+    _height: number;
 };

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';

package/dist/cjs/hooks/useShapes/funnel/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 { block, getLineDashArray } from '../../../utils';
 export { prepareFunnelData } from './prepare-data';
 export * from './types';

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

@@ -1,4 +1,4 @@
-import { path } from 'd3';
+import { path } from 'd3-path';
 import { calculateNumericProperty, getFormattedValue, getTextSizeFn } from '../../../utils';
 function getLineConnectorPaths(args) {
     const { points } = args;

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

@@ -1,4 +1,4 @@
-import type { Path } from 'd3';
+import type { Path } from 'd3-path';
 import type { DashStyle } from 'src/constants';
 import type { FunnelSeriesData, LabelData } from '../../../types';
 import type { PreparedFunnelSeries } from '../../useSeries/types';

package/dist/cjs/hooks/useShapes/heatmap/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 { PreparedHeatmapData } from './types';
 export { prepareHeatmapData } from './prepare-data';

package/dist/cjs/hooks/useShapes/heatmap/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 { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 export { prepareHeatmapData } from './prepare-data';

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { group } from 'd3';
+import { group } from 'd3-array';
 import { SERIES_TYPE } from '../../constants';
 import { ChartError } from '../../libs';
 import { getOnlyVisibleSeries } from '../../utils';
@@ -119,7 +119,6 @@ export async function getShapes(args) {
                         xScale,
                         yAxis,
                         yScale,
-                        boundsHeight,
                         split,
                         isOutsideBounds,
                         isRangeSlider,

package/dist/cjs/hooks/useShapes/line/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 { PreparedLineData } from './types';
 type Args = {

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

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

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

@@ -1,4 +1,4 @@
-import type { BaseType, Selection } from 'd3';
+import type { BaseType, Selection } from 'd3-selection';
 import { SymbolType } from '../../constants';
 import type { MarkerData as AreaMarkerData } from './area/types';
 import type { MarkerData as LineMarkerData } from './line/types';

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

@@ -1,4 +1,4 @@
-import { symbol } from 'd3';
+import { symbol } from 'd3-shape';
 import get from 'lodash/get';
 import { SymbolType } from '../../constants';
 import { block, getSymbol } from '../../utils';

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { Dispatch, PieArcDatum } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
+import type { PieArcDatum } from 'd3-shape';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedPieData, SegmentData } from './types';
 type PreparePieSeriesArgs = {

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

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

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

@@ -1,4 +1,5 @@
-import { arc, group, line as lineGenerator, max } from 'd3';
+import { group, max } from 'd3-array';
+import { arc, line as lineGenerator } from 'd3-shape';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../../constants';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../../utils';

package/dist/cjs/hooks/useShapes/pie/types.d.ts

@@ -1,4 +1,4 @@
-import type { PieArcDatum } from 'd3';
+import type { PieArcDatum } from 'd3-shape';
 import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
 import type { PreparedPieSeries } from '../../useSeries/types';
 export type SegmentData = {

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

@@ -1,4 +1,4 @@
-import type { CurveFactory } from 'd3';
+import type { CurveFactory } from 'd3-shape';
 import type { PointPosition } from '../../../types';
 import type { PreparedPieData, SegmentData } from './types';
 export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;

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

@@ -1,4 +1,4 @@
-import { curveBasis, curveLinear, pie } from 'd3';
+import { curveBasis, curveLinear, pie } from 'd3-shape';
 export const pieGenerator = pie()
     .value((d) => d.value)
     .sort(null);

package/dist/cjs/hooks/useShapes/radar/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 { PreparedRadarData } from './types';
 type PrepareRadarSeriesArgs = {

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

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

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

@@ -1,4 +1,6 @@
-import { curveLinearClosed, line, range, scaleLinear } from 'd3';
+import { range } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { curveLinearClosed, line } from 'd3-shape';
 import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 export async function prepareRadarData(args) {

package/dist/cjs/hooks/useShapes/sankey/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 { PreparedSankeyData } from './types';
 type ShapeProps = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 const b = block('sankey');

package/dist/cjs/hooks/useShapes/scatter/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 { PreparedScatterData } from './types';
 export { prepareScatterData } from './prepare-data';

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

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

package/dist/cjs/hooks/useShapes/treemap/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 { PreparedTreemapData } from './types';
 type ShapeProps = {

package/dist/cjs/hooks/useShapes/treemap/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/treemap/prepare-data.js

@@ -1,4 +1,5 @@
-import { ascending, descending, sort, stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
+import { ascending, descending, sort } from 'd3-array';
+import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
 import { LayoutAlgorithm } from '../../../constants';
 import { getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';

package/dist/cjs/hooks/useShapes/treemap/types.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from 'd3';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { HtmlItem, TreemapSeriesData } from '../../../types';
 import type { PreparedTreemapSeries } from '../../useSeries/types';
 export type TreemapLabelData = {

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

@@ -1,4 +1,4 @@
-import type { BaseType } from 'd3';
+import type { BaseType } from 'd3-selection';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';