feat(graph): create curves for stats

src/client/boot.ts

@@ -24,20 +24,24 @@ import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {RouterModule} from '@angular/router';
 
+import {AccountComponent} from './account/account.component';
+import {ActionsComponent} from './actions.component';
 import {AppComponent} from './app.component';
 import {ROUTES} from './app.routes';
 import {BuildComponent} from './build/build.component';
 import {ChampionsComponent} from './champions/champions.component';
-import {FeaturesComponent} from './features/features.component';
+import {MainComponent} from './main/main.component';
 import {RegionsComponent} from './region/region.component';
+import {SummonerComponent} from './summoner/summoner.component';
 
 if (ENV === 'production') {
   enableProdMode();
 }
 
 @NgModule({
-  declarations:
-      [AppComponent, BuildComponent, ChampionsComponent, FeaturesComponent, RegionsComponent],
+  declarations: [
+    AppComponent, ActionsComponent, BuildComponent, ChampionsComponent, RegionsComponent,
+  ],
   imports: [BrowserModule, RouterModule.forRoot(ROUTES), HttpModule],
   bootstrap: [AppComponent]
 })

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

@@ -7,7 +7,8 @@ import {LolApiService} from '../services/lolapi.service';
 import {MockActivatedRoute, MockMockBackend} from '../testing';
 
 import {BuildComponent} from './build.component';
-import {BuildService} from './build.service';
+import {BuildService} from './services/build.service';
+import {StatsService} from './services/stats.service';
 
 describe('BuildComponent', () => {
   beforeEach(() => {
@@ -23,7 +24,7 @@ describe('BuildComponent', () => {
           deps: [MockBackend, BaseRequestOptions]
         },
 
-        LolApiService, BuildService, BuildComponent
+        LolApiService, StatsService, BuildService, BuildComponent
       ]
     });
   });
@@ -95,7 +96,9 @@ describe('BuildComponent', () => {
            return service.getMatchData('', '', 0, 0)
                .subscribe(
                    () => {
-                     expect(component.samples).toHaveEqualContent(samples);
+                     component.build.samples.subscribe((result) => {
+                       expect(result).toHaveEqualContent(samples);
+                     });
                    },
                    () => {
                      fail('unexpected failure');
@@ -116,8 +119,10 @@ describe('BuildComponent', () => {
                      fail('unexpected success');
                    },
                    () => {
-                     expect(component.samples).not.toHaveEqualContent(samples);
-                     expect(component.error).toBeTruthy();
+                     component.build.samples.subscribe((result) => {
+                       expect(result).not.toHaveEqualContent(samples);
+                       expect(component.error).toBeTruthy();
+                     });
                    });
          })));
 });

src/client/build/build.component.ts

@@ -7,16 +7,17 @@ import {LoadingComponent} from '../misc/loading.component';
 import {RetryComponent} from '../misc/retry.component';
 import {LolApiService} from '../services/lolapi.service';
 
-import {BuildService} from './build.service';
 import {GraphComponent} from './graph/graph.component';
 import {Item} from './item';
 import {ItemsComponent} from './items/items.component';
 import {MasteriesComponent} from './masteries/masteries.component';
 import {Samples} from './samples';
