docs: add three demos

ant-design · Dec 27, 2023 · e4005be · e4005be
1 parent 67928ab
commit e4005be
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 13 deletions.
diff --git a/packages/plots/src/core/plots/sankey/index.ts b/packages/plots/src/core/plots/sankey/index.ts
@@ -10,22 +10,33 @@ export class Sankey extends Plot<SankeyOptions> {
   public type = 'sankey';
 
   /**
-   * 获取 双轴图 默认配置项
+   * 获取 桑基图 默认配置项
    * 供外部使用
    */
   static getDefaultOptions(): Partial<SankeyOptions> {
-    return { type: 'view', children: [{ type: 'sankey' }] };
+    return {
+      type: 'view',
+      children: [{ type: 'sankey' }],
+      data: {
+        transform: [
+          {
+            type: 'custom',
+            callback: (data) => ({ links: data }),
+          },
+        ],
+      },
+    };
   }
 
   /**
-   * 获取 条形图 默认配置
+   * 获取 桑基图 默认配置
    */
   protected getDefaultOptions() {
     return Sankey.getDefaultOptions();
   }
 
   /**
-   * 条形图适配器
+   * 桑基图适配器
    */
   protected getSchemaAdaptor(): (params: Adaptor<SankeyOptions>) => void {
     return adaptor;

diff --git a/site/examples/statistics/sankey/demo/alipay.js b/site/examples/statistics/sankey/demo/alipay.js
@@ -0,0 +1,50 @@
+import { Sankey } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const colors = [
+  '#5B8FF9',
+  '#61DDAA',
+  '#65789B',
+  '#F6BD16',
+  '#7262fd',
+  '#78D3F8',
+  '#9661BC',
+  '#F6903D',
+  '#008685',
+  '#F08BB4',
+];
+
+const DemoSankey = () => {
+  const config = {
+    data: {
+      value: [
+        { source: '首次打开', target: '首页 UV', value: 160 },
+        { source: '结果页', target: '首页 UV', value: 40 },
+        { source: '验证页', target: '首页 UV', value: 10 },
+        { source: '我的', target: '首页 UV', value: 10 },
+        { source: '朋友', target: '首页 UV', value: 8 },
+        { source: '其他来源', target: '首页 UV', value: 27 },
+        { source: '首页 UV', target: '理财', value: 30 },
+        { source: '首页 UV', target: '扫一扫', value: 40 },
+        { source: '首页 UV', target: '服务', value: 35 },
+        { source: '首页 UV', target: '蚂蚁森林', value: 25 },
+        { source: '首页 UV', target: '跳失', value: 10 },
+        { source: '首页 UV', target: '借呗', value: 30 },
+        { source: '首页 UV', target: '花呗', value: 40 },
+        { source: '首页 UV', target: '其他流向', value: 45 },
+      ],
+    },
+    scale: { color: { range: colors } },
+    layout: { nodeWidth: 0.01 },
+    linkColorField: (d) => d.source.key,
+    style: {
+      labelFontSize: 13,
+      linkFillOpacity: 0.4,
+      nodeStrokeWidth: 0,
+    },
+  };
+  return <Sankey {...config} />;
+};
+
+ReactDOM.render(<DemoSankey />, document.getElementById('container'));
diff --git a/site/examples/statistics/sankey/demo/basic.js b/site/examples/statistics/sankey/demo/basic.js
@@ -4,18 +4,9 @@ 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: {
@@ -33,6 +24,7 @@ const DemoSankey = () => {
         ],
       },
     },
+    layout: { nodeAlign: 'center', nodePadding: 0.03 },
     style: {
       labelSpacing: 3,
       labelFontWeight: 'bold',

diff --git a/site/examples/statistics/sankey/demo/energy.js b/site/examples/statistics/sankey/demo/energy.js
@@ -0,0 +1,19 @@
+import { Sankey } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoSankey = () => {
+  const config = {
+    data: {
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/bmw-prod/fa3414cc-75ed-47b4-8306-f2ffe8c40127.json',
+    },
+    scale: { color: { range: ['red', 'green', 'yellow'] } },
+    layout: { nodeWidth: 0.01, nodePadding: 0.01 },
+    linkColorField: (d) => d.source.key,
+    style: { linkFillOpacity: 0.4 },
+  };
+  return <Sankey {...config} />;
+};
+
+ReactDOM.render(<DemoSankey />, document.getElementById('container'));
diff --git a/site/examples/statistics/sankey/demo/meta.json b/site/examples/statistics/sankey/demo/meta.json
@@ -11,6 +11,30 @@
         "en": "Sankey"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dACBR7ANcfEAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "alipay.js",
+      "title": {
+        "zh": "支付宝流量桑基图",
+        "en": "Alipay sankey"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fecqTpstXu0AAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "energy.js",
+      "title": {
+        "zh": "能量关系桑基图",
+        "en": "Energy sankey"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8o1RQJ2fqdsAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "node-sort-sankey.js",
+      "title": {
+        "zh": "节点排序前桑基图",
+        "en": "NodeSort sankey"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ubm3Q4E1qCAAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/site/examples/statistics/sankey/demo/node-sort-sankey.js b/site/examples/statistics/sankey/demo/node-sort-sankey.js
@@ -0,0 +1,53 @@
+import { Sankey } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const colors = [
+  '#5B8FF9',
+  '#61DDAA',
+  '#65789B',
+  '#F6BD16',
+  '#7262fd',
+  '#78D3F8',
+  '#9661BC',
+  '#F6903D',
+  '#008685',
+  '#F08BB4',
+];
+
+const DemoSankey = () => {
+  const config = {
+    data: {
+      value: [
+        { source: '首次打开', target: '首页 UV', value: 160 },
+        { source: '结果页', target: '首页 UV', value: 40 },
+        { source: '验证页', target: '首页 UV', value: 10 },
+        { source: '我的', target: '首页 UV', value: 10 },
+        { source: '朋友', target: '首页 UV', value: 8 },
+        { source: '其他来源', target: '首页 UV', value: 27 },
+        { source: '首页 UV', target: '理财', value: 30 },
+        { source: '首页 UV', target: '扫一扫', value: 40 },
+        { source: '首页 UV', target: '服务', value: 35 },
+        { source: '首页 UV', target: '蚂蚁森林', value: 25 },
+        { source: '首页 UV', target: '跳失', value: 10 },
+        { source: '首页 UV', target: '借呗', value: 30 },
+        { source: '首页 UV', target: '花呗', value: 40 },
+        { source: '首页 UV', target: '其他流向', value: 45 },
+      ],
+    },
+    scale: { color: { range: colors } },
+    layout: {
+      nodeWidth: 0.01,
+      nodeSort: (a, b) => b.value - a.value,
+    },
+    linkColorField: (d) => d.source.key,
+    style: {
+      labelFontSize: 13,
+      linkFillOpacity: 0.4,
+      nodeStrokeWidth: 0,
+    },
+  };
+  return <Sankey {...config} />;
+};
+
+ReactDOM.render(<DemoSankey />, document.getElementById('container'));