Skip to content

Commit 6bd6aaa

Browse files
sanwarhiersanwarhier
committed
hide measureOfValue classification and statistical diagrams when qualitative indicator selected
1 parent 9569b61 commit 6bd6aaa

4 files changed

Lines changed: 136 additions & 79 deletions

File tree

‎app/components/ngComponents/userInterface/diagramMenuButton/diagram-menu-button.component.html‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,17 @@
2626
(detach)="submenuOpen = false"
2727
>
2828
<div class="diagram-submenu-panel">
29-
@if (visibilityHelperService.elementVisibility.balance) {
29+
<h4>statistische Diagramme</h4>
30+
@if (indicatorClassificationType == 'QUALITATIVE') {
31+
<div class="alert alert-light py-3 mb-2 text-center" role="alert">
32+
Nicht verfügbar für Indikatoren mit kategorialer Klassifikation
33+
</div>
34+
}
35+
36+
@if (
37+
visibilityHelperService.elementVisibility.balance &&
38+
indicatorClassificationType == 'QUANTITATIVE'
39+
) {
3040
<div class="subMenuButtonWrapper">
3141
<button
3242
type="button"
@@ -50,7 +60,10 @@
5060
</div>
5161
}
5262

53-
@if (visibilityHelperService.elementVisibility.diagrams) {
63+
@if (
64+
visibilityHelperService.elementVisibility.diagrams &&
65+
indicatorClassificationType == 'QUANTITATIVE'
66+
) {
5467
<div class="subMenuButtonWrapper">
5568
<button
5669
type="button"
@@ -69,7 +82,10 @@
6982
</div>
7083
}
7184

72-
@if (visibilityHelperService.elementVisibility.radarDiagram) {
85+
@if (
86+
visibilityHelperService.elementVisibility.radarDiagram &&
87+
indicatorClassificationType == 'QUANTITATIVE'
88+
) {
7389
<div class="subMenuButtonWrapper">
7490
<button
7591
type="button"
@@ -91,7 +107,10 @@
91107
</div>
92108
}
93109

94-
@if (visibilityHelperService.elementVisibility.regressionDiagram) {
110+
@if (
111+
visibilityHelperService.elementVisibility.regressionDiagram &&
112+
indicatorClassificationType == 'QUANTITATIVE'
113+
) {
95114
<div class="subMenuButtonWrapper">
96115
<button
97116
type="button"

‎app/components/ngComponents/userInterface/diagramMenuButton/diagram-menu-button.component.ts‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { NgClass } from '@angular/common';
22
import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
3-
import { Component, inject } from '@angular/core';
3+
import { Component, inject, OnInit } from '@angular/core';
44
import { ChartDisplayStateService } from 'services/chart-display-state-service/chart-display-state.service';
55
import { ElementVisibilityHelperService } from 'services/element-visibility-helper-service/element-visibility-helper.service';
66
import {
77
SidebarElement,
88
SidebarStateService,
99
} from 'services/sidebar-state-service/sidebar-state.service';
10+
import { BroadcastService } from 'services/broadcast-service/broadcast.service';
11+
import { BroadcastMessage } from 'services/broadcast-service/broadcast-message';
12+
import { SelectionStateService } from 'services/selection-state-service/selection-state.service';
1013

1114
/**
1215
* The "statistische Diagramme" sidebar button with its dropdown submenu
@@ -22,10 +25,29 @@ import {
2225
standalone: true,
2326
imports: [NgClass, OverlayModule],
2427
})
25-
export class DiagramMenuButtonComponent {
28+
export class DiagramMenuButtonComponent implements OnInit {
2629
protected readonly sidebarState = inject(SidebarStateService);
2730
protected readonly visibilityHelperService = inject(ElementVisibilityHelperService);
2831
protected readonly chartDisplayState = inject(ChartDisplayStateService);
32+
protected selectionState = inject(SelectionStateService);
33+
private broadcastService = inject(BroadcastService);
34+
35+
indicatorClassificationType;
36+
37+
ngOnInit(): void {
38+
this.broadcastService.currentBroadcastMsg.subscribe((result) => {
39+
const msg = result.msg;
40+
const val: any = result.values;
41+
42+
switch (msg) {
43+
case BroadcastMessage.OnChangeSelectedIndicator:
44+
{
45+
this.onChangeSelectedIndicator();
46+
}
47+
break;
48+
}
49+
});
50+
}
2951

3052
/** Whether the submenu overlay is open. */
3153
submenuOpen = false;
@@ -39,6 +61,11 @@ export class DiagramMenuButtonComponent {
3961
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
4062
];
4163

64+
onChangeSelectedIndicator() {
65+
this.indicatorClassificationType =
66+
this.selectionState.selectedIndicator.defaultClassificationMapping.classificationType;
67+
}
68+
4269
onSubmenuClick(id: SidebarElement) {
4370
this.sidebarState.toggleActive(id);
4471
this.submenuOpen = false;

‎app/components/ngComponents/userInterface/sidebar/kommonitorFilter/kommonitor-filter.component.html‎

Lines changed: 80 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -283,83 +283,90 @@ <h4>Manuelle Selektion anzuzeigender Raumebeneen</h4>
283283
<!-- SCHWELLENWERT FILTER -->
284284
@if (isFilterModeActive('kommonitorThresholdFilter')) {
285285
<expandable-box [title]="'Dynamische Schwellenwertklassifizierung'" [collapsed]="false">
286-
<div style="text-align: justify">
287-
<p>
288-
Dieses Tool bietet eine spezielle Form der Klassifizierung der dargestellten
289-
r&auml;mlichen Features. Mit Hilfe eines Schwellenwertes werden die Features zun&auml;chst
290-
in zwei Kategorien unterteilt:
291-
</p>
292-
<ul>
293-
<li>Features, deren Indikatorwert unter dem Schwellenwert liegt (Blau-T&ouml;ne)</li>
294-
<li>
295-
Features, deren Indikatorwert &uuml;ber dem Schwellenwert liegt (Orange-T&ouml;ne)
296-
</li>
297-
</ul>
298-
<p>
299-
Jedes Feature wird anschließend gem&auml;&szlig; seiner Kategorie in eine von 1-5
300-
Abstufungen klassifiziert und entsprechend eingef&auml;rbt. Zum Aktivieren/Deaktivieren
301-
der Schwellenwertklassifizierung bitte die unten stehende Checkbox nutzen.
302-
</p>
303-
</div>
304-
<div style="text-align: center" class="form-group">
305-
<strong>Schwellenwertklassifizierung aktivieren/deaktivieren</strong>
306-
&nbsp;
307-
<label class="switch">
308-
<input
309-
id="measureOfValueCheckbox"
310-
type="checkbox"
311-
(change)="onChangeUseMeasureOfValue()"
312-
[(ngModel)]="chartDisplayState.isMeasureOfValueChecked"
313-
(checked)="(chartDisplayState.isMeasureOfValueChecked)"
314-
/>
315-
<span class="switchslider round"></span>
316-
</label>
317-
<div [hidden]="!chartDisplayState.isMeasureOfValueChecked">
318-
<!-- <p>Verschieben des Schwellenwertes klassifiziert die dargestellten Indikatoren-Features unmittelbar neu. Ebenso passt sich die Anzahl an Klassen der beiden oben genannten Kategorien dynamisch an die Anzahl der zu klassifizierenden Features an.</p> -->
319-
<br />
320-
<div class="slidecontainer" style="position: relative">
321-
<div id="measureOfValueSlider"></div>
322-
<!-- <input [(ngModel)]="$ctrl.kommonitorDataExchangeServiceInstance.measureOfValue" type="number" style="width:100px;" class="form-control" id="measureOfValueTextInput">
323-
<br/>
324-
<p>Schwellenwert: {{$ctrl.kommonitorDataExchangeServiceInstance.measureOfValue}}</p> -->
325-
</div>
326-
<div style="text-align: center">
327-
<br />
328-
<label>Schwellenwert: </label
329-
><input
330-
[(ngModel)]="chartDisplayState.measureOfValue"
331-
(change)="onMeasureOfValueChangeByText()"
332-
min="{{ movMinValue }}"
333-
max="{{ movMaxValue }}"
334-
step="0.01"
335-
string-to-number
336-
type="number"
337-
style="width: 175px"
338-
class="form-control input-sm"
339-
id="measureOfValueTextInput"
286+
@if (indicatorClassificationType == 'QUALITATIVE') {
287+
<div class="alert alert-light py-3 mb-2 text-center" role="alert">
288+
Nicht verfügbar für Indikatoren mit kategorialer Klassifikation
289+
</div>
290+
}
291+
@if (indicatorClassificationType == 'QUANTITATIVE') {
292+
<div style="text-align: justify">
293+
<p>
294+
Dieses Tool bietet eine spezielle Form der Klassifizierung der dargestellten
295+
r&auml;mlichen Features. Mit Hilfe eines Schwellenwertes werden die Features
296+
zun&auml;chst in zwei Kategorien unterteilt:
297+
</p>
298+
<ul>
299+
<li>Features, deren Indikatorwert unter dem Schwellenwert liegt (Blau-T&ouml;ne)</li>
300+
<li>
301+
Features, deren Indikatorwert &uuml;ber dem Schwellenwert liegt (Orange-T&ouml;ne)
302+
</li>
303+
</ul>
304+
<p>
305+
Jedes Feature wird anschließend gem&auml;&szlig; seiner Kategorie in eine von 1-5
306+
Abstufungen klassifiziert und entsprechend eingef&auml;rbt. Zum Aktivieren/Deaktivieren
307+
der Schwellenwertklassifizierung bitte die unten stehende Checkbox nutzen.
308+
</p>
309+
</div>
310+
<div style="text-align: center" class="form-group">
311+
<strong>Schwellenwertklassifizierung aktivieren/deaktivieren</strong>
312+
&nbsp;
313+
<label class="switch">
314+
<input
315+
id="measureOfValueCheckbox"
316+
type="checkbox"
317+
(change)="onChangeUseMeasureOfValue()"
318+
[(ngModel)]="chartDisplayState.isMeasureOfValueChecked"
319+
(checked)="(chartDisplayState.isMeasureOfValueChecked)"
340320
/>
341-
<!-- <div *ngIf="inputNotValid">
342-
<p>Schwellenwert: {{$ctrl.kommonitorDataExchangeServiceInstance.measureOfValue}}</p>
343-
</div> -->
344-
@if (inputNotValid) {
345-
<div>
346-
<br />
347-
<div class="alert alert-danger" style="margin-bottom: 0px">
348-
<strong
349-
><i class="icon fas fa-ban"></i>Eingegebener Schwellenwert ist nicht
350-
g&uuml;ltig!</strong
351-
>
352-
<p></p>
353-
<p>
354-
<strong>Hinweis: </strong>Der Schwellenwert muss zwischen {{ movMinValue }} und
355-
{{ movMaxValue }} liegen.
356-
</p>
321+
<span class="switchslider round"></span>
322+
</label>
323+
<div [hidden]="!chartDisplayState.isMeasureOfValueChecked">
324+
<!-- <p>Verschieben des Schwellenwertes klassifiziert die dargestellten Indikatoren-Features unmittelbar neu. Ebenso passt sich die Anzahl an Klassen der beiden oben genannten Kategorien dynamisch an die Anzahl der zu klassifizierenden Features an.</p> -->
325+
<br />
326+
<div class="slidecontainer" style="position: relative">
327+
<div id="measureOfValueSlider"></div>
328+
<!-- <input [(ngModel)]="$ctrl.kommonitorDataExchangeServiceInstance.measureOfValue" type="number" style="width:100px;" class="form-control" id="measureOfValueTextInput">
329+
<br/>
330+
<p>Schwellenwert: {{$ctrl.kommonitorDataExchangeServiceInstance.measureOfValue}}</p> -->
331+
</div>
332+
<div style="text-align: center">
333+
<br />
334+
<label>Schwellenwert: </label
335+
><input
336+
[(ngModel)]="chartDisplayState.measureOfValue"
337+
(change)="onMeasureOfValueChangeByText()"
338+
min="{{ movMinValue }}"
339+
max="{{ movMaxValue }}"
340+
step="0.01"
341+
string-to-number
342+
type="number"
343+
style="width: 175px"
344+
class="form-control input-sm"
345+
id="measureOfValueTextInput"
346+
/>
347+
<!-- <div *ngIf="inputNotValid">
348+
<p>Schwellenwert: {{$ctrl.kommonitorDataExchangeServiceInstance.measureOfValue}}</p>
349+
</div> -->
350+
@if (inputNotValid) {
351+
<div>
352+
<br />
353+
<div class="alert alert-danger" style="margin-bottom: 0px">
354+
<strong
355+
><i class="icon fas fa-ban"></i>Eingegebener Schwellenwert ist nicht
356+
g&uuml;ltig!</strong
357+
>
358+
<p></p>
359+
<p>
360+
<strong>Hinweis: </strong>Der Schwellenwert muss zwischen
361+
{{ movMinValue }} und {{ movMaxValue }} liegen.
362+
</p>
363+
</div>
357364
</div>
358-
</div>
359-
}
365+
}
366+
</div>
360367
</div>
361368
</div>
362-
</div>
369+
}
363370
</expandable-box>
364371
}
365372
</div>

‎app/components/ngComponents/userInterface/sidebar/kommonitorFilter/kommonitor-filter.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export class KommonitorFilterComponent implements OnInit, AfterViewInit {
7474
lowerFilterInputNotValid = false;
7575
higherFilterInputNotValid = false;
7676
indicatorMetadataAndGeoJSON;
77+
indicatorClassificationType;
7778

7879
showManualSelectionSpatialFilter;
7980
showSelectionByFeatureSpatialFilter;
@@ -332,6 +333,9 @@ export class KommonitorFilterComponent implements OnInit, AfterViewInit {
332333
// filter is cleared in time. The value-range filter is meaningless for the new
333334
// indicator anyway and its slider is reset via UpdateIndicatorValueRangeFilter.
334335
this.filterHelperService.clearFilteredFeatures();
336+
337+
this.indicatorClassificationType =
338+
this.selectionState.selectedIndicator.defaultClassificationMapping.classificationType;
335339
}
336340
/*
337341

0 commit comments

Comments
 (0)