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

Merge latest changes
Some checks failed
FarmMaps.Develop/FarmMapsLib/develop There was a failure building this commit
Details

Browse Source
This commit is contained in:
Willem Dantuma 2019-11-29 12:24:34 +01:00
parent 8fd653afbc
commit 0948bacaaf
3 changed files with 189 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,41 @@
<table class="container" *ngIf="layer"> <table class="container" *ngIf="layer">
<tr> <tr>
<td colspan="2"> <td colspan="2">
<div class="title"> <div class="title">
<h4 *ngIf="showTitle">{{layer.name}}</h4> <h4 *ngIf="showTitle">{{layer.name}}</h4>
<b *ngIf="layer.unit">({{layer.unit}})</b> <b *ngIf="layer.unit">({{layer.unit}})</b>
</div> </div>
</td> </td>
<td colspan="2"> <td colspan="2">
<div class="title" *ngIf="histogramenabled"> <div class="title" *ngIf="histogramenabled">
<h4>{{histogram}}</h4> <h4>{{histogram}}</h4>
<b *ngIf="histogramunit">({{histogramunit}})</b> <b *ngIf="histogramunit">({{histogramunit}})</b>
</div> </div>
</td> </td>
</tr> </tr>
<tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index "> <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="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">
<td class="histogram-items"> <div *ngIf="showHistogram()">
<div *ngIf="histogramenabled" [style.background-color]="getHex(selectedColorMap.noValue)" [style.width]="getPart(selectedColorMap, entry)"> <span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
</div> </span>
</td>--> <span class="bar-label">{{getLabel(layer.renderer,i)}}</span>
</tr> </div>
<tr> </td>
<td colspan="4"></td> </tr>
</tr> <tr>
<!--<tr> <td colspan="4"></td>
<td> </tr>
<i class="fas fa-chart-bar" (click)="onClickHistoGram()"></i> <!--<tr *ngIf="layer.renderer.colorMap.entries.length > 0">
</td> <td>
<td colspan="3"></td> <i title="Show histogram" class="fa fa-bar-chart fa-rotate-90" (click)="onClickHistoGram()"></i>
</tr>--> </td>
</table> <td colspan="3"></td>
</tr>-->
</table>

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

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

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

@ -1,66 +1,81 @@
import { Component, OnInit, Input,AfterViewInit } from '@angular/core'; 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({ @Component({
selector: 'fm-map-layer-legend', selector: 'fm-map-layer-legend',
templateUrl: './legend.component.html', templateUrl: './legend.component.html',
styleUrls: ['./legend.component.scss'] styleUrls: ['./legend.component.scss']
}) })
export class LegendComponent implements OnInit,AfterViewInit { export class LegendComponent implements OnInit,AfterViewInit {
constructor() { constructor() {
} }
ngOnInit() { ngOnInit() {
} }
ngAfterViewInit() { ngAfterViewInit() {
} }
@Input() @Input()
layer: ILayer; layer: ILayer;
@Input() @Input()
legend: string; legend: string;
@Input() @Input()
histogram: string; histogram: string;
@Input() @Input()
showTitle: boolean = true; showTitle: boolean = true;
@Input() @Input()
histogramenabled: boolean; histogramenabled: boolean;
@Input() @Input()
legendunit: string; legendunit: string;
@Input() @Input()
histogramunit: string; histogramunit: string;
onClickHistoGram(): void { onClickHistoGram(): void {
this.histogramenabled = !this.histogramenabled; this.histogramenabled = !this.histogramenabled;
} }
public getHex(color: IColor): string {
return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
}
private getHex(color: IColor): string {
public componentToHex(c: number): string { return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
const hex = c.toString(16); }
return hex.length === 1 ? `0${hex}` : hex;
} private componentToHex(c: number): string {
const hex = c.toString(16);
private getPart(colorMap: IColorMap, colorEntry: IColorEntry): string { return hex.length === 1 ? `0${hex}` : hex;
let sumOfValue = colorMap.entries.reduce((sum, item) => sum + item.value, 0); }
let part = ((colorEntry.value / sumOfValue) * 100) + "%";
private getPart(renderer: IRenderer, index: number): string {
return part; 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";
}
}