@gravity-ui/charts 0.6.1 → 0.8.0

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

@@ -5,66 +5,72 @@ import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
+import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type TooltipDataChunkBarX<T = MeaningfulAny> = {
+export interface TooltipDataChunkBarX<T = MeaningfulAny> {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
-};
-export type TooltipDataChunkBarY<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkBarY<T = MeaningfulAny> {
     data: BarYSeriesData<T>;
     series: BarYSeries<T>;
-};
-export type TooltipDataChunkPie<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkPie<T = MeaningfulAny> {
     data: PieSeriesData<T>;
     series: {
         type: PieSeries['type'];
         id: string;
         name: string;
     };
-};
-export type TooltipDataChunkScatter<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkScatter<T = MeaningfulAny> {
     data: ScatterSeriesData<T>;
     series: {
         type: ScatterSeries['type'];
         id: string;
         name: string;
     };
-};
-export type TooltipDataChunkLine<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkLine<T = MeaningfulAny> {
     data: LineSeriesData<T>;
     series: {
         type: LineSeries['type'];
         id: string;
         name: string;
     };
-};
-export type TooltipDataChunkArea<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkArea<T = MeaningfulAny> {
     data: AreaSeriesData<T>;
     series: {
         type: AreaSeries['type'];
         id: string;
         name: string;
     };
-};
-export type TooltipDataChunkTreemap<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkTreemap<T = MeaningfulAny> {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
-};
-export type TooltipDataChunkWaterfall<T = MeaningfulAny> = {
+}
+export interface TooltipDataChunkSankey<T = MeaningfulAny> {
+    data: SankeySeriesData<T>;
+    target?: SankeySeriesData<T>;
+    series: SankeySeries<T>;
+}
+export interface TooltipDataChunkWaterfall<T = MeaningfulAny> {
     data: WaterfallSeriesData<T>;
     series: WaterfallSeries<T>;
-};
-export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
+}
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T>) & {
     closest?: boolean;
 };
-export type ChartTooltipRendererArgs<T = MeaningfulAny> = {
+export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     hovered: TooltipDataChunk<T>[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
-};
-export type ChartTooltip<T = MeaningfulAny> = {
+}
+export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
     renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
@@ -72,4 +78,4 @@ export type ChartTooltip<T = MeaningfulAny> = {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';
     };
-};
+}

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

@@ -2,7 +2,7 @@ import type { LayoutAlgorithm, SeriesType } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
-export type TreemapSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface TreemapSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The name of the node (used in legend, tooltip etc). */
     name: string | string[];
     /** The value of the node. All nodes should have this property except nodes that have children. */
@@ -14,8 +14,8 @@ export type TreemapSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
      * If no nodes has a matching id, or this option is undefined, then the parent will be set to the root.
      */
     parentId?: string;
-};
-export type TreemapSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface TreemapSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Treemap;
     data: TreemapSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc). */
@@ -43,4 +43,4 @@ export type TreemapSeries<T = MeaningfulAny> = BaseSeries & {
         /** Horizontal alignment of the data label inside the tile. */
         align?: 'left' | 'center' | 'right';
     };
-};
+}

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

@@ -2,7 +2,7 @@ import type { SeriesType } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
-export type WaterfallSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface WaterfallSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -21,8 +21,8 @@ export type WaterfallSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     opacity?: number;
     /** When this property is true, the point display the total sum across the entire series. */
     total?: boolean;
-};
-export type WaterfallSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Waterfall;
     data: WaterfallSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc). */
@@ -37,4 +37,4 @@ export type WaterfallSeries<T = MeaningfulAny> = BaseSeries & {
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
     };
-};
+}

package/dist/cjs/types/chart-ui.d.ts

@@ -1,5 +1,5 @@
 import type { BaseTextStyle } from './chart/base';
-export type LabelData = {
+export interface LabelData {
     text: string;
     x: number;
     y: number;
@@ -13,8 +13,8 @@ export type LabelData = {
         id: string;
     };
     active?: boolean;
-};
-export type HtmlItem = {
+}
+export interface HtmlItem {
     x: number;
     y: number;
     content: string;
@@ -22,7 +22,7 @@ export type HtmlItem = {
         width: number;
         height: number;
     };
-};
-export type ShapeDataWithHtmlItems = {
+}
+export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];
-};
+}

package/dist/cjs/types/formatter.d.ts

@@ -1,14 +1,14 @@
-export type FormatOptions = {
+export interface FormatOptions {
     precision?: number | 'auto';
     unitRate?: number;
     showRankDelimiter?: boolean;
     lang?: string;
     labelMode?: string;
-};
-export type FormatNumberOptions = FormatOptions & {
+}
+export interface FormatNumberOptions extends FormatOptions {
     format?: 'number' | 'percent';
     multiplier?: number;
     prefix?: string;
     postfix?: string;
     unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
-};
+}

package/dist/cjs/types/index.d.ts

