@gravity-ui/charts 1.40.0 → 1.41.1

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

@@ -3,8 +3,12 @@
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
+tr.gcharts-tooltip__content-row {
+  display: table-row;
+  padding: 0;
+}
+
 .gcharts-tooltip__popup-content {
-  max-width: 450px;
   text-wrap: nowrap;
   border-radius: 4px;
 }
@@ -20,7 +24,13 @@
 .gcharts-tooltip__content-rows_pinned {
   overflow: auto;
 }
+.gcharts-tooltip__content-rows-table {
+  width: 100%;
+  padding: 0;
+  border-collapse: collapse;
+}
 .gcharts-tooltip__series-name {
+  max-width: 450px;
   padding: 2px 14px 6px;
   font-size: 13px;
   font-weight: 600;
@@ -45,8 +55,23 @@
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
-.gcharts-tooltip__content-row-label {
+.gcharts-tooltip__content-row_totals {
+  color: var(--g-color-text-complementary);
+}
+.gcharts-tooltip__content-row-totals-label {
   overflow: hidden;
+  max-width: 400px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.gcharts-tooltip__content-row-totals-value {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.gcharts-tooltip__content-row-label-cell {
+  overflow: hidden;
+  max-width: 400px;
+  padding: 2px 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -58,12 +83,13 @@
   border-radius: 2px;
   background-color: #dddddd;
 }
-.gcharts-tooltip__content-row-value {
-  flex-shrink: 0;
-  margin-inline-start: auto;
+.gcharts-tooltip__content-row-color-cell {
+  width: 16px;
+  padding: 2px 4px 2px 14px;
 }
-.gcharts-tooltip__content-row-totals {
-  color: var(--g-color-text-complementary);
+.gcharts-tooltip__content-row-value-cell {
+  padding: 2px 14px 2px 4px;
+  text-align: end;
 }
 .gcharts-tooltip__content-row-totals-divider {
   margin-block: 5px 5px;

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ChartData } from '../types';
 export * from './Tooltip/ChartTooltipContent';
+export interface ChartReflowOptions {
+    immediate?: boolean;
+}
 export interface ChartRef {
-    reflow: () => void;
+    reflow: (options?: ChartReflowOptions) => void;
 }
 export interface ChartDimentions {
     height: number;

package/dist/esm/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';
@@ -30,10 +30,15 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
         return debounced.current;
     }, [handleResize]);
     React.useImperativeHandle(forwardedRef, () => ({
-        reflow() {
-            debuncedHandleResize();
+        reflow(options) {
+            if (options === null || options === void 0 ? void 0 : options.immediate) {
+                handleResize();
+            }
+            else {
+                debuncedHandleResize();
+            }
         },
-    }), [debuncedHandleResize]);
+    }), [debuncedHandleResize, handleResize]);
     React.useEffect(() => {
         // dimensions initialize
         handleResize();

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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';