octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-20 03:51:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor charts to use @ViewChild instead of @Input

Browse Source
This commit is contained in:
Jesse Lucas 2020-03-17 22:39:06 -04:00
parent 90ed7aa121
commit 09d498bb80
5 changed files with 43 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/chart/device-chart/device-chart.component.html
View File

@ -1,6 +1,6 @@
<mat-card class="{{elevation}}">
<mat-card-title>Devices</mat-card-title>
<mat-card-content>
<app-donut-chart [elementID]="chartID" [data]="data"></app-donut-chart>
<app-donut-chart [elementID]="chartID"></app-donut-chart>
</mat-card-content>
</mat-card>

14
src/app/chart/device-chart/device-chart.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { cardElevation } from '../../style';
import { SystemConfigService } from 'src/app/system-config.service';
import { DonutChartComponent } from '../donut-chart/donut-chart.component';
@Component({
selector: 'app-device-chart',
@ -8,16 +9,21 @@ import { SystemConfigService } from 'src/app/system-config.service';
styleUrls: ['./device-chart.component.scss']
})
export class DeviceChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
chartID: string = 'devicesChart';
elevation: string = cardElevation;
data: number[];
constructor(private systemConfigService: SystemConfigService) { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.systemConfigService.getDevices().subscribe(
data => {
this.data = [0, 230, 32, 40];
devices => {
this.donutChart.data([0, 230, 32, 40]);
}
);
}

15
src/app/chart/donut-chart/donut-chart.component.ts
View File

@ -9,13 +9,6 @@ import { SystemConfigService } from 'src/app/system-config.service';
})
export class DonutChartComponent {
@Input() elementID: string;
@Input() set data(val: number[]) {
if (this.chart) {
val.forEach((v) => {
this.addData(v)
});
}
};
private canvas: any;
private ctx: any;
@ -23,6 +16,14 @@ export class DonutChartComponent {
constructor() { }
data(val: number[]) {
if (this.chart) {
val.forEach((v) => {
this.addData(v)
});
}
}
addData(data: number): void {
// this.chart.data.labels.push(label);
this.chart.data.datasets.forEach((dataset) => {

2
src/app/chart/folder-chart/folder-chart.component.html
View File

@ -1,6 +1,6 @@
<mat-card class="{{elevation}}">
<mat-card-title>Folders</mat-card-title>
<mat-card-content>
<app-donut-chart [elementID]="chartID" [data]="data"></app-donut-chart>
<app-donut-chart [elementID]="chartID"></app-donut-chart>
</mat-card-content>
</mat-card>

39
src/app/chart/folder-chart/folder-chart.component.ts
View File

@ -1,7 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { SystemConfigService } from 'src/app/system-config.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Folder } from '../../folder'
import { cardElevation } from '../../style'
import { FolderService } from 'src/app/folder.service';
import { SystemConfigService } from 'src/app/system-config.service';
import { DbStatusService } from 'src/app/db-status.service';
import { flatMap } from 'rxjs/operators';
import { DonutChartComponent } from '../donut-chart/donut-chart.component';
@Component({
selector: 'app-folder-chart',
@ -9,26 +13,29 @@ import { cardElevation } from '../../style'
styleUrls: ['./folder-chart.component.scss']
})
export class FolderChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
chartID: string = 'foldersChart';
elevation: string = cardElevation;
data: number[];
constructor(private systemConfigService: SystemConfigService) { }
constructor(
private systemConfigService: SystemConfigService,
private folderService: FolderService,
private dbStatusService: DbStatusService
) { }
ngOnInit(): void {
// Find total number of folders
this.systemConfigService.getFolders().subscribe(
data => {
this.data = [0, 1, 32, 40];
}
ngAfterViewInit() {
// TODO: Find total number of folders
this.folderService.getAll().subscribe(
folder => {
// TODO: Clear existing data
this.donutChart.data([0, 30, 32, 40]);
console.log("folder?", folder)
}
);
// Sequentially look up each folder to get status
// dbStatusService
}
/*
ngAfterViewInit() {
}
*/
}