docs: add basic sankey (#2116)

Co-authored-by: lkd01632719 <lkd01632719@antgroup.com>
Co-authored-by: Joel Alan <31396322+lxfu1@users.noreply.github.com>

packages/plots/src/components/index.ts

@@ -13,6 +13,7 @@ import Waterfall from './waterfall';
 import Histogram from './histogram';
 import Heatmap from './heatmap';
 import Box from './box';
+import Sankey from './sankey';
 import Bullet from './bullet';
 import Gauge from './gauge';
 import Liquid from './liquid';
@@ -33,6 +34,7 @@ export type { WaterfallConfig } from './waterfall';
 export type { HistogramConfig } from './histogram';
 export type { HeatmapConfig } from './heatmap';
 export type { BoxConfig } from './box';
+export type { SankeyConfig } from './sankey';
 export type { BulletConfig } from './bullet';
 export type { GaugeConfig } from './gauge';
 export type { LiquidConfig } from './liquid';
@@ -55,6 +57,7 @@ export {
   Waterfall,
   Heatmap,
   Box,
+  Sankey,
   Bullet,
   Gauge,
   Liquid,

packages/plots/src/components/sankey/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SankeyOptions } from '../../core';
+import { CommonConfig } from '../../interface';
+import { BaseChart } from '../base';
+
+export type SankeyConfig = CommonConfig<SankeyOptions>;
+
+const SankeyChart = (props: SankeyConfig) => <BaseChart {...props} chartType="Sankey" />;
+
+export default SankeyChart;

packages/plots/src/core/index.ts

@@ -17,6 +17,7 @@ export type { WaterfallOptions } from './plots/waterfall';
 export type { HistogramOptions } from './plots/histogram';
 export type { HeatmapOptions } from './plots/heatmap';
 export type { BoxOptions } from './plots/box';
+export type { SankeyOptions } from './plots/sankey';
 export type { BulletOptions } from './plots/bullet';
 export type { GaugeOptions } from './plots/gauge';
 export type { LiquidOptions } from './plots/liquid';
@@ -43,6 +44,7 @@ import { Waterfall } from './plots/waterfall';
 import { Histogram } from './plots/histogram';
 import { Heatmap } from './plots/heatmap';
 import { Box } from './plots/box';
+import { Sankey } from './plots/sankey';
 import { Bullet } from './plots/bullet';
 import { Gauge } from './plots/gauge';
 import { Liquid } from './plots/liquid';
@@ -69,6 +71,7 @@ export const Plots = {
   Histogram,
   Heatmap,
   Box,
+  Sankey,
   Bullet,
   Gauge,
   Liquid,

packages/plots/src/core/plots/sankey/adaptor.ts

@@ -0,0 +1,21 @@
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import { flow, transformOptions } from '../../utils';
+import type { SankeyOptions } from './type';
+
+type Params = Adaptor<SankeyOptions>;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+  /**
+   * 图表差异化处理
+   */
+  const init = (params: Params) => {
+    return params;
+  };
+
+  return flow(init, transformOptions, mark)(params);
+}

packages/plots/src/core/plots/sankey/index.ts

@@ -0,0 +1,33 @@
+import { Plot } from '../../base';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { SankeyOptions } from './type';
+
+export type { SankeyOptions };
+
+export class Sankey extends Plot<SankeyOptions> {
+  /** 图表类型 */
+  public type = 'sankey';
+
+  /**
+   * 获取 双轴图 默认配置项
+   * 供外部使用
+   */
+  static getDefaultOptions(): Partial<SankeyOptions> {
+    return { type: 'view', children: [{ type: 'sankey' }] };
+  }
+
+  /**
+   * 获取 条形图 默认配置
+   */
+  protected getDefaultOptions() {
+    return Sankey.getDefaultOptions();
+  }
+
+  /**
+   * 条形图适配器
+   */
+  protected getSchemaAdaptor(): (params: Adaptor<SankeyOptions>) => void {
+    return adaptor;
+  }
+}

packages/plots/src/core/plots/sankey/type.ts

@@ -0,0 +1,3 @@
+import type { Options, BaseOptions } from '../../types/common';
+
+export type SankeyOptions = Options & BaseOptions;

site/examples/statistics/sankey/demo/basic.js

@@ -0,0 +1,46 @@
+import { Sankey } from '@ant-design/plots'
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoSankey = () => {
+  const config = {
+    layout: { nodeAlign: "center", nodePadding: 0.03 },
+    data: {
+      type: "fetch",
+      value: "https://assets.antv.antgroup.com/g2/energy.json",
+      transform: [
+        {
+          type: "custom",
+          callback: (data) => ({
+            links: data,
+          }),
+        },
+      ],
+    },
+    scale: {
+      color: {
+        range: [
+          "#4e79a7",
+          "#f28e2c",
+          "#e15759",
+          "#76b7b2",
+          "#59a14f",
+          "#edc949",
+          "#af7aa1",
+          "#ff9da7",
+          "#9c755f",
+          "#bab0ab",
+        ],
+      },
+    },
+    style: {
+      labelSpacing: 3,
+      labelFontWeight: "bold",
+      nodeStrokeWidth: 1.2,
+      linkFillOpacity: 0.4,
+    },
+  };
+  return <Sankey {...config} />;
+};
+
+ReactDOM.render(<DemoSankey />, document.getElementById('container'));

site/examples/statistics/sankey/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "basic.js",
+      "title": {
+        "zh": "桑基图",
+        "en": "Sankey"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dACBR7ANcfEAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/statistics/sankey/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Sankey
+order: 20
+---

site/examples/statistics/sankey/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 桑基图
+order: 20
+---
+
+