diff --git a/package-lock.json b/package-lock.json index 30af75e..99b1f6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4626,6 +4626,32 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "chart.js": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz", + "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==", + "requires": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "chartjs-color": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", + "requires": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" + } + }, + "chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "requires": { + "color-name": "^1.0.0" + } + }, "chokidar": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", @@ -4859,7 +4885,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -4867,8 +4892,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=" }, "color-string": { "version": "1.5.3", @@ -10012,6 +10036,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index 02576d8..d261b3b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@angular/router": "~9.0.0", "@angular/service-worker": "~9.0.0", "aws-amplify": "^1.2.2", + "chart.js": "^2.9.3", "d3": "^5.15.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", diff --git a/src/app/auth/profile/profile.component.ts b/src/app/auth/profile/profile.component.ts index 5ed4550..72ec5c4 100644 --- a/src/app/auth/profile/profile.component.ts +++ b/src/app/auth/profile/profile.component.ts @@ -46,7 +46,7 @@ export class ProfileComponent implements OnInit { async getUserInfo() { this.profile = await Auth.currentUserInfo(); this.user = await Auth.currentAuthenticatedUser(); - console.log(this.profile); + // console.log(this.profile); if ( this.profile.attributes.profile ) { this.avatar = this.profile.attributes.profile; this.currentAvatarUrl = await Storage.vault.get(this.avatar) as string; diff --git a/src/app/configs/configs.component.ts b/src/app/configs/configs.component.ts index 684f7a1..8fa7c2e 100644 --- a/src/app/configs/configs.component.ts +++ b/src/app/configs/configs.component.ts @@ -43,7 +43,7 @@ export class ConfigsComponent implements OnInit { certList.subscribe( data => { this.options = data as string[]; - console.log(data); + // console.log(data); this.filteredOptions = this.certificateIDInput.valueChanges.pipe( startWith(''), map(value => this._filter(value)) @@ -67,7 +67,7 @@ export class ConfigsComponent implements OnInit { } buildForms() { const numberOfDevices = Object.keys(this.configDownloaded).length - 2; - console.log(numberOfDevices); + // console.log(numberOfDevices); this.devicesArray.clear(); for (let i = this.devicesArray.length; i < numberOfDevices; i++) { this.devicesArray.push(this.builder.group({ diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index be0b71a..f20cd67 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,21 +1,19 @@ -
-
-
- Total Flow Rate {{ totalFlowRate }} +
+
+ Total Flow Rate {{ totalFlowRate }} -
+
- - - - - - - -
-

{{ title }}

- -
+ + + + + + +
+
+
+ diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 30c3056..2329e3f 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -2,11 +2,15 @@ width: 250px; } .container { - display: flex; + display: inline-block; width: fit-content; height: fit-content; padding: 15px; } +.viewer { + width: 100%; + height: 100%; +} .flex-spacer { flex-grow: 1; } @@ -21,3 +25,7 @@ table { th.mat-sort-header-sorted { color: black; } + +#charts { + display: flexbox; +} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 22d8972..93b1964 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -4,11 +4,7 @@ import Auth from '@aws-amplify/auth'; import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort'; -import * as d3 from 'd3-selection'; -import * as d3Scale from 'd3-scale'; -import * as d3Array from 'd3-array'; -import * as d3Axis from 'd3-axis'; -import * as d3Color from 'd3-scale-chromatic'; +import { Chart } from 'chart.js'; export interface MyJSON { @@ -55,20 +51,42 @@ export class HomeComponent implements OnInit, OnDestroy { private token: string; title = 'Bar Chart'; - private width: number; - private height: number; - private margin = {top: 20, right: 20, bottom: 30, left: 40}; - colorScale: any; - - private x: any; - private y: any; - private svg: any; - private g: any; + charts = new Array(); @ViewChild(MatSort, {static: true}) sort: MatSort; ngOnInit() { - this.initSvg(); + const chart = document.createElement('CANVAS'); + chart.id = 'myChart'; + chart.style.width = '100%'; + chart.style.height = '500px'; + document.getElementById('charts').appendChild(chart); + const chart1 = document.createElement('canvas'); + chart1.id = 'yourChart'; + chart1.style.width = '100%'; + chart1.style.height = '400px'; + document.getElementById('charts').appendChild(chart1); + + this.charts.push(new Chart(document.getElementById('myChart'), { + type: 'bar', + data: { + labels: [], + datasets: [{ + label: '', + data: [] + }] + } + })); + this.charts.push(new Chart(document.getElementById('yourChart'), { + type: 'line', + data: { + labels: [], + datasets: [{ + label: '', + data: [] + }] + } + })); } ngOnDestroy() { @@ -89,7 +107,7 @@ export class HomeComponent implements OnInit, OnDestroy { subscribeWS() { this.socket$.subscribe((message) => { - console.log(message); + // console.log(message); if (message instanceof Array) { message.forEach(element => { this.updateList(element); @@ -100,22 +118,21 @@ export class HomeComponent implements OnInit, OnDestroy { this.totalFlowRate = this.totalFlowRates(); // console.log(this.serverMessages); this.serverMessages.sort((a, b) => a.location.localeCompare(b.location)); - this.g - .append('g') - .attr('transform', 'translate(0,' + this.height + ')') - .attr('class', 'x-axis') - .call(d3Axis.axisBottom(this.x)); - - // add the y Axis - this.g - .append('g') - .attr('transform', 'translate(0, 0 )') - .attr('class', 'y-axis') - .call(d3Axis.axisLeft(this.y)); - this.drawAxis(); + this.charts.forEach(element => { + element.data.labels = this.serverMessages.map((d) => d.location); + element.data.datasets.forEach( dataset => { + dataset.label = 'Volume Flow'; + dataset.data = this.serverMessages.map( d => d.volumeflow); + dataset.backgroundColor = dataset.data.map((item, index) => 'rgba(' + + index * (255 / this.serverMessages.length) + ',' + + 0 + ',' + + (this.serverMessages.length - index) * (255 / this.serverMessages.length) + ',' + '0.8)'); + }); + element.update(); + }); }, (err) => console.error(err), - () => console.warn('Completed!') + () => console.warn('Complete: Websocket closed') ); } @@ -126,29 +143,25 @@ export class HomeComponent implements OnInit, OnDestroy { try { obj.volumeflow = Number(obj.volumeflow.toFixed(2)); } catch { - console.log('can transform to fixed decimal data missing or not a number'); + // console.log('can transform to fixed decimal data missing or not a number'); } try { obj.current = Number(obj.current.toFixed(2)); } catch { - console.log('can transform to fixed decimal data missing or not a number'); + // console.log('can transform to fixed decimal data missing or not a number'); } try { obj.intakepressure = Number(obj.intakepressure.toFixed(2)); } catch { - console.log('can transform to fixed decimal data missing or not a number'); + // console.log('can transform to fixed decimal data missing or not a number'); } try { obj.frequency = Number(obj.frequency.toFixed(2)); } catch { - console.log('can transform to fixed decimal data missing or not a number'); + // console.log('can transform to fixed decimal data missing or not a number'); } if (index === -1) { - this.svg - .selectAll('.bar') - .remove() - .exit(); this.serverMessages.push(obj); } else { @@ -182,41 +195,9 @@ export class HomeComponent implements OnInit, OnDestroy { this.currentRole = this.roles[index]; this.socket$.complete(); this.serverMessages = []; - this.drawAxis(); this.connect(); } - private initSvg() { - this.svg = d3.select('svg'); - this.width = +this.svg.attr('width') - this.margin.left - this.margin.right; - this.height = +this.svg.attr('height') - this.margin.top - this.margin.bottom; - this.g = this.svg.append('g') - .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); - this.x = d3Scale.scaleBand().rangeRound([0, this.width]).padding(0.1); - this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]); - this.colorScale = d3Scale.scaleOrdinal(d3Color.schemeCategory10); - } - - private drawAxis() { - this.x.domain(this.serverMessages.map((d) => d.location)); - this.y.domain([0, d3Array.max(this.serverMessages, d => d.volumeflow)]).ticks(10); - this.colorScale.domain(this.serverMessages.map(d => d.location)); - this.g - .selectAll('.bar,.tick') - .remove() - .exit() - .data(this.serverMessages) - .enter() - .append('rect') - .attr('class', 'bar') - .attr('x', d => this.x(d.location)) - .attr('width', this.x.bandwidth()) - .attr('y', d => this.y(d.volumeflow)) - .attr('height', d => this.height - this.y(d.volumeflow)) - .attr('fill', d => this.colorScale(d.location)); - this.g.select('.x-axis').call(d3Axis.axisBottom(this.x)); - this.g.select('.y-axis').call(d3Axis.axisLeft(this.y)); - } } diff --git a/src/assets/icons/icon-128x128.png b/src/assets/icons/icon-128x128.png index 9f9241f..bf60b76 100644 Binary files a/src/assets/icons/icon-128x128.png and b/src/assets/icons/icon-128x128.png differ diff --git a/src/assets/icons/icon-144x144.png b/src/assets/icons/icon-144x144.png index 4a5f8c1..1b30a1b 100644 Binary files a/src/assets/icons/icon-144x144.png and b/src/assets/icons/icon-144x144.png differ diff --git a/src/assets/icons/icon-152x152.png b/src/assets/icons/icon-152x152.png index 34a1a8d..8ef3d09 100644 Binary files a/src/assets/icons/icon-152x152.png and b/src/assets/icons/icon-152x152.png differ diff --git a/src/assets/icons/icon-192x192.png b/src/assets/icons/icon-192x192.png index 9172e5d..cb69621 100644 Binary files a/src/assets/icons/icon-192x192.png and b/src/assets/icons/icon-192x192.png differ diff --git a/src/assets/icons/icon-384x384.png b/src/assets/icons/icon-384x384.png index e54e8d3..9066188 100644 Binary files a/src/assets/icons/icon-384x384.png and b/src/assets/icons/icon-384x384.png differ diff --git a/src/assets/icons/icon-512x512.png b/src/assets/icons/icon-512x512.png index 51ee297..ee16098 100644 Binary files a/src/assets/icons/icon-512x512.png and b/src/assets/icons/icon-512x512.png differ diff --git a/src/assets/icons/icon-72x72.png b/src/assets/icons/icon-72x72.png index 2814a3f..4315b76 100644 Binary files a/src/assets/icons/icon-72x72.png and b/src/assets/icons/icon-72x72.png differ diff --git a/src/assets/icons/icon-96x96.png b/src/assets/icons/icon-96x96.png index d271025..2a84c57 100644 Binary files a/src/assets/icons/icon-96x96.png and b/src/assets/icons/icon-96x96.png differ diff --git a/src/favicon.ico b/src/favicon.ico index 8081c7c..ed5a0e9 100644 Binary files a/src/favicon.ico and b/src/favicon.ico differ