This is an automated email from the ASF dual-hosted git repository.
riemer 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 45dc1d997d feat: axis labels for 2d charts (#3701)
45dc1d997d is described below
commit 45dc1d997df680f13123a905e90a05f9cdf1f758
Author: GauiPower <[email protected]>
AuthorDate: Mon Jul 28 14:01:23 2025 +0200
feat: axis labels for 2d charts (#3701)
* feat: add units to 2d charts
* only show measurement unit, if set
---
.../correlation-chart-widget-config.component.html | 36 ++++++++++++++++++++++
.../model/correlation-chart-widget.model.ts | 2 ++
.../charts/density/density-renderer.service.ts | 14 +++++++++
.../charts/scatter/scatter-renderer.service.ts | 14 +++++++++
4 files changed, 66 insertions(+)
diff --git
a/ui/src/app/data-explorer-shared/components/charts/correlation-chart/config/correlation-chart-widget-config.component.html
b/ui/src/app/data-explorer-shared/components/charts/correlation-chart/config/correlation-chart-widget-config.component.html
index 3e2cfd7ff4..f9e74c7e98 100644
---
a/ui/src/app/data-explorer-shared/components/charts/correlation-chart/config/correlation-chart-widget-config.component.html
+++
b/ui/src/app/data-explorer-shared/components/charts/correlation-chart/config/correlation-chart-widget-config.component.html
@@ -40,6 +40,24 @@
>
</sp-select-single-property-config>
</div>
+ <div
+ fxLayout="row"
+ fxFlex="100"
+ fxLayoutGap="10px"
+ fxLayoutAlign="start center"
+ >
+ <small>{{ 'X Label' | translate }}</small>
+ <mat-form-field appearance="outline" color="accent" fxFlex>
+ <input
+ matInput
+ type="text"
+ [(ngModel)]="
+
currentlyConfiguredWidget.visualizationConfig.labelX
+ "
+ (ngModelChange)="triggerViewRefresh()"
+ />
+ </mat-form-field>
+ </div>
<div
fxLayout="row"
fxFlex="100"
@@ -58,6 +76,24 @@
>
</sp-select-single-property-config>
</div>
+ <div
+ fxLayout="row"
+ fxFlex="100"
+ fxLayoutGap="10px"
+ fxLayoutAlign="start center"
+ >
+ <small>{{ 'Y Label' | translate }}</small>
+ <mat-form-field appearance="outline" color="accent" fxFlex>
+ <input
+ matInput
+ type="text"
+ [(ngModel)]="
+
currentlyConfiguredWidget.visualizationConfig.labelY
+ "
+ (ngModelChange)="triggerViewRefresh()"
+ />
+ </mat-form-field>
+ </div>
</div>
</sp-configuration-box>
</sp-visualization-config-outer>
diff --git
a/ui/src/app/data-explorer-shared/components/charts/correlation-chart/model/correlation-chart-widget.model.ts
b/ui/src/app/data-explorer-shared/components/charts/correlation-chart/model/correlation-chart-widget.model.ts
index b5ba409ed1..1fab138fd8 100644
---
a/ui/src/app/data-explorer-shared/components/charts/correlation-chart/model/correlation-chart-widget.model.ts
+++
b/ui/src/app/data-explorer-shared/components/charts/correlation-chart/model/correlation-chart-widget.model.ts
@@ -26,6 +26,8 @@ import { DataExplorerVisConfig } from
'../../../../models/dataview-dashboard.mod
export interface CorrelationChartVisConfig extends DataExplorerVisConfig {
firstField: DataExplorerField;
secondField: DataExplorerField;
+ labelX: string;
+ labelY: string;
}
export interface CorrelationChartWidgetModel extends DataExplorerWidgetModel {
diff --git
a/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts
b/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts
index 69cfda6cde..b7621c78eb 100644
---
a/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts
+++
b/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts
@@ -65,11 +65,25 @@ export class SpDensityRendererService extends
SpBaseEchartsRenderer<CorrelationC
scale: true,
min: Math.floor(stats.minX - 1),
max: Math.ceil(stats.maxX + 1),
+ name:
+ widgetConfig.visualizationConfig.labelX ||
+ `${xField.fullDbName}${xField.measurementUnitResourceId ?
` (${xField.measurementUnitResourceId.split('#').pop()})` : ''}`,
+ nameLocation: 'center',
+ nameTextStyle: {
+ fontSize: 20,
+ },
},
yAxis: {
scale: true,
min: Math.floor(stats.minY - 1),
max: Math.ceil(stats.maxY + 1),
+ name:
+ widgetConfig.visualizationConfig.labelY ||
+ `${yField.fullDbName}${yField.measurementUnitResourceId ?
` (${yField.measurementUnitResourceId.split('#').pop()})` : ''}`,
+ nameLocation: 'center',
+ nameTextStyle: {
+ fontSize: 20,
+ },
},
dataset: dataset.rawDataset,
visualMap: {
diff --git
a/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts
b/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts
index 2bd81f4f53..08222544fe 100644
---
a/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts
+++
b/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts
@@ -66,11 +66,25 @@ export class SpScatterRendererService extends
SpBaseEchartsRenderer<CorrelationC
type: 'value',
min: 'dataMin',
max: 'dataMax',
+ name:
+ widgetConfig.visualizationConfig.labelX ||
+ `${xField.fullDbName}${xField.measurementUnitResourceId ?
` (${xField.measurementUnitResourceId.split('#').pop()})` : ''}`,
+ nameLocation: 'center',
+ nameTextStyle: {
+ fontSize: 20,
+ },
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
+ name:
+ widgetConfig.visualizationConfig.labelY ||
+ `${yField.fullDbName}${yField.measurementUnitResourceId ?
` (${yField.measurementUnitResourceId.split('#').pop()})` : ''}`,
+ nameLocation: 'center',
+ nameTextStyle: {
+ fontSize: 20,
+ },
},
series,
});
