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

<table class="container" *ngIf="layer">
  <tr>
    <td colspan="2">
      <div class="title">
        <h4 *ngIf="showTitle">{{layer.name}}</h4>
        <b *ngIf="layer.unit">({{layer.unit}})</b>
      </div>
    </td>
    <td colspan="2">
      <div class="title" *ngIf="histogramenabled">
        <h4>{{histogram}}</h4>
        <b *ngIf="histogramunit">({{histogramunit}})</b>
      </div>
    </td>
  </tr>
  <tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
    <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">
      <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>
  </tr>
  <tr>
    <td colspan="4"></td>
  </tr>
  <!--<tr *ngIf="layer.renderer.colorMap.entries.length > 0">
    <td>
      <i title="Show histogram" class="fa fa-bar-chart fa-rotate-90" (click)="onClickHistoGram()"></i>
    </td>
    <td colspan="3"></td>
  </tr>-->
</table>