@gravity-ui/charts 0.7.0 → 0.9.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/utils/chart/series/index.d.ts

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

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

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

package/dist/esm/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/esm/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/utils/{d3-dispatcher.d.ts → dispatcher.d.ts}

@@ -3,4 +3,4 @@ export declare const EventType: {
     HOVER_SHAPE: string;
     POINTERMOVE_CHART: string;
 };
-export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;
+export declare const getDispatcher: () => import("d3-dispatch").Dispatch<object>;

package/dist/esm/utils/{d3-dispatcher.js → dispatcher.js}

@@ -4,6 +4,6 @@ export const EventType = {
     HOVER_SHAPE: 'hover-shape',
     POINTERMOVE_CHART: 'pointermove-chart',
 };
-export const getD3Dispatcher = () => {
+export const getDispatcher = () => {
     return dispatch(EventType.CLICK_CHART, EventType.HOVER_SHAPE, EventType.POINTERMOVE_CHART);
 };

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

@@ -1,5 +1,5 @@
 export * from './chart';
 export * from './chart-ui';
 export * from './cn';
-export * from './d3-dispatcher';
+export * from './dispatcher';
 export * from './misc';

package/dist/esm/utils/index.js

@@ -1,5 +1,5 @@
 export * from './chart';
 export * from './chart-ui';
 export * from './cn';
-export * from './d3-dispatcher';
+export * from './dispatcher';
 export * from './misc';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -53,13 +53,21 @@
     "prepublishOnly": "npm run build",
     "docs:deps": "cd ./docs && npm ci",
     "docs:dev": "cd ./docs && npm run docs:dev",
-    "docs:build": "cd ./docs && npm run docs:build"
+    "docs:build": "cd ./docs && npm run docs:build",
+    "playwright:install": "playwright install chromium webkit --with-deps",
+    "playwright": "playwright test --config=playwright/playwright.config.ts",
+    "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
+    "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
+    "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
+    "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^2.5.4",
     "@gravity-ui/i18n": "^1.6.0",
     "d3": "^7.9.0",
+    "d3-sankey": "^0.12.3",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"
   },
@@ -74,6 +82,8 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^7.4.0",
+    "@playwright/experimental-ct-react": "^1.51.1",
+    "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-actions": "^8.2.9",
     "@storybook/addon-essentials": "^8.2.9",
@@ -93,6 +103,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.3",
+    "@types/d3-sankey": "^0.12.4",
     "@types/d3-selection": "^3.0.11",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.12",