Renamed prefixes in angular.json

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

@@ -0,0 +1,39 @@
+<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"><div [style.background-color]="getHex(entry.color)"></div></td>
+    <td class="legend-items-text">{{entry.value | number:'1.0-2'}} {{legendunit}}</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>
+    </td>-->
+  </tr>
+  <tr>
+    <td colspan="4"></td>
+  </tr>
+  <!--<tr>
+    <td>
+      <i class="fas fa-chart-bar" (click)="onClickHistoGram()"></i>
+    </td>
+    <td colspan="3"></td>
+  </tr>-->
+</table>
+
+
+
+
+

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

@@ -0,0 +1,58 @@
+
+.container {
+  max-width: 40em;
+  border-spacing: 0.5em;
+  font-family: inherit;
+}
+
+.title {
+  padding: 7px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 28px;
+}
+
+.title > h4 {
+  margin-bottom: 0;
+}
+
+.legend-items {
+  width: 1.5em;
+  height: 1.5em;
+  padding: 0.1em;
+  border-style: none;
+  border-width: 0.05em;
+}
+
+.legend-items div {
+  width:100%;
+  height:100%;
+}
+
+.legend-items-text {
+  max-width: 20em;
+  padding-left: 0.5em;
+  text-align: left;
+}
+
+.histogram-items {
+  width: 5em;
+  padding-left: 1em;
+}
+
+  .histogram-items > div {
+    height: 1em;
+    border-style: solid;
+    border-width: 0.05em;
+    vertical-align: middle;
+  }
+
+.histogram-items-text {
+  max-width: 20em;
+  font-size: 14pt;
+  padding-left: 1em;
+  text-align: left;
+}
+
+
+

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

@@ -0,0 +1,66 @@
+import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
+import { IColorMap, IColor, IColorEntry,ILayer } from '../../models';
+
+
+@Component({
+  selector: 'fm-map-layer-legend',
+  templateUrl: './legend.component.html',
+  styleUrls: ['./legend.component.scss']
+})
+export class LegendComponent implements OnInit,AfterViewInit {
+
+  constructor()  {
+
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+  }
+
+  @Input()
+  layer: ILayer;
+
+  @Input()
+  legend: string;
+
+  @Input()
+  histogram: string;
+
+  @Input()
+  showTitle: boolean = true;
+
+  @Input()
+  histogramenabled: boolean;
+
+  @Input()
+  legendunit: string;
+
+  @Input()
+  histogramunit: string;
+
+
+  onClickHistoGram(): void {
+    this.histogramenabled = !this.histogramenabled;
+  }
+
+  public getHex(color: IColor): string {
+    return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
+  }
+
+  public 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) + "%";
+
+    return part;
+  }
+
+}
+
+