From 3f47fbdb9cd2770604e8df3b69568385c19920a1 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Thu, 4 Oct 2018 17:23:27 +0530 Subject: [PATCH 01/12] initial commit --- .../core/asset-readings/assets.module.ts | 4 +- .../assets/assets.component.html | 10 +- .../asset-readings/assets/assets.component.ts | 10 + .../series-graph/series-graph.component.css | 13 + .../series-graph/series-graph.component.html | 47 +++ .../series-graph.component.spec.ts | 25 ++ .../series-graph/series-graph.component.ts | 291 ++++++++++++++++++ src/app/services/assets.service.ts | 14 +- 8 files changed, 407 insertions(+), 7 deletions(-) create mode 100644 src/app/components/core/asset-readings/series-graph/series-graph.component.css create mode 100644 src/app/components/core/asset-readings/series-graph/series-graph.component.html create mode 100644 src/app/components/core/asset-readings/series-graph/series-graph.component.spec.ts create mode 100644 src/app/components/core/asset-readings/series-graph/series-graph.component.ts diff --git a/src/app/components/core/asset-readings/assets.module.ts b/src/app/components/core/asset-readings/assets.module.ts index dc9963b8..9f2a1998 100644 --- a/src/app/components/core/asset-readings/assets.module.ts +++ b/src/app/components/core/asset-readings/assets.module.ts @@ -11,6 +11,7 @@ import { ChartModule } from '../../common/chart'; import { NumberInputDebounceModule } from '../../common/number-input-debounce/number-input-debounce.module'; import { PaginationModule } from '../../common/pagination/pagination.module'; import { ReadingsGraphComponent } from '../asset-readings/readings-graph/readings-graph.component'; +import { SeriesGraphComponent } from '../asset-readings/series-graph/series-graph.component'; import { AssetsComponent } from './assets/assets.component'; const routes: Routes = [ @@ -24,7 +25,8 @@ const routes: Routes = [ @NgModule({ declarations: [ AssetsComponent, - ReadingsGraphComponent + ReadingsGraphComponent, + SeriesGraphComponent ], imports: [ FormsModule, diff --git a/src/app/components/core/asset-readings/assets/assets.component.html b/src/app/components/core/asset-readings/assets/assets.component.html index a10d4f84..5a0a92eb 100644 --- a/src/app/components/core/asset-readings/assets/assets.component.html +++ b/src/app/components/core/asset-readings/assets/assets.component.html @@ -30,8 +30,13 @@ + + + + + - + @@ -39,4 +44,5 @@ - + + \ No newline at end of file diff --git a/src/app/components/core/asset-readings/assets/assets.component.ts b/src/app/components/core/asset-readings/assets/assets.component.ts index c8c34336..562536fa 100644 --- a/src/app/components/core/asset-readings/assets/assets.component.ts +++ b/src/app/components/core/asset-readings/assets/assets.component.ts @@ -5,6 +5,7 @@ import { interval } from 'rxjs'; import { AlertService, AssetsService, PingService } from '../../../../services'; import { MAX_INT_SIZE, POLLING_INTERVAL } from '../../../../utils'; import { ReadingsGraphComponent } from '../readings-graph/readings-graph.component'; +import { SeriesGraphComponent } from '../series-graph/series-graph.component'; @Component({ selector: 'app-assets', @@ -21,6 +22,7 @@ export class AssetsComponent implements OnInit, OnDestroy { private isAlive: boolean; @ViewChild(ReadingsGraphComponent) readingsGraphComponent: ReadingsGraphComponent; + @ViewChild(SeriesGraphComponent) seriesGraphComponent: SeriesGraphComponent; constructor(private assetService: AssetsService, private alertService: AlertService, @@ -73,6 +75,14 @@ export class AssetsComponent implements OnInit, OnDestroy { this.readingsGraphComponent.toggleModal(true); } + /** + * Open series graph modal dialog + */ + public showSeriesGraph(assetCode) { + this.seriesGraphComponent.getSeriesGraph(assetCode, false); + this.seriesGraphComponent.toggleModal(true); + } + public showLoadingSpinner() { this.showSpinner = true; } diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.css b/src/app/components/core/asset-readings/series-graph/series-graph.component.css new file mode 100644 index 00000000..f4e292ff --- /dev/null +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.css @@ -0,0 +1,13 @@ +.delete { + margin: 0; + position: absolute; + top: 2px; + right: 2px; + width: 23px; + height: 23px; + font-size: 0; +} + +[hidden] { + display: none !important; +} \ No newline at end of file diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html new file mode 100644 index 00000000..d70432e3 --- /dev/null +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -0,0 +1,47 @@ + diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.spec.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.spec.ts new file mode 100644 index 00000000..038c65ac --- /dev/null +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SeriesGraphComponent } from './series-graph.component'; + +describe('SeriesGraphComponent', () => { + let component: SeriesGraphComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SeriesGraphComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SeriesGraphComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts new file mode 100644 index 00000000..042ed818 --- /dev/null +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -0,0 +1,291 @@ +import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core'; +import { orderBy } from 'lodash'; +import { interval } from 'rxjs'; +import { Chart } from 'chart.js'; + +import { DateFormatterPipe } from '../../../../pipes/date-formatter-pipe'; +import { AlertService, AssetsService, PingService } from '../../../../services'; +import { ASSET_READINGS_TIME_FILTER, COLOR_CODES, MAX_INT_SIZE, POLLING_INTERVAL } from '../../../../utils'; +import ReadingsValidator from '../assets/readings-validator'; + +@Component({ + selector: 'app-series-graph', + templateUrl: './series-graph.component.html', + styleUrls: ['./series-graph.component.css'] +}) +export class SeriesGraphComponent implements OnDestroy { + public assetCode: string; + public assetChartType: string; + public assetReadingValues: any; + public assetChartOptions: any; + public showGraph = true; + public readings: any; + public assetReadingSeries = []; + public assetReadingSummary = []; + public graphRefreshInterval = POLLING_INTERVAL; + public optedGroup = 'seconds'; + public readKeyColorLabel = []; + + private isAlive: boolean; + @Output() notify: EventEmitter = new EventEmitter(); + @ViewChild('assetChart') assetChart: Chart; + + constructor(private assetService: AssetsService, private alertService: AlertService, + private ping: PingService) { + this.assetChartType = 'line'; + this.assetReadingValues = []; + this.ping.pingIntervalChanged.subscribe((timeInterval: number) => { + if (timeInterval === -1) { + this.isAlive = false; + } + this.graphRefreshInterval = timeInterval; + }); + } + + public roundTo(num, to) { + const _to = Math.pow(10, to); + return Math.round(num * _to) / _to; + } + + public toggleModal(shouldOpen: Boolean) { + const series_graph = document.getElementById('series_graph'); + if (shouldOpen) { + series_graph.classList.add('is-active'); + return; + } + if (this.graphRefreshInterval === -1) { + this.notify.emit(false); + } else { + this.notify.emit(true); + } + this.isAlive = false; + // reset showGraph variable to default state + this.showGraph = true; + series_graph.classList.remove('is-active'); + sessionStorage.removeItem(this.assetCode); + } + + getTimeSeriesGraph(group) { + this.optedGroup = group; + this.showAssetAverage(this.assetCode); + this.plotReadingsGraph(this.assetCode); + } + + public getSeriesGraph(assetCode, autoRefresh = true) { + this.notify.emit(false); + if (this.graphRefreshInterval === -1) { + this.isAlive = false; + } else { + this.isAlive = true; + } + this.assetCode = assetCode; + if (autoRefresh === false) { + this.plotReadingsGraph(assetCode); + this.showAssetAverage(assetCode); + } + interval(this.graphRefreshInterval) + .takeWhile(() => this.isAlive) // only fires when component is alive + .subscribe(() => { + this.showAssetAverage(this.assetCode); + this.plotReadingsGraph(this.assetCode); + }); + } + + public getAssetReadingsSummary(assetCode) { + this.assetService.getAllAssetSummary(assetCode).subscribe( + (data: any) => { + this.assetReadingSummary = data.map(o => { + const k = Object.keys(o)[0]; + return { + name: k, + value: [o[k]] + }; + }); + this.assetReadingSummary = orderBy(this.assetReadingSummary, ['name'], ['asc']); + }, + error => { + if (error.status === 0) { + console.log('service down ', error); + } else { + this.alertService.error(error.statusText); + } + }); + } + + public showAssetAverage(assetCode, ) { + this.readings.forEach(element => { + this.getAssetAverage(assetCode, element); + }); + } + + public getAssetAverage(assetCode, reading) { + this.assetService.getAssetAverage(assetCode, reading, this.optedGroup).subscribe( + (data: any) => { + this.assetReadingSeries = data; + }, + error => { + if (error.status === 0) { + console.log('service down ', error); + } else { + this.alertService.error(error.statusText); + } + }); + } + + public plotReadingsGraph(assetCode) { + if (assetCode === '') { + return false; + } + this.assetService.getAssetReadings(encodeURIComponent(assetCode)). + subscribe( + (data: any[]) => { + console.log('assetCode', assetCode); + console.log('data1', data); + if (data.length === 0) { + this.readings = []; + this.getAssetTimeReading(data); + return false; + } + const validRecord = ReadingsValidator.validate(data); + if (validRecord) { + this.readings = Object.keys(data[0].reading); + this.getAssetTimeReading(data); + } else { + this.readings = []; + this.showGraph = false; + } + }, + error => { + console.log('error in response', error); + }); + } + + public getAssetTimeReading(assetChartRecord) { + let assetTimeLabels = []; + const datePipe = new DateFormatterPipe(); + let assetReading = []; + if (assetChartRecord.length === 0) { + assetTimeLabels = []; + assetReading = []; + } else { + const readings = assetChartRecord.reverse().map(d => d.reading); + readings.forEach(data => { + for (const k in data) { + if (assetReading.length < Object.keys(data).length) { + const read = { + key: k, + values: [data[k]], + }; + assetReading.push(read); + } else { + assetReading.map(el => { + if (el.key === k) { + el.values.push(data[k]); + } + }); + } + } + }); + const timestamps = assetChartRecord.reverse().map(t => t.timestamp); + timestamps.forEach(timestamp => { + assetTimeLabels.push(datePipe.transform(timestamp, 'HH:mm:ss')); + }); + } + this.statsAssetReadingsGraph(assetTimeLabels, assetReading); + } + + getColorCode(readKey, cnt, fill) { + let cc = ''; + if (!['RED', 'GREEN', 'BLUE', 'R', 'G', 'B'].includes(readKey.toUpperCase())) { + if (cnt >= 16) { // 15 is length of Utils' colorCodes array + cc = '#ad7ebf'; + } else { + cc = COLOR_CODES[cnt]; + } + } + if (readKey.toUpperCase() === 'RED' || readKey.toUpperCase() === 'R') { + cc = '#FF334C'; + } else if (readKey.toUpperCase() === 'BLUE' || readKey.toUpperCase() === 'B') { + cc = '#339FFF'; + } else if (readKey.toUpperCase() === 'GREEN' || readKey.toUpperCase() === 'G') { + cc = '#008000'; + } + + if (fill) { + this.readKeyColorLabel.push({ [readKey]: cc }); + } + return cc; + } + + private statsAssetReadingsGraph(labels, assetReading): void { + this.readKeyColorLabel = []; + const ds = []; + let count = 0; + assetReading.forEach(element => { + const dt = { + label: element.key, + data: element.values, + fill: false, + lineTension: 0.1, + spanGaps: true, + hidden: this.getLegendState(element.key), + backgroundColor: this.getColorCode(element.key.trim(), count, true), + borderColor: this.getColorCode(element.key, count, false) + }; + count++; + ds.push(dt); + }); + this.assetChartType = 'line'; + this.assetChartOptions = { + legend: { + onClick: (e, legendItem) => { + console.log('clicked ', legendItem, e); + const index = legendItem.datasetIndex; + const chart = this.assetChart.chart; + const meta = chart.getDatasetMeta(index); + /** + * meta data have hidden property as null by default in chart.js + */ + meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null; + let savedLegendState = JSON.parse(sessionStorage.getItem(this.assetCode)); + if (savedLegendState !== null) { + if (legendItem.hidden === false) { + savedLegendState.push({ key: legendItem.text, selected: true }); + } else { + savedLegendState = savedLegendState.filter(dt => dt.key !== legendItem.text); + } + } else { + savedLegendState = [{ key: legendItem.text, selected: true }]; + } + sessionStorage.setItem(this.assetCode, JSON.stringify(savedLegendState)); + chart.update(); + } + } + }; + this.setAssetReadingValues(labels, ds); + } + + public getLegendState(key) { + const selectedLegends = JSON.parse(sessionStorage.getItem(this.assetCode)); + if (selectedLegends == null) { + return false; + } + for (const l of selectedLegends) { + if (l.key === key && l.selected === true) { + return true; + } + } + } + + private setAssetReadingValues(labels, ds) { + this.assetReadingValues = { + labels: labels, + datasets: ds + }; + } + + public ngOnDestroy(): void { + this.isAlive = false; + } +} + diff --git a/src/app/services/assets.service.ts b/src/app/services/assets.service.ts index 2b4f8725..c154c801 100644 --- a/src/app/services/assets.service.ts +++ b/src/app/services/assets.service.ts @@ -58,11 +58,17 @@ export class AssetsService { catchError((error: Response) => observableThrowError(error))); } + public getReadings(assetCode: string) { + return this.http.get(this.GET_ASSET + '/' + encodeURIComponent(assetCode)).pipe( + map(response => response), + catchError((error: Response) => observableThrowError(error))); + } - // TODO: Not in use yet - public getAssetAverage(assetObject: any) { - // TODO: time based readings average; - return this.http.get(this.GET_ASSET + '/' + encodeURIComponent(assetObject.assetCode) + '/' + assetObject.reading + '/series').pipe( + public getAssetAverage(assetCode: string, reading: string, group) { + let params = new HttpParams(); + params = params.append('group', group); + return this.http.get(this.GET_ASSET + '/' + encodeURIComponent(assetCode) + '/' + reading + '/series', + { params: params }).pipe( map(response => response), catchError((error: Response) => observableThrowError(error))); } From d31724d9716db58c90609295e61817024d8a0303 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Thu, 4 Oct 2018 17:56:51 +0530 Subject: [PATCH 02/12] added time series graph for asset reading --- .../series-graph/series-graph.component.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index 042ed818..cd538988 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -5,7 +5,7 @@ import { Chart } from 'chart.js'; import { DateFormatterPipe } from '../../../../pipes/date-formatter-pipe'; import { AlertService, AssetsService, PingService } from '../../../../services'; -import { ASSET_READINGS_TIME_FILTER, COLOR_CODES, MAX_INT_SIZE, POLLING_INTERVAL } from '../../../../utils'; +import { COLOR_CODES, POLLING_INTERVAL } from '../../../../utils'; import ReadingsValidator from '../assets/readings-validator'; @Component({ @@ -67,7 +67,6 @@ export class SeriesGraphComponent implements OnDestroy { getTimeSeriesGraph(group) { this.optedGroup = group; - this.showAssetAverage(this.assetCode); this.plotReadingsGraph(this.assetCode); } @@ -81,12 +80,10 @@ export class SeriesGraphComponent implements OnDestroy { this.assetCode = assetCode; if (autoRefresh === false) { this.plotReadingsGraph(assetCode); - this.showAssetAverage(assetCode); } interval(this.graphRefreshInterval) .takeWhile(() => this.isAlive) // only fires when component is alive .subscribe(() => { - this.showAssetAverage(this.assetCode); this.plotReadingsGraph(this.assetCode); }); } @@ -154,6 +151,7 @@ export class SeriesGraphComponent implements OnDestroy { this.readings = []; this.showGraph = false; } + this.showAssetAverage(assetCode); }, error => { console.log('error in response', error); @@ -191,7 +189,7 @@ export class SeriesGraphComponent implements OnDestroy { assetTimeLabels.push(datePipe.transform(timestamp, 'HH:mm:ss')); }); } - this.statsAssetReadingsGraph(assetTimeLabels, assetReading); + this.statsAssetSeriesGraph(assetTimeLabels, assetReading); } getColorCode(readKey, cnt, fill) { @@ -217,7 +215,7 @@ export class SeriesGraphComponent implements OnDestroy { return cc; } - private statsAssetReadingsGraph(labels, assetReading): void { + private statsAssetSeriesGraph(labels, assetReading): void { this.readKeyColorLabel = []; const ds = []; let count = 0; From 2fed6feaa06f102dd73fcc46bc99a47619e51641 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Fri, 5 Oct 2018 17:29:27 +0530 Subject: [PATCH 03/12] changes done as per feedback --- .../series-graph/series-graph.component.html | 20 -------------- .../series-graph/series-graph.component.ts | 27 ++++--------------- src/app/utils.ts | 19 +++++++++++++ 3 files changed, 24 insertions(+), 42 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index d70432e3..a3e40b23 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -20,26 +20,6 @@ - -
-
-
- - {{asset.name}}   - - Avg - {{roundTo(reading.average, 5)}} -   - Min - {{roundTo(reading.min, 5)}} -   - Max - {{roundTo(reading.max, 5)}} -   -
-
-
-

Not Available

diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index cd538988..74e4883b 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -5,7 +5,7 @@ import { Chart } from 'chart.js'; import { DateFormatterPipe } from '../../../../pipes/date-formatter-pipe'; import { AlertService, AssetsService, PingService } from '../../../../services'; -import { COLOR_CODES, POLLING_INTERVAL } from '../../../../utils'; +import Utils, { POLLING_INTERVAL } from '../../../../utils'; import ReadingsValidator from '../assets/readings-validator'; @Component({ @@ -136,8 +136,6 @@ export class SeriesGraphComponent implements OnDestroy { this.assetService.getAssetReadings(encodeURIComponent(assetCode)). subscribe( (data: any[]) => { - console.log('assetCode', assetCode); - console.log('data1', data); if (data.length === 0) { this.readings = []; this.getAssetTimeReading(data); @@ -192,23 +190,8 @@ export class SeriesGraphComponent implements OnDestroy { this.statsAssetSeriesGraph(assetTimeLabels, assetReading); } - getColorCode(readKey, cnt, fill) { - let cc = ''; - if (!['RED', 'GREEN', 'BLUE', 'R', 'G', 'B'].includes(readKey.toUpperCase())) { - if (cnt >= 16) { // 15 is length of Utils' colorCodes array - cc = '#ad7ebf'; - } else { - cc = COLOR_CODES[cnt]; - } - } - if (readKey.toUpperCase() === 'RED' || readKey.toUpperCase() === 'R') { - cc = '#FF334C'; - } else if (readKey.toUpperCase() === 'BLUE' || readKey.toUpperCase() === 'B') { - cc = '#339FFF'; - } else if (readKey.toUpperCase() === 'GREEN' || readKey.toUpperCase() === 'G') { - cc = '#008000'; - } - + getColor(readKey, cnt, fill) { + const cc = Utils.getColorCode(readKey, cnt); if (fill) { this.readKeyColorLabel.push({ [readKey]: cc }); } @@ -227,8 +210,8 @@ export class SeriesGraphComponent implements OnDestroy { lineTension: 0.1, spanGaps: true, hidden: this.getLegendState(element.key), - backgroundColor: this.getColorCode(element.key.trim(), count, true), - borderColor: this.getColorCode(element.key, count, false) + backgroundColor: this.getColor(element.key.trim(), count, true), + borderColor: this.getColor(element.key, count, false) }; count++; ds.push(dt); diff --git a/src/app/utils.ts b/src/app/utils.ts index 55b8bcb2..17b5463f 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -80,6 +80,25 @@ export default class Utils { return totalSec < 0 || totalSec >= 86400; } + public static getColorCode(readKey, cnt) { + let cc = ''; + if (!['RED', 'GREEN', 'BLUE', 'R', 'G', 'B'].includes(readKey.toUpperCase())) { + if (cnt >= 16) { // 15 is length of Utils' colorCodes array + cc = '#ad7ebf'; + } else { + cc = COLOR_CODES[cnt]; + } + } + if (readKey.toUpperCase() === 'RED' || readKey.toUpperCase() === 'R') { + cc = '#FF334C'; + } else if (readKey.toUpperCase() === 'BLUE' || readKey.toUpperCase() === 'B') { + cc = '#339FFF'; + } else if (readKey.toUpperCase() === 'GREEN' || readKey.toUpperCase() === 'G') { + cc = '#008000'; + } + return cc; + } + public static getCurrentDate() { return Date.now(); } From 9d3f87a04db47e48f22ecbf4766e9b108fdc74ad Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Mon, 8 Oct 2018 13:28:55 +0530 Subject: [PATCH 04/12] added input box to enter time --- .../series-graph/series-graph.component.html | 10 +++++++--- .../series-graph/series-graph.component.ts | 10 ++++++++-- src/app/services/assets.service.ts | 3 ++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index a3e40b23..af93bd56 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -10,9 +10,12 @@
+
+ +
- @@ -21,7 +24,8 @@

Not Available

- +
- + \ No newline at end of file diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index 74e4883b..7e0b0dba 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -24,6 +24,7 @@ export class SeriesGraphComponent implements OnDestroy { public assetReadingSummary = []; public graphRefreshInterval = POLLING_INTERVAL; public optedGroup = 'seconds'; + public timeValue = 0; public readKeyColorLabel = []; private isAlive: boolean; @@ -65,11 +66,16 @@ export class SeriesGraphComponent implements OnDestroy { sessionStorage.removeItem(this.assetCode); } - getTimeSeriesGraph(group) { + setGroup(group) { this.optedGroup = group; this.plotReadingsGraph(this.assetCode); } + setTimeValue(time) { + this.timeValue = time; + this.plotReadingsGraph(this.assetCode); + } + public getSeriesGraph(assetCode, autoRefresh = true) { this.notify.emit(false); if (this.graphRefreshInterval === -1) { @@ -116,7 +122,7 @@ export class SeriesGraphComponent implements OnDestroy { } public getAssetAverage(assetCode, reading) { - this.assetService.getAssetAverage(assetCode, reading, this.optedGroup).subscribe( + this.assetService.getAssetAverage(assetCode, reading, this.optedGroup, this.timeValue).subscribe( (data: any) => { this.assetReadingSeries = data; }, diff --git a/src/app/services/assets.service.ts b/src/app/services/assets.service.ts index c154c801..85b9f110 100644 --- a/src/app/services/assets.service.ts +++ b/src/app/services/assets.service.ts @@ -64,9 +64,10 @@ export class AssetsService { catchError((error: Response) => observableThrowError(error))); } - public getAssetAverage(assetCode: string, reading: string, group) { + public getAssetAverage(assetCode: string, reading: string, group, time) { let params = new HttpParams(); params = params.append('group', group); + params = params.append(group, time); return this.http.get(this.GET_ASSET + '/' + encodeURIComponent(assetCode) + '/' + reading + '/series', { params: params }).pipe( map(response => response), From e2e966835c27ff9ab33e8fae2a3660aa017ce928 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Tue, 9 Oct 2018 13:26:28 +0530 Subject: [PATCH 05/12] show graph individually by selecting a asset reading key --- .../series-graph/series-graph.component.html | 27 ++++-- .../series-graph/series-graph.component.ts | 88 +++++++++---------- 2 files changed, 60 insertions(+), 55 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index af93bd56..2c69c320 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -10,18 +10,27 @@
-
- -
-
-
- +
+
+
+

+ +

+
+ +
+
+

Not Available

this.isAlive) // only fires when component is alive .subscribe(() => { - this.plotReadingsGraph(this.assetCode); + this.getAssetReadings(this.assetCode); }); } - public getAssetReadingsSummary(assetCode) { - this.assetService.getAllAssetSummary(assetCode).subscribe( - (data: any) => { - this.assetReadingSummary = data.map(o => { - const k = Object.keys(o)[0]; - return { - name: k, - value: [o[k]] - }; - }); - this.assetReadingSummary = orderBy(this.assetReadingSummary, ['name'], ['asc']); - }, - error => { - if (error.status === 0) { - console.log('service down ', error); - } else { - this.alertService.error(error.statusText); + public getAssetReadings(assetCode) { + this.assetService.getAssetReadings(encodeURIComponent(assetCode)).subscribe( + (data: any[]) => { + if (data.length === 0) { + this.readings = []; + return false; } - }); - } - - public showAssetAverage(assetCode, ) { - this.readings.forEach(element => { - this.getAssetAverage(assetCode, element); - }); - } - - public getAssetAverage(assetCode, reading) { - this.assetService.getAssetAverage(assetCode, reading, this.optedGroup, this.timeValue).subscribe( - (data: any) => { - this.assetReadingSeries = data; + this.readings = Object.keys(data[0].reading); + this.plotSeriesGraph(); }, error => { if (error.status === 0) { @@ -135,34 +121,44 @@ export class SeriesGraphComponent implements OnDestroy { }); } - public plotReadingsGraph(assetCode) { - if (assetCode === '') { + public plotSeriesGraph() { + if (this.assetCode === '' || this.readings === '') { return false; } - this.assetService.getAssetReadings(encodeURIComponent(assetCode)). + if (this.readingKey === '') { + this.readingKey = this.readings[0]; + } + this.assetService.getAssetAverage(this.assetCode, this.readingKey, this.optedGroup, this.timeValue). subscribe( (data: any[]) => { if (data.length === 0) { - this.readings = []; - this.getAssetTimeReading(data); + this.getAssetTimeSeries(data); return false; } + for (const e in data) { + data[e].reading = { + 'average': data[e].average, + 'min': data[e].min, + 'max': data[e].max + }; + } const validRecord = ReadingsValidator.validate(data); if (validRecord) { - this.readings = Object.keys(data[0].reading); - this.getAssetTimeReading(data); + this.getAssetTimeSeries(data); } else { - this.readings = []; this.showGraph = false; } - this.showAssetAverage(assetCode); }, error => { - console.log('error in response', error); + if (error.status === 0) { + console.log('service down ', error); + } else { + this.alertService.error(error.statusText); + } }); } - public getAssetTimeReading(assetChartRecord) { + public getAssetTimeSeries(assetChartRecord) { let assetTimeLabels = []; const datePipe = new DateFormatterPipe(); let assetReading = []; From 581d61e576675da496cda8cbc5e8a9dc14d71e23 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Tue, 9 Oct 2018 18:05:17 +0530 Subject: [PATCH 06/12] changes as per feedback --- .../series-graph/series-graph.component.html | 25 ++++++++++--------- .../series-graph/series-graph.component.ts | 10 ++++---- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index 2c69c320..b800203d 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -10,26 +10,27 @@
-
+
-
-
-
-

- -

-
+
    +
+

+ +

+

+ -

-
+ +

+

Not Available

diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index 826a3e88..34fb456a 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -23,8 +23,8 @@ export class SeriesGraphComponent implements OnDestroy { public assetReadingSeries = []; public graphRefreshInterval = POLLING_INTERVAL; public readingKey = ''; - public optedGroup = 'seconds'; - public timeValue = 0; + public optedGroup = 'minutes'; + public timeValue = 10; public readKeyColorLabel = []; private isAlive: boolean; @@ -63,8 +63,8 @@ export class SeriesGraphComponent implements OnDestroy { // reset showGraph variable to default state this.showGraph = true; this.readingKey = ''; - this.optedGroup = 'seconds'; - this.timeValue = 0; + this.optedGroup = 'minutes'; + this.timeValue = 10; series_graph.classList.remove('is-active'); sessionStorage.removeItem(this.assetCode); } @@ -184,7 +184,7 @@ export class SeriesGraphComponent implements OnDestroy { } } }); - const timestamps = assetChartRecord.reverse().map(t => t.timestamp); + const timestamps = assetChartRecord.map(t => t.timestamp); timestamps.forEach(timestamp => { assetTimeLabels.push(datePipe.transform(timestamp, 'HH:mm:ss')); }); From 4aee901130e06b618ac155a170adc4f656a22bb8 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Thu, 11 Oct 2018 15:27:46 +0530 Subject: [PATCH 07/12] fixed lint error and null input value of time --- .../series-graph/series-graph.component.html | 8 +++++++- .../series-graph/series-graph.component.ts | 16 +++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index b800203d..7e6d8bdf 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -9,7 +9,13 @@
-
+
+   + +
+
- +
    @@ -30,15 +30,15 @@

- -
+
+

Time must be in range 1 - {{MAX_RANGE}}

Not Available

diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index 102d539a..e98e2743 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -6,6 +6,7 @@ import { DateFormatterPipe } from '../../../../pipes/date-formatter-pipe'; import { AlertService, AssetsService, PingService } from '../../../../services'; import Utils, { POLLING_INTERVAL } from '../../../../utils'; import ReadingsValidator from '../assets/readings-validator'; +import { MAX_INT_SIZE } from '../../../../utils'; @Component({ selector: 'app-series-graph', @@ -26,6 +27,8 @@ export class SeriesGraphComponent implements OnDestroy { public timeValue = 10; public readKeyColorLabel = []; public showSpinner = false; + public MAX_RANGE = MAX_INT_SIZE; + public isOutOfRange = false; private isAlive: boolean; @Output() notify: EventEmitter = new EventEmitter(); @@ -92,6 +95,11 @@ export class SeriesGraphComponent implements OnDestroy { if (time === null) { time = 10; } + this.isOutOfRange = false; + if (time > this.MAX_RANGE) { + this.isOutOfRange = true; + return; + } this.timeValue = time; this.plotSeriesGraph(); } @@ -110,7 +118,8 @@ export class SeriesGraphComponent implements OnDestroy { interval(this.graphRefreshInterval) .takeWhile(() => this.isAlive) // only fires when component is alive .subscribe(() => { - this.getAssetReadings(this.assetCode); + // this.getAssetReadings(this.assetCode); + this.plotSeriesGraph(); }); } diff --git a/src/app/services/assets.service.ts b/src/app/services/assets.service.ts index 85b9f110..a5d32ce2 100644 --- a/src/app/services/assets.service.ts +++ b/src/app/services/assets.service.ts @@ -68,7 +68,7 @@ export class AssetsService { let params = new HttpParams(); params = params.append('group', group); params = params.append(group, time); - return this.http.get(this.GET_ASSET + '/' + encodeURIComponent(assetCode) + '/' + reading + '/series', + return this.http.get(this.GET_ASSET + '/' + encodeURIComponent(assetCode) + '/' + encodeURIComponent(reading) + '/series', { params: params }).pipe( map(response => response), catchError((error: Response) => observableThrowError(error))); From 153a41d288dd90a47ee8d92c0e767cf2eece7330 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Thu, 11 Oct 2018 16:39:11 +0530 Subject: [PATCH 09/12] removed commented line of code --- .../core/asset-readings/series-graph/series-graph.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index e98e2743..e90c04d3 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -118,7 +118,6 @@ export class SeriesGraphComponent implements OnDestroy { interval(this.graphRefreshInterval) .takeWhile(() => this.isAlive) // only fires when component is alive .subscribe(() => { - // this.getAssetReadings(this.assetCode); this.plotSeriesGraph(); }); } From 418f876f3e975c977116d282451cc308d0d8e4ef Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Thu, 11 Oct 2018 17:50:28 +0530 Subject: [PATCH 10/12] fixed issue due to time value having space --- .../asset-readings/series-graph/series-graph.component.html | 2 +- .../asset-readings/series-graph/series-graph.component.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index e03726d0..487c28f2 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -25,7 +25,7 @@    

- +

diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index e90c04d3..34eec4b6 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -77,6 +77,7 @@ export class SeriesGraphComponent implements OnDestroy { this.readingKey = ''; this.optedGroup = 'minutes'; this.timeValue = 10; + this.isOutOfRange = false; series_graph.classList.remove('is-active'); sessionStorage.removeItem(this.assetCode); } @@ -92,12 +93,13 @@ export class SeriesGraphComponent implements OnDestroy { } setTimeValue(time) { - if (time === null) { + if (time === null || time === undefined) { time = 10; } this.isOutOfRange = false; if (time > this.MAX_RANGE) { this.isOutOfRange = true; + this.timeValue = 10; return; } this.timeValue = time; From 16f2974c1d76bfcb799471232dff5714440322f6 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Fri, 12 Oct 2018 13:32:00 +0530 Subject: [PATCH 11/12] changes done as per feedback --- .../readings-graph.component.ts | 25 ++++--------------- .../series-graph/series-graph.component.html | 18 ++++++------- .../series-graph/series-graph.component.ts | 3 ++- 3 files changed, 16 insertions(+), 30 deletions(-) diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts index b43e13ad..240a2fcf 100644 --- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts +++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts @@ -5,7 +5,7 @@ import { Chart } from 'chart.js'; import { DateFormatterPipe } from '../../../../pipes/date-formatter-pipe'; import { AlertService, AssetsService, PingService } from '../../../../services'; -import { ASSET_READINGS_TIME_FILTER, COLOR_CODES, MAX_INT_SIZE, POLLING_INTERVAL } from '../../../../utils'; +import Utils, { ASSET_READINGS_TIME_FILTER, MAX_INT_SIZE, POLLING_INTERVAL } from '../../../../utils'; import ReadingsValidator from '../assets/readings-validator'; @Component({ @@ -200,23 +200,8 @@ export class ReadingsGraphComponent implements OnDestroy { this.statsAssetReadingsGraph(assetTimeLabels, assetReading); } - getColorCode(readKey, cnt, fill) { - let cc = ''; - if (!['RED', 'GREEN', 'BLUE', 'R', 'G', 'B'].includes(readKey.toUpperCase())) { - if (cnt >= 16) { // 15 is length of Utils' colorCodes array - cc = '#ad7ebf'; - } else { - cc = COLOR_CODES[cnt]; - } - } - if (readKey.toUpperCase() === 'RED' || readKey.toUpperCase() === 'R') { - cc = '#FF334C'; - } else if (readKey.toUpperCase() === 'BLUE' || readKey.toUpperCase() === 'B') { - cc = '#339FFF'; - } else if (readKey.toUpperCase() === 'GREEN' || readKey.toUpperCase() === 'G') { - cc = '#008000'; - } - + getColor(readKey, cnt, fill) { + const cc = Utils.getColorCode(readKey, cnt); if (fill) { this.readKeyColorLabel.push({ [readKey]: cc }); } @@ -235,8 +220,8 @@ export class ReadingsGraphComponent implements OnDestroy { lineTension: 0.1, spanGaps: true, hidden: this.getLegendState(element.key), - backgroundColor: this.getColorCode(element.key.trim(), count, true), - borderColor: this.getColorCode(element.key, count, false) + backgroundColor: this.getColor(element.key.trim(), count, true), + borderColor: this.getColor(element.key, count, false) }; count++; ds.push(dt); diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.html b/src/app/components/core/asset-readings/series-graph/series-graph.component.html index 487c28f2..4abdda8c 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.html +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.html @@ -9,13 +9,7 @@

-
-   - -
-
+

-
+
+
+
+   +

Time must be in range 1 - {{MAX_RANGE}}

Not Available

-
diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index 34eec4b6..2e228f7d 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -125,6 +125,7 @@ export class SeriesGraphComponent implements OnDestroy { } public getAssetReadings(assetCode) { + this.showLoadingSpinner(); this.assetService.getAssetReadings(encodeURIComponent(assetCode)).subscribe( (data: any[]) => { if (data.length === 0) { @@ -136,7 +137,7 @@ export class SeriesGraphComponent implements OnDestroy { this.hideLoadingSpinner(); }, error => { - this.hideLoadingSpinner(); + this.showLoadingSpinner(); if (error.status === 0) { console.log('service down ', error); } else { From 48901c76ccfc13f58dd25b13855d8b894b681d23 Mon Sep 17 00:00:00 2001 From: monika-Dianomic Date: Fri, 12 Oct 2018 15:49:03 +0530 Subject: [PATCH 12/12] fixed issue --- .../core/asset-readings/series-graph/series-graph.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts index 2e228f7d..3f2d11c0 100644 --- a/src/app/components/core/asset-readings/series-graph/series-graph.component.ts +++ b/src/app/components/core/asset-readings/series-graph/series-graph.component.ts @@ -169,6 +169,7 @@ export class SeriesGraphComponent implements OnDestroy { } const validRecord = ReadingsValidator.validate(data); if (validRecord) { + this.showGraph = true; this.getAssetTimeSeries(data); } else { this.showGraph = false;