FarmMaps/FarmMapsLib
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Angular v20

Browse Source
This commit is contained in:
Peter (extern)
2026-01-20 17:11:03 +01:00
parent 4bef16aa2b
commit 429ab24408
47 changed files with 6654 additions and 2864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,48 +1,68 @@
<table class="container" *ngIf="showLegend()">
<tr>
<td colspan="3">
<div class="title">
<h4 *ngIf="showTitle">{{layer.name}}</h4>
<b *ngIf="layer.unit">({{layer.unit}})</b>
</div>
</td>
<td>
<a i18n-title title="more info"><i class="fal fa-info-circle text-primary" (click)="hideHistogramDetails = !hideHistogramDetails"></i></a>
</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]="getAlphaHex(entry.color)" [style.border-color]="getHex(entry.color)"class="color"></span></td>
<td class="legend-items-text"><span *ngIf="!entry.label">{{getScaledValue(entry.value,layer.scale) | 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 *ngIf="getPercentage(layer.renderer,i) as percentage" class="bar-label">{{percentage | number:'1.0-2'}} %</span>
</div>
</td>
</tr>
<tr *ngIf="showHistogram()">
<td colspan="4" class="pb-1 pt-1">
<div class="info" [ngbCollapse]="hideHistogramDetails">
<ng-container *ngIf="bandContainsStatistics(); else histogram">
<fm-map-statistics-details [statistics]="layer.renderer.band.statistics" [scale]="layer.scale"></fm-map-statistics-details>
</ng-container>
<ng-template #histogram>
<fm-map-histogram-details [histogram]="layer.renderer.band.histogram" [scale]="layer.scale"></fm-map-histogram-details>
</ng-template>
</div>
</td>
</tr>
</table>
@if (showLegend()) {
<table class="container">
<tr>
<td colspan="3">
<div class="title">
@if (showTitle) {
<h4>{{layer.name}}</h4>
}
@if (layer.unit) {
<b>({{layer.unit}})</b>
}
</div>
</td>
<td>
<a i18n-title title="more info"><i class="fal fa-info-circle text-primary" (click)="hideHistogramDetails = !hideHistogramDetails"></i></a>
</td>
<td colspan="2">
@if (histogramenabled) {
<div class="title">
<h4>{{histogram}}</h4>
@if (histogramunit) {
<b>({{histogramunit}})</b>
}
</div>
}
</td>
</tr>
@for (entry of layer.renderer.colorMap.entries; track entry; let i = $index) {
<tr>
<td class="legend-items"><span [style.background-color]="getAlphaHex(entry.color)" [style.border-color]="getHex(entry.color)"class="color"></span></td>
<td class="legend-items-text">@if (!entry.label) {
<span>{{getScaledValue(entry.value,layer.scale) | number:'1.0-2'}} {{legendunit}}</span>
}@if (entry.label) {
<span>{{entry.label}}</span>
}</td>
<td class="histogram-items">
@if (showHistogram()) {
<div>
<span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
</span>
@if (getPercentage(layer.renderer,i); as percentage) {
<span class="bar-label">{{percentage | number:'1.0-2'}} %</span>
}
</div>
}
</td>
</tr>
}
@if (showHistogram()) {
<tr>
<td colspan="4" class="pb-1 pt-1">
<div class="info" [ngbCollapse]="hideHistogramDetails">
@if (bandContainsStatistics()) {
<fm-map-statistics-details [statistics]="layer.renderer.band.statistics" [scale]="layer.scale"></fm-map-statistics-details>
} @else {
<fm-map-histogram-details [histogram]="layer.renderer.band.histogram" [scale]="layer.scale"></fm-map-histogram-details>
}
</div>
</td>
</tr>
}
</table>
}