Browse Source

fixes

pull/8337/head
Maksym Dudnik 3 years ago
parent
commit
d7909e7b71
  1. 16
      ui-ngx/src/app/shared/components/device/gateway-statistics.component.html
  2. 13
      ui-ngx/src/app/shared/components/device/gateway-statistics.component.scss
  3. 59
      ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts

16
ui-ngx/src/app/shared/components/device/gateway-statistics.component.html

@ -17,7 +17,7 @@
--> -->
<div class="statistics-container" fxLayout="row"> <div class="statistics-container" fxLayout="row">
<mat-card [formGroup]="statisticForm"> <mat-card [formGroup]="statisticForm" *ngIf="!general">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label>Statistic</mat-label> <mat-label>Statistic</mat-label>
<mat-select formControlName="statisticKey"> <mat-select formControlName="statisticKey">
@ -38,17 +38,17 @@
<input matInput [value]="commandObj.command" disabled> <input matInput [value]="commandObj.command" disabled>
</mat-form-field> </mat-form-field>
</mat-card> </mat-card>
<div fxLayout="column"> <div class="chart-box" fxLayout="column">
<div #statisticChart> <div class="chart-container" #statisticChart>
</div> </div>
<div fxFlex class="statistic-legend" fxLayout="row" fxLayoutAlign="center center"> <div fxFlex class="legend" fxLayout="row" fxLayoutAlign="center center">
<div class="statistic-legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row" <div class="legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row"
fxLayoutAlign="center center"> fxLayoutAlign="center center">
<span class="statistic-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span> <span class="legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
<div class="statistic-legend-label" <div class="legend-label"
(click)="onLegendKeyHiddenChange(legendKey.dataIndex)" (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"
[ngClass]="{ 'statistic-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden }" [ngClass]="{ 'hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden }"
[innerHTML]="legendKey.dataKey.label"> [innerHTML]="legendKey.dataKey.label">
</div> </div>
</div> </div>

13
ui-ngx/src/app/shared/components/device/gateway-statistics.component.scss

@ -28,7 +28,7 @@
padding: 15px; padding: 15px;
} }
div { .chart-box, .chart-container {
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
} }
@ -38,18 +38,19 @@
} }
} }
.statistic-legend { .legend {
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
padding-top: 8px; padding-top: 8px;
padding-bottom: 4px; padding-bottom: 4px;
margin-top: 15px;
.statistic-legend-keys { .legend-keys {
.statistic-legend-label { .legend-label {
padding: 2px 20px 2px 10px; padding: 2px 20px 2px 10px;
white-space: nowrap; white-space: nowrap;
&.statistic-hidden-label { &.hidden-label {
text-decoration: line-through; text-decoration: line-through;
opacity: .6; opacity: .6;
} }
@ -59,7 +60,7 @@
} }
} }
.statistic-legend-line { .legend-line {
display: inline-block; display: inline-block;
width: 15px; width: 15px;
height: 3px; height: 3px;

59
ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts

@ -49,6 +49,9 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
@Input() @Input()
ctx: WidgetContext; ctx: WidgetContext;
@Input()
general: boolean;
private flot: TbFlot; private flot: TbFlot;
private flotCtx; private flotCtx;
public statisticForm: FormGroup; public statisticForm: FormGroup;
@ -67,7 +70,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
}) })
}, },
useDashboardTimewindow: false, useDashboardTimewindow: false,
legendConfig : { legendConfig: {
position: LegendPosition.bottom position: LegendPosition.bottom
} as LegendConfig } as LegendConfig
}; };
@ -104,18 +107,30 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
this.init(); this.init();
if (this.ctx.defaultSubscription.datasources.length) { if (this.ctx.defaultSubscription.datasources.length) {
const gatewayId = this.ctx.defaultSubscription.datasources[0].entity.id; const gateway = this.ctx.defaultSubscription.datasources[0].entity;
this.attributeService.getEntityAttributes(gatewayId, AttributeScope.SHARED_SCOPE, ["general_configuration"]).subscribe((resp: AttributeData[]) => { if (!this.general) {
if (resp && resp.length) { this.attributeService.getEntityAttributes(gateway.id, AttributeScope.SHARED_SCOPE, ["general_configuration"]).subscribe((resp: AttributeData[]) => {
this.commands = resp[0].value.statistics.commands; if (resp && resp.length) {
if (!this.statisticForm.get('statisticKey').value) { this.commands = resp[0].value.statistics.commands;
this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway); if (!this.statisticForm.get('statisticKey').value) {
this.createChartsSubscription(this.ctx.defaultSubscription.datasources[0].entity, this.commands[0].attributeOnGateway); this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway);
this.createChartsSubscription(gateway, this.commands[0].attributeOnGateway);
}
} }
} })
}) } else {
let connectorsTs;
this.attributeService.getEntityTimeseriesLatest(gateway.id).subscribe(
data => {
connectorsTs = Object.keys(data)
.filter(el => el.includes(
'ConnectorEventsProduced'
) || el.includes(
'ConnectorEventsSent'))
this.createGeneralChartsSubscription(gateway, connectorsTs);
})
}
} }
} }
public onLegendKeyHiddenChange(index: number) { public onLegendKeyHiddenChange(index: number) {
@ -135,7 +150,28 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
subscriptionInfo[0].timeseries = [{name: attr, label: attr}]; subscriptionInfo[0].timeseries = [{name: attr, label: attr}];
this.subscriptionInfo = subscriptionInfo; this.subscriptionInfo = subscriptionInfo;
this.changeSubscription(subscriptionInfo); this.changeSubscription(subscriptionInfo);
}
private createGeneralChartsSubscription(gateway: BaseData<EntityId>, attrData: [string]) {
let subscriptionInfo = [{
type: DatasourceType.entity,
entityType: EntityType.DEVICE,
entityId: gateway.id.id,
entityName: gateway.name,
timeseries: []
}];
subscriptionInfo[0].timeseries = [];
if (attrData && attrData.length) {
attrData.forEach(attr => {
subscriptionInfo[0].timeseries.push({name: attr, label: attr})
})
}
this.ctx.defaultSubscription.datasources[0].dataKeys.forEach(dataKey => {
subscriptionInfo[0].timeseries.push({name: dataKey.name, label: dataKey.label})
})
this.subscriptionInfo = subscriptionInfo;
this.changeSubscription(subscriptionInfo);
} }
init = () => { init = () => {
@ -181,6 +217,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
if (exceptionData.message) { if (exceptionData.message) {
errorText += ': ' + exceptionData.message; errorText += ': ' + exceptionData.message;
} }
console.error(errorText);
} }
private onDataUpdated() { private onDataUpdated() {

Loading…
Cancel
Save