Some minor changes to chart loading

Tommatheussen · Apr 25, 2018 · 8ddde8d · 8ddde8d
1 parent 44b5b10
commit 8ddde8d
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 20 deletions.
diff --git a/client/src/app/chart/chart.component.html b/client/src/app/chart/chart.component.html
@@ -17,5 +17,17 @@
 </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>
diff --git a/client/src/app/chart/chart.component.scss b/client/src/app/chart/chart.component.scss
@@ -2,3 +2,11 @@
   display: block;
   height: 100%;
 }
+
+.mat-expansion-panel-header-description {
+  max-width: calc(50% - 17px);
+}
+
+.mat-expansion-panel-header-title {
+  max-width: calc(50% - 17px);
+}
diff --git a/client/src/app/chart/chart.component.ts b/client/src/app/chart/chart.component.ts
@@ -2,7 +2,6 @@ import { AfterViewInit, Component } from '@angular/core';
 import { Chart } from 'chart.js';
 import { IpcService } from '../ipc.service';
 
-
 @Component({
   selector: 'pokemon-charts',
   templateUrl: './chart.component.html',
@@ -55,7 +54,7 @@ export class ChartsComponent implements AfterViewInit {
   ];
   chartData = {};
 
-  chart: Chart[];
+  generalChart: Chart;
 
   series: string[];
 
@@ -69,18 +68,6 @@ export class ChartsComponent implements AfterViewInit {
 
     // this._setupSeriesDataHandler();
     // this._ipcService.sendMessage('chart:load:series');
-
-    // this.chart = new Chart('canvas', {
-    //   type: 'polarArea',
-    //   data: {
-    //     labels: ['Series 1', 'Series 2', 'Series 3', 'Series 4', 'Series 5'],
-    //     datasets: [
-    //       {
-    //         data: [15, 52, 17, 93, 100]
-    //       }
-    //     ]
-    //   }
-    // });
   }
 
   private _setupChartingHandler() {

diff --git a/client/src/app/chart/series-chart.component.html b/client/src/app/chart/series-chart.component.html
@@ -4,7 +4,7 @@
       {{ series }}
     </mat-panel-title>
     <mat-panel-description>
-      <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
+      <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
     </mat-panel-description>
   </mat-expansion-panel-header>
   <canvas [id]="series">{{ chart }}</canvas>

diff --git a/client/src/app/chart/series-chart.component.ts b/client/src/app/chart/series-chart.component.ts
@@ -2,7 +2,6 @@ import { AfterViewInit, Component, Input } from '@angular/core';
 import { Chart } from 'chart.js';
 import { IpcService } from '../ipc.service';
 
-
 @Component({
   selector: 'pokemon-series-chart',
   templateUrl: './series-chart.component.html',
@@ -13,16 +12,18 @@ export class SeriesChartComponent implements AfterViewInit {
 
   chart;
 
+  progress = 0;
+
   constructor(private _ipcService: IpcService) {}
 
   ngAfterViewInit(): void {
     this._setupSeriesChartHandler();
-    this._ipcService.sendMessage(`series:data:load`, this.series);
+    this._ipcService.sendMessage(`chart:series:load`, this.series);
   }
 
   private _setupSeriesChartHandler() {
     this._ipcService.setupIpcListenerOnce(
-      `series:data:${this.series}`,
+      `chart:series:data:${this.series}`,
       (event, data) => {
         let seriesData = data.reduce(
           (accumulator, currentValue) => {
@@ -45,6 +46,12 @@ export class SeriesChartComponent implements AfterViewInit {
             ]
           }
         });
+
+        this.progress =
+          seriesData.values.reduce((accumulator, currentValue) => {
+            accumulator += parseFloat(currentValue);
+            return accumulator;
+          }, 0) / seriesData.values.length;
       }
     );
   }

diff --git a/electron/database/chart.js b/electron/database/chart.js
@@ -16,7 +16,7 @@ handler('chart:load', async () => {
   });
 });
 
-handler('series:data:load', async (event, args) => {
+handler('chart:series:load', async (event, args) => {
   let sets = await loadSets(args);
 
   let setCodes = sets.map(set => {
@@ -35,7 +35,7 @@ handler('series:data:load', async (event, args) => {
     };
   });
 
-  notify(`series:data:${args}`, seriesInfo);
+  notify(`chart:series:data:${args}`, seriesInfo);
 });
 
 handler('chart:load:series', async () => {