Skip to content

Commit

Permalink
refactored chart export form & created separate open window widget; f…
Browse files Browse the repository at this point in the history 
…ix #SNRGY-3166, #SNRGY-3130
  • Loading branch information
@hahahannes
hahahannes committed Mar 8, 2024
1 parent dbe8629 commit 81e68b8
Show file tree
Hide file tree
Showing 30 changed files with 1,903 additions and 633 deletions.
2 changes: 2 additions & 0 deletions src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ export class DashboardNewWidgetDialogComponent {
{ value: DashboardTypesEnum.DataTable, viewValue: 'Data Table', disabled: false, tooltip: '' },
{ value: DashboardTypesEnum.AcControl, viewValue: 'Air Condition Control', disabled: false, tooltip: '', requirementsService: undefined },
{ value: DashboardTypesEnum.AnomalyDetection, viewValue: 'Anomaly Detection', disabled: false, tooltip: '' },
{ value: DashboardTypesEnum.OpenWindow, viewValue: 'Open Window Detection', disabled: false, tooltip: '' },

];
switchCategories: SwitchCategories[] = [
{
Expand Down
4 changes: 3 additions & 1 deletion src/app/modules/dashboard/shared/dashboard-types.enum.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,7 @@ export enum DashboardTypesEnum {
DeviceStatus = 'device_status',
DataTable = 'data_table',
AcControl = 'ac_control',
AnomalyDetection = 'anomaly_detection'
AnomalyDetection = 'anomaly_detection',
OpenWindow = 'open_window'

}
2 changes: 2 additions & 0 deletions src/app/modules/dashboard/shared/dashboard-widget.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { ProcessSchedulerPropertiesModel } from '../../../widgets/process-schedu
import { DataTableWidgetPropertiesModel } from '../../../widgets/data-table/shared/data-table.model';
import { RangeSliderPropertiesModel } from '../../../widgets/range-slider/shared/range-slider-properties.model';
import {AcControlPropertiesModel} from '../../../widgets/ac-control/shared/ac-control.model';
import { OpenWindowPropertiesModel } from 'src/app/widgets/charts/open-window/model/model';

export interface WidgetModel {
id: string;
Expand All @@ -51,6 +52,7 @@ export interface WidgetPropertiesModels
AcControlPropertiesModel,
RangeSliderPropertiesModel,
ChartsExportPropertiesModel,
OpenWindowPropertiesModel,
DeviceDowntimeGatewayPropertiesModel,
EnergyPredictionPropertiesModel,
AirQualityPropertiesModel,
Expand Down
4 changes: 2 additions & 2 deletions src/app/widgets/anomaly/anomaly.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ <h2 *ngIf="anomaly.subType === 'low'">Input is too low!</h2>
</div>
<div class="text-container">
<p>Occured at {{anomaly.timestamp | date:'medium'}}</p>
<p>Value: {{anomaly.value}}</p>
<p>Value: {{anomaly.value | number:'1.0-2'}}</p>
</div>
</div>

Expand Down Expand Up @@ -119,4 +119,4 @@ <h2>Operator is not ready</h2>
[userHasUpdatePropertiesAuthorization]="userHasUpdatePropertiesAuthorization" [dashboardId]="dashboardId"
[widget]="widget" (editEvent)="edit()"></senergy-widget-footer>
</div>
</mat-card>
</mat-card>
1 change: 0 additions & 1 deletion src/app/widgets/anomaly/anomaly.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export class AnomalyComponent implements OnInit {
return of();
})).subscribe({
next: (anomaly) => {
console.log(anomaly)
if(anomaly != null) {
this.anomaly = anomaly;
}
Expand Down
16 changes: 11 additions & 5 deletions src/app/widgets/charts/export/charts-export.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,17 @@
' interval or use an aggregation function!' : ''"></senergy-widget-header>
<mat-card-content>

<div *ngIf="widget.properties.chartType === 'Timeline' && ready" id="timeline-container">
<apx-chart #apexChart *ngIf="apexChartOptions.series!.length !== 0" [tooltip]="apexChartOptions.tooltip!" [legend]="apexChartOptions.legend!" [colors]="apexChartOptions.colors!" [series]="apexChartOptions.series!" [chart]="apexChartOptions.chart!" [plotOptions]="apexChartOptions.plotOptions!" [xaxis]="apexChartOptions.xaxis!" [yaxis]="apexChartOptions.yaxis!"></apx-chart>
<senergy-no-data
[showIf]="configureWidget === false && (apexChartOptions.series?.length || 0) === 0"></senergy-no-data>
</div>
<timeline-chart
*ngIf="widget.properties.chartType === 'Timeline' && ready"
[data]="timelineChartData"
[hAxisLabel]="widget?.properties?.hAxisLabel || ''"
[vAxisLabel]="widget?.properties?.vAxisLabel || ''"
[enableToolbar]="false"
[vAxes]="widget?.properties?.vAxes || []"
[width]="timelineWidth"
[height]="timelineHeight">
</timeline-chart>

<div id="{{widget.id}}" fxFill fxLayout="row" fxLayoutAlign="center center">
<senergy-widget-spinner [show]="!ready"></senergy-widget-spinner>
<div *ngIf="ready">
Expand Down
99 changes: 16 additions & 83 deletions src/app/widgets/charts/export/charts-export.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ import { ApexChartOptions } from './shared/charts-export-properties.model';
})
export class ChartsExportComponent implements OnInit, OnDestroy {
chartExportData = {} as ChartsModel;
timelineChartData: any;
timelineWidth = 0;
timelineHeight = 0;
ready = false;
refreshing = true;
destroy = new Subscription();
Expand All @@ -47,65 +50,6 @@ export class ChartsExportComponent implements OnInit, OnDestroy {
private resizeTimeout = 0;
private timeRgx = /(\d+)(ms|s|months|m|h|d|w|y)/;

apexChartOptions: Partial<ApexChartOptions> = {
series: [],
chart: {
width: "auto",
height: "auto",
animations: {
enabled: false
},
type: 'rangeBar',
toolbar: {
show: false
},
redrawOnWindowResize: true
},
plotOptions: {
bar: {
horizontal: true,
rangeBarGroupRows: true
}
},
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false,
},
title: {
text: ''
}
},
yaxis: {
title: {
text: ''
}
},
colors: [],
legend: {
show: true
},
tooltip: {
x: {
format: 'dd.MM HH:mm:ss',
}
}
};
/*
options: any = {
series: [44, 55, 13, 43, 22],
chart: {
width: "100%",
height: "auto",
type: 'pie',
},
legend: {
floating: true,
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
};*/

@Input() dashboardId = '';
@Input() widget: WidgetModel = {} as WidgetModel;
@Input() zoom = false;
Expand Down Expand Up @@ -192,35 +136,23 @@ export class ChartsExportComponent implements OnInit, OnDestroy {
}
}

if(this.widget.properties.chartType === "Timeline") {}
this.timelineHeight = element.height;
this.timelineWidth = element.width;
}


