This is an automated email from the ASF dual-hosted git repository. mfholz pushed a commit to branch fix-heatmap in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 3885234856e59f9bf3bd93e650bbff6f5106f021 Author: Marcelfrueh <[email protected]> AuthorDate: Mon Feb 17 13:04:52 2025 +0100 Fix heatmap and add option to modify visual min and max --- .../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 {