+import {BuildService} from './services/build.service';
+import {StatsService} from './services/stats.service';
 import {ShopComponent} from './shop/shop.component';
 
 @Component({
-  providers: [BuildService, LolApiService],
+  providers: [BuildService, StatsService, LolApiService],
   directives: [
     GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective,
     LoadingComponent, RetryComponent
@@ -28,9 +29,9 @@ import {ShopComponent} from './shop/shop.component';
       <img *ngIf="champion" [ddragon]="'champion/' + champion?.image?.full">
       <h2>{{champion?.name}}</h2>
     </div>
-    <graph [champion]="champion" [samples]="samples"></graph>
+    <graph [champion]="champion"></graph>
     <masteries></masteries>
-    <items [samples]="samples"  #items></items>
+    <items #items></items>
     <shop (itemPicked)="items.addItem($event)"></shop>
     <loading [loading]="loading"></loading>
     <retry [error]="error" (retry)="getData()"></retry>`
@@ -42,9 +43,10 @@ export class BuildComponent implements OnInit {
   private loading: boolean = true;
   private error: boolean = false;
 
-  private samples: Samples = {xp: [], gold: []};
 
-  constructor(private route: ActivatedRoute, private lolApi: LolApiService) {}
+  constructor(
+      private route: ActivatedRoute, private stats: StatsService, private build: BuildService,
+      private lolApi: LolApiService) {}
 
   ngOnInit() {
     this.championKey = this.route.snapshot.params['champion'];
@@ -75,10 +77,7 @@ export class BuildComponent implements OnInit {
         .getMatchData(value, this.championKey, settings.gameTime, settings.matchServer.sampleSize)
         .subscribe(
             res => {
-              this.samples = {xp: [], gold: []};
-              this.samples = res;
-              // this.samples.xp = res.xp;
-              // this.samples.g = res.g;
+              this.build.samples.notify(res);
             },
             error => {
               this.error = true;

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

@@ -1,13 +1,17 @@
-import {axisLeft} from 'd3-axis';
+import {axisLeft, axisRight} from 'd3-axis';
 
 import {DataScale} from '../scales/data';
 import {Axis} from './axis';
 
 export class DataAxis implements Axis {
   private axis: any;
 
-  create(scale: DataScale) {
-    this.axis = axisLeft(scale.get());
+  create(scale: DataScale, left: boolean = true) {
+    if (left) {
+      this.axis = axisLeft(scale.get());
+    } else {
+      this.axis = axisRight(scale.get());
+    }
   }
 
   get() {

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

@@ -9,17 +9,15 @@ export class TimeAxis implements Axis {
   private timeMarks: Array<number> = [];
   private axis: any;
 
-  constructor() {}
-
-  create(scale: TimeScale) {
-    this.timeMarks = [];
-
+  constructor() {
     let i: number = 0;
     while (i <= settings.gameTime) {
       this.timeMarks.push(i);
       i += config.timeInterval;
     }
+  }
 
+  create(scale: TimeScale) {
     this.axis = axisTop(scale.get())
                     .tickSize(config.graphHeight)
                     .tickValues(this.timeMarks)

src/client/build/graph/config.ts

@@ -1,5 +1,5 @@
 class Config {
-  margin: any = {top: 20, right: 20, bottom: 20, left: 60};
+  margin: any = {top: 20, right: 60, bottom: 20, left: 60};
   width: number = 1500;
   height: number = 650;
 

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

@@ -2,7 +2,7 @@ import {ElementRef} from '@angular/core';
 import {inject, TestBed} from '@angular/core/testing';
 
 import {MockElementRef} from '../../testing';
-import {BuildService} from '../build.service';
+import {BuildService} from '../services/build.service';
 
 import {GraphComponent} from './graph.component';
 

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

@@ -1,12 +1,12 @@
 import {NgClass, NgFor} from '@angular/common';
-import {AfterContentChecked, ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {AfterContentChecked, ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnInit, SimpleChanges} from '@angular/core';
 import {select} from 'd3-selection';
-import {Line, line} from 'd3-shape';
+import {curveStepAfter, Line, line} from 'd3-shape';
 
 import {settings} from '../../../../config/settings';
-import {BuildService} from '../build.service';
 import {Item} from '../item';
 import {Samples} from '../samples';
+import {BuildService} from '../services/build.service';
 
 import {AbilitySequenceComponent} from './ability-sequence.component';
 import {DataAxis, LevelAxisLine, LevelAxisText, TimeAxis} from './axes';
@@ -37,14 +37,15 @@ export interface Path {
           <g class="x axis time" [attr.transform]="'translate(0,' + config.graphHeight + ')'"></g>
           <g class="x axis level-line" [attr.transform]="'translate(0,' + (config.height - config.margin.top - config.margin.bottom) + ')'"></g>
           <g class="x axis level-text" [attr.transform]="'translate(0,' + (config.height - config.margin.top - config.margin.bottom) + ')'"></g>
-          <g class="y axis"></g>
+          <g class="y axis left"></g>
+          <g class="y axis right" [attr.transform]="'translate(' + config.graphWidth + ',0)'"></g>
         </g>
       </g>
     </svg>`
 })
 
-export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
-  @Input() private samples: Samples;
+export class GraphComponent implements OnInit, AfterContentChecked {
+  private samples: Samples;
   @Input() private stats: any;
   @Input() private champion: any;
 
@@ -54,12 +55,14 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
 
   private xScaleTime = new TimeScale();
   private xScaleLevel = new LevelScale();
-  private yScale = new DataScale();
+  private yScaleSamples = new DataScale();
+  private yScaleStats = new DataScale();
 
   private xAxisTime = new TimeAxis();
   private xAxisLevelLine = new LevelAxisLine();
   private xAxisLevelText = new LevelAxisText();
-  private yAxis = new DataAxis();
+  private yAxisLeft = new DataAxis();
+  private yAxisRight = new DataAxis();
 
   private paths = new Array<Path>();
 
@@ -70,47 +73,53 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
                 i * (settings.gameTime / (settings.matchServer.sampleSize - 1)));
           })
           .y((d) => {
-            return this.yScale.get()(d);
+            return this.yScaleSamples.get()(d);
           });
 
   private lineStats: any = line()
                                .x((d) => {
                                  return this.xScaleTime.get()(d['time']);
                                })
                                .y((d) => {
-                                 return this.yScale.get()(d['value']);
-                               });
+                                 return this.yScaleStats.get()(d['value']);
+                               })
+                               .curve(curveStepAfter);
 
