Sankey diagram (#1912)

* Add Sankey diagram

* Update demo data

* Update demo

* Clean up

* Fix tests

Author: marjan-georgiev

package-lock.json

@@ -50,6 +50,7 @@
     "d3-format": "^3.1.0",
     "d3-hierarchy": "^3.1.0",
     "d3-interpolate": "^3.0.1",
+    "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",

package.json

@@ -52,6 +52,7 @@
     "d3-format": "^3.1.0",
     "d3-hierarchy": "^3.1.0",
     "d3-interpolate": "^3.0.1",
+    "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",

projects/swimlane/ngx-charts/package.json

@@ -21,13 +21,17 @@
   .circle,
   .cell,
   .bar,
+  .node,
+  .link,
   .arc {
     cursor: pointer;
   }
 
   .bar,
   .cell,
   .arc,
+  .node,
+  .link,
   .card {
     &.active,
     &:hover {

projects/swimlane/ngx-charts/src/lib/common/base-chart.component.scss

@@ -184,9 +184,11 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
     const results = [];
 
     for (const item of data) {
-      const copy = {
-        name: item['name']
-      };
+      const copy = {};
+
+      if (item['name'] !== undefined) {
+        copy['name'] = item['name'];
+      }
 
       if (item['value'] !== undefined) {
         copy['value'] = item['value'];
@@ -204,6 +206,14 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
         copy['extra'] = JSON.parse(JSON.stringify(item['extra']));
       }
 
+      if (item['source'] !== undefined) {
+        copy['source'] = item['source'];
+      }
+
+      if (item['target'] !== undefined) {
+        copy['target'] = item['target'];
+      }
+
       results.push(copy);
     }
 

projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts

@@ -70,6 +70,14 @@ export interface TreeMapDataItem {
 
 export interface TreeMapData extends Array<TreeMapDataItem> {}
 
+export interface SankeyObject {
+  source: string;
+  target: string;
+  value: number;
+}
+
+export interface SankeyData extends Array<SankeyObject> {}
+
 export interface BoxChartSeries {
   name: StringOrNumberOrDate;
   series: DataItem[];

projects/swimlane/ngx-charts/src/lib/models/chart-data.model.ts

@@ -12,6 +12,7 @@ import { PieChartModule } from './pie-chart/pie-chart.module';
 import { TreeMapModule } from './tree-map/tree-map.module';
 import { GaugeModule } from './gauge/gauge.module';
 import { ngxChartsPolyfills } from './polyfills';
+import { SankeyModule } from './sankey/sankey.module';
 
 @NgModule({
   exports: [
@@ -21,6 +22,7 @@ import { ngxChartsPolyfills } from './polyfills';
     BoxChartModule,
     BubbleChartModule,
     HeatMapModule,
+    SankeyModule,
     LineChartModule,
     PolarChartModule,
     NumberCardModule,

projects/swimlane/ngx-charts/src/lib/ngx-charts.module.ts

@@ -0,0 +1,77 @@
+import { TestBed } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { APP_BASE_HREF } from '@angular/common';
+
+import { SankeyModule } from './sankey.module';
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 30000;
+
+@Component({
+  selector: 'test-component',
+  template: ''
+})
+class TestComponent {
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
+  };
+}
+
+describe('<ngx-charts-sankey>', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [NoopAnimationsModule, SankeyModule],
+      providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
+    });
+  });
+
+  describe('basic setup', () => {
+    beforeEach(() => {
+      TestBed.overrideComponent(TestComponent, {
+        set: {
+          template: `
+              <ngx-charts-sankey
+                [animations]="false"
+                [view]="[400,800]"
+                [scheme]="colorScheme"
+                [results]="[
+                  { source: 'United States Of America', target: 'Japan', value: 50 },
+                  { source: 'Germany', target: 'Japan', value: 80 },
+                  { source: 'Germany', target: 'South Korea', value: 25 },
+                  { source: 'France', target: 'South Korea', value: 30 },
+                  { source: 'France', target: 'Italy', value: 10 },
+                  { source: 'France', target: 'North Macedonia', value: 15 },
+                  { source: 'India', target: 'Japan', value: 10 },
+                  { source: 'Japan', target: 'UK', value: 60 },
+                  { source: 'Japan', target: 'UK', value: 10 },
+                  { source: 'Japan', target: 'Democratic Republic of São Tomé and Príncipe', value: 50 },
+                  { source: 'Japan', target: 'Republic of Equatorial Guinea', value: 20 },
+                  { source: 'South Korea', target: 'UK', value: 55 },
+                  { source: 'Italy', target: 'UK', value: 10 },
+                  { source: 'North Macedonia', target: 'Republic of Equatorial Guinea', value: 15 },
+                  { source: 'UK', target: 'Independent and the Sovereign Republic of Kiribati', value: 10 },
+                  { source: 'UK', target: 'Commonwealth of the Northern Mariana Islands', value: 60 },
+                  { source: 'UK', target: 'Bosnia and Herzegovina', value: 25 },
+                  { source: 'UK', target: 'Spain', value: 20 },
+                  { source: 'UK', target: 'Bosnia and Herzegovina', value: 20 },
+                  { source: 'Republic of Equatorial Guinea', target: 'Republic of Costa Rica', value: 30 },
+                  { source: 'Republic of Equatorial Guinea', target: 'Portugal', value: 5 }
+                ]">
+              </ngx-charts-sankey>`
+        }
+      }).compileComponents();
+    });
+
+    it('should set the svg width and height', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      const svg = fixture.debugElement.nativeElement.querySelector('svg');
+
+      expect(svg.getAttribute('width')).toBe('400');
+      expect(svg.getAttribute('height')).toBe('800');
+    });
+  });
+});