label chart collapsable (#138)

ludeknovy · Apr 16, 2021 · e1f690a · e1f690a
1 parent 24651ea
commit e1f690a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/src/app/item-detail/label-chart/label-chart.component.css b/src/app/item-detail/label-chart/label-chart.component.css
@@ -21,3 +21,10 @@
 .compare-card {
   margin-top: 20px;;
 }
+
+.jtl-ico-btn-light{
+  color: #4b7cf3;
+}
+.jtl-ico-btn-light:hover{
+  color: grey;
+}
diff --git a/src/app/item-detail/label-chart/label-chart.component.html b/src/app/item-detail/label-chart/label-chart.component.html
@@ -3,7 +3,12 @@ <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>
+      <button class="jtl-no-glow add-item jtl-btn-light btn btn-sm"
+        (click)="toggleSeriesVisibility($event)">{{seriesVisibilityToggleText}}</button>
+
+
+      <button class="jtl-no-glow btn btn-sm jtl-ico-btn-light" (click)="collapseChart($event)"><i class="fa"
+          [ngClass]="{'fa-compress-alt': chartShouldExpand, 'fa-expand-alt': !chartShouldExpand}"> </i></button>
 
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
         aria-label="">
@@ -28,9 +33,9 @@ <h6 class="card-header bg-transparent">
   <div class="card-body">
     <div class="chart">
       <highcharts-chart [Highcharts]="Highcharts" [options]="labelChartOptions" [(update)]="updateLabelChartFlag"
-        style="width: 100%; height: 350px; display: block;"></highcharts-chart>
+        class="highchart-chart" [callbackFunction]="getInstance.bind(this)"
+        style="width: 100%; height: 100%; display: block;"></highcharts-chart>
     </div>
   </div>
 
 </div>
-
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,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import * as Highcharts from 'highcharts';
 import { commonGraphSettings, threadLineSettings } from 'src/app/graphs/item-detail';
 
@@ -11,7 +11,6 @@ export class LabelChartComponent implements OnInit {
 
   @Input() labels: Map<string, object>;
   Highcharts: typeof Highcharts = Highcharts;
-  HighchartsCompare: typeof Highcharts = Highcharts;
   chartConstructor = 'chart';
   labelChartMetric = 'Throughput';
   labelCompareChartMetric;
@@ -20,6 +19,8 @@ export class LabelChartComponent implements OnInit {
   chartKeys;
   seriesVisibilityToggle = true;
   seriesVisibilityToggleText = 'Hide all';
+  chartShouldExpand = false;
+  chart;
 
   constructor() { }
 
@@ -40,12 +41,20 @@ export class LabelChartComponent implements OnInit {
     this.updateLabelChartFlag = true;
   }
 
-  toggleSeriesVisibility(event) {
+  toggleSeriesVisibility() {
     this.labelChartOptions.series.map(_ => _.visible = !this.seriesVisibilityToggle);
     this.seriesVisibilityToggleText = this.seriesVisibilityToggle ? 'Show all' : 'Hide all';
     this.seriesVisibilityToggle = !this.seriesVisibilityToggle;
     this.updateLabelChartFlag = true;
+  }
 
+  collapseChart() {
+    this.chartShouldExpand = !this.chartShouldExpand;
+    this.chart.setSize(undefined, this.chartShouldExpand ? 650 : 350);
   }
 
+
+  getInstance(chart): void {
+    this.chart = chart;
+ }
 }
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,7 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+  <link href="//use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>