diff --git a/ui-ngx/src/app/shared/components/device/gateway-statistics.component.html b/ui-ngx/src/app/shared/components/device/gateway-statistics.component.html index 01b25734a7..53bbfa6aa1 100644 --- a/ui-ngx/src/app/shared/components/device/gateway-statistics.component.html +++ b/ui-ngx/src/app/shared/components/device/gateway-statistics.component.html @@ -17,7 +17,7 @@ -->
- + Statistic @@ -38,17 +38,17 @@ -
-
+
+
-
-
+
- -
+
diff --git a/ui-ngx/src/app/shared/components/device/gateway-statistics.component.scss b/ui-ngx/src/app/shared/components/device/gateway-statistics.component.scss index 3cc39890ca..ae3cb2615e 100644 --- a/ui-ngx/src/app/shared/components/device/gateway-statistics.component.scss +++ b/ui-ngx/src/app/shared/components/device/gateway-statistics.component.scss @@ -28,7 +28,7 @@ padding: 15px; } - div { + .chart-box, .chart-container { height: 100%; flex-grow: 1; } @@ -38,18 +38,19 @@ } } - .statistic-legend { + .legend { flex-wrap: wrap; width: 100%; padding-top: 8px; padding-bottom: 4px; + margin-top: 15px; - .statistic-legend-keys { - .statistic-legend-label { + .legend-keys { + .legend-label { padding: 2px 20px 2px 10px; white-space: nowrap; - &.statistic-hidden-label { + &.hidden-label { text-decoration: line-through; opacity: .6; } @@ -59,7 +60,7 @@ } } - .statistic-legend-line { + .legend-line { display: inline-block; width: 15px; height: 3px; diff --git a/ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts b/ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts index d91bc4a404..12e744983f 100644 --- a/ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts +++ b/ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts @@ -49,6 +49,9 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi @Input() ctx: WidgetContext; + @Input() + general: boolean; + private flot: TbFlot; private flotCtx; public statisticForm: FormGroup; @@ -67,7 +70,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi }) }, useDashboardTimewindow: false, - legendConfig : { + legendConfig: { position: LegendPosition.bottom } as LegendConfig }; @@ -104,18 +107,30 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi this.init(); if (this.ctx.defaultSubscription.datasources.length) { - const gatewayId = this.ctx.defaultSubscription.datasources[0].entity.id; - this.attributeService.getEntityAttributes(gatewayId, AttributeScope.SHARED_SCOPE, ["general_configuration"]).subscribe((resp: AttributeData[]) => { - if (resp && resp.length) { - this.commands = resp[0].value.statistics.commands; - if (!this.statisticForm.get('statisticKey').value) { - this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway); - this.createChartsSubscription(this.ctx.defaultSubscription.datasources[0].entity, this.commands[0].attributeOnGateway); + const gateway = this.ctx.defaultSubscription.datasources[0].entity; + if (!this.general) { + this.attributeService.getEntityAttributes(gateway.id, AttributeScope.SHARED_SCOPE, ["general_configuration"]).subscribe((resp: AttributeData[]) => { + if (resp && resp.length) { + this.commands = resp[0].value.statistics.commands; + if (!this.statisticForm.get('statisticKey').value) { + 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) { @@ -135,7 +150,28 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi subscriptionInfo[0].timeseries = [{name: attr, label: attr}]; this.subscriptionInfo = subscriptionInfo; this.changeSubscription(subscriptionInfo); + } + private createGeneralChartsSubscription(gateway: BaseData, 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 = () => { @@ -181,6 +217,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi if (exceptionData.message) { errorText += ': ' + exceptionData.message; } + console.error(errorText); } private onDataUpdated() {