@@ -25,18 +25,49 @@ export * from './chart/tooltip';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
-export type ChartData<T = MeaningfulAny> = {
+export * from './chart/sankey';
+export interface ChartData<T = MeaningfulAny> {
+    /**
+     * General options for the chart.
+     */
     chart?: ChartOptions;
+    /**
+     * The legend displays a labeled box for each data element in the chart.
+     * It shows a distinctive symbol paired with a name for every series.
+     */
     legend?: ChartLegend;
+    /**
+     * Represents the series data and series options.
+     */
     series: {
+        /**
+         * Contains data points to be plotted.
+         */
         data: ChartSeries<T>[];
+        /**
+         * Allows for customizing the appearance and behavior of the series.
+         */
         options?: ChartSeriesOptions;
     };
+    /**
+     * The main title of the chart.
+     */
     title?: ChartTitle;
+    /**
+     * Options for the tooltip that appears when the user hovers over a series or point.
+     */
     tooltip?: ChartTooltip<T>;
+    /**
+     * Options for the the X axis.
+     */
     xAxis?: ChartXAxis;
+    /**
+     * Options for the the Y axis or multiple Y axes.
+     */
     yAxis?: ChartYAxis[];
-    /** Setting for displaying charts on different plots.
-     * It can be used to visualize related information on multiple charts. */
+    /**
+     * Setting for displaying charts on different plots.
+     * It can be used to visualize related information on multiple charts.
+     */
     split?: ChartSplit;
-};
+}

package/dist/cjs/types/index.js

@@ -17,3 +17,4 @@ export * from './chart/tooltip';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
+export * from './chart/sankey';

package/dist/cjs/utils/chart/get-closest-data.d.ts