-  constructor(
-      @Inject(ElementRef) private elementRef: ElementRef, private buildService: BuildService) {
-    buildService.pickedItems.subscribe(this.calculate);
-  }
+  constructor(@Inject(ElementRef) private elementRef: ElementRef, private build: BuildService) {}
 
   ngOnInit() {
     this.svg = select(this.elementRef.nativeElement).select('svg');
     this.createAxes();
+
+    this.build.stats.subscribe((stats) => {
+      this.stats = stats;
+      this.createPaths();
+    });
+    this.build.samples.subscribe((samples: Samples) => {
+      this.samples = samples;
+      if (this.svg) {
+        this.createPaths();
+        this.createLevelScale();
+      }
+    });
   }
 
   ngAfterContentChecked() {
     this.updatePaths();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.svg) {
-      this.createPaths();
-      this.createLevelScale();
-    }
-  }
-
   createAxes() {
     this.xScaleTime.create();
     this.xAxisTime.create(this.xScaleTime);
 
-    this.yScale.create();
-    this.yAxis.create(this.yScale);
+    this.yScaleSamples.create();
+    this.yAxisLeft.create(this.yScaleSamples);
+    this.yScaleStats.create([0, 3000]);
+    this.yAxisRight.create(this.yScaleStats, false);
 
     this.svg.select('.x.axis.time').call(this.xAxisTime.get());
-    this.svg.select('.y.axis').call(this.yAxis.get());
+    this.svg.select('.y.axis.left').call(this.yAxisLeft.get());
+    this.svg.select('.y.axis.right').call(this.yAxisRight.get());
   }
 
   createPaths() {
@@ -158,18 +167,4 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
     }
   }
 
-  private calculate = (pickedItems: Array<Item>) => {
-    this.stats = {};
-    pickedItems.forEach((item: Item) => {
-      for (let index in item.stats) {
-        let stat = item.stats[index];
-        if (!this.stats[index]) {
-          this.stats[index] = [];
-          this.stats[index][0] = {time: 0, value: 0};
-        }
-        this.stats[index].push({time: item.time, value: stat});
-      }
-    });
-    this.createPaths();
-  }
 }

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

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

src/client/build/items/item-slot.component.spec.ts

@@ -7,7 +7,8 @@ import {ItemsComponent} from './items.component';
 
 describe('ItemSlotComponent', () => {
   beforeEach(() => {
-    TestBed.configureTestingModule({providers: [ItemsComponent, ItemSlotComponent]});
+    TestBed.configureTestingModule(
+        {providers: [BuildService, StatsService, ItemsComponent, ItemSlotComponent]});
   });
 
   let item1;

src/client/build/items/item-slot.component.ts

@@ -1,9 +1,10 @@
 import {NgClass} from '@angular/common';
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 
 import {settings} from '../../../../config/settings';
 import {Item} from '../item';
 import {Samples} from '../samples';
+import {BuildService} from '../services/build.service';
 
 import {ItemComponent} from './item.component';
 
@@ -16,12 +17,16 @@ import {ItemComponent} from './item.component';
     </template>`
 })
 
-export class ItemSlotComponent {
+export class ItemSlotComponent implements OnInit {
   @Input() id: number;
-  @Input() samples: Samples;
+  private samples: Samples;
   private items: Array<Item> = new Array<Item>();
 
-  constructor() {}
+  constructor(private build: BuildService) {}
+
+  ngOnInit() {
+    this.build.samples.subscribe(samples => this.samples);
+  }
 
   addItem(item: Item) {
     this.addTime(item);
@@ -49,8 +54,10 @@ export class ItemSlotComponent {
   }
 
   private addTime(item: Item) {
-    item.time = this.getTime(
-        this.samples.gold, item.gold.total, settings.gameTime, settings.matchServer.sampleSize);
+    if (this.samples) {
+      item.time = this.getTime(
+          this.samples.gold, item.gold.total, settings.gameTime, settings.matchServer.sampleSize);
+    }
   }
 
   private addBundle(item: Item) {