Refactored the code.

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.
 
 ------------------------------
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "c8y-barchart-widget",
- "version": "1.0.0",
+ "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {

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<datapointsLength; i++) {
- if(this.configDatapoints[i].target === "constant") {
+ if(this.configDatapoints[i].valueType === "constant") {
  if(this.configDatapoints[i].value === undefined || this.configDatapoints[i].value === "") {
  console.log("Bar chart widget - Value is missing.");
  this.chart.data.points.push(0);
  } else {
  this.chart.data.points.push(this.configDatapoints[i].value);
  }
- } else if(this.configDatapoints[i].target === "device") {
- if(this.configDatapoints[i].value === undefined || this.configDatapoints[i].value === "") {
- console.log("Bar chart widget - Value is missing.");
+ } else if(this.configDatapoints[i].valueType === "measurement") {
+ if(this.configDatapoints[i].managedObjectId === undefined || this.configDatapoints[i].managedObjectId === ""){
+ console.log("Bar chart widget - Device/ Device group is missing.");
  this.chart.data.points.push(0);
  } else {
- if(this.configDatapoints[i].managedObjectId === undefined || this.configDatapoints[i].managedObjectId === ""){
- console.log("Bar chart widget - Device/ Device group is missing.");
+ if(this.configDatapoints[i].value === undefined || this.configDatapoints[i].value === "") {
+ console.log("Bar chart widget - Fragment series is missing.");
  this.chart.data.points.push(0);
  } else {
- if(this.configDatapoints[i].value === undefined || this.configDatapoints[i].value === "") {
- console.log("Bar chart widget - Value is missing.");
- this.chart.data.points.push(0);
- } else {
- 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();
- }
+ 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 {

src/c8y-barchart-widget/c8y-barchart-widget.config.component.html

@@ -25,25 +25,25 @@
  </c8y-form-group>
  <c8y-form-group class="col-lg-2">
  <label>Value type</label>
- <select class="form-control" name="dp-target" [(ngModel)]="dp.target" (change)="targetChanged(i)">
+ <select class="form-control" name="dp-valuetype" [(ngModel)]="dp.valueType" (change)="valueTypeChanged(i)">
  <option value="constant">Constant</option>
- <option value="device">Device</option>
+ <option value="measurement">Measurement</option>
  </select>
  </c8y-form-group>
- <c8y-form-group class="col-lg-3" *ngIf="dp.target === 'constant'">
+ <c8y-form-group class="col-lg-3" *ngIf="dp.valueType === 'constant'">
  <label>Value</label>
  <input type="text" class="form-control" name="dp-value" [(ngModel)]="dp.value" (change)="updateConfig()" />
  </c8y-form-group>
- <c8y-form-group class="col-lg-3" *ngIf="dp.target === 'device'">
- <label>Select asset</label>
- <select class="form-control" name="dp-asset-id" [(ngModel)]="dp.managedObjectId" (change)="assetUpdated(dp.managedObjectId, i)">
- <option [value]="asset.id" *ngFor="let asset of assetList">{{asset.name}}</option>
+ <c8y-form-group class="col-lg-3" *ngIf="dp.valueType === 'measurement'">
+ <label>Select device/ device group</label>
+ <select class="form-control" name="dp-managedobject-id" [(ngModel)]="dp.managedObjectId" (change)="managedObjectChanged(dp.managedObjectId, i)">
+ <option [value]="mo.id" *ngFor="let mo of managedObjectList">{{mo.name}}</option>
  </select>
  </c8y-form-group>
- <c8y-form-group class="col-lg-3" *ngIf="dp.target === 'device'">
- <label>Select measurement</label>
+ <c8y-form-group class="col-lg-3" *ngIf="dp.valueType === 'measurement'">
+ <label>Select fragment series</label>
  <select class="form-control" name="dp-measurement-id" [(ngModel)]="dp.value" (change)="updateConfig()">
- <option [value]="series" *ngFor="let series of dp.supportedSeries">{{series}}</option>
+ <option [value]="fs" *ngFor="let fs of dp.supportedFragmentSeries">{{fs}}</option>
  </select>
  </c8y-form-group>
  </div>

src/c8y-barchart-widget/c8y-barchart-widget.config.component.ts

@@ -28,19 +28,19 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy {
 
  @Input() config: any = {};
 
- public assetList = [];
+ public managedObjectList = [];
 
  public widgetInfo = {
  creationTimestamp: Date.now(),
  chartColor: '#1b73b6',
  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);
  });
  }