@gravity-ui/charts 1.40.0 → 1.41.1

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

@@ -1,4 +1,5 @@
-import { path, select } from 'd3';
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;

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

package/dist/cjs/hooks/useShapes/waterfall/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 { DASH_STYLE } from '../../../constants';
 import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColor, } from '../../../utils';

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

@@ -1,4 +1,4 @@
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import { useBrush } from '../useBrush';
 import { selectionToZoomBounds } from './utils';
 export function useZoom(props) {

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

@@ -1,4 +1,4 @@
-import type { BrushSelection } from 'd3';
+import type { BrushSelection } from 'd3-brush';
 import type { ZoomType } from '../../constants';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';

package/dist/cjs/hooks/utils/bar-y.js

@@ -1,4 +1,4 @@
-import { max } from 'd3';
+import { max } from 'd3-array';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';

package/dist/cjs/hooks/utils/get-band-size.d.ts

@@ -1,4 +1,4 @@
-import type { AxisDomain, AxisScale } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
 export declare function getBandSize({ domain, scale, }: {
     domain: AxisDomain[];
     scale: AxisScale<AxisDomain> | undefined;

package/dist/cjs/types/chart/pie.d.ts

@@ -1,4 +1,4 @@
-import type { BaseType } from 'd3';
+import type { BaseType } from 'd3-selection';
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';

package/dist/cjs/types/chart/tooltip.d.ts

@@ -113,6 +113,10 @@ export type ChartTooltipRowRendererArgs = {
     value: string | number | null | undefined;
     formattedValue?: string;
     hovered?: TooltipDataChunk<unknown>[];
+    /**
+     * CSS class name pre-built with active/striped modifiers.
+     * Apply it to the root `<tr>` element of the returned row: `<tr className={className}>`.
+     */
     className?: string;
 };
 export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk<T>, b: TooltipDataChunk<T>) => number;
@@ -123,7 +127,26 @@ export interface ChartTooltip<T = MeaningfulAny> {
     /**
      * Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
      * It is useful in cases where you need to display additional information, but keep the general format of the tooltip.
-     * If a string is returned, it will be interpreted as raw HTML and inserted without escaping.
+     *
+     * The returned React element must be a `<tr>` so that it fits into the table layout used by the tooltip.
+     * Apply the `className` arg to the root `<tr>` to get the correct active/striped styles.
+     *
+     * If a string is returned, it will be parsed as HTML and rendered as-is — the string must be a complete
+     * `<tr>...</tr>` element.
+     * @example React element
+     * ```tsx
+     * rowRenderer: ({id, name, value, className}) => (
+     *   <tr key={id} className={className}>
+     *     <td>{name}</td>
+     *     <td>{value}</td>
+     *   </tr>
+     * )
+     * ```
+     * @example Raw HTML string
+     * ```ts
+     * rowRenderer: ({name, value, className}) =>
+     *   `<tr class="${className}"><td>${name}</td><td>${value}</td></tr>`
+     * ```
      */
     rowRenderer?: ((args: ChartTooltipRowRendererArgs) => React.ReactElement | string) | null;
     pin?: {

package/dist/cjs/utils/chart/axis/common.d.ts

@@ -1,4 +1,5 @@
-import type { AxisDomain, AxisScale, ScaleBand, ScaleTime } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
+import type { ScaleBand, ScaleTime } from 'd3-scale';
 import type { ChartScale, PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../../hooks';
 import type { ChartAxis } from '../../../types';
 import type { AxisDirection } from '../types';

package/dist/cjs/utils/chart/axis/common.js

@@ -1,4 +1,4 @@
-import { ascending, descending, reverse, sort } from 'd3';
+import { ascending, descending, reverse, sort } from 'd3-array';
 import clamp from 'lodash/clamp';
 import { getScaleTicks } from '../ticks';
 export function getTicksCountByPixelInterval({ axis, axisWidth, }) {

package/dist/cjs/utils/chart/axis-generators/bottom.d.ts

@@ -1,4 +1,5 @@
-import type { AxisDomain, AxisScale, Selection } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
+import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../../types';
 interface AxisBottomArgs {
     domain: {

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

@@ -1,4 +1,5 @@
-import { path, select } from 'd3';
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
 import { getAxisItems, getXAxisOffset, getXTickPosition } from '../axis/common';
 import { calculateCos, calculateSin } from '../math';
 import { getLabelsSize, setEllipsisForOverflowText } from '../text';

package/dist/cjs/utils/chart/color.js

@@ -1,4 +1,5 @@
-import { range, scaleLinear } from 'd3';
+import { range } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
 export function getDomainForContinuousColorScale(args) {
     const { series } = args;
     const values = series.reduce((acc, s) => {

package/dist/cjs/utils/chart/common.js

@@ -1,4 +1,5 @@
-import { group, select } from 'd3';
+import { group } from 'd3-array';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';

package/dist/cjs/utils/chart/format.d.ts

@@ -1,4 +1,4 @@
-import type { AxisDomain } from 'd3';
+import type { AxisDomain } from 'd3-axis';
 import type { PreparedAxis } from '../../hooks';
 import type { CustomFormat, ValueFormat } from '../../types';
 export declare function getFormattedValue(args: {

package/dist/cjs/utils/chart/get-closest-data.js

@@ -1,4 +1,5 @@
-import { Delaunay, bisector, sort } from 'd3';
+import { bisector, sort } from 'd3-array';
+import { Delaunay } from 'd3-delaunay';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
 function getClosestYIndex(items, y) {

package/dist/cjs/utils/chart/legend.d.ts

@@ -1,4 +1,4 @@
-import type { Selection } from 'd3';
+import type { Selection } from 'd3-selection';
 export declare function createGradientRect(container: Selection<SVGGElement, unknown, null, undefined>, args: {
     x?: number;
     y?: number;

package/dist/cjs/utils/chart/series/sorting.js

@@ -1,4 +1,4 @@
-import { sort } from 'd3';
+import { sort } from 'd3-array';
 import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 import { SERIES_TYPE } from '../../../constants';

package/dist/cjs/utils/chart/symbol.js

@@ -1,4 +1,4 @@
-import { symbolCircle, symbolDiamond2, symbolSquare, symbolTriangle2 } from 'd3';
+import { symbolCircle, symbolDiamond2, symbolSquare, symbolTriangle2 } from 'd3-shape';
 import { SymbolType } from '../../constants';
 export const getSymbolType = (index) => {
     const scatterStyles = Object.values(SymbolType);

package/dist/cjs/utils/chart/text.d.ts

@@ -1,4 +1,4 @@
-import type { Selection } from 'd3';
+import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
 export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number, textWidth?: number): void;
 export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number, textWidth?: number): void;

package/dist/cjs/utils/chart/ticks/datetime.js

@@ -1,4 +1,5 @@
-import { bisector, tickStep, utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3';
+import { bisector, tickStep } from 'd3-array';
+import { utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3-time';
 import { DAY, HOUR, MINUTE, MONTH, SECOND, WEEK, YEAR } from '../../../constants';
 const tickIntervals = [
     [utcSecond, 1, SECOND],

package/dist/cjs/utils/chart/ticks/index.d.ts

@@ -1,4 +1,4 @@
-import type { AxisDomain, AxisScale } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
 import type { ChartScale } from '../../../hooks';
 export declare function getScaleTicks({ scale, ticksCount, }: {
     scale: ChartScale | AxisScale<AxisDomain>;

package/dist/cjs/utils/dispatcher.js

@@ -1,4 +1,4 @@
-import { dispatch } from 'd3';
+import { dispatch } from 'd3-dispatch';
 export const EventType = {
     CLICK_CHART: 'click-chart',
     HOVER_SHAPE: 'hover-shape',

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/Tooltip/DefaultTooltipContent/Row.js

@@ -12,8 +12,8 @@ export function Row(props) {
         }
         return null;
     }, [color, colorSymbol]);
-    return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
-        colorItem,
-        React.createElement("span", { className: b('content-row-label') }, label),
-        value && React.createElement("span", { className: b('content-row-value') }, value)));
+    return (React.createElement("tr", { className: b('content-row', { active, striped }, className), style: style },
+        colorItem && React.createElement("td", { className: b('content-row-color-cell') }, colorItem),
+        React.createElement("td", { className: b('content-row-label-cell') }, label),
+        value && React.createElement("td", { className: b('content-row-value-cell') }, value)));
 }

package/dist/esm/components/Tooltip/DefaultTooltipContent/RowWithAggregation.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { block } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { Row } from './Row';
 import { getBuiltInAggregatedValue, getBuiltInAggregationLabel } from './utils';
 const b = block('tooltip');
 export function RowWithAggregation(props) {
@@ -19,5 +18,7 @@ export function RowWithAggregation(props) {
             format: valueFormat || { type: 'number' },
         })
         : resultValue;
-    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, style: style, value: formattedResultValue }));
+    return (React.createElement("div", { className: b('content-row', { totals: true }), style: style },
+        React.createElement("span", { className: b('content-row-totals-label') }, resultLabel),
+        formattedResultValue && (React.createElement("span", { className: b('content-row-totals-value') }, formattedResultValue))));
 }

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Divider } from '@gravity-ui/uikit';
+import parse from 'html-react-parser';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { usePrevious } from '../../../hooks';
@@ -35,7 +36,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                 hovered,
             });
             if (typeof result === 'string') {
-                return React.createElement("div", { key: id, dangerouslySetInnerHTML: { __html: result } });
+                return React.createElement(React.Fragment, { key: id }, parse(result));
             }
             return result;
         }
@@ -75,127 +76,136 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
             setScrollBarWidth(0);
         }
     }, [pinned]);
+    const rowsContent = (React.createElement(React.Fragment, null, visibleHovered.map((seriesItem, i) => {
+        var _a;
+        const { data, series, closest } = seriesItem;
+        const id = `${get(series, 'id')}_${i}`;
+        const color = get(data, 'color') || get(series, 'color');
+        // TODO: improve active item display https://github.com/gravity-ui/charts/issues/208
+        const active = closest && hovered.length > 1;
+        const striped = (i + 1) % 2 === 0;
+        const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
+        switch (series.type) {
+            case 'scatter':
+            case 'line':
+            case 'area':
+            case 'bar-x': {
+                const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue,
+                    series,
+                });
+            }
+            case 'waterfall': {
+                const isTotal = get(data, 'total', false);
+                const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
+                const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                const subTotal = getFormattedValue({
+                    value: subTotalValue,
+                    format,
+                });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return (React.createElement(React.Fragment, { key: id },
+                    !isTotal && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
+                        React.createElement(Row, { label: series.name, value: formattedValue }))),
+                    React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
+            }
+            case 'bar-y': {
+                const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'pie':
+            case 'heatmap':
+            case 'treemap':
+            case 'funnel': {
+                const seriesData = data;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    name: [seriesData.name || seriesData.id].flat().join('\n'),
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'sankey': {
+                const { target, data: source } = seriesItem;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'radar': {
+                const radarSeries = series;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    active,
+                    name: radarSeries.name || radarSeries.id,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            default: {
+                return null;
+            }
+        }
+    })));
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name') },
             React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: pinned ? { maxHeight: maxContentRowsHeight } : undefined },
-            visibleHovered.map((seriesItem, i) => {
-                var _a;
-                const { data, series, closest } = seriesItem;
-                const id = `${get(series, 'id')}_${i}`;
-                const color = get(data, 'color') || get(series, 'color');
-                // TODO: improve action item display https://github.com/gravity-ui/charts/issues/208
-                const active = closest && hovered.length > 1;
-                const striped = (i + 1) % 2 === 0;
-                const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
-                switch (series.type) {
-                    case 'scatter':
-                    case 'line':
-                    case 'area':
-                    case 'bar-x': {
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return renderRow({
-                            id,
-                            active,
-                            color,
-                            name: series.name,
-                            striped,
-                            value: hoveredValues[i],
-                            formattedValue,
-                            series,
-                        });
-                    }
-                    case 'waterfall': {
-                        const isTotal = get(data, 'total', false);
-                        const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
-                        const subTotal = getFormattedValue({
-                            value: subTotalValue,
-                            format,
-                        });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return (React.createElement(React.Fragment, { key: id },
-                            !isTotal && (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
-                                React.createElement(Row, { label: series.name, value: formattedValue }))),
-                            React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
-                    }
-                    case 'bar-y': {
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return renderRow({
-                            id,
-                            active,
-                            color,
-                            name: series.name,
-                            striped,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'pie':
-                    case 'heatmap':
-                    case 'treemap':
-                    case 'funnel': {
-                        const seriesData = data;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            name: [seriesData.name || seriesData.id].flat().join('\n'),
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'sankey': {
-                        const { target, data: source } = seriesItem;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'radar': {
-                        const radarSeries = series;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            active,
-                            name: radarSeries.name || radarSeries.id,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    default: {
-                        return null;
-                    }
-                }
-            }),
-            Boolean(restHoveredValues.length) && (React.createElement(Row, { label: i18n('tooltip', 'label_more', { count: restHoveredValues.length }), striped: (visibleHovered.length + 1) % 2 === 0 }))),
+            React.createElement("table", { className: b('content-rows-table') },
+                React.createElement("tbody", null, rowsContent))),
+        Boolean(restHoveredValues.length) && (React.createElement("div", { className: b('content-row', {
+                striped: (visibleHovered.length + 1) % 2 === 0,
+            }) }, i18n('tooltip', 'label_more', { count: restHoveredValues.length }))),
         (totals === null || totals === void 0 ? void 0 : totals.enabled) && hovered.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(Divider, { className: b('content-row-totals-divider') }),
-            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
+            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({
+                    hovered,
+                    totals,
+                    xAxis,
+                    yAxis,
+                }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
 };

package/dist/esm/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 = {