Make histogram info block collapsable

projects/common-map/src/fm-map/components/legend/legend.component.html

@@ -24,13 +24,18 @@
       </div>     
     </td>
   </tr>  
-  <tr>
+  <tr *ngIf="showHistogram()">
-    <td colspan="4" *ngIf="showConfidenceInterval()"> </td>
+    <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 *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>
 
 

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;
+}
 
 

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;