Skip to content

Commit

Permalink
replaced measurements to datapoints
Browse files Browse the repository at this point in the history
  • Loading branch information
YashPShah-swag committed Oct 31, 2023
1 parent b3aa0f2 commit e76c030
Show file tree
Hide file tree
Showing 7 changed files with 1,172 additions and 430 deletions.
1,293 changes: 985 additions & 308 deletions package-lock.json
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cumulocity-barchart-widget-plugin",
"version": "1.0.1",
"version": "1.1.0",
"description": "The Bar Chart Widget allows you to define multiple datapoints as constant values or realtime measurements from a device or device group.",
"scripts": {
"start": "c8ycli server",
Expand Down Expand Up @@ -28,10 +28,10 @@
"@angular/platform-browser-dynamic": "14.0.6",
"@angular/router": "14.0.6",
"@angular/upgrade": "14.0.6",
"@c8y/client": "1016.0.85",
"@c8y/ng1-modules": "1016.0.85",
"@c8y/ngx-components": "1016.0.85",
"@c8y/style": "1016.0.85",
"@c8y/client": "1016.0.170",
"@c8y/ng1-modules": "1016.0.170",
"@c8y/ngx-components": "1016.0.170",
"@c8y/style": "1016.0.170",
"@ngx-translate/core": "14.0.0",
"angular": "1.6.9",
"chart.js": "^2.9.3",
Expand All @@ -48,7 +48,7 @@
"@angular/language-service": "14.0.6",
"@angular/localize": "14.0.6",
"@angular/service-worker": "14.0.6",
"@c8y/cli": "1016.0.85",
"@c8y/cli": "1016.0.170",
"@types/jest": "^28.1.6",
"@types/webpack": "^5.28.0",
"del": "^6.1.1",
Expand Down Expand Up @@ -89,7 +89,7 @@
"C8yBarchartWidgetModule"
]
},
"copy": [
"copy": [
{
"from": "assets/img-preview.png",
"to": "assets/img-preview.png"
Expand Down
4 changes: 2 additions & 2 deletions widget/c8y-barchart-widget.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
}

.widget-container .icons-container>.icon-container>.dp-icon {
max-height: 50px;
max-width: 50px;
max-height: 40px;
max-width: 80px;
}
110 changes: 53 additions & 57 deletions widget/c8y-barchart-widget.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,81 +68,77 @@ export class C8yBarchartWidget implements OnDestroy, OnInit {

async ngOnInit() {
try {

// Get creation timestamp
this.creationTimestamp = this.config.customwidgetdata.creationTimestamp;

// Get datapoints
// Get constant datapoints
this.configDatapoints = this.config.customwidgetdata.datapoints;
if (this.configDatapoints === undefined || this.configDatapoints.length === 0) {
throw new Error("Bar chart widget - Datapoints are not configured.");
}
let datapointsLength = this.configDatapoints.length;

// Add labels to the array
this.chart.data.labels = this.configDatapoints.map((dp) => {
// Create sub-array by splitting by space to enable multi-line label.
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
if(this.configDatapoints && this.configDatapoints.length > 0){
let datapointsLength = this.configDatapoints.length;
for (let i = 0; i < datapointsLength; i++) {
if (this.configDatapoints[i].valueType === "constant") {
this.chart.data.labels.push(this.configDatapoints[i].label);
this.chart.data.colors.push(this.configDatapoints[i].color);
this.chart.data.icons.push(this.configDatapoints[i].icon);
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].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].value === undefined || this.configDatapoints[i].value === "") {
console.log("Bar chart widget - Fragment series 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();
}
}
});
this.realtimeSubscriptions.push(subs);
}
else {
console.log("Bar chart widget - Invalid value type.");
}
}
}
//configuring datapoints
if(this.config.datapoints && this.config.datapoints.length > 0){
for(let i=0;i<this.config.datapoints.length;i++){
if(this.config.datapoints[i].__active=== true){
//pushing label name
this.chart.data.labels.push(this.config.datapoints[i].label);
//pushing color
this.chart.data.colors.push(this.config.datapoints[i].color);
//pushing icons if any
if(this.config.datapoints[i].icon){
this.chart.data.icons.push(this.config.datapoints[i].icon);
}
else{
this.chart.data.icons.push("");
}
//pushing measurement
let fragment=this.config.datapoints[i].fragment;
let series=this.config.datapoints[i].series;
let measurementFilter = {
source: this.config.datapoints[i].__target.id,
dateFrom: '1980-01-01',
dateTo: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
revert: true,
valueFragmentType: fragment,
valueFragmentSeries: series,
pageSize: 1
};
let resp = await this.measurementSvc.list(measurementFilter);
this.chart.data.points.push(resp.data[0][fragment][series].value);

let subs = this.realtimeSvc.subscribe('/measurements/' + this.config.datapoints[i].__target.id, (resp) => {
if (resp.data.data[fragment]) {
if (resp.data.data[fragment][series]) {
const ind=this.chart.data.labels.findIndex((ele)=> ele == this.config.datapoints[i].label);
this.chart.data.points[ind] = resp.data.data[fragment][series].value;
this.chart.content.update();
}
}
});
this.realtimeSubscriptions.push(subs);
}
} else {
console.log("Bar chart widget - Invalid value type.");
}
}

// Add icons to the array
this.chart.data.icons = this.configDatapoints.map((dp) => {
return dp.icon;
});
this.columnPercentage = (100 / this.configDatapoints.length) + '%';
this.columnPercentage = (100 / this.chart.data.labels.length) + '%';
} catch (e) {
console.log("Bar Chart Widget - " + e);
}
Expand Down
116 changes: 64 additions & 52 deletions widget/c8y-barchart-widget.config.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,74 @@
<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;">
<div class="col-lg-3">
<a (click)="deleteDatapoint(i)" style="cursor: pointer;">Delete datapoint</a>
</div>
<div class="col-lg-3">
<img [src]="dp.icon" style="max-height: 30px; max-width: 30px;" />
<div>
<div class="col-sm-4">
<div class="row">
<div class="form-group col-sm-12 ">
<form [formGroup]="formGroup">
<c8y-datapoint-selection-list [minActiveCount]="0"
[defaultFormOptions]="datapointSelectDefaultFormOptions" [config]="datapointSelectionConfig"
formControlName="datapoints" name="datapoints"></c8y-datapoint-selection-list>
</form>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<c8y-form-group class="col-lg-3">
<label>Label</label>
<input type="text" class="form-control" [(ngModel)]="dp.label" (change)="updateConfig()" />
</c8y-form-group>
<c8y-form-group class="col-lg-4">
<label>Icon</label>
<input type="file" class="form-control" name="dp-icon" (change)="updateIconInConfig($event, i)" />
</c8y-form-group>
<c8y-form-group class="col-lg-2">
<label>Value type</label>
<select class="form-control" name="dp-valuetype" [(ngModel)]="dp.valueType"
(change)="valueTypeChanged(i)">
<option value="constant">Constant</option>
<option value="measurement">Measurement</option>
</select>
</c8y-form-group>
<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.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.valueType === 'measurement'">
<label>Select fragment series</label>
<select class="form-control" name="dp-measurement-id" [(ngModel)]="dp.value" (change)="updateConfig()">
<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>
<h4 style="margin-top: 10px;">Icons for selected datapoints</h4>
<br>
<div *ngFor="let dp of config.datapoints; let i=index" class="d-flex">
<c8y-form-group class="col-sm-8" *ngIf="dp.__active === true">
<label>{{dp.label}}</label>
<input type="file" class="form-control" name="dp-icon" (change)="datapointsIconChange($event, i)" />
</c8y-form-group>
<img [src]="dp.icon" style="max-height: 40px; max-width: 80px; margin-top: 10px;"
*ngIf="dp.icon && dp.__active === true" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<hr class="separator" />
<h4>Constant datapoints</h4>
<br>
<div class="row form-row" *ngFor="let dp of widgetInfo.datapoints; let i = index">
<div class="col-sm-12">
<div class="row" style="margin-bottom: 5px;">
<div class="col-sm-5">
<a (click)="deleteDatapoint(i)" style="cursor: pointer;">Delete constant datapoint</a>
</div>
</div>
<div class="row">
<c8y-form-group class="col-md-5 col-sm-12">
<label>Label</label>
<input type="text" class="form-control" [(ngModel)]="dp.label" (change)="updateConfig()" />
</c8y-form-group>
<c8y-form-group class="col-md-3 col-sm-6">
<label>Icon</label>
<input type="file" class="form-control" name="dp-icon"
(change)="updateIconInConfig($event, i)" />
</c8y-form-group>
<div class="col-md-2 col-sm-2">
<img [src]="dp.icon" style="max-height: 40px; max-width: 80px; margin-top: 10px;" />
</div>
<c8y-form-group class="col-md-5 col-sm-12" *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-md-5 col-sm-12">
<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">
<hr class="separator" />
</div>
</div>
</div>
</div>
<button class="btn btn-primary" (click)="addNewDatapoint()">
Add new constant datapoint
</button>
</div>
</div>
</div>


<button class="btn btn-primary" (click)="addNewDatapoint()">
Add new datapoint
</button>
</div>

0 comments on commit e76c030

Please sign in to comment.