ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-17 01:25:37 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Some rough work on date controls for chart

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-01 21:23:12 -04:00
parent 37263488f0
commit 29eceeb04e
5 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Display/src/app/components/weather/charts/weather-charts.component.html
View File

@@ -2,27 +2,28 @@
<span class="spinner"></span>
</div> -->
<div class="chart-content">
<!-- <header class="chart-header">
<clr-dropdown class="clr-dropdown">
<button class="btn btn-outline-primary chart-button-spacer" clrDropdownTrigger>
{{ timeSpanItems[selectedTimeSpan] }}
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
<div *ngFor="let item of timeSpanItems | keyvalue" clrDropdownItem [class.active]="+item.key === selectedTimeSpan" (click)="selectedTimeSpan = +item.key">
{{ item.value }}
</div>
</clr-dropdown-menu>
</clr-dropdown>
<button class="btn btn-outline-primary" [hidden]="selectedTimeSpan !== timeSpans.Day" (click)="handleDateArrowClick(-1)">
<clr-icon shape="caret left"></clr-icon>
<header class="chart-header">
<mat-form-field>
<mat-select [(value)]="selectedTimeSpan">
<mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
</mat-select>
</mat-form-field>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)">
<mat-icon>arrow_back</mat-icon>
</button>
<button class="btn btn-outline-primary chart-button-spacer" [hidden]="selectedTimeSpan !== timeSpans.Day || isSelectedDateToday()" (click)="handleDateArrowClick(1)">
<clr-icon shape="caret right"></clr-icon>
<mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
<input matInput [matDatepicker]="picker" [(formControl)]="selectedDate">
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)">
<mat-icon>arrow_forward</mat-icon>
</button>
<button class="btn btn-outline-primary" [hidden]="selectedTimeSpan !== timeSpans.Day || isSelectedDateToday()" (click)="resetToToday()">
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()">
Today
</button>
</header> -->
</header>
<div id="chart" [chart]="chart"></div>
</div>

15
Display/src/app/components/weather/charts/weather-charts.component.ts
View File

@@ -8,6 +8,7 @@ import * as moment from 'moment';
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
import { FormControl } from '@angular/forms';
HC_exporting(Highcharts);
enum TimeSpan {
@@ -29,7 +30,7 @@ export class WeatherChartsComponent implements OnInit {
public timeSpanItems: { [value: number]: string } = {};
public selectedTimeSpan: TimeSpan = TimeSpan.Last24Hours;
public selectedDate: Date = moment().startOf('day').toDate();
public selectedDate: FormControl = new FormControl({ value: moment().startOf('day').toDate(), disabled: true });
public timeSpans: typeof TimeSpan = TimeSpan;
constructor(private route: ActivatedRoute, private httpClient: HttpClient) { }
@@ -46,25 +47,25 @@ export class WeatherChartsComponent implements OnInit {
}
public handleDateArrowClick(value: number) {
this.selectedDate = moment(this.selectedDate).add(value, 'day').toDate();
this.selectedDate.setValue(moment(this.selectedDate.value).add(value, 'day').toDate());
this.loadChart();
}
public isSelectedDateToday(): boolean {
const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
const isToday = moment(this.selectedDate.value).startOf('day').isSame(moment().startOf('day'));
return isToday;
}
public resetToToday() {
this.selectedDate = moment().startOf('day').toDate();
this.selectedDate.setValue(moment().startOf('day').toDate());
this.loadChart();
}
public getSelectedDateDisplayString(): string {
return moment(this.selectedDate).format('LL');
return moment(this.selectedDate.value).format('LL');
}
private loadChart() {
@@ -80,8 +81,8 @@ export class WeatherChartsComponent implements OnInit {
}
case TimeSpan.Day: {
start = moment(this.selectedDate).startOf('d').toDate();
end = moment(this.selectedDate).endOf('d').toDate();
start = moment(this.selectedDate.value).startOf('d').toDate();
end = moment(this.selectedDate.value).endOf('d').toDate();
break;
}