From cc6229002c4746d91c208db4d0beed9138d71257 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Wed, 27 May 2020 10:57:25 +0200
Subject: [PATCH] Make histogram info block collapsable

---
 .../components/legend/legend.component.html   | 19 ++++++++++++-------
 .../components/legend/legend.component.scss   |  3 +++
 .../components/legend/legend.component.ts     |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.html b/projects/common-map/src/fm-map/components/legend/legend.component.html
index 4b0c9b1..e66953f 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.html
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.html
@@ -23,14 +23,19 @@
         <span class="bar-label">{{getLabel(layer.renderer,i)}}</span>
       </div>     
     </td>
+  </tr>  
+  <tr *ngIf="showHistogram()">
+    <td colspan="4" class="pb-2 pt-2">
+      <a i18n-title title="more info"><i class="fa fa-info-circle text-primary" (click)="hideHistogramDetails = !hideHistogramDetails"></i></a>
+      <div class="info pt-2"  [ngbCollapse]="hideHistogramDetails">
+        <div><span i18n>Average: </span>{{layer.renderer.band.histogram.mean| number:'1.0-3'}}</div>
+        <div><span i18n>Standard deviation: </span>{{layer.renderer.band.histogram.stddev| number:'1.0-3'}}</div>
+        <div><span i18n>Min: </span>{{layer.renderer.band.histogram.min| number:'1.0-3'}}</div>
+        <div><span i18n>Max: </span>{{layer.renderer.band.histogram.max| number:'1.0-3'}}</div>
+        <div *ngIf="showConfidenceInterval()"><span i18n>Confidence interval:</span> {{layer.renderer.band.histogram.confidence * 100| number:'1.0-0'}}%</div>  
+      </div>  
+    </td>
   </tr>
-  <tr>
-    <td colspan="4" *ngIf="showConfidenceInterval()"> </td>
-  </tr> 
-  <tr *ngIf="showConfidenceInterval()">
-    <td colspan="4" class="pb-2 pt-2"><span i18n>Confidence interval:</span> {{layer.renderer.band.histogram.confidence * 100| number:'1.0-0'}}% </td>
-  </tr> 
-
 </table>
 
 
diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.scss b/projects/common-map/src/fm-map/components/legend/legend.component.scss
index f9430f4..d46f67e 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.scss
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.scss
@@ -63,5 +63,8 @@ span.color {
   font-size:0.7em;
 }
 
+.info {
+  line-height: 1.3em;
+}
 
 
diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.ts b/projects/common-map/src/fm-map/components/legend/legend.component.ts
index a323ac2..2244a27 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.ts
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.ts
@@ -40,6 +40,7 @@ export class LegendComponent implements OnInit,AfterViewInit {
   @Input()
   histogramunit: string;
 
+  public hideHistogramDetails:boolean = true;
 
   onClickHistoGram(): void {
     this.histogramenabled = !this.histogramenabled;