@gravity-ui/charts 0.7.0 → 0.9.0

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

@@ -9,6 +9,7 @@ export type SegmentData = {
     hovered: boolean;
     active: boolean;
     pie: PreparedPieData;
+    radius: number;
 };
 export type PieLabelData = LabelData & {
     segment: SegmentData;
@@ -25,7 +26,6 @@ export type PreparedPieData = {
     labels: PieLabelData[];
     connectors: PieConnectorData[];
     center: [number, number];
-    radius: number;
     innerRadius: number;
     borderRadius: number;
     borderWidth: number;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedSankeyData } from './types';
+type ShapeProps = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedSankeyData;
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare const SankeySeriesShape: (props: ShapeProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { select } from 'd3';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+const b = block('sankey');
+export const SankeySeriesShape = (props) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        // nodes
+        svgElement
+            .append('g')
+            .selectAll()
+            .data(preparedData.nodes)
+            .join('rect')
+            .attr('x', (d) => d.x0)
+            .attr('y', (d) => d.y0)
+            .attr('height', (d) => d.y1 - d.y0)
+            .attr('width', (d) => d.x1 - d.x0)
+            .attr('fill', (d) => d.color);
+        // links
+        svgElement
+            .append('g')
+            .attr('fill', 'none')
+            .selectAll()
+            .data(preparedData.links)
+            .join('g')
+            .append('path')
+            .attr('stroke-opacity', (d) => d.opacity)
+            .attr('d', (d) => d.path)
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.strokeWidth);
+        // dataLabels
+        svgElement
+            .append('g')
+            .selectAll()
+            .data(preparedData.labels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('dy', '0.35em')
+            .attr('text-anchor', (d) => d.textAnchor)
+            .attr('fill', (d) => { var _a; return (_a = d.style.fontColor) !== null && _a !== void 0 ? _a : null; });
+        const eventName = `hover-shape.sankey`;
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on(eventName, handleShapeHover);
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+};

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

@@ -0,0 +1,7 @@
+import type { PreparedSankeySeries } from '../../useSeries/types';
+import type { PreparedSankeyData } from './types';
+export declare function prepareSankeyData(args: {
+    series: PreparedSankeySeries;
+    width: number;
+    height: number;
+}): PreparedSankeyData;

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

@@ -0,0 +1,72 @@
+import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
+export function prepareSankeyData(args) {
+    const { series, width, height } = args;
+    const htmlElements = [];
+    const sankeyGenerator = sankey()
+        .nodeId((d) => d.name)
+        .nodeSort((d) => d.index)
+        .nodeWidth(15)
+        .nodePadding(10)
+        .extent([
+        [1, 5],
+        [width - 1, height - 5],
+    ]);
+    const { nodes, links } = sankeyGenerator({
+        nodes: series.data,
+        links: series.data.reduce((acc, item) => {
+            item.links.forEach((l) => {
+                const target = series.data.find((d) => d.name === l.name);
+                if (target) {
+                    acc.push({
+                        source: item,
+                        target,
+                        value: l.value,
+                    });
+                }
+            });
+            return acc;
+        }, []),
+    });
+    const sankeyNodes = nodes.map((node) => {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            x0: (_a = node.x0) !== null && _a !== void 0 ? _a : 0,
+            x1: (_b = node.x1) !== null && _b !== void 0 ? _b : 0,
+            y0: (_c = node.y0) !== null && _c !== void 0 ? _c : 0,
+            y1: (_d = node.y1) !== null && _d !== void 0 ? _d : 0,
+            color: (_e = node.color) !== null && _e !== void 0 ? _e : '',
+            data: series.data[(_f = node.index) !== null && _f !== void 0 ? _f : 0],
+        };
+    });
+    const sankeyLinks = links.map((d) => {
+        var _a, _b;
+        return {
+            opacity: 0.75,
+            color: (_a = d.source.color) !== null && _a !== void 0 ? _a : '',
+            path: sankeyLinkHorizontal()(d),
+            strokeWidth: Math.max(1, (_b = d.width) !== null && _b !== void 0 ? _b : 0),
+            source: d.source,
+            target: d.target,
+            value: d.value,
+        };
+    });
+    const dataLabels = [];
+    if (series.dataLabels.enabled) {
+        const labels = nodes.map((d) => {
+            var _a, _b, _c, _d;
+            const x0 = (_a = d.x0) !== null && _a !== void 0 ? _a : 0;
+            const x1 = (_b = d.x1) !== null && _b !== void 0 ? _b : 0;
+            const y0 = (_c = d.y0) !== null && _c !== void 0 ? _c : 0;
+            const y1 = (_d = d.y1) !== null && _d !== void 0 ? _d : 0;
+            return {
+                text: d.name,
+                x: x0 < width / 2 ? x1 + 6 : x0 - 6,
+                y: (y1 + y0) / 2,
+                textAnchor: x0 < width / 2 ? 'start' : 'end',
+                style: series.dataLabels.style,
+            };
+        });
+        dataLabels.push(...labels);
+    }
+    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlElements, labels: dataLabels };
+}

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

