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

Filter lists when donut chart items are clicked

Browse Source
This commit is contained in:
Jesse Lucas 2020-04-02 14:00:09 -04:00
parent a9b6801b22
commit 915faabe25
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/charts/chart/chart.component.html
View File

@ -2,8 +2,9 @@
<div class="tui-card-title">{{title | uppercase}}</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="start end" fxFlex="70">
<app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title" (stateEvent)="onItemSelect($event)">
</app-donut-chart>
<div class=" items" fxLayout="column" fxLayoutAlign="start end" fxFlex="70">
<app-chart-item *ngFor="let state of states" (click)="onItemSelect(state.label)" [state]="state.label"
[count]="state.count">
</app-chart-item>

17
src/app/charts/donut-chart/donut-chart.component.ts
View File

@ -1,6 +1,8 @@
import { Component, Input } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Chart } from 'chart.js'
import { tooltip } from '../tooltip'
import { FilterService } from 'src/app/services/filter.service';
import { StType } from 'src/app/type';
@Component({
selector: 'app-donut-chart',
@ -10,6 +12,8 @@ import { tooltip } from '../tooltip'
export class DonutChartComponent {
@Input() elementID: string;
@Input() title: number;
@Output() stateEvent = new EventEmitter<string>();;
_count: number;
_countClass = "count-total";
set count(n: number) {
@ -23,7 +27,7 @@ export class DonutChartComponent {
private ctx: any;
private chart: Chart;
constructor() { }
constructor(private filterService: FilterService) { }
updateData(data: { label: string, count: number, color: string }[]): void {
// Using object destructuring
@ -59,6 +63,15 @@ export class DonutChartComponent {
options: {
cutoutPercentage: 77,
responsive: true,
onClick: (e) => {
var activePoints = this.chart.getElementsAtEvent(e);
if (activePoints.length > 0) {
const index = activePoints[0]["_index"];
const label = this.chart.data.labels[index];
this.stateEvent.emit(label);
}
},
legend: {
display: false
},

9
src/app/lists/status-list/status-list.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Component, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { StType } from '../../type';
import { cardElevation } from '../../style';
import { FilterService } from 'src/app/services/filter.service';
@ -17,7 +17,10 @@ export class StatusListComponent {
elevation: string = cardElevation;
title: string = 'Status';
constructor(private filterService: FilterService) { }
constructor(
private filterService: FilterService,
private cdr: ChangeDetectorRef,
) { }
ngAfterViewInit() {
// Listen for filter changes from other components
@ -34,6 +37,8 @@ export class StatusListComponent {
break;
}
});
this.cdr.detectChanges(); // manually detect changes
}
onToggle(t: StType) {