Added feature to support bar specific colors.

README.md

@@ -4,9 +4,9 @@ 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
+### Installation - for the dashboards using Application Builder
 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.
+2. Make sure you have Application Builder installed.
 3. Open a dashboard.
 4. Click `more...`.
 5. Select `Install Widget` and follow the instructions.
@@ -16,16 +16,16 @@ This is a runtime bar chart widget. It allows you to define multiple datapoints
 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. `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`.
+5. `Delete datapoint` allows you to delete a datapoint.
+6. `Label` is the name of the datapoint that will appear on the x-axis.
+7. `Icon` is for the icon you want to show on the top of the datapoint.
+8. `Value type` allows to you choose whether datapoint will have a `Constant` value or a `Measurement` value from a Device or a Device Group.
+9. `Value type` is `Constant`.
  1. `Value` allows you provide a fixed value (numerical) for the datapoint.
-11. `Value type` is `Measurement`.
+10. `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 or device group selected.
+11. `Color` allows you choose a color specific for the bar.
 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.

package.json

@@ -28,17 +28,19 @@
  "@c8y/style": "1009.0.18",
  "angular": "1.6.9",
  "chart.js": "2.9.3",
- "core-js": "^3.4.0",
+ "chartjs-plugin-datalabels": "1.0.0",
+ "core-js": "3.4.0",
  "ng2-charts": "2.4.2",
- "rxjs": "~6.4.0",
+ "rxjs": "6.4.0",
  "url-search-params-polyfill": "6.0.0",
- "zone.js": "~0.9.1"
+ "zone.js": "0.9.1"
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "0.803.23",
  "@angular/compiler-cli": "8.2.13",
  "@angular/language-service": "8.2.13",
  "@c8y/cli": "1009.0.18",
+ "@types/chart.js": "^2.7.50",
  "caniuse-lite": "1.0.30001019",
  "css-loader": "3.5.3",
  "gulp": "4.0.2",

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

@@ -4,7 +4,7 @@
  <img [src]="icon" class="dp-icon" />
  </div>
  </div>
- <div style="height: calc(100% - 90px);">
+ <div style="height: calc(100% - 60px);">
  <canvas [id]="getUniqueIdForChart()" ></canvas>
  </div>
 </div>

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

@@ -23,17 +23,17 @@ 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 * as ChartDataLabels from 'chartjs-plugin-datalabels';
 
 interface CustomChart {
  position: string,
  content: any,
  type: string,
- color: string,
  data: {
  points: number[],
  labels: string[],
- icons: string[]
+ icons: string[],
+ colors: string[]
  }
  }
 
@@ -54,12 +54,12 @@ export class C8yBarchartWidget implements OnDestroy, OnInit {
  public chart: CustomChart = {
  position: 'bottom',
  content: {},
- color: '#1776bf',
  type: 'bar',
  data: {
  points: [],
  labels: [],
- icons: []
+ icons: [],
+ colors: []
  }
  };
 
@@ -72,9 +72,6 @@ export class C8yBarchartWidget implements OnDestroy, OnInit {
  // Get creation timestamp
  this.creationTimestamp = this.config.customwidgetdata.creationTimestamp;
 
- // Get chart color
- this.chart.color = this.config.customwidgetdata.chartColor;
-
  // Get datapoints
  this.configDatapoints = this.config.customwidgetdata.datapoints;
  if(this.configDatapoints === undefined || this.configDatapoints.length === 0) {
@@ -88,6 +85,11 @@ export class C8yBarchartWidget implements OnDestroy, OnInit {
  return dp.label.split(" ");
  });
 
+ // Add colors to the array
+ this.chart.data.colors = this.configDatapoints.map((dp) => {
+ return dp.color;
+ });
+
  // Add points to the array
  for(let i=0; i<datapointsLength; i++) {
  if(this.configDatapoints[i].valueType === "constant") {
@@ -154,12 +156,13 @@ export class C8yBarchartWidget implements OnDestroy, OnInit {
  private showChart(): void {
  this.chart.content = new Chart(this.getUniqueIdForChart(), {
  type: this.chart.type,
+ plugins: [ChartDataLabels as any],
  data: {
  labels: this.chart.data.labels,
  datasets: [
  {
  data: this.chart.data.points,
- backgroundColor: this.chart.color
+ backgroundColor: this.chart.data.colors
  }
  ]
  },
@@ -192,6 +195,18 @@ export class C8yBarchartWidget implements OnDestroy, OnInit {
  beginAtZero: true
  }
  }],
+ },
+ layout: {
+ padding: {
+ top: 25
+ }
+ },
+ plugins: {
+ datalabels: {
+ color: this.chart.data.colors,
+ anchor: 'end',
+ align: 'top'
+ }
  }
  }
  });

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

@@ -2,10 +2,6 @@ hr.separator {
  border-color: #677680;
 }
 
-.form-row:first-child hr.separator {
- display: none;
-}
-
 .delete-btn {
  border-radius: 30px;
  border-color: #1776bf;

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

@@ -1,9 +1,3 @@
-<div class="row">
- <c8y-form-group class="col-lg-3">
- <label>Chart color</label>
- <input type="color" class="form-control" [(ngModel)]="widgetInfo.chartColor" (change)="updateConfig()" />
- </c8y-form-group>
-</div>
 <div class="row form-row" *ngFor="let dp of widgetInfo.datapoints; let i = index">
  <div class="col-lg-12">
  <div class="row" style="margin-bottom: 5px;">
@@ -46,6 +40,10 @@
  <option [value]="fs" *ngFor="let fs of dp.supportedFragmentSeries">{{fs}}</option>
  </select>
  </c8y-form-group>
+ <c8y-form-group class="col-lg-3">
+ <label>Color</label>
+ <input type="color" name="dp-color" [(ngModel)]="dp.color" (change)="updateConfig()" />
+ </c8y-form-group>
  </div>
  <div class="row">
  <div class="col-lg-12">

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

@@ -32,15 +32,15 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy {
 
  public widgetInfo = {
  creationTimestamp: Date.now(),
- chartColor: '#1b73b6',
  datapoints: [
  {
  label: '',
  valueType: 'constant',
  managedObjectId: '',
  value: '',
  icon: '',
- supportedFragmentSeries: []
+ supportedFragmentSeries: [],
+ color: '#1b73b6'
  }
  ]
  };
@@ -64,7 +64,8 @@ export class C8yBarchartWidgetConfig implements OnInit, OnDestroy {
  managedObjectId: '',
  value: '',
  icon: '',
- supportedFragmentSeries: []
+ supportedFragmentSeries: [],
+ color: '#1b73b6'
  }
  );
  this.updateConfig();

widget-cumulocity.json

@@ -8,6 +8,11 @@
  "class": "fa fw fa-database"
  },
  "manifest": {
- "noAppSwitcher": true
+ "noAppSwitcher": true,
+ "requiredPlatformVersion": "“>=1010.0.4",
+ "version":"1.0.2",
+ "author":"Software AG, Global Presales",
+ "description":"Cumulocity IoT Bar Chart Widget",
+ "license": "Apache 2.0"
  }
 }