feat(sankey): demo & docs

antvis · Dec 2, 2020 · 68fc461 · 68fc461
1 parent 82e6b22
commit 68fc461
Show file tree

Hide file tree

Showing 12 changed files with 239 additions and 20 deletions.
diff --git a/__tests__/unit/plots/sankey/index-spec.ts b/__tests__/unit/plots/sankey/index-spec.ts
@@ -1,9 +1,9 @@
-import { Sankey } from '../../../../src';
+import { Datum, Sankey } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
 import { ENERGY_RELATIONS } from '../../../data/sankey-energy';
 
 describe('sankey', () => {
-  it('Sankey', () => {
+  it('sankey', () => {
     const sankey = new Sankey(createDiv(), {
       height: 500,
       data: ENERGY_RELATIONS,
@@ -62,5 +62,65 @@ describe('sankey', () => {
     sankey.chart.showTooltip({ x: 100, y: 100 });
     expect(document.querySelector('.g2-tooltip-name').textContent).toBe('Oil imports -> Oil');
     expect(document.querySelector('.g2-tooltip-value').textContent).toBe('504.287');
+
+    sankey.destroy();
+  });
+
+  it('sankey style', () => {
+    const DATA = [
+      { 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 },
+    ];
+
+    let d = null;
+    const sankey = new Sankey(createDiv(), {
+      data: DATA,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      nodeStyle: (datum: Datum) => {
+        d = datum;
+        return {
+          fill: 'red',
+        };
+      },
+      edgeStyle: {
+        fill: '#ccc',
+        fillOpacity: 0.5,
+      },
+    });
+
+    sankey.render();
+
+    // @ts-ignore
+    expect(sankey.chart.views[1].geometries[0].styleOption.cfg).toEqual({
+      fill: '#ccc',
+      fillOpacity: 0.5,
+      lineWidth: 0,
+      opacity: 0.3,
+    });
+
+    // @ts-ignore
+    expect(sankey.chart.views[0].geometries[0].styleOption.fields).toEqual(['x', 'y', 'name']);
+
+    expect(d).toEqual({
+      name: '其他流向',
+      x: [0.992, 1, 1, 0.992],
+      y: [0.8358823529411765, 0.8358823529411765, 1, 1],
+    });
+
+    // sankey.destroy();
   });
 });
diff --git a/docs/manual/plots/sankey.en.md b/docs/manual/plots/sankey.en.md
@@ -0,0 +1,6 @@
+---
+title: Sankey
+order: 27
+---
+
+`markdown:docs/manual/plots/sankey.zh.md`
diff --git a/docs/manual/plots/sankey.zh.md b/docs/manual/plots/sankey.zh.md
@@ -0,0 +1,80 @@
+---
+title: 桑基图
+order: 27
+---
+
+### Plot Container
+
+`markdown:docs/common/chart-options.en.md`
+
+### Data Mapping
+
+#### data
+
+<description>**required** _array object_</description>
+
+设置图表数据源。数据源为对象集合，例如：`[{ source: '支付宝首页', target: '花呗', value: 20 }, ...]`。
+
+#### sourceField
+
+<description>**required** _string_</description>
+
+设置桑基图的来源节点数据字段。比如针对上述数据，就是： `source`。
+
+#### targetField
+
+<description>**required** _string_</description>
+
+设置桑基图的目标节点数据字段。比如针对上述数据，就是： `target`。
+
+#### weightField
+
+<description>**required** _string_</description>
+
+设置节点之间关系的权重字段信息，数据越大，边越大。比如针对上述数据，就是： `value`。
+
+### Geometry Style
+
+#### nodeStyle
+
+<description>**optional** _StyleAttr | Function_</description>
+
+桑基图节点样式的配置。
+
+#### edgeStyle
+
+<description>**optional** _StyleAttr | Function_</description>
+
+桑基图变样式的配置。
+
+`markdown:docs/common/color.en.md`
+
+#### nodeWidthRatio
+
+<description>**optional** _number_</description>
+
+桑基图节点的宽度配置，0 ~ 1，参考画布的宽度，默认为 `0.008`。
+
+#### nodeWidthPadding
+
+<description>**optional** _number_</description>
+
+桑基图节点的之间垂直方向的间距，0 ~ 1，参考画布的高度，默认为 `0.01`。
+
+#### nodeAlign
+
+<description>**optional** _string_</description>
+
+桑基图节点的布局方向，默认为 `justify`，可以选择 'left' | 'right' | 'center' | 'justify' 四种方式。
+
+### Event
+
+`markdown:docs/common/events.en.md`
+
+### Plot Method
+
+`markdown:docs/common/chart-methods.en.md`
+
+### Plot Theme
+
+`markdown:docs/common/theme.en.md`
diff --git a/examples/sankey/basic/API.en.md b/examples/sankey/basic/API.en.md
@@ -0,0 +1,2 @@
+`markdown:docs/manual/plots/sankey.en.md`
+
diff --git a/examples/sankey/basic/API.zh.md b/examples/sankey/basic/API.zh.md
@@ -0,0 +1 @@
+`markdown:docs/manual/plots/sankey.zh.md`
diff --git a/examples/sankey/basic/demo/alipay.ts b/examples/sankey/basic/demo/alipay.ts
@@ -0,0 +1,29 @@
+import { Sankey } from '@antv/g2plot';
+
+const DATA = [
+  { 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 },
+];
+
+const sankey = new Sankey('container', {
+  data: DATA,
+  sourceField: 'source',
+  targetField: 'target',
+  weightField: 'value',
+  nodeWidthRatio: 0.008,
+  nodePaddingRatio: 0.03,
+});
+
+sankey.render();
diff --git a/examples/sankey/basic/demo/energy.ts b/examples/sankey/basic/demo/energy.ts
@@ -0,0 +1,19 @@
+import { Sankey } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/fa3414cc-75ed-47b4-8306-f2ffe8c40127.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const sankey = new Sankey('container', {
+      data,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      color: ['red', 'green', 'yellow'],
+      edgeStyle: {
+        fill: '#ccc',
+        fillOpacity: 0.4,
+      },
+    });
+
+    sankey.render();
+  });
diff --git a/examples/sankey/basic/demo/meta.json b/examples/sankey/basic/demo/meta.json
@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "alipay.ts",
+      "title": {
+        "zh": "支付宝流量桑基图",
+        "en": "Alipay sankey"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*bLulSLk-VskAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "energy.ts",
+      "title": {
+        "zh": "能量关系桑基图",
+        "en": "Energy sankey"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*W-V0QYiLLbgAAAAAAAAAAAAAARQnAQ"
+    }
+  ]
+}
diff --git a/examples/sankey/basic/index.en.md b/examples/sankey/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Sankey
+order: 0
+---
diff --git a/examples/sankey/basic/index.zh.md b/examples/sankey/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 桑基图
+order: 0
+---
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -252,6 +252,14 @@ module.exports = {
           en: 'Radial Bar',
         },
       },
+      {
+        slug: 'sankey',
+        icon: 'sankey',
+        title: {
+          zh: '桑基图',
+          en: 'Sankey',
+        },
+      },
       {
         slug: 'bidirectional-bar',
         icon: 'bi-directional-bar',

diff --git a/src/plots/sankey/adaptor.ts b/src/plots/sankey/adaptor.ts
@@ -114,24 +114,6 @@ function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
     },
   });
 
-  // edgeView
-  //   .edge()
-  //   .position(`${X_FIELD}*${Y_FIELD}`)
-  //   .shape('arc')
-  //   .color(COLOR_FIELD)
-  //   .style(edgeStyle)
-  //   .tooltip(tooltipFields.join('*'), (target, source, value) => {
-  //     return formatter({ target, source, value })
-  //   })
-  // .state({
-  //   active: {
-  //     style: {
-  //       opacity: 0.8,
-  //       lineWidth: 0,
-  //     },
-  //   },
-  //   });
-
   chart.interaction('element-active');
 
   // scale