Merge branch 'home' into dev

client/package.json

@@ -21,6 +21,7 @@
     "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.9",
     "@angular/platform-browser-dynamic": "^5.2.9",
+    "chart.js": "^2.7.2",
     "ngx-electron": "^1.0.4",
     "rxjs": "^5.5.7",
     "zone.js": "^0.8.20"

client/src/app/app.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { UpdaterService } from './update/updater.service';
 
 @Component({
   selector: 'pokemon-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements AfterViewInit {
   constructor(private _updaterService: UpdaterService) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this._updaterService.setupHandlers();
   }
 }

client/src/app/app.module.ts

@@ -5,20 +5,24 @@ import {
   MatButtonModule,
   MatCheckboxModule,
   MatDialogModule,
+  MatExpansionModule,
   MatIconModule,
   MatListModule,
+  MatProgressBarModule,
   MatProgressSpinnerModule,
   MatSidenavModule,
   MatSnackBarModule,
   MatTableModule,
-  MatToolbarModule,
+  MatToolbarModule
 } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgxElectronModule } from 'ngx-electron';
 import { AppComponent } from './app.component';
 import { CardPreviewOverlayComponent } from './card-preview/card-preview.component';
 import { CardPreviewOverlayService } from './card-preview/card-preview.service';
+import { ChartsComponent } from './chart/chart.component';
+import { SeriesChartComponent } from './chart/series-chart.component';
 import { HomeComponent } from './home/home.component';
 import { IpcService } from './ipc.service';
 import { SetItemComponent } from './set-item/set-item.component';
@@ -30,13 +34,16 @@ import { UpdaterService } from './update/updater.service';
   declarations: [
     AppComponent,
     HomeComponent,
+    ChartsComponent,
 
     SetItemComponent,
 
     // MenuItemComponent,
     UpdateAvailableDialogComponent,
     UpdateDownloadedDialogComponent,
-    CardPreviewOverlayComponent
+    CardPreviewOverlayComponent,
+
+    SeriesChartComponent
     // SettingsDialogComponent
   ],
   imports: [
@@ -50,6 +57,8 @@ import { UpdaterService } from './update/updater.service';
     MatIconModule,
     MatToolbarModule,
     MatCheckboxModule,
+    MatProgressBarModule,
+    MatExpansionModule,
 
     NgxElectronModule,
     BrowserModule,

client/src/app/card-preview/card-preview.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Inject } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { IpcService } from '../ipc.service';
 import { CardPreviewOverlayRef } from './card-preview-overlay.ref';
@@ -12,7 +12,7 @@ import {
   templateUrl: './card-preview.component.html',
   styleUrls: ['./card-preview.component.css']
 })
-export class CardPreviewOverlayComponent implements OnInit {
+export class CardPreviewOverlayComponent implements AfterViewInit {
   img$: Subject<string> = new Subject<string>();
 
   constructor(
@@ -21,7 +21,7 @@ export class CardPreviewOverlayComponent implements OnInit {
     private _ipcService: IpcService
   ) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this._ipcService.setupIpcListenerOnce(
       `cards:image:${this.cardData.setCode}-${this.cardData.cardNumber}`,
       (event, args) => {

client/src/app/chart/chart.component.html

@@ -0,0 +1,33 @@
+<!-- Total collection progress -->
+
+
+<!-- <mat-progress-bar mode="determinate" [value]="totalProgress"></mat-progress-bar> -->
+
+<!-- <ngx-charts-pie-chart [results]="data" [view]="[250, 250]">
+</ngx-charts-pie-chart>
+
+
+Series
+<ngx-charts-bar-horizontal-stacked [view]="[400, 250]" [results]="seriesData">
+</ngx-charts-bar-horizontal-stacked> -->
+
+<!-- Series collection charts -->
+<!-- <div [hidden]="!chart">
+  <canvas id="canvas">{{ chart }}</canvas>
+</div> -->
+
+<mat-accordion>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        General
+      </mat-panel-title>
+      <mat-panel-description>
+        <mat-progress-bar mode="determinate" [value]="totalProgress"></mat-progress-bar>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <canvas id="general">{{ generalChart }}</canvas>
+  </mat-expansion-panel>
+
+  <pokemon-series-chart *ngFor="let set of charts" [series]="set"></pokemon-series-chart>
+</mat-accordion>

client/src/app/chart/chart.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.mat-expansion-panel-header-description {
+  max-width: calc(50% - 17px);
+}
+
+.mat-expansion-panel-header-title {
+  max-width: calc(50% - 17px);
+}