Merge latest changes
Some checks failed
FarmMaps.Develop/FarmMapsLib/develop There was a failure building this commit
Some checks failed
FarmMaps.Develop/FarmMapsLib/develop There was a failure building this commit
This commit is contained in:
Willem Dantuma
parent
8fd653afbc
commit
0948bacaaf
@ -1,39 +1,41 @@
|
||||
<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"><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>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,58 +1,67 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
span.color {
|
||||
display:inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
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: 100%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
|
||||
.histogram-items-text {
|
||||
max-width: 20em;
|
||||
font-size: 14pt;
|
||||
padding-left: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display:inline-block;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
margin-left:0.3em;
|
||||
font-size:0.7em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,66 +1,81 @@
|
||||
import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
|
||||
import { IColorMap, IColor, IColorEntry,ILayer } from '../../models/color.map';
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
|
||||
import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
private getHex(color: IColor): string {
|
||||
return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
|
||||
}
|
||||
|
||||
private componentToHex(c: number): string {
|
||||
const hex = c.toString(16);
|
||||
return hex.length === 1 ? `0${hex}` : hex;
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user