work on Sankey diagram + unit tests

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.6cd2e1a7f84da13459a6.js"></script></body>
+<script type="text/javascript" src="bundle.a1c15d9f438ce991ce06.js"></script></body>
 </html>

docs/src/App.js

@@ -34,6 +34,7 @@ const xyChartComponents = [
 
 const standaloneChartComponents = [
   {name: 'PieChart', path: '/pie-chart', Component: Docs.PieChartDocs},
+  {name: 'SankeyDiagram', path: '/sankey', Component: Docs.SankeyDiagramDocs},
   {name: 'TreeMap', path: '/tree-map', Component: Docs.TreeMapDocs},
 ];
 

docs/src/docs/SankeyDiagram/SankeyDiagramDocs.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ComponentDocs from '../../ComponentDocs';
+import ExampleSection from '../../ExampleSection';
+// autogenerated docs data containing descriptions of this component's props
+import propDocs from './propDocs.json';
+
+const examples = [
+  {
+    id: "basic",
+    label: "Basic SankeyDiagram",
+    codeText: require('raw-loader!./examples/SankeyDiagram.js.example'),
+  },
+  {
+    id: "interactive",
+    label: "Interactive Sankey Diagram",
+    codeText: require('raw-loader!./examples/SankeyInteractive.js.example'),
+  },
+];
+
+export default class SankeyDiagramExamples extends React.Component {
+  render() {
+    return <ComponentDocs name="SankeyDiagram" propDocs={propDocs}>
+
+      {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
+
+      {examples.map(example => {
+        return <ExampleSection {...example} key={example.id} />;
+      })}
+    </ComponentDocs>;
+  }
+}

docs/src/docs/SankeyDiagram/examples/SankeyDiagram.js.example

@@ -0,0 +1,137 @@
+const SankeyDiagramExample = (props) => {
+  const graph = getSampleData();
+  return <div>
+    <SankeyDiagram
+      width={900}
+      height={500}
+      nodes={graph.nodes}
+      links={graph.links}
+      getNodeId={(d, i) => i}
+    />
+  </div>;
+};
+
+ReactDOM.render(<SankeyDiagramExample />, mountNode);
+
+function getSampleData() {
+  return {"nodes":[
+    {"name":"Agricultural 'waste'"},
+    {"name":"Bio-conversion"},
+    {"name":"Liquid"},
+    {"name":"Losses"},
+    {"name":"Solid"},
+    {"name":"Gas"},
+    {"name":"Biofuel imports"},
+    {"name":"Biomass imports"},
+    {"name":"Coal imports"},
+    {"name":"Coal"},
+    {"name":"Coal reserves"},
+    {"name":"District heating"},
+    {"name":"Industry"},
+    {"name":"Heating and cooling - commercial"},
+    {"name":"Heating and cooling - homes"},
+    {"name":"Electricity grid"},
+    {"name":"Over generation / exports"},
+    {"name":"H2 conversion"},
+    {"name":"Road transport"},
+    {"name":"Agriculture"},
+    {"name":"Rail transport"},
+    {"name":"Lighting & appliances - commercial"},
+    {"name":"Lighting & appliances - homes"},
+    {"name":"Gas imports"},
+    {"name":"Ngas"},
+    {"name":"Gas reserves"},
+    {"name":"Thermal generation"},
+    {"name":"Geothermal"},
+    {"name":"H2"},
+    {"name":"Hydro"},
+    {"name":"International shipping"},
+    {"name":"Domestic aviation"},
+    {"name":"International aviation"},
+    {"name":"National navigation"},
+    {"name":"Marine algae"},
+    {"name":"Nuclear"},
+    {"name":"Oil imports"},
+    {"name":"Oil"},
+    {"name":"Oil reserves"},
+    {"name":"Other waste"},
+    {"name":"Pumped heat"},
+    {"name":"Solar PV"},
+    {"name":"Solar Thermal"},
+    {"name":"Solar"},
+    {"name":"Tidal"},
+    {"name":"UK land based bioenergy"},
+    {"name":"Wave"},
+    {"name":"Wind"}
+  ],
+    "links":[
+      {"source":0,"target":1,"value":124.729},
+      {"source":1,"target":2,"value":0.597},
+      {"source":1,"target":3,"value":26.862},
+      {"source":1,"target":4,"value":280.322},
+      {"source":1,"target":5,"value":81.144},
+      {"source":6,"target":2,"value":35},
+      {"source":7,"target":4,"value":35},
+      {"source":8,"target":9,"value":11.606},
+      {"source":10,"target":9,"value":63.965},
+      {"source":9,"target":4,"value":75.571},
+      {"source":11,"target":12,"value":10.639},
+      {"source":11,"target":13,"value":22.505},
+      {"source":11,"target":14,"value":46.184},
+      {"source":15,"target":16,"value":104.453},
+      {"source":15,"target":14,"value":113.726},
+      {"source":15,"target":17,"value":27.14},
+      {"source":15,"target":12,"value":342.165},
+      {"source":15,"target":18,"value":37.797},
+      {"source":15,"target":19,"value":4.412},
+      {"source":15,"target":13,"value":40.858},
+      {"source":15,"target":3,"value":56.691},
+      {"source":15,"target":20,"value":7.863},
+      {"source":15,"target":21,"value":90.008},
+      {"source":15,"target":22,"value":93.494},
+      {"source":23,"target":24,"value":40.719},
+      {"source":25,"target":24,"value":82.233},
+      {"source":5,"target":13,"value":0.129},
+      {"source":5,"target":3,"value":1.401},
+      {"source":5,"target":26,"value":151.891},
+      {"source":5,"target":19,"value":2.096},
+      {"source":5,"target":12,"value":48.58},
+      {"source":27,"target":15,"value":7.013},
+      {"source":17,"target":28,"value":20.897},
+      {"source":17,"target":3,"value":6.242},
+      {"source":28,"target":18,"value":20.897},
+      {"source":29,"target":15,"value":6.995},
+      {"source":2,"target":12,"value":121.066},
+      {"source":2,"target":30,"value":128.69},
+      {"source":2,"target":18,"value":135.835},
+      {"source":2,"target":31,"value":14.458},
+      {"source":2,"target":32,"value":206.267},
+      {"source":2,"target":19,"value":3.64},
+      {"source":2,"target":33,"value":33.218},
+      {"source":2,"target":20,"value":4.413},
+      {"source":34,"target":1,"value":4.375},
+      {"source":24,"target":5,"value":122.952},
+      {"source":35,"target":26,"value":839.978},
+      {"source":36,"target":37,"value":504.287},
+      {"source":38,"target":37,"value":107.703},
+      {"source":37,"target":2,"value":611.99},
+      {"source":39,"target":4,"value":56.587},
+      {"source":39,"target":1,"value":77.81},
+      {"source":40,"target":14,"value":193.026},
+      {"source":40,"target":13,"value":70.672},
+      {"source":41,"target":15,"value":59.901},
+      {"source":42,"target":14,"value":19.263},
+      {"source":43,"target":42,"value":19.263},
+      {"source":43,"target":41,"value":59.901},
+      {"source":4,"target":19,"value":0.882},
+      {"source":4,"target":26,"value":400.12},
+      {"source":4,"target":12,"value":46.477},
+      {"source":26,"target":15,"value":525.531},
+      {"source":26,"target":3,"value":787.129},
+      {"source":26,"target":11,"value":79.329},
+      {"source":44,"target":15,"value":9.452},
+      {"source":45,"target":1,"value":182.01},
+      {"source":46,"target":15,"value":19.013},
+      {"source":47,"target":15,"value":289.366}
+    ]};
+}

docs/src/docs/SankeyDiagram/examples/SankeyInteractive.js.example

@@ -0,0 +1,81 @@
+class SankeyInteractiveExample extends React.Component {
+  state = {
+    activeNode: undefined,
+    activeLinkSource: undefined,
+    activeLinkTarget: undefined
+  };
+
+  render() {
+    const graph = getSampleData();
+    return <div>
+      <SankeyDiagram
+        width={900}
+        height={500}
+        nodes={graph.nodes}
+        links={graph.links}
+        nodeId={getNodeId}
+        nodeLabelText={(node) => node.label}
+        nodeStyle={(node) => {
+          const nodeId = getNodeId(node);
+          if(nodeId === this.state.activeNode)
+            return {fill: 'red'};
+          if(nodeId === this.state.activeLinkSource || nodeId === this.state.activeLinkTarget)
+            return {fill: 'blue'};
+          return {};
+        }}
+        linkStyle={(link) => {
+          const sourceId = getNodeId(link.source);
+          const targetId = getNodeId(link.target);
+          if(this.state.activeLinkSource === sourceId && this.state.activeLinkTarget === targetId)
+            return {stroke: 'thistle'};
+          return {};
+        }}
+        onMouseEnterNode={(event, info) => {
+          this.setState({activeNode: getNodeId(info.node)})
+        }}
+        onMouseLeaveNode={(event, info) => {
+          this.setState({activeNode: undefined})
+        }}
+        onMouseEnterLink={(event, info) => {
+          this.setState({
+            activeLinkSource: getNodeId(info.link.source),
+            activeLinkTarget: getNodeId(info.link.target),
+          });
+        }}
+        onMouseLeaveLink={(event, info) => {
+          this.setState({activeLinkSource: undefined, activeLinkTarget: undefined});
+        }}
+      />
+    </div>;
+  }
+}
+
+ReactDOM.render(<SankeyInteractiveExample />, mountNode);
+
+function getNodeId(node) { return node.id }
+
+function getSampleData() {
+  return {
+    nodes: [
+      {id: 'a', label: "Apples"},
+      {id: 'b', label: "Bananas"},
+      {id: 'c', label: "Cherries"},
+      {id: 'd', label: "Dates"},
+      {id: 'e', label: "Elderberries"},
+      {id: 'f', label: "Figs"},
+      {id: 'g', label: "Grapes"},
+    ],
+    links: [
+      {source: 'a', target: 'c', value: 0.5},
+      {source: 'a', target: 'd', value: 0.5},
+      {source: 'b', target: 'c', value: 0.5},
+      {source: 'b', target: 'd', value: 0.5},
+      {source: 'c', target: 'e', value: 0.333},
+      {source: 'c', target: 'f', value: 0.333},
+      {source: 'c', target: 'g', value: 0.333},
+      {source: 'd', target: 'e', value: 0.333},
+      {source: 'd', target: 'f', value: 0.333},
+      {source: 'd', target: 'g', value: 0.333},
+    ]
+  }
+}