This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 4fdc67df52 Fix heatmap and add option to modify visual min and max
(#3487)
4fdc67df52 is described below
commit 4fdc67df522ed40a9225987abd9e29a93668c99f
Author: Marcel Früholz <[email protected]>
AuthorDate: Mon Feb 17 14:05:37 2025 +0100
Fix heatmap and add option to modify visual min and max (#3487)
---
.../config/heatmap-widget-config.component.html | 51 +++++++++++++++++++---
.../config/heatmap-widget-config.component.ts | 18 ++++++++
.../charts/heatmap/heatmap-renderer.service.ts | 16 +++++--
.../charts/heatmap/model/heatmap-widget.model.ts | 2 +
4 files changed, 76 insertions(+), 11 deletions(-)
diff --git
a/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html
b/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html
index 0f05fe2fdc..fbb066fdbe 100644
---
a/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html
+++
b/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html
@@ -32,13 +32,50 @@
>
</sp-select-single-property-config>
</sp-configuration-box>
+
<sp-configuration-box title="Settings">
- <mat-checkbox
- [(ngModel)]="
-
currentlyConfiguredWidget.visualizationConfig.showLabelsProperty
- "
- (change)="setShowLabelsProperty($event)"
- >Show values as labels
- </mat-checkbox>
+ <div fxLayout="column" class="ml-10 mb-10">
+ <div class="mb-10">
+ <mat-checkbox
+ [(ngModel)]="
+ currentlyConfiguredWidget.visualizationConfig
+ .showLabelsProperty
+ "
+ (change)="setShowLabelsProperty($event)"
+ >
+ Show values as labels
+ </mat-checkbox>
+ </div>
+ <div class="ml-10 mb-10" fxFlex fxLayoutAlign="start center">
+ <small>Visual Map Min</small>
+ <span fxFlex></span>
+ <mat-form-field appearance="outline" color="accent"
fxFlex="30">
+ <input
+ matInput
+ [(ngModel)]="
+ currentlyConfiguredWidget.visualizationConfig
+ .visualMapMin
+ "
+ (ngModelChange)="updateVisualMapMin($event)"
+ type="number"
+ />
+ </mat-form-field>
+ </div>
+ <div class="ml-10 mb-10" fxFlex fxLayoutAlign="start center">
+ <small>Visual Map Max</small>
+ <span fxFlex></span>
+ <mat-form-field appearance="outline" color="accent"
fxFlex="30">
+ <input
+ matInput
+ [(ngModel)]="
+ currentlyConfiguredWidget.visualizationConfig
+ .visualMapMax
+ "
+ (ngModelChange)="updateVisualMapMax($event)"
+ type="number"
+ />
+ </mat-form-field>
+ </div>
+ </div>
</sp-configuration-box>
</sp-visualization-config-outer>
diff --git
a/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.ts
b/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.ts
index 0f96901848..6fa715789e 100644
---
a/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.ts
+++
b/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.ts
@@ -53,6 +53,16 @@ export class HeatmapWidgetConfigComponent extends
BaseWidgetConfig<
this.triggerDataRefresh();
}
+ updateVisualMapMin(min: number) {
+ this.currentlyConfiguredWidget.visualizationConfig.visualMapMin = min;
+ this.triggerDataRefresh();
+ }
+
+ updateVisualMapMax(max: number) {
+ this.currentlyConfiguredWidget.visualizationConfig.visualMapMax = max;
+ this.triggerDataRefresh();
+ }
+
protected applyWidgetConfig(config: HeatmapVisConfig): void {
config.selectedHeatProperty = this.fieldService.getSelectedField(
config.selectedHeatProperty,
@@ -60,6 +70,14 @@ export class HeatmapWidgetConfigComponent extends
BaseWidgetConfig<
() => this.fieldProvider.numericFields[0],
);
config.showLabelsProperty ??= false;
+
+ if (config.visualMapMax === undefined) {
+ config.visualMapMax = 200;
+ }
+
+ if (config.visualMapMin === undefined) {
+ config.visualMapMin = 0;
+ }
}
protected requiredFieldsForChartPresent(): boolean {
diff --git
a/ui/src/app/data-explorer-shared/components/charts/heatmap/heatmap-renderer.service.ts
b/ui/src/app/data-explorer-shared/components/charts/heatmap/heatmap-renderer.service.ts
index e15528e47f..cd4f818f70 100644
---
a/ui/src/app/data-explorer-shared/components/charts/heatmap/heatmap-renderer.service.ts
+++
b/ui/src/app/data-explorer-shared/components/charts/heatmap/heatmap-renderer.service.ts
@@ -35,7 +35,7 @@ export class SpHeatmapRendererService extends
SpBaseEchartsRenderer<HeatmapWidge
options: EChartsOption,
widgetConfig: HeatmapWidgetModel,
): void {
- this.basicOptions(options);
+ this.basicOptions(options, widgetConfig);
const field = widgetConfig.visualizationConfig.selectedHeatProperty;
const sourceIndex = field.sourceIndex;
@@ -62,7 +62,7 @@ export class SpHeatmapRendererService extends
SpBaseEchartsRenderer<HeatmapWidge
return [
index,
this.makeTag(rawDataset.rawDataset.dimensions, tags, row),
- row[heatIndex],
+ (row[heatIndex] as number).toFixed(2),
];
});
@@ -77,7 +77,7 @@ export class SpHeatmapRendererService extends
SpBaseEchartsRenderer<HeatmapWidge
datasetIndex: 0,
encode: {
itemId: 0,
- value: heatIndex,
+ value: 2,
},
label: {
show: widgetConfig.visualizationConfig.showLabelsProperty,
@@ -88,6 +88,9 @@ export class SpHeatmapRendererService extends
SpBaseEchartsRenderer<HeatmapWidge
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
+ labelLayout: {
+ hideOverlap: true,
+ },
},
];
}
@@ -102,7 +105,10 @@ export class SpHeatmapRendererService extends
SpBaseEchartsRenderer<HeatmapWidge
);
}
- basicOptions(options: EChartsOption): void {
+ basicOptions(
+ options: EChartsOption,
+ widgetConfig: HeatmapWidgetModel,
+ ): void {
options.tooltip = {};
options.grid = {
height: '80%',
@@ -121,6 +127,8 @@ export class SpHeatmapRendererService extends
SpBaseEchartsRenderer<HeatmapWidge
},
};
options.visualMap = {
+ min: widgetConfig.visualizationConfig.visualMapMin,
+ max: widgetConfig.visualizationConfig.visualMapMax,
calculable: true,
orient: 'horizontal',
right: '5%',
diff --git
a/ui/src/app/data-explorer-shared/components/charts/heatmap/model/heatmap-widget.model.ts
b/ui/src/app/data-explorer-shared/components/charts/heatmap/model/heatmap-widget.model.ts
index 8c1371c02d..cebf494337 100644
---
a/ui/src/app/data-explorer-shared/components/charts/heatmap/model/heatmap-widget.model.ts
+++
b/ui/src/app/data-explorer-shared/components/charts/heatmap/model/heatmap-widget.model.ts
@@ -26,6 +26,8 @@ import { DataExplorerVisConfig } from
'../../../../models/dataview-dashboard.mod
export interface HeatmapVisConfig extends DataExplorerVisConfig {
showLabelsProperty: boolean;
selectedHeatProperty: DataExplorerField;
+ visualMapMin: number;
+ visualMapMax: number;
}
export interface HeatmapWidgetModel extends DataExplorerWidgetModel {