@@ -0,0 +1,33 @@
+import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
+import type { PreparedSankeySeries } from '../../useSeries/types';
+export type SankeyDataLabel = {
+    text: string;
+    x: number;
+    y: number;
+    textAnchor: 'start' | 'end';
+    style: BaseTextStyle;
+};
+export type SankeyNode = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    color: string;
+    data: SankeySeriesData;
+};
+export type SankeyLink = {
+    opacity: number;
+    color: string;
+    path: string | null;
+    strokeWidth: number;
+    source: SankeySeriesData;
+    target: SankeySeriesData;
+    value: number;
+};
+export type PreparedSankeyData = {
+    series: PreparedSankeySeries;
+    htmlElements: HtmlItem[];
+    nodes: SankeyNode[];
+    links: SankeyLink[];
+    labels: SankeyDataLabel[];
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -6,7 +6,7 @@ import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
-const b = block('d3-scatter');
+const b = block('scatter');
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/styles.css

@@ -1,35 +1,35 @@
-.gcharts-d3-scatter__point {
+.gcharts-scatter__point {
   stroke-width: 1px;
 }
 
-.gcharts-d3-pie__segment {
+.gcharts-pie__segment {
   stroke: var(--g-color-base-background);
 }
-.gcharts-d3-pie__label {
+.gcharts-pie__label {
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
   alignment-baseline: before-edge;
 }
 
-.gcharts-d3-bar-x__label {
+.gcharts-bar-x__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
 }
 
-.gcharts-d3-bar-y__label {
+.gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
   alignment-baseline: after-edge;
 }
 
-.gcharts-d3-treemap__label {
+.gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
   alignment-baseline: text-before-edge;
 }
 
-.gcharts-d3-waterfall__connector {
+.gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);
 }

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

@@ -3,7 +3,7 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-const b = block('d3-treemap');
+const b = block('treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);

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

@@ -1,5 +1,4 @@
 import type { BaseType } from 'd3';
-import type { DashStyle } from '../../constants';
 import type { BasicInactiveState } from '../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
@@ -26,4 +25,10 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
-export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;
+export declare function getRectPath(args: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius?: number | number[];
+}): import("d3-path").Path;

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

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { path, select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 export function getXValue(args) {
@@ -36,20 +36,25 @@ export function setActiveState(args) {
     }
     return datum;
 }
-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');
+export function getRectPath(args) {
+    const { x, y, width, height, borderRadius = 0 } = args;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const p = path();
+    let startAngle = -Math.PI / 2;
+    const angle = Math.PI / 2;
+    p.moveTo(x + borderRadiusTopLeft, y);
+    p.lineTo(x + width - borderRadiusTopRight, y);
+    p.arc(x + width - borderRadiusTopRight, y + borderRadiusTopRight, borderRadiusTopRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + width, y + height - borderRadiusBottomRight);
+    p.arc(x + width - borderRadiusBottomRight, y + height - borderRadiusBottomRight, borderRadiusBottomRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + borderRadiusBottomLeft, y + height);
+    p.arc(x + borderRadiusBottomLeft, y + height - borderRadiusBottomLeft, borderRadiusBottomLeft, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x, y + borderRadiusTopLeft);
+    p.arc(x + borderRadiusTopLeft, y + borderRadiusTopLeft, borderRadiusTopLeft, startAngle, startAngle + angle);
+    p.closePath();
+    return p;
 }

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

@@ -2,12 +2,11 @@ import React from 'react';
 import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { DashStyle } from '../../../constants';
-import { block, filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColor, } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getLineDashArray } from '../utils';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
-const b = block('d3-waterfall');
+const b = block('waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/index.d.ts

@@ -1,3 +1,3 @@
 export { CustomShapeRenderer } from './utils';
 export * from './components';
-export type { ChartData } from './types';
+export * from './types';

package/dist/cjs/index.js

@@ -1,2 +1,3 @@
 export { CustomShapeRenderer } from './utils';
 export * from './components';
+export * from './types';

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

@@ -1,3 +1,4 @@
+import type { DashStyle } from 'src/constants';
 import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
 export type ChartAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
@@ -72,9 +73,32 @@ export interface ChartAxis {
      * Defaults to 0.05 for Y axis and to 0.01 for X axis.
      * */
     maxPadding?: number;
+    /** An array of lines stretching across the plot area, marking a specific value */
+    plotLines?: AxisPlotLine[];
 }
 export interface ChartXAxis extends ChartAxis {
 }
+export interface AxisPlotLine {
+    /** The position of the line in axis units. */
+    value?: number;
+    /** The color of the plot line (hex, rgba). */
+    color?: string;
+    /** Pixel width of the plot line.
+     *
+     * @default 1
+     * */
+    width?: number;
+    /** Option for line stroke style. */
+    dashStyle?: `${DashStyle}`;
+    /**
+     * Individual opacity for the line.
+     *
+     * @default 1
+     * */
+    opacity?: number;
+    /** Place the line behind or above the chart. */
+    layerPlacement?: 'before' | 'after';
+}
 export interface ChartYAxis extends ChartAxis {
     /** Axis location.
      * Possible values - 'left' and 'right'.

package/dist/cjs/types/chart/bar-x.d.ts

@@ -36,6 +36,11 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
     /** Whether to stack the values of each series on top of each other.
      * Possible values are undefined to disable, "normal" to stack by value or "percent"
      *

package/dist/cjs/types/chart/bar-y.d.ts

@@ -29,6 +29,11 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
     /** Whether to stack the values of each series on top of each other.
      * Possible values are undefined to disable, "normal" to stack by value or "percent"
      *

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

@@ -14,6 +14,8 @@ export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     label?: string;
     /** Individual opacity for the pie segment. */
     opacity?: number;
+    /** The individual radius of the pie segment. The default value is series.radius */
+    radius?: string | number;
 }
 export type ConnectorShape = 'straight-line' | 'polyline';
 export type ConnectorCurve = 'linear' | 'basic';

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

@@ -0,0 +1,22 @@
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export interface SankeySeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
+    name: string;
+    color?: string;
+    links: {
+        name: string;
+        value: number;
+    }[];
+}
+export interface SankeySeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SeriesType.Sankey;
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    data: SankeySeriesData<T>[];
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+}

package/dist/cjs/types/chart/sankey.js

@@ -0,0 +1 @@
+export {};

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

@@ -8,11 +8,12 @@ import type { Halo } from './halo';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PointMarkerOptions } from './marker';
 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 ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T>;
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -72,6 +73,11 @@ export interface ChartSeriesOptions {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "y"
@@ -108,6 +114,11 @@ export interface ChartSeriesOptions {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"

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

@@ -5,6 +5,7 @@ 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';
@@ -52,11 +53,16 @@ export interface TooltipDataChunkTreemap<T = MeaningfulAny> {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
 }
+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 interface ChartTooltipRendererArgs<T = MeaningfulAny> {
@@ -72,4 +78,6 @@ export interface ChartTooltip<T = MeaningfulAny> {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';
     };
+    /** Show tooltip at most once per every ```throttle``` milliseconds */
+    throttle?: number;
 }

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

@@ -25,6 +25,7 @@ export * from './chart/tooltip';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
+export * from './chart/sankey';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

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