feat(sankey): support null to represent loss. (#3222)

* feat(sankey): sankey support not to display node and edge which is null

* chore: v2.4.17 & changelog

Author: visiky

CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 2.4.17 (2022-05-24)
+
+##### New Features
+
+* **sankey:**  sankey support not to display node and edge which is null ([89a4a14b](https://github.com/antvis/G2plot/commit/89a4a14b547b406c84cbeb6fc0b5b85290b3e929))
+
 #### 2.4.16 (2022-04-22)
 
 ##### Chores

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

@@ -202,4 +202,25 @@ describe('sankey', () => {
     sankey.destroy();
     removeDom(dom);
   });
+
+  it('new Sankey({...}) supports not to display null.', () => {
+    const DATA = [
+      { source: 'a', target: null, value: 9 },
+      { source: 'a', target: 'b', value: 40 },
+    ];
+
+    const sankey = new Sankey(createDiv(), {
+      data: DATA,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+    });
+
+    sankey.render();
+
+    expect(sankey.chart.views[0].geometries[0].elements.length).toBe(1);
+    expect(sankey.chart.views[1].geometries[0].elements.length).toBe(2);
+
+    sankey.destroy();
+  });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g2plot",
-  "version": "2.4.16",
+  "version": "2.4.17",
   "description": "An interactive and responsive charting library",
   "keywords": [
     "chart",

src/index.ts

@@ -1,4 +1,4 @@
-export const version = '2.4.16';
+export const version = '2.4.17';
 
 // G2 自定义能力透出
 import * as G2 from '@antv/g2';

src/plots/sankey/layout.ts

@@ -150,25 +150,38 @@ export function sankeyLayout(
   const layoutData: SankeyLayoutOutputData = sankeyProcessor(data);
 
   // post process (x, y), etc.
-  layoutData.nodes.forEach((node) => {
-    const { x0, x1, y0, y1 } = node;
-    /* points
-     * 3---2
-     * |   |
-     * 0---1
-     */
-    node.x = [x0, x1, x1, x0];
-    node.y = [y0, y0, y1, y1];
-  });
-
-  layoutData.links.forEach((edge) => {
-    const { source, target } = edge;
-    const sx = source.x1;
-    const tx = target.x0;
-    edge.x = [sx, sx, tx, tx];
-    const offset = edge.width / 2;
-    edge.y = [edge.y0 + offset, edge.y0 - offset, edge.y1 + offset, edge.y1 - offset];
-  });
-
-  return layoutData;
+  const nodes = layoutData.nodes
+    .map((node) => {
+      const { x0, x1, y0, y1 } = node;
+      /* points
+       * 3---2
+       * |   |
+       * 0---1
+       */
+      node.x = [x0, x1, x1, x0];
+      node.y = [y0, y0, y1, y1];
+
+      return node;
+    })
+    .filter((node) => {
+      return node.name !== null;
+    });
+
+  const links = layoutData.links
+    .map((edge) => {
+      const { source, target } = edge;
+      const sx = source.x1;
+      const tx = target.x0;
+      edge.x = [sx, sx, tx, tx];
+      const offset = edge.width / 2;
+      edge.y = [edge.y0 + offset, edge.y0 - offset, edge.y1 + offset, edge.y1 - offset];
+
+      return edge;
+    })
+    .filter((edge) => {
+      const { source, target } = edge;
+      return source.name !== null && target.name !== null;
+    });
+
+  return { nodes, links };
 }