diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.html b/projects/common-map/src/fm-map/components/legend/legend.component.html index f8f5e03..9f4e57f 100644 --- a/projects/common-map/src/fm-map/components/legend/legend.component.html +++ b/projects/common-map/src/fm-map/components/legend/legend.component.html @@ -1,39 +1,41 @@ - - - - - - - - - - - - - - -
-
-

{{layer.name}}

- ({{layer.unit}}) -
- 		-
-

{{histogram}}

- ({{histogramunit}}) -
-
{{entry.value | number:'1.0-2'}} {{legendunit}}{{entry.label}}
- - - - - + + + + + + + + + + + + + + +
+
+

{{layer.name}}

+ ({{layer.unit}}) +
+ 		+
+

{{histogram}}

+ ({{histogramunit}}) +
+
{{entry.value | number:'1.0-2'}} {{legendunit}}{{entry.label}} +
+ + + {{getLabel(layer.renderer,i)}} +
+
+ + + + + diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.scss b/projects/common-map/src/fm-map/components/legend/legend.component.scss index 4e5a61b..f9430f4 100644 --- a/projects/common-map/src/fm-map/components/legend/legend.component.scss +++ b/projects/common-map/src/fm-map/components/legend/legend.component.scss @@ -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; +} + + + diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.ts b/projects/common-map/src/fm-map/components/legend/legend.component.ts index 465d2fa..119d6e2 100644 --- a/projects/common-map/src/fm-map/components/legend/legend.component.ts +++ b/projects/common-map/src/fm-map/components/legend/legend.component.ts @@ -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"; + } +} + +