private resizeApex() {
const element = this.elementSizeService.getHeightAndWidthByElementId(this.widget.id, 5, 10);
if(this.apexChartOptions.chart?.width) {
this.apexChartOptions.chart.width = element.width;
this.apexChartOptions.chart.height = element.height;
}
this.timelineWidth = element.width;
this.timelineHeight = element.height;
}

getTimelineData() {
this.resizeApex();

private renderTimelineChart(lastOverride?: string) {
this.chartsExportService.getTimelineChartData(this.widget, this.from?.toISOString(), this.to?.toISOString(), this.groupTime || undefined, lastOverride).subscribe({
next: (resp) => {
this.apexChartOptions.series = resp?.data;
this.apexChartOptions.colors = resp?.colors;
if(this.zoom && this.apexChartOptions.chart?.toolbar !== undefined) {
this.apexChartOptions.chart.toolbar.show = true;
}
if(this.apexChartOptions.xaxis?.title !== undefined) {
this.apexChartOptions.xaxis.title.text = this.widget.properties.hAxisLabel;
}
if(this.apexChartOptions.yaxis?.title !== undefined) {
this.apexChartOptions.yaxis.title.text = this.widget.properties.vAxisLabel;
}

this.resizeApex();

this.chartsExportService.getData(this.widget.properties, this.from?.toISOString(), this.to?.toISOString(), this.groupTime || undefined, this.hAxisFormat || undefined).subscribe({
next: (data) => {
this.timelineChartData = data;
this.ready = true;
this.refreshing = false;
},
Expand All @@ -245,9 +177,9 @@ export class ChartsExportComponent implements OnInit, OnDestroy {
}

if(this.widget.properties.chartType === 'Timeline') {
this.renderTimelineChart(lastOverride);
this.getTimelineData();
return;
};
}

this.chartsExportService.getChartData(this.widget, this.from?.toISOString(), this.to?.toISOString(), this.groupTime || undefined, this.hAxisFormat || undefined, lastOverride).subscribe((resp: ChartsModel | ErrorModel) => {
if (this.errorHandlerService.checkIfErrorExists(resp)) {
Expand Down Expand Up @@ -290,6 +222,7 @@ export class ChartsExportComponent implements OnInit, OnDestroy {
this.ready = true;
this.refreshing = false;
}

}

onChartSelect($event: ChartSelectEvent) {
Expand Down
92 changes: 9 additions & 83 deletions src/app/widgets/charts/export/dialog/charts-export-edit-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,88 +55,14 @@ <h2 mat-dialog-title>Edit Chart Export</h2>
</tr>
</table>

<mat-form-field color="accent">
<mat-label>Choose Exports/Devices/Device Groups</mat-label>
<senergy-select-search [required]="true" [multiple]="true" [compareWith]="compare"
formControlName="exports" (selectionChange)="selectionChange($event.value)"
[options]="exportDeviceList" useOptionViewProperty="name">
</senergy-select-search>
<mat-error *ngIf="exports.invalid">
Please make a selection!
</mat-error>
</mat-form-field>
<data-source-selector
[dataSourceConfig]="dataSourceConfig"
[enableAggretationConfig]="true"
(updatedDataSourceConfig)="dataSourceUpdated($event)"
[enableFieldSelection]="true"
></data-source-selector>

<mat-form-field color="accent">
<mat-label>Choose Fields</mat-label>
<senergy-select-search [required]="true" [multiple]="true" formControlName="vAxes"
[options]="vAxesOptions" useOptionViewProperty="valueName">
</senergy-select-search>
<mat-error *ngIf="(formGroupController.get('properties.vAxes')?.value || []).length === 0">
Please make a selection!
</mat-error>
</mat-form-field>

<table>
<tr>
<td fxFlex="33%">
<mat-form-field color="accent" class="full-width">
<mat-select formControlName="timeRangeType" placeholder="Time Range Type" required>
<mat-option *ngFor="let timeRange of timeRangeTypes" [value]="timeRange">
{{timeRange}}
</mat-option>
</mat-select>
<mat-error *ngIf="timeRangeType.errors">
Please choose a time Range Type!
</mat-error>
</mat-form-field>
</td>
<td fxFlex="66%" *ngIf="timeRangeType.value === timeRangeEnum.Relative" formGroupName="time">
<mat-form-field color="accent" class="full-width">
<mat-label>Last</mat-label>
<input type="text" matInput placeholder="e.g. 15m, 1h" formControlName="last">
</mat-form-field>
</td>
<td fxFlex="66%" *ngIf="timeRangeType.value === timeRangeEnum.RelativeAhead" formGroupName="time">
<mat-form-field color="accent" class="full-width">
<mat-label>Ahead</mat-label>
<input type="text" matInput placeholder="e.g. 15m, 1h" formControlName="ahead">
</mat-form-field>
</td>
<td fxFlex="33%" *ngIf="timeRangeType.value === timeRangeEnum.Absolute" formGroupName="time">
<mat-form-field color="accent" class="full-width">
<mat-label>Start</mat-label>
<input type="datetime-local" matInput placeholder="Start" formControlName="start">
</mat-form-field>
</td>
<td fxFlex="33%" *ngIf="timeRangeType.value === timeRangeEnum.Absolute" formGroupName="time">
<mat-form-field color="accent" class="full-width">
<mat-label>End</mat-label>
<input type="datetime-local" matInput placeholder="Start" formControlName="end">
</mat-form-field>
</td>
</tr>
</table>

<table formGroupName="group">
<tr>
<td>
<mat-form-field color="accent" class="full-width">
<mat-select formControlName="type" placeholder="Group Type">
<mat-option [value]="">none</mat-option>
<mat-option *ngFor="let groupType of groupTypes()" [value]="groupType">
{{groupType}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td>
<mat-form-field color="accent" class="full-width">
<mat-label>Time interval</mat-label>
<input type="text" matInput placeholder="e.g. 15m, 1h" formControlName="time">
</mat-form-field>
</td>
</tr>
</table>
<h2>Configure Chart</h2>

<table>
<tr>
Expand Down Expand Up @@ -178,10 +104,10 @@ <h2 mat-dialog-title>Edit Chart Export</h2>

</div>

<table *ngIf="ready && userHasUpdatePropertiesAuthorization" mat-table [dataSource]="dataSource">
<table *ngIf="ready && userHasUpdatePropertiesAuthorization && dataSource.data.length > 0" mat-table [dataSource]="dataSource">

<ng-container matColumnDef="exportName">
<th mat-header-cell *matHeaderCellDef>Export</th>
<th mat-header-cell *matHeaderCellDef>Source</th>
<td mat-cell *matCellDef="let element" matTooltip="{{element.exportName}}" matTooltipPosition="right">
{{element.exportName}}
</td>
Expand Down
Loading

0 comments on commit 81e68b8

Please sign in to comment.