Merge latest changes

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

@@ -14,20 +14,22 @@
     </td>
   </tr>
   <tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
-    <td class="legend-items"><div [style.background-color]="getHex(entry.color)"></div></td>
+    <td class="legend-items"><span [style.background-color]="getHex(entry.color)" class="color"></span></td>
     <td class="legend-items-text"><span *ngIf="!entry.label">{{entry.value | number:'1.0-2'}} {{legendunit}}</span><span *ngIf="entry.label">{{entry.label}}</span></td>    
-    <!--<td class="histogram-items-text"><span *ngIf="histogramenabled">{{entry.value}} {{histogramunit}}</span></td>
     <td class="histogram-items">
-      <div *ngIf="histogramenabled" [style.background-color]="getHex(selectedColorMap.noValue)" [style.width]="getPart(selectedColorMap, entry)">
+      <div *ngIf="showHistogram()">
+        <span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
+        </span>
+        <span class="bar-label">{{getLabel(layer.renderer,i)}}</span>
       </div>     
-    </td>-->
+    </td>
   </tr>
   <tr>
     <td colspan="4"></td>
   </tr>
-  <!--<tr>
+  <!--<tr *ngIf="layer.renderer.colorMap.entries.length > 0">
     <td>
-      <i class="fas fa-chart-bar" (click)="onClickHistoGram()"></i>
+      <i title="Show histogram" class="fa fa-bar-chart fa-rotate-90" (click)="onClickHistoGram()"></i>
     </td>
     <td colspan="3"></td>
   </tr>-->

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

@@ -16,9 +16,13 @@
   margin-bottom: 0;
 }
 
-.legend-items {
+span.color {
+  display:inline-block;
   width: 1.5em;
   height: 1.5em;
+}
+
+.legend-items {
   padding: 0.1em;
   border-style: none;
   border-width: 0.05em;
@@ -36,16 +40,10 @@
 }
 
 .histogram-items {
-  width: 5em;
+  width: 100%;
   padding-left: 1em;
 }
 
-  .histogram-items > div {
-    height: 1em;
-    border-style: solid;
-    border-width: 0.05em;
-    vertical-align: middle;
-  }
 
 .histogram-items-text {
   max-width: 20em;
@@ -54,5 +52,16 @@
   text-align: left;
 }
 
+.bar {
+  display:inline-block;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.bar-label {
+  margin-left:0.3em;
+  font-size:0.7em;
+}
+
 
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
-import { IColorMap, IColor, IColorEntry,ILayer } from '../../models/color.map';
+import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } from '../../models';
 
 
 @Component({
@@ -45,22 +45,37 @@ export class LegendComponent implements OnInit,AfterViewInit {
     this.histogramenabled = !this.histogramenabled;
   }
 
-  public getHex(color: IColor): string {
+
+
+
+  private getHex(color: IColor): string {
     return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
   }
 
-  public componentToHex(c: number): string {
+  private componentToHex(c: number): string {
     const hex = c.toString(16);
     return hex.length === 1 ? `0${hex}` : hex;
   }
 
-  private getPart(colorMap: IColorMap, colorEntry: IColorEntry): string {
-    let sumOfValue = colorMap.entries.reduce((sum, item) => sum + item.value, 0);
-    let part = ((colorEntry.value / sumOfValue) * 100) + "%";
+  private getPart(renderer: IRenderer, index: number): string {
+    let max = renderer.band.histogram.entries.reduce((max, entry) => entry.freqency > max ? entry.freqency : max, 0);
+    let scale = 75 / max;
+    let part = (renderer.band.histogram.entries[index].freqency * scale) + "%";
 
     return part;
   }
 
+  private getLabel(renderer: IRenderer, index: number): string {
+    let scale = 100 / renderer.band.histogram.entries.reduce((sum, entry) => sum + entry.freqency, 0);
+    let percent = renderer.band.histogram.entries[index].freqency * scale;
+    return percent < 0.1 ? "" : percent.toFixed(1) + " %";
+  }
+
+
+
+  showHistogram(): boolean {
+    return this.histogramenabled && this.layer.renderer.band.histogram.entries && this.layer.renderer.band.histogram.entries.length > 0 && this.layer.renderer.colorMap.colormapType == "minmax";
+  }
 }