-Fixed decimal point issue.

- Fixed chart center position on small widget size.
- Fixed issue when having multiple widgets on same dashboard.

src/advanced-radial-gauge/advanced-radial-gauge.component.html

@@ -1,3 +1,6 @@
-<div [id]="uniqueId" style="width: 85%; height: 85%;">
+<!-- 
+ Ignore the scroll bars when running locally because for some reason they don't appear once deployed.
+-->
+<div [id]="uniqueId" style="width: 100%; height: 85%;" [style.margin-top]="topMargin">
 
 </div>

src/advanced-radial-gauge/advanced-radial-gauge.component.ts

@@ -34,7 +34,9 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
 
  @Input() config;
 
- public uniqueId = 'id-'+Date.now();
+ public uniqueId = "";
+
+ public topMargin = "";
 
  private radialGauge: echarts.ECharts;
 
@@ -77,6 +79,15 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
 
  async ngOnInit(): Promise<void> {
  try {
+
+ // Create Timestamp
+ let creationTimeStamp = _.get(this.config, 'customwidgetdata.creationTimestamp');
+ if(creationTimeStamp === undefined || creationTimeStamp === null) {
+ throw new Error("Creation timestamp is blank.");
+ } else {
+ this.uniqueId = "id-" + creationTimeStamp;
+ }
+
  // Device ID
  this.deviceId = _.get(this.config, 'device.id');
  if(this.deviceId === undefined || this.deviceId === null || this.deviceId === "") {
@@ -186,6 +197,7 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
  this.lastMeasurement.value = resp.data[0][this.measurement.fragment][this.measurement.series].value;
  this.lastMeasurement.unit = resp.data[0][this.measurement.fragment][this.measurement.series].unit;
  }
+ this.configureTopMarginRequired();
  // Show Chart
  this.showChart();
  } catch(e) {
@@ -198,6 +210,7 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
  this.radialGauge = echarts.init(chartDom);
  let option: echarts.EChartsOption;
 
+ let me = this;
  option = {
  title: {
  text: this.title,
@@ -275,7 +288,9 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
  color: this.gauge.indicatorType === 'progressbar' ? this.gauge.progressBar.color : 'inherit',
  offsetCenter: [0, '0%'],
  width: '30%',
- formatter: '{value} '+this.lastMeasurement.unit
+ formatter: function(value) {
+ return value.toFixed(me.measurement.decimalDigits) + ' ' + me.lastMeasurement.unit
+ }
  },
  data: [{
  value: this.lastMeasurement.value,
@@ -287,7 +302,6 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
  this.subscription = this.realtime.subscribe('/measurements/'+this.deviceId, (data) => {
  try {
  if(data.data.data[this.measurement.fragment] !== undefined && data.data.data[this.measurement.fragment][this.measurement.series] !== undefined) {
- let me = this;
  this.radialGauge.setOption<echarts.EChartsOption>({
  series: [
  {
@@ -352,6 +366,25 @@ export class AdvancedRadialGauge implements OnDestroy, OnInit, AfterViewInit {
  return resp;
  }
 
+ // Configure top margin within the widget. This is on the basis if the Widget title is set to hidden or not.
+ private configureTopMarginRequired(): void {
+ let allWidgets: NodeListOf<Element> = document.querySelectorAll('.dashboard-grid-child');
+ allWidgets.forEach((w:Element) => {
+ let widgetElement: Element = w.querySelector('div > div > div > c8y-dynamic-component > lib-advanced-radial-gauge');
+ if(widgetElement !== undefined && widgetElement !== null) {
+ let widgetTitleElement: Element = w.querySelector('div > div > div > c8y-dashboard-child-title');
+ const widgetTitleDisplayValue: string = window.getComputedStyle(widgetTitleElement).getPropertyValue('display');
+ if(widgetTitleDisplayValue !== undefined && widgetTitleDisplayValue !== null && widgetTitleDisplayValue === 'none') {
+ console.log("Title hidden");
+ this.topMargin = '10px';
+ } else {
+ console.log("Title not hidden");
+ this.topMargin = '0';
+ }
+ }
+ });
+ }
+
  ngOnDestroy(): void {
  //unsubscribe from observables here
  try {

src/advanced-radial-gauge/advanced-radial-gauge.config.component.html

@@ -5,7 +5,7 @@
  <div class="form-group">
  <label>Measurement name</label>
  <select class="form-control" [(ngModel)]="widgetInfo.measurement.name" (focus)="loadFragmentSeries()" (change)="updateConfig()">
- <option [ngValue]="seriesValue" *ngFor="let seriesValue of supportedSeries">{{seriesValue}}</option>
+ <option [ngValue]="seriesValue" *ngFor="let seriesValue of widgetInfo.measurement.supportedSeries">{{seriesValue}}</option>
  </select>
  </div>
  </div>

src/advanced-radial-gauge/advanced-radial-gauge.config.component.ts

@@ -41,6 +41,7 @@ export class AdvancedRadialGaugeConfig implements OnInit, OnDestroy {
  },
  startValue: 0,
  measurement: {
+ supportedSeries: [],
  name: '',
  fontSize: 15,
  decimalDigits: 2
@@ -90,6 +91,7 @@ export class AdvancedRadialGaugeConfig implements OnInit, OnDestroy {
  }
 
  public updateConfig() {
+ console.log(this.widgetInfo);
  _.set(this.config, 'customwidgetdata', this.widgetInfo);
  }
 
@@ -98,12 +100,15 @@ export class AdvancedRadialGaugeConfig implements OnInit, OnDestroy {
  console.log("Advanced Radial Gauge Widget - Cannot get fragment series because device id is blank.");
  } else {
  if(this.oldDeviceId !== this.config.device.id) {
- this.measurementSeriesDisabled = true;
  this.fetchClient.fetch('/inventory/managedObjects/'+ this.config.device.id +'/supportedSeries').then((resp: IFetchResponse) => {
  this.measurementSeriesDisabled = false;
  if(resp !== undefined) {
  resp.json().then((jsonResp) => {
- this.supportedSeries = jsonResp.c8y_SupportedSeries;
+ this.widgetInfo.measurement.supportedSeries = jsonResp.c8y_SupportedSeries;
+ if(!this.widgetInfo.measurement.supportedSeries.includes(this.widgetInfo.measurement.name)) {
+ this.widgetInfo.measurement.name = "";
+ }
+ this.updateConfig();
  });
  }
  this.oldDeviceId = this.config.device.id;