feat(d3): update to 1.0.0

package.json

@@ -85,7 +85,10 @@
     "async": "1.5.2",
     "chalk": "1.1.3",
     "core-js": "2.4.0",
-    "d3": "3.5.17",
+    "d3-axis": "^1.0.0",
+    "d3-scale": "^1.0.0",
+    "d3-selection": "^1.0.0",
+    "d3-shape": "^1.0.0",
     "dateformat": "1.0.12",
     "es6-shim": "0.35.1",
     "lru-cache": "4.0.1",

src/client/build/graph/axes/axis.ts

@@ -1,8 +1,8 @@
-import * as d3 from 'd3';
+import {Axis} from 'd3-axis';
 
-import {Scale} from './scale';
+import {Scale} from '../scales/scale';
 
 export interface Axis {
   create(scale: Scale): void;
-  get(): d3.svg.Axis;
+  get(): Axis;
 }

src/client/build/graph/axes/data.ts

@@ -1,27 +1,13 @@
-import * as d3 from 'd3';
-
-import {config} from '../config';
+import {axisLeft} from 'd3-axis';
 
+import {DataScale} from '../scales/data';
 import {Axis} from './axis';
-import {Scale} from './scale';
-
-export class DataScale implements Scale {
-  private scale;
-
-  create() {
-    this.scale = d3.scale.linear().domain([0, 30000]).range([config.graphHeight, 0]);
-  }
-
-  get() {
-    return this.scale;
-  }
-}
 
 export class DataAxis implements Axis {
   private axis: any;
 
   create(scale: DataScale) {
-    this.axis = d3.svg.axis().scale(scale.get()).orient('left');
+    this.axis = axisLeft(scale.get());
   }
 
   get() {

src/client/build/graph/axes/index.ts

@@ -0,0 +1,3 @@
+export {DataAxis} from './data';
+export {LevelAxisLine, LevelAxisText} from './level';
+export {TimeAxis} from './time';

src/client/build/graph/axes/level.ts

@@ -1,34 +1,15 @@
-import * as d3 from 'd3';
+import {axisBottom} from 'd3-axis';
 
 import {Samples} from '../../samples';
 import {config} from '../config';
-
+import {LevelScale} from '../scales/level';
 import {Axis} from './axis';
-import {Scale} from './scale';
-
-export class LevelScale implements Scale {
-  private scale;
-
-  create() {
-    this.scale = d3.scale.linear().range([0, config.graphWidth]);
-  }
-
-  get() {
-    return this.scale;
-  }
-
-  update(samples: Samples) {
-    let lastXpMark = samples.xp[samples.xp.length - 1];
-    this.scale.domain([0, lastXpMark]);
-  }
-}
 
 export class LevelAxisLine implements Axis {
   private axis: any;
 
   create(scale: LevelScale) {
-    this.axis = d3.svg.axis()
-                    .scale(scale.get())
+    this.axis = axisBottom(scale.get())
                     .tickSize(-config.height + config.margin.top + config.margin.bottom)
                     .tickValues(config.levelXp);
   }
@@ -42,9 +23,8 @@ export class LevelAxisText implements Axis {
   private axis: any;
 
   create(scale: LevelScale) {
-    this.axis = d3.svg.axis()
-                    .scale(scale.get())
-                    .tickSize(-config.height + config.margin.top + config.margin.bottom);
+    this.axis =
+        axisBottom(scale.get()).tickSize(-config.height + config.margin.top + config.margin.bottom);
   }
 
   get() {

src/client/build/graph/axes/time.ts

@@ -1,24 +1,9 @@
-import * as d3 from 'd3';
+import {axisTop} from 'd3-axis';
 
 import {settings} from '../../../../../config/settings';
 import {config} from '../config';
-
+import {TimeScale} from '../scales/time';
 import {Axis} from './axis';
-import {Scale} from './scale';
-
-export class TimeScale implements Scale {
-  private scale;
-
-  constructor() {}
-
-  create() {
-    this.scale = d3.scale.linear().domain([0, settings.gameTime]).range([0, config.graphWidth]);
-  }
-
-  get() {
-    return this.scale;
-  }
-}
 
 export class TimeAxis implements Axis {
   private timeMarks: Array<number> = [];
@@ -35,16 +20,14 @@ export class TimeAxis implements Axis {
       i += config.timeInterval;
     }
 
-    this.axis = d3.svg.axis()
-                    .scale(scale.get())
+    this.axis = axisTop(scale.get())
                     .tickSize(config.graphHeight)
                     .tickValues(this.timeMarks)
                     .tickFormat((d) => {
                       return d === 0 ? '' :
                                        Math.floor(d / settings.gameTime) + ':' +
                               ('00' + Math.floor((d % settings.gameTime) / 60000)).slice(-2);
-                    })
-                    .orient('top');
+                    });
   }
 
   get() {

src/client/build/graph/graph.component.spec.ts

@@ -7,11 +7,7 @@ import {GraphComponent} from './graph.component';
 
 describe('GraphComponent', () => {
   beforeEach(() => {
-    addProviders([
-      provide(ElementRef, {useValue: new MockElementRef()}),
-
-      GraphComponent
-    ]);
+    addProviders([GraphComponent]);
   });
 
   it('should initialise', inject([GraphComponent], (component) => {}));

src/client/build/graph/graph.component.ts

@@ -1,23 +1,23 @@
 import {NgClass, NgFor} from '@angular/common';
-import {AfterContentChecked, ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
-import * as d3 from 'd3';
+import {AfterContentChecked, ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {select} from 'd3-selection';
+import {Line, line} from 'd3-shape';
 
 import {settings} from '../../../../config/settings';
 import {DDragonDirective} from '../../misc/ddragon.directive';
 import {Item} from '../item';
 import {Samples} from '../samples';
 
 import {AbilitySequenceComponent} from './ability-sequence.component';
-import {DataAxis, DataScale} from './axes/data';
-import {LevelAxisLine, LevelAxisText, LevelScale} from './axes/level';
-import {TimeAxis, TimeScale} from './axes/time';
+import {DataAxis, LevelAxisLine, LevelAxisText, TimeAxis} from './axes';
 import {config} from './config';
+import {DataScale, LevelScale, TimeScale} from './scales';
 
-interface Line {
+interface Path {
   enabled: boolean;
   preview: boolean;
   name: string;
-  obj: d3.svg.Line<[number, number]>;
+  obj: Line<[number, number]>;
 }
 
 @Component({
@@ -26,17 +26,17 @@ interface Line {
   directives: [DDragonDirective, AbilitySequenceComponent, NgFor, NgClass],
   template: `
     <ul class="legend">
-      <li *ngFor="let line of lines">
-        <button [ngClass]="{ enabled: line.enabled }" [attr.name]="line.name" type="button" (click)="clicked(line)" (mouseenter)="mouseEnter(line)" (mouseleave)="mouseLeave(line)">
-          {{ line.name }}
+      <li *ngFor="let path of paths">
+        <button [ngClass]="{ enabled: path.enabled }" [attr.name]="path.name" type="button" (click)="clicked(path)" (mouseenter)="mouseEnter(path)" (mouseleave)="mouseLeave(path)">
+          {{ path.name }}
         </button>
       </li>
     </ul>
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" [attr.viewBox]="'0 0 ' +  config.width + ' ' + config.height">
       <g ability-sequence [champion]="champion" [attr.transform]="'translate(0,' + (config.graphHeight + config.margin.top + config.margin.bottom) + ')'"></g>
       <g [attr.transform]="'translate(' + config.margin.left + ',' + config.margin.top + ')'">
         <g class="lines">
-          <path *ngFor="let line of lines" [ngClass]="'line ' + line.name + (line.enabled ? ' enabled' : '') + (line.preview ? ' preview' : '')"></path>
+          <path *ngFor="let path of paths" [ngClass]="'line ' + path.name + (path.enabled ? ' enabled' : '') + (path.preview ? ' preview' : '')"></path>
         </g>
         <g class="axes">
           <g class="x axis time" [attr.transform]="'translate(0,' + config.graphHeight + ')'"></g>
@@ -67,10 +67,9 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
   private xAxisLevelText = new LevelAxisText();
   private yAxis = new DataAxis();
 
-  private lines = new Array<Line>();
+  private paths = new Array<Path>();
 
-  private line: any = d3.svg.line()
-                          .interpolate('monotone')
+  private line: any = line()
                           .x((d, i) => {
                             return this.xScaleTime.get()(
                                 i * (settings.gameTime / (settings.matchServer.sampleSize - 1)));
@@ -79,16 +78,22 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
                             return this.yScale.get()(d);
                           });
 
-
   constructor(@Inject(ElementRef) private elementRef: ElementRef) {}
 
   ngOnInit() {
-    this.svg = d3.select(this.elementRef.nativeElement).select('svg');
+    this.svg = select(this.elementRef.nativeElement).select('svg');
     this.createAxes();
   }
 
   ngAfterContentChecked() {
-    this.updateLines();
+    this.updatePaths();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.svg) {
+      this.createPaths();
+      this.createLevelScale();
+    }
   }
 
   createAxes() {
@@ -102,21 +107,21 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
     this.svg.select('.y.axis').call(this.yAxis.get());
   }
 
-  createLines() {
-    this.lines = [];
+  createPaths() {
+    this.paths = [];
     for (let index in this.samples) {
-      this.lines.push(
+      this.paths.push(
           {enabled: true, preview: false, name: index, obj: this.line(this.samples[index])});
     }
     for (let index in this.stats) {
-      this.lines.push(
+      this.paths.push(
           {enabled: true, preview: false, name: index, obj: this.line(this.stats[index])});
     }
   }
 
-  updateLines() {
-    for (let line of this.lines) {
-      this.svg.select('.line.' + line.name).attr('d', line.obj);
+  updatePaths() {
+    for (let path of this.paths) {
+      this.svg.select('.line.' + path.name).attr('d', path.obj);
     }
   }
 
@@ -147,26 +152,19 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
     }
   }
 
-  ngOnChanges(changes: {[key: string]: SimpleChange}) {
-    if (this.svg) {
-      this.createLines();
-      this.createLevelScale();
-    }
-  }
-
-  clicked(line: Line) {
-    line.enabled = !line.enabled;
+  clicked(path: Path) {
+    path.enabled = !path.enabled;
   }
 
-  mouseEnter(line: Line) {
-    if (!line.enabled) {
-      line.preview = true;
+  mouseEnter(path: Path) {
+    if (!path.enabled) {
+      path.preview = true;
     }
   }
 
-  mouseLeave(line: Line) {
-    if (!line.enabled) {
-      line.preview = false;
+  mouseLeave(path: Path) {
+    if (!path.enabled) {
+      path.preview = false;
     }
   }
 

src/client/build/graph/scales/data.ts

@@ -0,0 +1,16 @@
+import {scaleLinear} from 'd3-scale';
+
+import {config} from '../config';
+import {Scale} from './scale';
+
+export class DataScale implements Scale {
+  private scale;
+
+  create() {
+    this.scale = scaleLinear().domain([0, 30000]).range([config.graphHeight, 0]);
+  }
+
+  get() {
+    return this.scale;
+  }
+}

src/client/build/graph/scales/index.ts

@@ -0,0 +1,3 @@
+export {DataScale} from './data';
+export {LevelScale} from './level';
+export {TimeScale} from './time';

src/client/build/graph/scales/level.ts

@@ -0,0 +1,22 @@
+import {scaleLinear} from 'd3-scale';
+
+import {Samples} from '../../samples';
+import {config} from '../config';
+import {Scale} from './scale';
+
+export class LevelScale implements Scale {
+  private scale;
+
+  create() {
+    this.scale = scaleLinear().range([0, config.graphWidth]);
+  }
+
+  get() {
+    return this.scale;
+  }
+
+  update(samples: Samples) {
+    let lastXpMark = samples.xp[samples.xp.length - 1];
+    this.scale.domain([0, lastXpMark]);
+  }
+}

src/client/build/graph/axes/scale.ts → src/client/build/graph/scales/scale.ts

@@ -1,5 +1,3 @@
-import * as d3 from 'd3';
-
 export interface Scale {
   create(): void;
   get(): any;

src/client/build/graph/scales/time.ts

@@ -0,0 +1,19 @@
+import {scaleLinear} from 'd3-scale';
+
+import {settings} from '../../../../../config/settings';
+import {config} from '../config';
+import {Scale} from './scale';
+
+export class TimeScale implements Scale {
+  private scale;
+
+  constructor() {}
+
+  create() {
+    this.scale = scaleLinear().domain([0, settings.gameTime]).range([0, config.graphWidth]);
+  }
+
+  get() {
+    return this.scale;
+  }
+}