From 859a44782701c49bae4d433faaf5f9b8c8c0ced7 Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Fri, 20 Apr 2018 20:03:11 +0200 Subject: [PATCH 1/7] Started adding chart to home page --- client/package-lock.json | 161 ++++++++++++++++++++++++ client/package.json | 1 + client/src/app/app.module.ts | 5 +- client/src/app/home/home.component.html | 140 +++++++++++---------- client/src/app/home/home.component.ts | 23 ++++ electron/database/chart.js | 44 +++++++ electron/database/index.js | 1 + 7 files changed, 307 insertions(+), 68 deletions(-) create mode 100644 electron/database/chart.js diff --git a/client/package-lock.json b/client/package-lock.json index 5c58b57..b3716e9 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -275,6 +275,24 @@ "semver-intersect": "1.3.1" } }, + "@swimlane/ngx-charts": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-7.3.0.tgz", + "integrity": "sha512-vRepalGJQOiVMBiIhLSuRY0d4nAA6ORSHXGRe8Klqh808NQ9WXR7tvB8zk4MFr496v6iilG8dLIeDwXGY+asOw==", + "requires": { + "d3-array": "1.2.1", + "d3-brush": "1.0.4", + "d3-color": "1.1.0", + "d3-force": "1.1.0", + "d3-format": "1.2.2", + "d3-hierarchy": "1.1.6", + "d3-interpolate": "1.1.6", + "d3-scale": "1.0.7", + "d3-selection": "1.3.0", + "d3-shape": "1.2.0", + "d3-time-format": "2.1.1" + } + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -1699,6 +1717,149 @@ "es5-ext": "0.10.41" } }, + "d3-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz", + "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw==" + }, + "d3-brush": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz", + "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=", + "requires": { + "d3-dispatch": "1.0.3", + "d3-drag": "1.2.1", + "d3-interpolate": "1.1.6", + "d3-selection": "1.3.0", + "d3-transition": "1.1.1" + } + }, + "d3-collection": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz", + "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI=" + }, + "d3-color": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.1.0.tgz", + "integrity": "sha512-IZVcqX5yYFvR2NUBbSfIfbgNcSgAtZ7JbgQWqDXf4CywtN7agvI7Kw6+Q1ETvlHOHWJT55Kyuzt0C3I0GVtRHQ==" + }, + "d3-dispatch": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz", + "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg=" + }, + "d3-drag": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz", + "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==", + "requires": { + "d3-dispatch": "1.0.3", + "d3-selection": "1.3.0" + } + }, + "d3-ease": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz", + "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4=" + }, + "d3-force": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz", + "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==", + "requires": { + "d3-collection": "1.0.4", + "d3-dispatch": "1.0.3", + "d3-quadtree": "1.0.3", + "d3-timer": "1.0.7" + } + }, + "d3-format": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz", + "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw==" + }, + "d3-hierarchy": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz", + "integrity": "sha512-nn4bhBnwWnMSoZgkBXD7vRyZ0xVUsNMQRKytWYHhP1I4qHw+qzApCTgSQTZqMdf4XXZbTMqA59hFusga+THA/g==" + }, + "d3-interpolate": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz", + "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==", + "requires": { + "d3-color": "1.1.0" + } + }, + "d3-path": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz", + "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q=" + }, + "d3-quadtree": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz", + "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg=" + }, + "d3-scale": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz", + "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==", + "requires": { + "d3-array": "1.2.1", + "d3-collection": "1.0.4", + "d3-color": "1.1.0", + "d3-format": "1.2.2", + "d3-interpolate": "1.1.6", + "d3-time": "1.0.8", + "d3-time-format": "2.1.1" + } + }, + "d3-selection": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz", + "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA==" + }, + "d3-shape": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz", + "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=", + "requires": { + "d3-path": "1.0.5" + } + }, + "d3-time": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz", + "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ==" + }, + "d3-time-format": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz", + "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==", + "requires": { + "d3-time": "1.0.8" + } + }, + "d3-timer": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz", + "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA==" + }, + "d3-transition": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz", + "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==", + "requires": { + "d3-color": "1.1.0", + "d3-dispatch": "1.0.3", + "d3-ease": "1.0.3", + "d3-interpolate": "1.1.6", + "d3-selection": "1.3.0", + "d3-timer": "1.0.7" + } + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", diff --git a/client/package.json b/client/package.json index a31b841..488c768 100644 --- a/client/package.json +++ b/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", + "@swimlane/ngx-charts": "^7.3.0", "ngx-electron": "^1.0.4", "rxjs": "^5.5.7", "zone.js": "^0.8.20" diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index a2f89d5..1be2c03 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -11,7 +11,7 @@ import { MatSidenavModule, MatSnackBarModule, MatTableModule, - MatToolbarModule, + MatToolbarModule } from '@angular/material'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -26,6 +26,8 @@ import { UpdateAvailableDialogComponent } from './update/update-available/update import { UpdateDownloadedDialogComponent } from './update/update-downloaded/update-downloaded-dialog.component'; import { UpdaterService } from './update/updater.service'; +import { NgxChartsModule } from '@swimlane/ngx-charts'; + @NgModule({ declarations: [ AppComponent, @@ -55,6 +57,7 @@ import { UpdaterService } from './update/updater.service'; BrowserModule, BrowserAnimationsModule, HttpClientModule, + NgxChartsModule, OverlayModule ], diff --git a/client/src/app/home/home.component.html b/client/src/app/home/home.component.html index 7f2d603..939d6f9 100644 --- a/client/src/app/home/home.component.html +++ b/client/src/app/home/home.component.html @@ -12,81 +12,87 @@ -
- -
- - - {{ selectedSet?.name }} - - + + + + + +
+ +
+ + + {{ selectedSet?.name }} + + +
+ +
+ +
- -
- - -
- - - - + + + + - - - Number - {{ element.number }} - + + + Number + {{ element.number }} + - - - - - - - - - - + + + + + + + + + + - - Name - {{ element.name }} - + + Name + {{ element.name }} + - - Rarity - {{ element.rarity }} - + + Rarity + {{ element.rarity }} + - - Supertype - {{ element.supertype }} - + + Supertype + {{ element.supertype }} + - - Collected - - - - - - {{ collection[element.id] | date }} - - - + + Collected + + + + + + {{ collection[element.id] | date }} + + + - - - + + + + diff --git a/client/src/app/home/home.component.ts b/client/src/app/home/home.component.ts index 09764ea..9ee40b4 100644 --- a/client/src/app/home/home.component.ts +++ b/client/src/app/home/home.component.ts @@ -27,6 +27,8 @@ export class HomeComponent implements OnInit { 'collected' ]; + data: { name: string; value: number }[] = []; + displayedColumns: string[]; selection = new SelectionModel(true, []); @@ -84,6 +86,10 @@ export class HomeComponent implements OnInit { this._ipcService.sendMessage('sets:load'); + this._setupChartingHandler(); + + this._ipcService.sendMessage('chart:load'); + this.displayedColumns = this.defaultColumns.slice(); } @@ -163,6 +169,23 @@ export class HomeComponent implements OnInit { }); } + private _setupChartingHandler() { + console.log('setup handler'); + this._ipcService.setupIpcListenerOnce('chart:data', (event, data) => { + console.log('got data'); + this.data = [ + { + name: 'Collected', + value: data.collected + }, + { + name: 'Not Collected', + value: data.total - data.collected + } + ]; + }); + } + private _setupCardlistHandler() { this._ipcService.setupIpcListener('cards:list', (event, cards: Card[]) => { this.cards$.next( diff --git a/electron/database/chart.js b/electron/database/chart.js new file mode 100644 index 0000000..732bf0b --- /dev/null +++ b/electron/database/chart.js @@ -0,0 +1,44 @@ +const { db } = require('./database'); + +//****************// +// IPC functions // +//****************// +const { handler, notify } = require('../communicate'); + +handler('chart:load', async () => { + let collectionCall = countCollection(); + let totalCall = countTotal(); + + let results = await Promise.all([collectionCall, totalCall]); + notify('chart:data', { + collected: results[0], + total: results[1] + }); +}); + +async function countCollection() { + return new Promise((resolve, reject) => { + db.collection.count({}, (err, count) => { + if (err) { + reject(err); + } else { + resolve(count); + } + }); + }); +} + +async function countTotal() { + return new Promise((resolve, reject) => { + db.sets.find({}, (err, sets) => { + if (err) { + reject(err); + } else { + let total = sets.reduce((allCards, current) => { + return allCards + current.totalCards; + }, 0); + resolve(total); + } + }); + }); +} diff --git a/electron/database/index.js b/electron/database/index.js index e19f444..b96d750 100644 --- a/electron/database/index.js +++ b/electron/database/index.js @@ -4,6 +4,7 @@ const { notify, handler } = require('../communicate'); require('./cards'); require('./collection'); +require('./chart'); module.exports = { initDatabases, From 2bdb56f2718d58537f6b936ad369b80d22ad8eb1 Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Fri, 20 Apr 2018 20:35:24 +0200 Subject: [PATCH 2/7] Moved charts to seperate component --- client/src/app/app.module.ts | 3 ++ client/src/app/chart/chart.component.html | 2 + client/src/app/chart/chart.component.scss | 61 +++++++++++++++++++++++ client/src/app/chart/chart.component.ts | 34 +++++++++++++ client/src/app/home/home.component.html | 3 +- client/src/app/home/home.component.ts | 23 --------- 6 files changed, 101 insertions(+), 25 deletions(-) create mode 100644 client/src/app/chart/chart.component.html create mode 100644 client/src/app/chart/chart.component.scss create mode 100644 client/src/app/chart/chart.component.ts diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 1be2c03..4f66342 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -26,12 +26,15 @@ import { UpdateAvailableDialogComponent } from './update/update-available/update import { UpdateDownloadedDialogComponent } from './update/update-downloaded/update-downloaded-dialog.component'; import { UpdaterService } from './update/updater.service'; +import { ChartsComponent } from './chart/chart.component'; + import { NgxChartsModule } from '@swimlane/ngx-charts'; @NgModule({ declarations: [ AppComponent, HomeComponent, + ChartsComponent, SetItemComponent, diff --git a/client/src/app/chart/chart.component.html b/client/src/app/chart/chart.component.html new file mode 100644 index 0000000..ee36559 --- /dev/null +++ b/client/src/app/chart/chart.component.html @@ -0,0 +1,2 @@ + + diff --git a/client/src/app/chart/chart.component.scss b/client/src/app/chart/chart.component.scss new file mode 100644 index 0000000..715d6e9 --- /dev/null +++ b/client/src/app/chart/chart.component.scss @@ -0,0 +1,61 @@ +.spacer { + flex: 1 1 auto; +} + +.example-loading-shade { + position: absolute; + top: 0; + left: 0; + bottom: 0px; + right: 0; + background: rgba(0, 0, 0, 0.15); + z-index: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.mat-column-collected { + overflow: initial; +} + +.mat-row:hover { + background: lightgray; +} + +mat-sidenav-content { + overflow: hidden; + + mat-table { + overflow: auto; + height: calc(100vh - 64px); + } +} + +.spacer { + flex: 1 1 auto; +} + +mat-toolbar img { + max-height: 44px; +} + +.mat-column-select { + overflow: initial; + max-width: 70px; +} + +.mat-column-number { + max-width: 100px; +} + +.v-divider { + width: 1px; + border-left: 1px solid black; + height: 50px; +} + +mat-toolbar button { + margin-left: 10px; + margin-right: 10px; +} diff --git a/client/src/app/chart/chart.component.ts b/client/src/app/chart/chart.component.ts new file mode 100644 index 0000000..38a49da --- /dev/null +++ b/client/src/app/chart/chart.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit } from '@angular/core'; +import { IpcService } from '../ipc.service'; + +@Component({ + selector: 'pokemon-charts', + templateUrl: './chart.component.html', + styleUrls: ['./chart.component.scss'] +}) +export class ChartsComponent implements OnInit { + data: { name: string; value: number }[] = []; + + constructor(private _ipcService: IpcService) {} + + ngOnInit(): void { + this._setupChartingHandler(); + + this._ipcService.sendMessage('chart:load'); + } + + private _setupChartingHandler() { + this._ipcService.setupIpcListenerOnce('chart:data', (event, data) => { + this.data = [ + { + name: 'Collected', + value: data.collected + }, + { + name: 'Not Collected', + value: data.total - data.collected + } + ]; + }); + } +} diff --git a/client/src/app/home/home.component.html b/client/src/app/home/home.component.html index 939d6f9..a57442a 100644 --- a/client/src/app/home/home.component.html +++ b/client/src/app/home/home.component.html @@ -13,8 +13,7 @@ - - +
diff --git a/client/src/app/home/home.component.ts b/client/src/app/home/home.component.ts index 9ee40b4..09764ea 100644 --- a/client/src/app/home/home.component.ts +++ b/client/src/app/home/home.component.ts @@ -27,8 +27,6 @@ export class HomeComponent implements OnInit { 'collected' ]; - data: { name: string; value: number }[] = []; - displayedColumns: string[]; selection = new SelectionModel(true, []); @@ -86,10 +84,6 @@ export class HomeComponent implements OnInit { this._ipcService.sendMessage('sets:load'); - this._setupChartingHandler(); - - this._ipcService.sendMessage('chart:load'); - this.displayedColumns = this.defaultColumns.slice(); } @@ -169,23 +163,6 @@ export class HomeComponent implements OnInit { }); } - private _setupChartingHandler() { - console.log('setup handler'); - this._ipcService.setupIpcListenerOnce('chart:data', (event, data) => { - console.log('got data'); - this.data = [ - { - name: 'Collected', - value: data.collected - }, - { - name: 'Not Collected', - value: data.total - data.collected - } - ]; - }); - } - private _setupCardlistHandler() { this._ipcService.setupIpcListener('cards:list', (event, cards: Card[]) => { this.cards$.next( From 414f8351e7f743f048126ead76c14195455406f5 Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Fri, 20 Apr 2018 20:35:47 +0200 Subject: [PATCH 3/7] Changed some listeners to only once --- client/src/app/set-item/set-item.component.ts | 2 +- client/src/app/update/updater.service.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/app/set-item/set-item.component.ts b/client/src/app/set-item/set-item.component.ts index a0835d3..a2b3a99 100644 --- a/client/src/app/set-item/set-item.component.ts +++ b/client/src/app/set-item/set-item.component.ts @@ -42,7 +42,7 @@ export class SetItemComponent implements OnInit { } ); - this._ipcService.setupIpcListener( + this._ipcService.setupIpcListenerOnce( `sets:symbol:${this.set.code}`, (event, args) => { this.img$.next(`data:image/png;base64,${args}`); diff --git a/client/src/app/update/updater.service.ts b/client/src/app/update/updater.service.ts index bc1b2e2..a266c5e 100644 --- a/client/src/app/update/updater.service.ts +++ b/client/src/app/update/updater.service.ts @@ -32,7 +32,7 @@ export class UpdaterService { } private setupNewVersionHandler(): void { - this._ipcService.setupIpcListener( + this._ipcService.setupIpcListenerOnce( 'update-available', (ev, info: UpdateInfo) => { this._dialog @@ -51,13 +51,13 @@ export class UpdaterService { } private setupUpToDateHandler(): void { - this._ipcService.setupIpcListener('up-to-date', event => { + this._ipcService.setupIpcListenerOnce('up-to-date', event => { this._openSnackbar("Hooray, you're using the latest version!"); }); } private setupDownloadStartedHandler(): void { - this._ipcService.setupIpcListener('update-download-started', () => { + this._ipcService.setupIpcListenerOnce('update-download-started', () => { this._openSnackbar( 'Update downloading, you will be prompted when it is ready to be installed.' ); @@ -65,7 +65,7 @@ export class UpdaterService { } private setupDownloadFinishedHandler(): void { - this._ipcService.setupIpcListener('update-download-finished', () => { + this._ipcService.setupIpcListenerOnce('update-download-finished', () => { this._dialog .open(UpdateDownloadedDialogComponent, { width: '500px', @@ -79,7 +79,7 @@ export class UpdaterService { } private setupDownloadProgressHandler(): void { - this._ipcService.setupIpcListener( + this._ipcService.setupIpcListenerOnce( 'update-download-progress', (event, progress) => { console.log(progress); From 8c8768c5c46ec1ccb286d3ae9056785a83331adb Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Mon, 23 Apr 2018 21:54:03 +0200 Subject: [PATCH 4/7] Started adding charts --- client/package-lock.json | 41 ++++++- client/package.json | 1 + client/src/app/app.module.ts | 4 +- client/src/app/chart/chart.component.html | 20 +++- client/src/app/chart/chart.component.ts | 139 ++++++++++++++++++++-- electron/database/chart.js | 71 ++++++++++- 6 files changed, 258 insertions(+), 18 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index b3716e9..00e51c8 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1140,6 +1140,39 @@ "supports-color": "4.5.0" } }, + "chart.js": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.2.tgz", + "integrity": "sha512-90wl3V9xRZ8tnMvMlpcW+0Yg13BelsGS9P9t0ClaDxv/hdypHDr/YAGf+728m11P5ljwyB0ZHfPKCapZFqSqYA==", + "requires": { + "chartjs-color": "2.2.0", + "moment": "2.22.1" + } + }, + "chartjs-color": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz", + "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=", + "requires": { + "chartjs-color-string": "0.5.0", + "color-convert": "0.5.3" + }, + "dependencies": { + "color-convert": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", + "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=" + } + } + }, + "chartjs-color-string": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz", + "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==", + "requires": { + "color-name": "1.1.3" + } + }, "chokidar": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz", @@ -1353,8 +1386,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "combined-stream": { "version": "1.0.6", @@ -4503,6 +4535,11 @@ "minimist": "0.0.8" } }, + "moment": { + "version": "2.22.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz", + "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/client/package.json b/client/package.json index 488c768..b755217 100644 --- a/client/package.json +++ b/client/package.json @@ -22,6 +22,7 @@ "@angular/platform-browser": "^5.2.9", "@angular/platform-browser-dynamic": "^5.2.9", "@swimlane/ngx-charts": "^7.3.0", + "chart.js": "^2.7.2", "ngx-electron": "^1.0.4", "rxjs": "^5.5.7", "zone.js": "^0.8.20" diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 4f66342..9328580 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -11,7 +11,8 @@ import { MatSidenavModule, MatSnackBarModule, MatTableModule, - MatToolbarModule + MatToolbarModule, + MatProgressBarModule } from '@angular/material'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -55,6 +56,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; MatIconModule, MatToolbarModule, MatCheckboxModule, + MatProgressBarModule, NgxElectronModule, BrowserModule, diff --git a/client/src/app/chart/chart.component.html b/client/src/app/chart/chart.component.html index ee36559..947a2d2 100644 --- a/client/src/app/chart/chart.component.html +++ b/client/src/app/chart/chart.component.html @@ -1,2 +1,20 @@ - + + + + + + +
+ {{ chart }} +
+ + +
+ {{ chartData[set] }} +
diff --git a/client/src/app/chart/chart.component.ts b/client/src/app/chart/chart.component.ts index 38a49da..1b793ea 100644 --- a/client/src/app/chart/chart.component.ts +++ b/client/src/app/chart/chart.component.ts @@ -1,34 +1,149 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, AfterViewInit } from '@angular/core'; import { IpcService } from '../ipc.service'; +import { Chart } from 'chart.js'; + @Component({ selector: 'pokemon-charts', templateUrl: './chart.component.html', styleUrls: ['./chart.component.scss'] }) export class ChartsComponent implements OnInit { + totalProgress = 0; + + seriesData: { + name: string; + series: { + name: string; + value: number; + }[]; + }[] = [ + { + name: 'XY', + series: [ + { + name: 'Set 1', + value: 97 + }, + { + name: 'Set 2', + value: 65 + }, + { + name: 'Set 3', + value: 23 + } + ] + } + ]; + data: { name: string; value: number }[] = []; + charts = [ + 'Base', + 'XY', + 'POP', + 'Black & White', + 'HeartGold & SoulSilver', + 'Platinum', + 'EX', + 'Sun & Moon', + 'Gym', + 'Diamond & Pearl', + 'Neo', + 'E-Card' + ]; + chartData = {}; + + chart: Chart[]; + constructor(private _ipcService: IpcService) {} ngOnInit(): void { this._setupChartingHandler(); - this._ipcService.sendMessage('chart:load'); + + 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() { this._ipcService.setupIpcListenerOnce('chart:data', (event, data) => { - this.data = [ - { - name: 'Collected', - value: data.collected - }, - { - name: 'Not Collected', - value: data.total - data.collected - } - ]; + this.totalProgress = data.collected / data.total * 100; }); } + + private _setupSeriesDataHandler() { + this._ipcService.setupIpcListenerOnce( + 'chart:data:series', + (event, data) => { + data.forEach(seriesSet => { + // let chartObject: { name: string; chart ?: any } = { + // name: seriesSet.name + // }; + + // this.charts.push(seriesSet.name); + + let labels = []; + let data = []; + + seriesSet.series.forEach(set => { + labels.push(set.name); + data.push(set.value); + }); + + console.log(labels, data); + + this.chartData[seriesSet.name] = new Chart(seriesSet.name, { + type: 'polarArea', + data: { + labels: labels, + datasets: [ + { + data: data + } + ] + } + }); + + console.log(this.chartData); + + // console.log(seriesChart); + + // seriesSet.series.forEach(set => { + // seriesChart.data.labels.push(set.name); + // seriesChart.data.datasets = [ + // { + + // .forEach(dataset => { + // console.log(set); + // dataset.data.push(set.value); + // }); + // seriesChart.update(); + // }); + + //this.charts.push(seriesChart); + + // this.chartData[seriesSet.name] = seriesChart; + + // chartObject.chart = seriesChart; + }); + + console.log(data); + this.seriesData = data; + } + ); + } } diff --git a/electron/database/chart.js b/electron/database/chart.js index 732bf0b..14e043f 100644 --- a/electron/database/chart.js +++ b/electron/database/chart.js @@ -16,7 +16,74 @@ handler('chart:load', async () => { }); }); -async function countCollection() { +handler('chart:load:series', async () => { + let seriesCall = loadSeries(); + let collectionCall = loadCollection(); + + let results = await Promise.all([seriesCall, collectionCall]); + + let allSeries = results[0]; + let collectionCount = results[1]; + + let seriesData = []; + + for (let series in allSeries) { + let seriesInfo = { + name: series, + series: allSeries[series].map(set => { + return { + name: set.name, + value: (collectionCount[set.code] || 0) / set.totalCards * 100 + }; + }) + }; + seriesData.push(seriesInfo); + } + + notify('chart:data:series', seriesData); + console.log(seriesData); +}); + +function loadCollection() { + return new Promise((resolve, reject) => { + db.collection.find({}, (err, collection) => { + if (err) { + reject(err); + } else { + let setCount = collection.reduce((setCounts, currentCollection) => { + if (!setCounts[currentCollection.setCode]) { + setCounts[currentCollection.setCode] = 0; + } + setCounts[currentCollection.setCode]++; + return setCounts; + }, {}); + resolve(setCount); + } + }); + }); +} + +function loadSeries() { + return new Promise((resolve, reject) => { + db.sets.find({}, (err, sets) => { + if (err) { + reject(err); + } else { + let series = sets.reduce((allSeries, currentSet) => { + if (!allSeries[currentSet.series]) { + allSeries[currentSet.series] = []; + } + allSeries[currentSet.series].push(currentSet); + return allSeries; + }, {}); + + resolve(series); + } + }); + }); +} + +function countCollection() { return new Promise((resolve, reject) => { db.collection.count({}, (err, count) => { if (err) { @@ -28,7 +95,7 @@ async function countCollection() { }); } -async function countTotal() { +function countTotal() { return new Promise((resolve, reject) => { db.sets.find({}, (err, sets) => { if (err) { From 66912ec2937a972aa1c416002209b16811b0199c Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Tue, 24 Apr 2018 21:15:59 +0200 Subject: [PATCH 5/7] Added chart for each series --- client/src/app/app.module.ts | 5 +- client/src/app/chart/chart.component.html | 10 +-- client/src/app/chart/chart.component.scss | 63 +----------------- client/src/app/chart/chart.component.ts | 38 +++++++---- .../src/app/chart/series-chart.component.html | 3 + .../src/app/chart/series-chart.component.scss | 0 .../src/app/chart/series-chart.component.ts | 64 +++++++++++++++++++ client/src/app/home/home.component.html | 4 +- client/src/app/home/home.component.scss | 4 ++ electron/database/chart.js | 60 ++++++++++++++++- 10 files changed, 167 insertions(+), 84 deletions(-) create mode 100644 client/src/app/chart/series-chart.component.html create mode 100644 client/src/app/chart/series-chart.component.scss create mode 100644 client/src/app/chart/series-chart.component.ts diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 9328580..19bd0c4 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -30,6 +30,7 @@ import { UpdaterService } from './update/updater.service'; import { ChartsComponent } from './chart/chart.component'; import { NgxChartsModule } from '@swimlane/ngx-charts'; +import { SeriesChartComponent } from './chart/series-chart.component'; @NgModule({ declarations: [ @@ -42,7 +43,9 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; // MenuItemComponent, UpdateAvailableDialogComponent, UpdateDownloadedDialogComponent, - CardPreviewOverlayComponent + CardPreviewOverlayComponent, + + SeriesChartComponent // SettingsDialogComponent ], imports: [ diff --git a/client/src/app/chart/chart.component.html b/client/src/app/chart/chart.component.html index 947a2d2..ca35d8a 100644 --- a/client/src/app/chart/chart.component.html +++ b/client/src/app/chart/chart.component.html @@ -1,5 +1,7 @@ - + + + -
+
- {{ chartData[set] }} +
diff --git a/client/src/app/chart/chart.component.scss b/client/src/app/chart/chart.component.scss index 715d6e9..478abc9 100644 --- a/client/src/app/chart/chart.component.scss +++ b/client/src/app/chart/chart.component.scss @@ -1,61 +1,4 @@ -.spacer { - flex: 1 1 auto; -} - -.example-loading-shade { - position: absolute; - top: 0; - left: 0; - bottom: 0px; - right: 0; - background: rgba(0, 0, 0, 0.15); - z-index: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.mat-column-collected { - overflow: initial; -} - -.mat-row:hover { - background: lightgray; -} - -mat-sidenav-content { - overflow: hidden; - - mat-table { - overflow: auto; - height: calc(100vh - 64px); - } -} - -.spacer { - flex: 1 1 auto; -} - -mat-toolbar img { - max-height: 44px; -} - -.mat-column-select { - overflow: initial; - max-width: 70px; -} - -.mat-column-number { - max-width: 100px; -} - -.v-divider { - width: 1px; - border-left: 1px solid black; - height: 50px; -} - -mat-toolbar button { - margin-left: 10px; - margin-right: 10px; +:host { + display: block; + height: 100%; } diff --git a/client/src/app/chart/chart.component.ts b/client/src/app/chart/chart.component.ts index 1b793ea..fba0269 100644 --- a/client/src/app/chart/chart.component.ts +++ b/client/src/app/chart/chart.component.ts @@ -57,26 +57,30 @@ export class ChartsComponent implements OnInit { chart: Chart[]; + series: string[]; + constructor(private _ipcService: IpcService) {} ngOnInit(): void { + this._setupSeriesHandler(); + this._setupChartingHandler(); this._ipcService.sendMessage('chart:load'); - 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] - } - ] - } - }); + // 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() { @@ -85,6 +89,12 @@ export class ChartsComponent implements OnInit { }); } + private _setupSeriesHandler() { + this._ipcService.setupIpcListenerOnce('series:data', (event, data) => { + this.series = data; + }); + } + private _setupSeriesDataHandler() { this._ipcService.setupIpcListenerOnce( 'chart:data:series', diff --git a/client/src/app/chart/series-chart.component.html b/client/src/app/chart/series-chart.component.html new file mode 100644 index 0000000..159074f --- /dev/null +++ b/client/src/app/chart/series-chart.component.html @@ -0,0 +1,3 @@ +
+ {{ chart }} +
diff --git a/client/src/app/chart/series-chart.component.scss b/client/src/app/chart/series-chart.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/app/chart/series-chart.component.ts b/client/src/app/chart/series-chart.component.ts new file mode 100644 index 0000000..557119d --- /dev/null +++ b/client/src/app/chart/series-chart.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit, AfterViewInit, Input } from '@angular/core'; +import { IpcService } from '../ipc.service'; + +import { Chart } from 'chart.js'; + +@Component({ + selector: 'pokemon-series-chart', + templateUrl: './series-chart.component.html', + styleUrls: ['./series-chart.component.scss'] +}) +export class SeriesChartComponent implements AfterViewInit { + @Input() series: string; + + chart; + + constructor(private _ipcService: IpcService) {} + + ngAfterViewInit(): void { + this._setupSeriesChartHandler(); + this._ipcService.sendMessage(`series:data:load`, this.series); + } + + private _setupSeriesChartHandler() { + this._ipcService.setupIpcListenerOnce( + `series:data:${this.series}`, + (event, data) => { + let seriesData = data.reduce( + (accumulator, currentValue) => { + accumulator.labels.push(currentValue.name); + accumulator.values.push(currentValue.value); + return accumulator; + }, + { labels: [], values: [] } + ); + + this.chart = new Chart(this.series, { + type: 'polarArea', + data: { + labels: seriesData.labels, + datasets: [ + { + data: seriesData.values, + backgroundColor: this._fillColors(seriesData.values.length) + } + ] + } + }); + } + ); + } + + private _fillColors(length) { + return Array.apply(null, Array(length)).map(x => this._getRandomColor()); + } + + private _getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; + } +} diff --git a/client/src/app/home/home.component.html b/client/src/app/home/home.component.html index a57442a..06cbdd6 100644 --- a/client/src/app/home/home.component.html +++ b/client/src/app/home/home.component.html @@ -12,9 +12,7 @@ - - - +
diff --git a/client/src/app/home/home.component.scss b/client/src/app/home/home.component.scss index 715d6e9..2f000d0 100644 --- a/client/src/app/home/home.component.scss +++ b/client/src/app/home/home.component.scss @@ -30,6 +30,10 @@ mat-sidenav-content { overflow: auto; height: calc(100vh - 64px); } + + pokemon-charts { + overflow: auto; + } } .spacer { diff --git a/electron/database/chart.js b/electron/database/chart.js index 14e043f..54d2fcb 100644 --- a/electron/database/chart.js +++ b/electron/database/chart.js @@ -16,6 +16,28 @@ handler('chart:load', async () => { }); }); +handler('series:data:load', async (event, args) => { + let sets = await loadSets(args); + + let setCodes = sets.map(set => { + return set.code; + }); + + let collections = await loadCollections(setCodes); + + let seriesInfo = sets.map(set => { + let setCollection = collections.filter( + collection => set.code === collection.setCode + ); + return { + name: set.name, + value: (setCollection.length / set.totalCards * 100).toFixed(2) + }; + }); + + notify(`series:data:${args}`, seriesInfo); +}); + handler('chart:load:series', async () => { let seriesCall = loadSeries(); let collectionCall = loadCollection(); @@ -33,7 +55,11 @@ handler('chart:load:series', async () => { series: allSeries[series].map(set => { return { name: set.name, - value: (collectionCount[set.code] || 0) / set.totalCards * 100 + value: ( + (collectionCount[set.code] || 0) / + set.totalCards * + 100 + ).toFixed(2) }; }) }; @@ -41,9 +67,39 @@ handler('chart:load:series', async () => { } notify('chart:data:series', seriesData); - console.log(seriesData); }); +function loadSets(seriesName) { + return new Promise((resolve, reject) => { + db.sets.find({ series: seriesName }, (err, sets) => { + if (err) { + reject(err); + } else { + resolve(sets); + } + }); + }); +} + +function loadCollections(setCodes) { + return new Promise((resolve, reject) => { + db.collection.find( + { + setCode: { + $in: setCodes + } + }, + (err, collection) => { + if (err) { + reject(err); + } else { + resolve(collection); + } + } + ); + }); +} + function loadCollection() { return new Promise((resolve, reject) => { db.collection.find({}, (err, collection) => { From 44b5b1097f6f1b03ceb75578d94841dbf019b2bd Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Wed, 25 Apr 2018 18:55:54 +0200 Subject: [PATCH 6/7] Some improvements, made series charts into expansion panels --- client/package.json | 1 - client/src/app/app.component.ts | 6 +++--- client/src/app/app.module.ts | 14 ++++++-------- .../src/app/card-preview/card-preview.component.ts | 6 +++--- client/src/app/chart/chart.component.html | 7 +++---- client/src/app/chart/chart.component.ts | 8 ++++---- client/src/app/chart/series-chart.component.html | 12 ++++++++++-- client/src/app/chart/series-chart.component.scss | 11 +++++++++++ client/src/app/chart/series-chart.component.ts | 4 ++-- client/src/app/home/home.component.ts | 6 +++--- client/src/app/set-item/set-item.component.ts | 6 +++--- 11 files changed, 48 insertions(+), 33 deletions(-) diff --git a/client/package.json b/client/package.json index b755217..1fe8b88 100644 --- a/client/package.json +++ b/client/package.json @@ -21,7 +21,6 @@ "@angular/material": "^5.2.4", "@angular/platform-browser": "^5.2.9", "@angular/platform-browser-dynamic": "^5.2.9", - "@swimlane/ngx-charts": "^7.3.0", "chart.js": "^2.7.2", "ngx-electron": "^1.0.4", "rxjs": "^5.5.7", diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 28f99e4..3905f51 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { UpdaterService } from './update/updater.service'; @Component({ @@ -6,10 +6,10 @@ import { UpdaterService } from './update/updater.service'; 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(); } } diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 19bd0c4..092208b 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -5,14 +5,15 @@ import { MatButtonModule, MatCheckboxModule, MatDialogModule, + MatExpansionModule, MatIconModule, MatListModule, + MatProgressBarModule, MatProgressSpinnerModule, MatSidenavModule, MatSnackBarModule, MatTableModule, - MatToolbarModule, - MatProgressBarModule + MatToolbarModule } from '@angular/material'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -20,6 +21,8 @@ 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'; @@ -27,11 +30,6 @@ import { UpdateAvailableDialogComponent } from './update/update-available/update import { UpdateDownloadedDialogComponent } from './update/update-downloaded/update-downloaded-dialog.component'; import { UpdaterService } from './update/updater.service'; -import { ChartsComponent } from './chart/chart.component'; - -import { NgxChartsModule } from '@swimlane/ngx-charts'; -import { SeriesChartComponent } from './chart/series-chart.component'; - @NgModule({ declarations: [ AppComponent, @@ -60,12 +58,12 @@ import { SeriesChartComponent } from './chart/series-chart.component'; MatToolbarModule, MatCheckboxModule, MatProgressBarModule, + MatExpansionModule, NgxElectronModule, BrowserModule, BrowserAnimationsModule, HttpClientModule, - NgxChartsModule, OverlayModule ], diff --git a/client/src/app/card-preview/card-preview.component.ts b/client/src/app/card-preview/card-preview.component.ts index 76139a4..2cc9c6c 100644 --- a/client/src/app/card-preview/card-preview.component.ts +++ b/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 = new Subject(); 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) => { diff --git a/client/src/app/chart/chart.component.html b/client/src/app/chart/chart.component.html index ca35d8a..8edd115 100644 --- a/client/src/app/chart/chart.component.html +++ b/client/src/app/chart/chart.component.html @@ -16,7 +16,6 @@ {{ chart }}
--> - -
- -
+ + + diff --git a/client/src/app/chart/chart.component.ts b/client/src/app/chart/chart.component.ts index fba0269..cb5a90e 100644 --- a/client/src/app/chart/chart.component.ts +++ b/client/src/app/chart/chart.component.ts @@ -1,14 +1,14 @@ -import { Component, OnInit, AfterViewInit } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; +import { Chart } from 'chart.js'; import { IpcService } from '../ipc.service'; -import { Chart } from 'chart.js'; @Component({ selector: 'pokemon-charts', templateUrl: './chart.component.html', styleUrls: ['./chart.component.scss'] }) -export class ChartsComponent implements OnInit { +export class ChartsComponent implements AfterViewInit { totalProgress = 0; seriesData: { @@ -61,7 +61,7 @@ export class ChartsComponent implements OnInit { constructor(private _ipcService: IpcService) {} - ngOnInit(): void { + ngAfterViewInit(): void { this._setupSeriesHandler(); this._setupChartingHandler(); diff --git a/client/src/app/chart/series-chart.component.html b/client/src/app/chart/series-chart.component.html index 159074f..53dba4a 100644 --- a/client/src/app/chart/series-chart.component.html +++ b/client/src/app/chart/series-chart.component.html @@ -1,3 +1,11 @@ -
+ + + + {{ series }} + + + + + {{ chart }} -
+ diff --git a/client/src/app/chart/series-chart.component.scss b/client/src/app/chart/series-chart.component.scss index e69de29..9ad22a5 100644 --- a/client/src/app/chart/series-chart.component.scss +++ b/client/src/app/chart/series-chart.component.scss @@ -0,0 +1,11 @@ +.mat-expanded { + margin: 16px 0; +} + +.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/series-chart.component.ts b/client/src/app/chart/series-chart.component.ts index 557119d..636800d 100644 --- a/client/src/app/chart/series-chart.component.ts +++ b/client/src/app/chart/series-chart.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit, AfterViewInit, Input } from '@angular/core'; +import { AfterViewInit, Component, Input } from '@angular/core'; +import { Chart } from 'chart.js'; import { IpcService } from '../ipc.service'; -import { Chart } from 'chart.js'; @Component({ selector: 'pokemon-series-chart', diff --git a/client/src/app/home/home.component.ts b/client/src/app/home/home.component.ts index 09764ea..098da46 100644 --- a/client/src/app/home/home.component.ts +++ b/client/src/app/home/home.component.ts @@ -1,5 +1,5 @@ import { SelectionModel } from '@angular/cdk/collections'; -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/observable/zip'; @@ -16,7 +16,7 @@ import { Set } from '../models/set.interface'; templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) -export class HomeComponent implements OnInit { +export class HomeComponent implements AfterViewInit { collection = {}; defaultColumns: string[] = [ @@ -77,7 +77,7 @@ export class HomeComponent implements OnInit { ); } - ngOnInit(): void { + ngAfterViewInit(): void { this._setupSetlistHandler(); this._setupCardlistHandler(); this._setupCollectionListHandler(); diff --git a/client/src/app/set-item/set-item.component.ts b/client/src/app/set-item/set-item.component.ts index a2b3a99..1a836fa 100644 --- a/client/src/app/set-item/set-item.component.ts +++ b/client/src/app/set-item/set-item.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, Input } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Subject } from 'rxjs/Subject'; import { IpcService } from '../ipc.service'; @@ -9,7 +9,7 @@ import { Set } from '../models/set.interface'; templateUrl: './set-item.component.html', styleUrls: ['./set-item.component.scss'] }) -export class SetItemComponent implements OnInit { +export class SetItemComponent implements AfterViewInit { @Input() set: Set; @Input() last: boolean; @@ -18,7 +18,7 @@ export class SetItemComponent implements OnInit { constructor(private _ipcService: IpcService) {} - ngOnInit() { + ngAfterViewInit() { this._ipcService.setupIpcListenerOnce( `collection:count:${this.set.code}`, (event, args) => { From 8ddde8de04ca77c08f33038e28aba18ca3db10c1 Mon Sep 17 00:00:00 2001 From: Tom Matheussen Date: Wed, 25 Apr 2018 19:45:29 +0200 Subject: [PATCH 7/7] Some minor changes to chart loading --- client/src/app/chart/chart.component.html | 12 ++++++++++++ client/src/app/chart/chart.component.scss | 8 ++++++++ client/src/app/chart/chart.component.ts | 15 +-------------- client/src/app/chart/series-chart.component.html | 2 +- client/src/app/chart/series-chart.component.ts | 13 ++++++++++--- electron/database/chart.js | 4 ++-- 6 files changed, 34 insertions(+), 20 deletions(-) diff --git a/client/src/app/chart/chart.component.html b/client/src/app/chart/chart.component.html index 8edd115..489b7c6 100644 --- a/client/src/app/chart/chart.component.html +++ b/client/src/app/chart/chart.component.html @@ -17,5 +17,17 @@
--> + + + + General + + + + + + {{ generalChart }} + + diff --git a/client/src/app/chart/chart.component.scss b/client/src/app/chart/chart.component.scss index 478abc9..0b21de8 100644 --- 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 index cb5a90e..59e0d76 100644 --- 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 index 53dba4a..aac4695 100644 --- a/client/src/app/chart/series-chart.component.html +++ b/client/src/app/chart/series-chart.component.html @@ -4,7 +4,7 @@ {{ series }} - + {{ chart }} diff --git a/client/src/app/chart/series-chart.component.ts b/client/src/app/chart/series-chart.component.ts index 636800d..f12b421 100644 --- 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 index 54d2fcb..4968617 100644 --- 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 () => {