@gravity-ui/charts 0.6.0 → 0.6.1-beta.2

package/dist/esm/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/esm/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/esm/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,12 +13,16 @@ export type LabelData = {
         id: string;
     };
     active?: boolean;
-};
-export type HtmlItem = {
+}
+export interface HtmlItem {
     x: number;
     y: number;
     content: string;
-};
-export type ShapeDataWithHtmlItems = {
+    size: {
+        width: number;
+        height: number;
+    };
+}
+export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];
-};
+}

package/dist/esm/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/esm/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "0.6.0",
+  "version": "0.6.1-beta.2",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -50,13 +50,17 @@
     "build": "gulp",
     "start": "storybook dev -p 7007",
     "build-storybook": "storybook build -c .storybook -o storybook-static",
-    "prepublishOnly": "npm run build"
+    "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"
   },
   "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"
   },
@@ -90,6 +94,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",