feat(sankey): update d3-sankey layout for depth customize (#2378)

* feat(depth): update di-sankey layout for depth customize

* chore: remove unused

* test: fix ci

* chore: for cr

* chore: update ci

* chore: remove unused action

.github/workflows/build.yml

@@ -1,6 +1,6 @@
 name: build
 
-on: ["push", "pull_request"]
+on: ["pull_request"]
 
 jobs:
   build:

__tests__/unit/plots/sankey/depth-spec.ts

@@ -0,0 +1,53 @@
+import { Sankey } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('sankey', () => {
+  it('nodeDepth', () => {
+    const ALIPAY_DATA = [
+      { source: 'A', target: 'B', value: 160 },
+      { source: 'B', target: 'C', value: 10 },
+      { source: 'C', target: 'D', value: 8 },
+      { source: 'E', target: 'D', value: 27 },
+    ];
+
+    const sankey = new Sankey(createDiv(), {
+      height: 500,
+      data: ALIPAY_DATA,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      nodeDepth: (node) => {
+        switch (node.name) {
+          case 'A':
+            return 1;
+          case 'B':
+            return 0;
+          case 'C':
+            return 2;
+          case 'D':
+            return 2;
+          // case 'E':
+          //   return 2;
+        }
+        return node.depth;
+      },
+    });
+
+    sankey.render();
+
+    const elements = sankey.chart.views[1].geometries[0].elements;
+    // a 在 b 的右侧
+    // @ts-ignore
+    expect(elements[0].data.x[0]).toBeGreaterThan(elements[1].data.x[0]);
+
+    // a === e
+    // @ts-ignore
+    expect(elements[4].data.x[0]).toBe(elements[1].data.x[0]);
+
+    // c === d
+    // @ts-ignore
+    expect(elements[2].data.x[0]).toBe(elements[3].data.x[0]);
+
+    sankey.destroy();
+  });
+});

__tests__/unit/utils/transform/sankey-spec.ts → __tests__/unit/plots/sankey/layout-spec.ts

@@ -1,24 +1,24 @@
-import { sankeyLeft, sankeyJustify } from 'd3-sankey';
-import { sankeyLayout, getNodeAlignFunction, getDefaultOptions } from '../../../../src/utils/transform/sankey';
+import { left, justify } from '../../../../src/plots/sankey/sankey';
+import { sankeyLayout, getNodeAlignFunction, getDefaultOptions } from '../../../../src/plots/sankey/layout';
 import { ENERGY } from '../../../data/sankey-energy';
 
 describe('sankeyLayout', () => {
   it('getNodeAlignFunction', () => {
-    expect(getNodeAlignFunction(null, null)).toBe(sankeyJustify);
-    expect(getNodeAlignFunction(undefined, null)).toBe(sankeyJustify);
+    expect(getNodeAlignFunction(null, null)).toBe(justify);
+    expect(getNodeAlignFunction(undefined, null)).toBe(justify);
     // @ts-ignore
-    expect(getNodeAlignFunction('middle', null)).toBe(sankeyJustify);
+    expect(getNodeAlignFunction('middle', null)).toBe(justify);
 
-    expect(getNodeAlignFunction('left', null)).toBe(sankeyLeft);
+    expect(getNodeAlignFunction('left', null)).toBe(left);
 
     const fn = jest.fn();
     // @ts-ignore
     expect(getNodeAlignFunction(fn)).toBe(fn);
 
-    expect(getNodeAlignFunction(sankeyLeft, () => 1)).not.toBe(sankeyLeft);
+    expect(getNodeAlignFunction(left, () => 1)).not.toBe(left);
 
     // @ts-ignore
-    expect(getNodeAlignFunction(123)).toBe(sankeyJustify);
+    expect(getNodeAlignFunction(123)).toBe(justify);
   });
 
   it('getDefaultOptions', () => {

__tests__/unit/plots/sankey/sankey/monkey-spec.ts

@@ -0,0 +1,71 @@
+import { M, randomFloat } from 'miz';
+import { sankey } from '../../../../../src/plots/sankey/sankey';
+import { cutoffCircle } from '../../../../../src/plots/sankey/circle';
+import { transformDataToNodeLinkData } from '../../../../../src/utils/data';
+
+const C = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'K',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'Z',
+  'Y',
+  'Z',
+];
+
+describe('sankey', () => {
+  it('monkey for deep', () => {
+    for (let i = 0; i < 100; i++) {
+      const layout = sankey()
+        .nodeWidth(0.008)
+        // @ts-ignore
+        .nodePadding(0.02)
+        .nodeAlign((_, maxDepth) => randomFloat(0, maxDepth, 0))
+        .extent([
+          [0, 0],
+          [1, 1],
+        ]);
+
+      const data = M.arrayOf(
+        M.shape({
+          source: M.oneOf(C),
+          target: M.oneOf(C),
+          value: M.number(1, 10),
+        }),
+        10,
+        50
+      ).mock();
+
+      const sankeyLayoutInputData = transformDataToNodeLinkData(
+        cutoffCircle(data, 'source', 'target'),
+        'source',
+        'target',
+        'value'
+      );
+
+      // 不报错即可
+      expect(() => {
+        layout(sankeyLayoutInputData);
+      }).not.toThrow();
+    }
+  });
+});

package.json

@@ -58,7 +58,6 @@
     "@antv/g2": "^4.1.0",
     "d3-hierarchy": "^2.0.0",
     "d3-regression": "^1.3.5",
-    "d3-sankey": "^0.12.3",
     "size-sensor": "^1.0.1",
     "tslib": "^2.0.3"
   },
@@ -92,6 +91,7 @@
     "limit-size": "^0.1.3",
     "lint-md-cli": "^0.1.2",
     "lint-staged": "^10.0.7",
+    "miz": "^1.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.1",
     "react": "^16.11.0",

src/plots/sankey/helper.ts

@@ -1,6 +1,6 @@
 import { isRealNumber } from '../../utils/number';
 import { transformDataToNodeLinkData } from '../../utils/data';
-import { sankeyLayout } from '../../utils/transform/sankey';
+import { sankeyLayout } from './layout';
 import { cutoffCircle } from './circle';
 import { SankeyOptions } from './types';