feat(build): add a data service

SteveVanOpstal · Aug 27, 2016 · d1c2616 · d1c2616
1 parent 7f1d5b3
commit d1c2616
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 16 deletions.
diff --git a/src/client/build/build.component.ts b/src/client/build/build.component.ts
@@ -7,6 +7,7 @@ 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';
@@ -15,7 +16,7 @@ import {Samples} from './samples';
 import {ShopComponent} from './shop/shop.component';
 
 @Component({
-  providers: [LolApiService],
+  providers: [BuildService, LolApiService],
   directives: [
     GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective,
     LoadingComponent, RetryComponent
@@ -27,9 +28,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" [pickedItems]="pickedItems"></graph>
+    <graph [champion]="champion" [samples]="samples"></graph>
     <masteries></masteries>
-    <items [samples]="samples" [(pickedItems)]="pickedItems" #items></items>
+    <items [samples]="samples"  #items></items>
     <shop (itemPicked)="items.addItem($event)"></shop>
     <loading [loading]="loading"></loading>
     <retry [error]="error" (retry)="getData()"></retry>`
@@ -42,7 +43,6 @@ export class BuildComponent implements OnInit {
   private error: boolean = false;
 
   private samples: Samples = {xp: [], gold: []};
-  private pickedItems: Array<Item>;
 
   constructor(private route: ActivatedRoute, private lolApi: LolApiService) {}
 

diff --git a/src/client/build/build.service.ts b/src/client/build/build.service.ts
@@ -0,0 +1,35 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs/Rx';
+
+import {Item} from './item';
+
+type Trigger<T> = (subject: T) => void;
+type Triggers<T> = Array<Trigger<T>>;
+
+class Notifier<T> {
+  private subject: T;
+  private triggers: Triggers<T> = [];
+
+  subscribe(trigger: Trigger<T>): void {
+    this.triggers.push(trigger);
+    if (this.subject) {
+      trigger(this.subject);
+    }
+  }
+
+  notify(subject: T): void {
+    this.subject = subject;
+    if (this.triggers) {
+      this.triggers.forEach(trigger => {
+        trigger(subject);
+      });
+    }
+  }
+}
+
+@Injectable()
+export class BuildService {
+  pickedItems: Notifier<Array<Item>> = new Notifier<Array<Item>>();
+
+  constructor() {}
+}
diff --git a/src/client/build/graph/graph.component.ts b/src/client/build/graph/graph.component.ts
@@ -4,6 +4,7 @@ import {select} from 'd3-selection';
 import {Line, line} from 'd3-shape';
 
 import {settings} from '../../../../config/settings';
+import {BuildService} from '../build.service';
 import {Item} from '../item';
 import {Samples} from '../samples';
 
@@ -46,7 +47,6 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
   @Input() private samples: Samples;
   @Input() private stats: any;
   @Input() private champion: any;
-  @Input() private pickedItems: any;
 
   private config = config;
 
@@ -63,7 +63,7 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
 
   private paths = new Array<Path>();
 
-  private line: any = line()
+  private lineSamples: any = line()
                           .x((d, i) => {
                             return this.xScaleTime.get()(
                                 i * (settings.gameTime / (settings.matchServer.sampleSize - 1)));
@@ -72,7 +72,18 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
                             return this.yScale.get()(d);
                           });
 
-  constructor(@Inject(ElementRef) private elementRef: ElementRef) {}
+  private lineStats: any = line()
+                           .x((d) => {
+                             return this.xScaleTime.get()(d['time']);
+                           })
+                           .y((d) => {
+                             return this.yScale.get()(d['value']);
+                           });
+
+  constructor(
+      @Inject(ElementRef) private elementRef: ElementRef, private buildService: BuildService) {
+    buildService.pickedItems.subscribe(this.calculate);
+  }
 
   ngOnInit() {
     this.svg = select(this.elementRef.nativeElement).select('svg');
@@ -105,11 +116,11 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
     this.paths = [];
     for (let index in this.samples) {
       this.paths.push(
-          {enabled: true, preview: false, name: index, obj: this.line(this.samples[index])});
+          {enabled: true, preview: false, name: index, obj: this.lineSamples(this.samples[index])});
     }
     for (let index in this.stats) {
       this.paths.push(
-          {enabled: true, preview: false, name: index, obj: this.line(this.stats[index])});
+          {enabled: true, preview: false, name: index, obj: this.lineStats(this.stats[index])});
     }
   }
 
@@ -146,16 +157,16 @@ export class GraphComponent implements OnChanges, OnInit, AfterContentChecked {
     }
   }
 
-  private calculate() {
+  private calculate = (pickedItems: Array<Item>) => {
     this.stats = {};
-    this.pickedItems.forEach((item: Item) => {
+    pickedItems.forEach((item: Item) => {
       for (let index in item.stats) {
         let stat = item.stats[index];
-        if (this.stats[index]) {
-          this.stats[index] += stat;
-        } else {
-          this.stats[index] = stat;
+        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();

diff --git a/src/client/build/items/items.component.ts b/src/client/build/items/items.component.ts
@@ -1,5 +1,6 @@
 import {Component, EventEmitter, Input, Output, QueryList, ViewChildren} from '@angular/core';
 
+import {BuildService} from '../build.service';
 import {Item} from '../item';
 import {Samples} from '../samples';
 
@@ -24,6 +25,8 @@ export class ItemsComponent {
 
   @ViewChildren(ItemSlotComponent) children: QueryList<ItemSlotComponent>;
 
+  constructor(private buildService: BuildService) {}
+
   addItemSlotComponent(slot: ItemSlotComponent) {
     this.children.toArray()[slot.id] = slot;
   }
@@ -48,6 +51,6 @@ export class ItemsComponent {
     this.children.toArray().forEach((itemSlot) => {
       this.pickedItems = this.pickedItems.concat(itemSlot.getItems());
     });
-    this.pickedItemsChange.emit(null);
+    this.buildService.pickedItems.notify(this.pickedItems);
   }
 }