From 0c0fd522094bf9d302be927bb93254e9a99cc4ec Mon Sep 17 00:00:00 2001 From: Kalpshekhar Gupta Date: Thu, 29 Jul 2021 11:41:21 +0100 Subject: [PATCH] Refactored the code. --- README.md | 24 +++---- package.json | 2 +- .../c8y-barchart-widget.component.ts | 63 +++++++++---------- .../c8y-barchart-widget.config.component.html | 20 +++--- .../c8y-barchart-widget.config.component.ts | 24 +++---- 5 files changed, 63 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 56cd142..a9988c0 100644 --- a/README.md +++ b/README.md @@ -5,27 +5,27 @@ This is a runtime bar chart widget. It allows you to define multiple datapoints ![Preview](src/c8y-barchart-widget/assets/img-preview.png) ### Installation - for the dashboards using Runtime Widget Loader -1. Download the latest `barchart-widget-{version}.zip` file from the Releases section. +1. Download the latest `c8y-barchart-widget-{version}.zip` file from the Releases section. 2. Make sure you have Runtime Widget Loader installed on your Cockpit or App Builder app. 3. Open a dashboard. 4. Click `more...`. 5. Select `Install Widget` and follow the instructions. -### Configuration - to view the Bar Chart in the widget -1. Make sure you have successfully installed or deployed the widget. +### Configuration - to view the Bar Chart widget +1. Make sure you have successfully installed the widget. 2. Click on `Add widget`. 3. Choose `Bar chart` widget. 4. `Title` is the title of widget. Provide a relevant name. You may choose to hide this. Go to `Appearance` tab and choose `Hidden` under `Widget header style`. 5. `Chart color` allows to choose a custom color for the bar chart. -6. `Label` is the name of the datapoint you want to show on x-axis. -7. `Icon` is for the icon you want to show respective to the datapoint. -8. `Value type` allows to you define whether datapoint will have a `Constant` value or a `Measurement` value from a Device or Device Group. -9. `Value type` is `Constant`. - 1. `Value` allows you provide a fixed value for the datapoint. -10. `Value type` is `Measurement`. +6. `Delete datapoint` allows you to delete a datapoint. +7. `Label` is the name of the datapoint that will appear on the x-axis. +8. `Icon` is for the icon you want to show on the top of the datapoint. +9. `Value type` allows to you choose whether datapoint will have a `Constant` value or a `Measurement` value from a Device or a Device Group. +10. `Value type` is `Constant`. + 1. `Value` allows you provide a fixed value (numerical) for the datapoint. +11. `Value type` is `Measurement`. 1. `Select device/ device group` allows you to choose a Device or Device Group. - 2. `Select fragment series` allows you to choose a `Fragment` and `Series` combined. It automatically gets populated based on the device selected. -11. `Delete datapoint` allows you to delete a datapoint. + 2. `Select fragment series` allows you to choose a `Fragment` and `Series` combined. It automatically gets populated based on the device or device group selected. 12. `Add new datapoint` allows you to define additional datapoints. 13. Click `Save` to add the widget on the dashboard. 14. In case you see unexpected results on the widget, refer to browser console to see if there are error logs. @@ -41,7 +41,7 @@ This is a runtime bar chart widget. It allows you to define multiple datapoints ### Build - to create a new build for the Runtime Widget Loader 1. Finish the development and testing on your local machine. 2. Run `gulp` to start the build process. Run `npm install -g gulp` to install gulp if not already. -3. Use `widget.zip` file in the `dist` folder as a distribution. +3. Use `c8y-barchart-widget-{version}.zip` file in the `dist` folder as a distribution. ------------------------------ diff --git a/package.json b/package.json index 801fd57..fe21e8a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "c8y-barchart-widget", - "version": "1.0.0", + "version": "1.0.1", "description": "", "main": "index.js", "scripts": { diff --git a/src/c8y-barchart-widget/c8y-barchart-widget.component.ts b/src/c8y-barchart-widget/c8y-barchart-widget.component.ts index 30c6491..2c01e16 100644 --- a/src/c8y-barchart-widget/c8y-barchart-widget.component.ts +++ b/src/c8y-barchart-widget/c8y-barchart-widget.component.ts @@ -23,7 +23,6 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { Chart } from 'chart.js'; import { MeasurementService, Realtime } from '@c8y/ngx-components/api'; import { formatDate } from '@angular/common'; -import { Subscription } from 'rxjs'; interface CustomChart { @@ -64,7 +63,6 @@ export class C8yBarchartWidget implements OnDestroy, OnInit { } }; - constructor(private measurementSvc: MeasurementService, private realtimeSvc: Realtime) { } @@ -91,50 +89,45 @@ export class C8yBarchartWidget implements OnDestroy, OnInit { // Add points to the array for(let i=0; i { - if(resp.data.data[fragmentSeries[0]]) { - if(resp.data.data[fragmentSeries[0]][fragmentSeries[1]]) { - this.chart.data.points[i] = resp.data.data[fragmentSeries[0]][fragmentSeries[1]].value; - this.chart.content.update(); - } + let fragmentSeries: string[] = this.configDatapoints[i].value.split("."); + let measurementFilter = { + source: this.configDatapoints[i].managedObjectId, + dateFrom: '1980-01-01', + dateTo: formatDate(new Date(), 'yyyy-MM-dd', 'en'), + revert: true, + valueFragmentType: fragmentSeries[0], + valueFragmentSeries: fragmentSeries[1], + pageSize: 1 + }; + let resp = await this.measurementSvc.list(measurementFilter); + this.chart.data.points.push(resp.data[0][fragmentSeries[0]][fragmentSeries[1]].value); + + // Create realtime subscriptions + let subs = this.realtimeSvc.subscribe('/measurements/'+this.configDatapoints[i].managedObjectId, (resp) => { + if(resp.data.data[fragmentSeries[0]]) { + if(resp.data.data[fragmentSeries[0]][fragmentSeries[1]]) { + this.chart.data.points[i] = resp.data.data[fragmentSeries[0]][fragmentSeries[1]].value; + this.chart.content.update(); } - }); - this.realtimeSubscriptions.push(subs); - } + } + }); + this.realtimeSubscriptions.push(subs); } } } else { diff --git a/src/c8y-barchart-widget/c8y-barchart-widget.config.component.html b/src/c8y-barchart-widget/c8y-barchart-widget.config.component.html index 8c6a11a..16fab37 100644 --- a/src/c8y-barchart-widget/c8y-barchart-widget.config.component.html +++ b/src/c8y-barchart-widget/c8y-barchart-widget.config.component.html @@ -25,25 +25,25 @@ - - + - + - - - + - - + + diff --git a/src/c8y-barchart-widget/c8y-barchart-widget.config.component.ts b/src/c8y-barchart-widget/c8y-barchart-widget.config.component.ts index 839a515..b187196 100644 --- a/src/c8y-barchart-widget/c8y-barchart-widget.config.component.ts +++ b/src/c8y-barchart-widget/c8y-barchart-widget.config.component.ts @@ -28,7 +28,7 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy { @Input() config: any = {}; - public assetList = []; + public managedObjectList = []; public widgetInfo = { creationTimestamp: Date.now(), @@ -36,11 +36,11 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy { datapoints: [ { label: '', - target: 'constant', + valueType: 'constant', managedObjectId: '', value: '', icon: '', - supportedSeries: [] + supportedFragmentSeries: [] } ] }; @@ -60,11 +60,11 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy { this.widgetInfo.datapoints.push( { label: '', - target: 'constant', + valueType: 'constant', managedObjectId: '', value: '', icon: '', - supportedSeries: [] + supportedFragmentSeries: [] } ); this.updateConfig(); @@ -89,23 +89,23 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy { }; } - public targetChanged(index: number): void { + public valueTypeChanged(index: number): void { this.widgetInfo.datapoints[index].value = ""; this.widgetInfo.datapoints[index].managedObjectId = ""; this.updateConfig(); } - public assetUpdated(moId: string, index: number) { + public managedObjectChanged(moId: string, index: number) { this.fetchMeasurements(moId, index); this.updateConfig(); } - public async fetchMeasurements(moId: string, index: number) { - this.widgetInfo.datapoints[index].supportedSeries = []; + private async fetchMeasurements(moId: string, index: number) { + this.widgetInfo.datapoints[index].supportedFragmentSeries = []; this.fetchClient.fetch("/inventory/managedObjects/" + moId + "/supportedSeries").then((resp) => { resp.json().then((body) => { body.c8y_SupportedSeries.forEach((series) => { - this.widgetInfo.datapoints[index].supportedSeries.push(series); + this.widgetInfo.datapoints[index].supportedFragmentSeries.push(series); }); }); }); @@ -119,13 +119,13 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy { }; this.invSvc.list(filter).then((resp) => { resp.data.forEach((mo) => { - this.assetList.push({ + this.managedObjectList.push({ id: mo.id, name: mo.name }); }); }, (err) => { - console.log("Error: "+err); + console.log("Bar Chart widget Configuration: "+err); }); }