patches sankey

co-author: adriankormier [email protected] co-author: shao-shuai [email protected] co-author: KwonJiyongGD [email protected] co-author : jayoo0621 [email protected]
open-source-labs · Jul 15, 2023 · 082b5ed · 082b5ed
1 parent 50d159f
commit 082b5ed
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "build": "vite build",
     "test": "jest --verbose",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ."
+    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
+    "postinstall": "npx patch-package"
   },
   "dependencies": {
     "@emotion/react": "^11.10.4",
@@ -28,6 +29,8 @@
     "colors": "^1.4.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
+    "d3": "^7.8.5",
+    "d3-sankey": "^0.12.3",
     "electron-squirrel-startup": "^1.0.0",
     "helm": "^0.2.1",
     "jsonwebtoken": "^9.0.0",

diff --git a/patches/d3-sankey+0.12.3.patch b/patches/d3-sankey+0.12.3.patch
@@ -0,0 +1,22 @@
+diff --git a/node_modules/d3-sankey/src/sankey.js b/node_modules/d3-sankey/src/sankey.js
+index 56ad642..a593c86 100644
+--- a/node_modules/d3-sankey/src/sankey.js
++++ b/node_modules/d3-sankey/src/sankey.js
+@@ -190,12 +190,16 @@ export default function Sankey() {
+     }
+   }
+
++  const alignReplaced = function r(n, t) {
++    return n.sourceLinks.length ? n.depth : t - 1;
++  }
++
+   function computeNodeLayers({nodes}) {
+     const x = max(nodes, d => d.depth) + 1;
+     const kx = (x1 - x0 - dx) / (x - 1);
+     const columns = new Array(x);
+     for (const node of nodes) {
+-      const i = Math.max(0, Math.min(x - 1, Math.floor(align.call(null, node, x))));
++      const i = Math.max(0, Math.min(x - 1, Math.floor(alignReplaced(node, x))));
+       node.layer = i;
+       node.x0 = x0 + i * kx;
+       node.x1 = node.x0 + dx;
diff --git a/src/components/Network/Network.tsx b/src/components/Network/Network.tsx
@@ -1,2 +1,167 @@
+import React, { useRef, useEffect } from 'react';
+import * as d3 from 'd3';
+import { sankey as d3Sankey, sankeyLinkHorizontal } from 'd3-sankey';
+import { useAppSelector, useAppDispatch } from '../../reducers/hooks';
+import globalStyles from '../global.module.scss';
 
-export default Network;
+  const rawData = {
+    nodes: [
+      {
+        name: 'network1',
+        category: 'network',
+      },
+      {
+        name: 'network2',
+        category: 'network',
+      },
+      {
+        name: 'container1',
+        category: 'container',
+      },
+      {
+        name: 'container2',
+        category: 'container',
+      },
+      {
+        name: 'network3',
+        category: 'network',
+      },
+      {
+        name: 'container3',
+        category: 'container',
+      },
+      {
+        name: 'container4',
+        category: 'container',
+      },
+      {
+        name: 'container5',
+        category: 'container',
+      },
+    ],
+    links: [
+      {
+        source: 'network1',
+        target: 'container1',
+        value: 23,
+      },
+      {
+        source: 'network1',
+        target: 'container2',
+        value: 45,
+      },
+      {
+        source: 'network2',
+        target: 'container1',
+        value: 23,
+      },
+      {
+        source: 'network1',
+        target: 'container3',
+        value: 23,
+      },
+      {
+        source: 'network1',
+        target: 'container4',
+        value: 45,
+      },
+      {
+        source: 'network1',
+        target: 'container5',
+        value: 23,
+      },
+    ],
+  };
+
+const Network = (): JSX.Element => {
+  // const { networkContainerList } = useAppSelector((state) => state.networks);
+  // const data = networkContainerList;
+  const ref = useRef();
+  // manipulate data so that we have an array of all of our links between containers and networks
+  // nodes
+
+  useEffect(() => {
+
+    const width = 1000;
+    const height = 800;
+    const format = d3.format(',.0f');
+
+    const svg = d3
+      .select(ref.current)
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .attr('viewBox', [0, 0, width, height])
+      .attr('style', 'max-width: 100%; height: auto; font: 10px sans-serif;');
+
+    const sankey = d3Sankey()
+      .nodeId((d) => d.name)
+      .nodeAlign(d3.sankeyLeft)
+      .nodeWidth(15)
+      .nodePadding(10)
+      .extent([
+        [1, 5],
+        [width - 1, height - 5],
+      ]);
+
+    const { nodes, links } = sankey({
+      nodes: rawData.nodes.map((d) => Object.assign({}, d)),
+      links: rawData.links.map((d) => Object.assign({}, d)),
+    });
+
+    const color = d3.scaleOrdinal(d3.schemeCategory10);
+
+    const rect = svg
+      .append('g')
+      .attr('stroke', '#000')
+      .selectAll()
+      .data(nodes)
+      .join('rect')
+      .attr('x', (d) => d.x0)
+      .attr('y', (d) => d.y0)
+      .attr('height', (d) => d.y1 - d.y0)
+      .attr('width', (d) => d.x1 - d.x0)
+      .attr('fill', (d) => color(d.category));
+
+    rect.append('title').text((d) => `${d.name}\n${format(d.value)} TWh`);
+
+    const link = svg
+      .append('g')
+      .attr('fill', 'none')
+      .attr('stroke-opacity', 0.5)
+      .selectAll()
+      .data(links)
+      .join('g')
+      .style('mix-blend-mode', 'multiply');
+
+    link
+      .append('path')
+      .attr('d', sankeyLinkHorizontal())
+      .attr('stroke', 'red')
+      .attr('stroke-width', 40);
+
+    link
+      .append('title')
+      .text(
+        (d) => `${d.source.name} → ${d.target.name}\n${format(d.value)} TWh`
+      );
+
+    svg
+      .append('g')
+      .selectAll()
+      .data(nodes)
+      .join('text')
+      .attr('x', (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
+      .attr('y', (d) => (d.y1 + d.y0) / 2)
+      .attr('dy', '0.35em')
+      .attr('text-anchor', (d) => (d.x0 < width / 2 ? 'start' : 'end'))
+      .text((d) => d.name);
+
+  }, []);
+
+  return <div ref={ref}></div>;
+};
+
+// };
+
+export default Network;