Filter lists when donut chart items are clicked

src/app/charts/chart/chart.component.html

@@ -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>

src/app/charts/donut-chart/donut-chart.component.ts

@@ -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
         },

src/app/lists/status-list/status-list.component.ts

@@ -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) {