create chart item state to toggle filter selection

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

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="space-between start" class="item">
+<div fxLayout="row" fxLayoutAlign="space-between start" [ngClass]="(_selected)?'item selected':'item'">
     <div><a href="#">{{state}}</a>: &nbsp;</div>
     <div>{{count}}</div>
 </div>

src/app/charts/chart-item/chart-item.component.scss

@@ -1,3 +1,13 @@
 .item {
     cursor: pointer;
+    padding: 3px;
+    border-radius: 4px;
+}
+
+.selected {
+    background-color: #DDDDDD;
+}
+.selected a {
+    color: #000000;
+    text-decoration: none;
 }

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

@@ -8,6 +8,12 @@ import { Component, Input } from '@angular/core';
 export class ChartItemComponent {
   @Input() state: string;
   @Input() count: number;
+  @Input('selected')
+  set selected(s: boolean) {
+    this._selected = s;
+  }
+
+  _selected: boolean = true;
 
   constructor() { }
 }

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

@@ -5,8 +5,8 @@
             <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 *ngFor="let state of states" (click)="onItemSelect(state)" [state]="state.label"
+                    [count]="state.count" [selected]="state.selected">
                 </app-chart-item>
             </div>
         </div>

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

@@ -9,7 +9,12 @@ import { StType } from '../../type';
 import { FilterService } from 'src/app/services/filter.service';
 
 
-
+export interface ChartItemState {
+  label: string,
+  count: number,
+  color: string,
+  selected: boolean,
+}
 @Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
@@ -21,10 +26,11 @@ export class ChartComponent implements OnInit {
   @Input() type: StType;
   title: string;
   chartID: string;
-  states: { label: string, count: number, color: string }[] = [];
+  states: ChartItemState[] = [];
   elevation: string = cardElevation;
-  service: any;
-  namespace: any;
+
+  private service: any;
+  private activeChartState: ChartItemState;
 
   constructor(
     private folderService: FolderService,
@@ -32,9 +38,30 @@ export class ChartComponent implements OnInit {
     private filterService: FilterService,
   ) { }
 
-  onItemSelect(state: string) {
+  onItemSelect(s: ChartItemState) {
     // Send chart item state to filter
-    this.filterService.changeFilter({ type: this.type, text: state });
+    this.filterService.changeFilter({ type: this.type, text: s.label });
+
+    // Deselect all other items
+    this.states.forEach(s => {
+      s.selected = false;
+    });
+
+    // Select item only
+    if (s !== this.activeChartState) {
+      s.selected = true;
+      this.activeChartState = s;
+    } else {
+      this.activeChartState = null;
+      this.filterService.changeFilter({ type: this.type, text: "" })
+      console.log("change filter", this.type)
+    }
+
+    /*
+    const index = this.states.indexOf(s);
+    if (index >= 0) {
+    }
+    */
   }
 
   ngOnInit(): void {
@@ -83,7 +110,7 @@ export class ChartComponent implements OnInit {
         });
 
         if (!found) {
-          this.states.push({ label: state, count: 1, color: color });
+          this.states.push({ label: state, count: 1, color: color, selected: false });
         }
 
         this.donutChart.updateData(this.states);

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

@@ -2,7 +2,7 @@ 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';
+import { ChartItemState } from '../chart/chart.component';
 
 @Component({
   selector: 'app-donut-chart',
@@ -12,7 +12,7 @@ import { StType } from 'src/app/type';
 export class DonutChartComponent {
   @Input() elementID: string;
   @Input() title: number;
-  @Output() stateEvent = new EventEmitter<string>();;
+  @Output() stateEvent = new EventEmitter<ChartItemState>();;
 
   _count: number;
   _countClass = "count-total";
@@ -26,13 +26,15 @@ export class DonutChartComponent {
   private canvas: any;
   private ctx: any;
   private chart: Chart;
+  private states: ChartItemState[];
 
   constructor(private filterService: FilterService) { }
 
-  updateData(data: { label: string, count: number, color: string }[]): void {
+  updateData(states: ChartItemState[]): void {
+    this.states = states;
     // Using object destructuring
-    for (let i = 0; i < data.length; i++) {
-      let s = data[i];
+    for (let i = 0; i < states.length; i++) {
+      let s = states[i];
       this.chart.data.labels[i] = s.label;
       this.chart.data.datasets[0].data[i] = s.count;
       this.chart.data.datasets[0].backgroundColor[i] = s.color;
@@ -67,9 +69,7 @@ export class DonutChartComponent {
           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);
+            this.stateEvent.emit(this.states[index]);
           }
         },
         legend: {

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

@@ -54,9 +54,6 @@ export class DeviceListComponent implements AfterViewInit, OnInit, OnDestroy {
     this.table.dataSource = this.dataSource;
 
     const changeText = (text: string) => {
-      if (!text)
-        return;
-
       this.dataSource.filter = text.trim().toLowerCase();
       this.input.value = text;
       this.cdr.detectChanges();

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

@@ -54,9 +54,6 @@ export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
     this.table.dataSource = this.dataSource;
 
     const changeText = (text: string) => {
-      if (!text)
-        return;
-
       this.dataSource.filter = text.trim().toLowerCase();
       this.input.value = text;
       this.cdr.detectChanges();