@@ -3,6 +3,8 @@ import type { ChartSeries, ChartSeriesData, TooltipDataChunk } from '../../types
 type GetClosestPointsArgs = {
     position: [number, number];
     shapesData: ShapeData[];
+    boundsHeight: number;
+    boundsWidth: number;
 };
 export type ShapePoint = {
     x: number;

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

@@ -35,7 +35,7 @@ function getSeriesType(shapeData) {
     return get(shapeData, 'series.type') || get(shapeData, 'point.series.type');
 }
 export function getClosestPoints(args) {
-    const { position, shapesData } = args;
+    const { position, shapesData, boundsHeight, boundsWidth } = args;
     const [pointerX, pointerY] = position;
     const result = [];
     const groups = groupBy(shapesData, getSeriesType);
@@ -135,13 +135,13 @@ export function getClosestPoints(args) {
             case 'pie': {
                 const points = list.map((d) => d.segments).flat();
                 const closestPoint = points.find((p) => {
-                    const { center, radius } = p.data.pie;
+                    const { center } = p.data.pie;
                     const x = pointerX - center[0];
                     const y = pointerY - center[1];
                     let angle = Math.atan2(y, x) + 0.5 * Math.PI;
                     angle = angle < 0 ? Math.PI * 2 + angle : angle;
                     const polarRadius = Math.sqrt(x * x + y * y);
-                    return angle >= p.startAngle && angle <= p.endAngle && polarRadius < radius;
+                    return (angle >= p.startAngle && angle <= p.endAngle && polarRadius < p.data.radius);
                 });
                 if (closestPoint) {
                     result.push({
@@ -166,7 +166,43 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'sankey': {
+                const [data] = list;
+                const closestLink = data.links.find((d) => {
+                    var _a;
+                    return isInsidePath({
+                        path: (_a = d.path) !== null && _a !== void 0 ? _a : '',
+                        strokeWidth: d.strokeWidth,
+                        point: [pointerX, pointerY],
+                        width: boundsWidth,
+                        height: boundsHeight,
+                    });
+                });
+                if (closestLink) {
+                    result.push({
+                        data: closestLink.source,
+                        target: closestLink.target,
+                        series: data.series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
         }
     });
     return result;
 }
+function isInsidePath(args) {
+    const { path, point, width, height, strokeWidth } = args;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.lineWidth = strokeWidth;
+        const path2D = new Path2D(path);
+        ctx.stroke(path2D);
+        return ctx.isPointInPath(path2D, ...point) || ctx.isPointInStroke(path2D, ...point);
+    }
+    return null;
+}

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

@@ -15,7 +15,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
-const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
+const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
     'area',

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

@@ -1 +1,2 @@
+export * from './line';
 export * from './waterfall';

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

@@ -1 +1,2 @@
+export * from './line';
 export * from './waterfall';

package/dist/cjs/utils/chart/series/line.d.ts

@@ -0,0 +1,2 @@
+import type { DashStyle } from 'src/constants';
+export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;

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

@@ -0,0 +1,17 @@
+export function getLineDashArray(dashStyle, strokeWidth = 2) {
+    const value = dashStyle.toLowerCase();
+    const arrayValue = value
+        .replace('shortdashdotdot', '3,1,1,1,1,1,')
+        .replace('shortdashdot', '3,1,1,1')
+        .replace('shortdot', '1,1,')
+        .replace('shortdash', '3,1,')
+        .replace('longdash', '8,3,')
+        .replace(/dot/g, '1,3,')
+        .replace('dash', '4,3,')
+        .replace(/,$/, '')
+        .split(',')
+        .map((part) => {
+        return `${parseInt(part, 10) * strokeWidth}`;
+    });
+    return arrayValue.join(',').replace(/NaN/g, 'none');
+}

package/dist/esm/components/Axis/AxisY.d.ts

@@ -7,6 +7,7 @@ type Props = {
     width: number;
     height: number;
     split: PreparedSplit;
+    plotRef?: React.MutableRefObject<SVGGElement | null>;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/esm/components/Axis/AxisY.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('d3-axis');
 function transformLabel(args) {
@@ -79,7 +79,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split } = props;
+    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -88,26 +88,34 @@ export const AxisY = (props) => {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const getAxisPosition = (axis) => {
+            var _a;
+            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (axis.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        };
+        const plotLines = axes.reduce((acc, axis) => {
+            if (axis.plotLines.length) {
+                acc.push(...axis.plotLines.map((plotLine) => {
+                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
+                }));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => {
-            var _a;
-            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (d.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        });
+            .style('transform', (d) => getAxisPosition(d));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
+            const axisScale = seriesScale;
             const yAxisGenerator = getAxisGenerator({
-                axisGenerator: d.position === 'left'
-                    ? axisLeft(seriesScale)
-                    : axisRight(seriesScale),
+                axisGenerator: d.position === 'left' ? axisLeft(axisScale) : axisRight(axisScale),
                 preparedAxis: d,
                 height,
                 width,
@@ -148,6 +156,40 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
+            if (plotRef && d.plotLines.length > 0) {
+                const plotLineClassName = b('plotLine');
+                const plotLineContainer = select(plotRef.current);
+                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
+                const plotLinesSelection = plotLineContainer
+                    .selectAll(`.${plotLineClassName}`)
+                    .data(plotLines)
+                    .join('g')
+                    .attr('class', plotLineClassName)
+                    .style('transform', (plotLine) => plotLine.transform);
+                plotLinesSelection
+                    .append('path')
+                    .attr('d', (plotLine) => {
+                    const plotLineValue = Number(axisScale(plotLine.value));
+                    const points = [
+                        [0, plotLineValue],
+                        [width, plotLineValue],
+                    ];
+                    return line()(points);
+                })
+                    .attr('stroke', (plotLine) => plotLine.color)
+                    .attr('stroke-width', (plotLine) => plotLine.width)
+                    .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                    .attr('opacity', (plotLine) => plotLine.opacity);
+                plotLinesSelection.each((plotLineData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotLineData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
             return axisItem;
         });
         axisSelection

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

@@ -15,6 +15,7 @@ export const ChartInner = (props) => {
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
+    const plotRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
     const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
@@ -63,9 +64,9 @@ export const ChartInner = (props) => {
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),

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

@@ -24,6 +24,8 @@ export function useChartInnerHandlers(props) {
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
@@ -65,6 +67,8 @@ export function useChartInnerHandlers(props) {
         const items = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
         if (!selected) {

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
-import { getLineDashArray } from '../../hooks/useShapes/utils';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('d3-legend');

package/dist/esm/components/PlotTitle/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import './styles.css';
-const b = block('d3-plot-title');
+const b = block('plot-title');
 export const PlotTitle = (props) => {
     const { title } = props;
     if (!title) {

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

@@ -1,4 +1,4 @@
-.chartkit-d3-plot-title {
+.gcharts-plot-title {
   font-size: var(--g-text-subheader-3-font-size);
   font-weight: var(--g-text-subheader-font-weight);
   fill: var(--g-color-text-secondary);

package/dist/esm/components/Tooltip/ChartTooltipContent.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
-export type ChartTooltipContentProps = {
+export interface ChartTooltipContentProps {
     hovered?: TooltipDataChunk[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
-};
+}
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

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

@@ -3,7 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
 import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, data, axis) => {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
@@ -29,7 +29,7 @@ const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
@@ -41,7 +41,9 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
-        hovered.map(({ data, series, closest }, i) => {
+        hovered.map((seriesItem, i) => {
+            var _a;
+            const { data, series, closest } = seriesItem;
             const id = `${get(series, 'id')}_${i}`;
             const color = get(series, 'color');
             switch (series.type) {
@@ -93,6 +95,20 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             "\u00A0"),
                         React.createElement("span", null, seriesData.value)));
                 }
+                case 'sankey': {
+                    const { target, data: source } = seriesItem;
+                    const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
+                        React.createElement("div", { style: { display: 'flex', gap: 8, verticalAlign: 'center' } },
+                            source.name,
+                            " ",
+                            React.createElement("span", null, "\u2192"),
+                            " ", target === null || target === void 0 ? void 0 :
+                            target.name,
+                            ": ",
+                            value)));
+                }
                 default: {
                     return null;
                 }