show all - hide all toggle (#137)

ludeknovy · Apr 13, 2021 · 24651ea · 24651ea
1 parent e708ea9
commit 24651ea
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/app/item-detail/label-chart/label-chart.component.html b/src/app/item-detail/label-chart/label-chart.component.html
@@ -1,8 +1,10 @@
 <div class="card" *ngIf="labelChartOptions">
   <h6 class="card-header bg-transparent">
     Label Chart - {{labelChartMetric}}
-
     <span *ngIf="!labelCompareChartOptions" class="float-right">
+
+      <button class="jtl-no-glow add-item jtl-btn-light btn btn-sm" (click)="toggleSeriesVisibility($event)">{{seriesVisibilityToggleText}}</button>
+
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
         aria-label="">
         <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>

diff --git a/src/app/item-detail/label-chart/label-chart.component.ts b/src/app/item-detail/label-chart/label-chart.component.ts
@@ -1,9 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import * as Highcharts from 'highcharts';
-import { bytesToMbps } from 'src/app/item-detail/calculations';
 import { commonGraphSettings, threadLineSettings } from 'src/app/graphs/item-detail';
-import { logScaleButton } from 'src/app/graphs/log-scale-button';
-import { ItemDataPlot } from 'src/app/items.service.model';
 
 @Component({
   selector: 'app-label-chart',
@@ -16,13 +13,13 @@ export class LabelChartComponent implements OnInit {
   Highcharts: typeof Highcharts = Highcharts;
   HighchartsCompare: typeof Highcharts = Highcharts;
   chartConstructor = 'chart';
-
-
   labelChartMetric = 'Throughput';
   labelCompareChartMetric;
   labelChartOptions = commonGraphSettings('hits/s');
   updateLabelChartFlag = false;
   chartKeys;
+  seriesVisibilityToggle = true;
+  seriesVisibilityToggleText = 'Hide all';
 
   constructor() { }
 
@@ -39,8 +36,16 @@ export class LabelChartComponent implements OnInit {
   changeChart(event) {
     const target = event.target.innerText;
     this.labelChartMetric = target;
-    this.labelChartOptions = this.labels.get(target);
+    this.labelChartOptions = JSON.parse(JSON.stringify(this.labels.get(target)));
+    this.updateLabelChartFlag = true;
+  }
+
+  toggleSeriesVisibility(event) {
+    this.labelChartOptions.series.map(_ => _.visible = !this.seriesVisibilityToggle);
+    this.seriesVisibilityToggleText = this.seriesVisibilityToggle ? 'Show all' : 'Hide all';
+    this.seriesVisibilityToggle = !this.seriesVisibilityToggle;
     this.updateLabelChartFlag = true;
+
   }
 
 }