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 0080d7f088 feat: add icons and description to chart type dropdown
(#3674)
0080d7f088 is described below
commit 0080d7f088438c88381d280b470b09ab73e70857
Author: GauiPower <[email protected]>
AuthorDate: Mon Jun 16 08:43:49 2025 +0200
feat: add icons and description to chart type dropdown (#3674)
---
ui/deployment/_variables.scss | 2 +
.../models/dataview-dashboard.model.ts | 2 +
.../registry/data-explorer-chart-registry.ts | 58 ++++++++++++++++++++++
...-explorer-visualisation-settings.component.html | 7 +++
...-explorer-visualisation-settings.component.scss | 6 +++
5 files changed, 75 insertions(+)
diff --git a/ui/deployment/_variables.scss b/ui/deployment/_variables.scss
index a0ed8c45b6..fcea6d2d1a 100644
--- a/ui/deployment/_variables.scss
+++ b/ui/deployment/_variables.scss
@@ -71,6 +71,7 @@ body {
--color-shadow: #c4c4c4;
--color-pe: #404040;
--color-default-text: rgba(255, 255, 255, 0.87);
+ --color-secondary-text: #aaa;
--color-warn: #b36161;
--color-tab-border: #cccccc;
@@ -110,6 +111,7 @@ body {
--color-shadow: #555;
--color-pe: #ffffff;
--color-default-text: #121212;
+ --color-secondary-text: #555;
--color-warn: #b71c1c;
--color-tab-border: #cccccc;
diff --git a/ui/src/app/data-explorer-shared/models/dataview-dashboard.model.ts
b/ui/src/app/data-explorer-shared/models/dataview-dashboard.model.ts
index a21bc61a4a..ca0d5b9b62 100644
--- a/ui/src/app/data-explorer-shared/models/dataview-dashboard.model.ts
+++ b/ui/src/app/data-explorer-shared/models/dataview-dashboard.model.ts
@@ -80,6 +80,8 @@ export interface IWidget<T extends DataExplorerWidgetModel> {
widgetAppearanceConfigurationComponent?: any;
chartRenderer?: SpEchartsRenderer<T>;
alias?: string;
+ icon?: string;
+ description?: string;
}
export interface WidgetChartAppearanceConfig {
diff --git
a/ui/src/app/data-explorer-shared/registry/data-explorer-chart-registry.ts
b/ui/src/app/data-explorer-shared/registry/data-explorer-chart-registry.ts
index 45ff00f2cb..31d25983f2 100644
--- a/ui/src/app/data-explorer-shared/registry/data-explorer-chart-registry.ts
+++ b/ui/src/app/data-explorer-shared/registry/data-explorer-chart-registry.ts
@@ -87,30 +87,50 @@ export class DataExplorerChartRegistry {
widgetConfigurationComponent: GaugeWidgetConfigComponent,
widgetComponent: SpEchartsWidgetComponent<GaugeWidgetModel>,
chartRenderer: this.gaugeRenderer,
+ icon: 'speed',
+ description: this.translateService.instant(
+ 'The current value displayed in a gauge',
+ ),
},
{
id: 'table',
label: this.translateService.instant('Table'),
widgetConfigurationComponent: TableWidgetConfigComponent,
widgetComponent: TableWidgetComponent,
+ icon: 'table_chart',
+ description: this.translateService.instant(
+ 'A table displaying the data in rows and columns',
+ ),
},
{
id: 'traffic-Light',
label: this.translateService.instant('Traffic Light'),
widgetConfigurationComponent:
TrafficLightWidgetConfigComponent,
widgetComponent: TrafficLightWidgetComponent,
+ icon: 'traffic',
+ description: this.translateService.instant(
+ 'A traffic light that shows if a value is above/below a
threshold',
+ ),
},
{
id: 'status',
label: this.translateService.instant('Status'),
widgetConfigurationComponent: StatusWidgetConfigComponent,
widgetComponent: StatusWidgetComponent,
+ icon: 'check_circle',
+ description: this.translateService.instant(
+ 'A simple red/green status light',
+ ),
},
{
id: 'map',
label: this.translateService.instant('Map'),
widgetConfigurationComponent: MapWidgetConfigComponent,
widgetComponent: MapWidgetComponent,
+ icon: 'map',
+ description: this.translateService.instant(
+ 'A map visualization for spatial coordinates',
+ ),
},
{
id: 'heatmap',
@@ -120,6 +140,10 @@ export class DataExplorerChartRegistry {
widgetConfigurationComponent: HeatmapWidgetConfigComponent,
widgetComponent: SpEchartsWidgetComponent<HeatmapWidgetModel>,
chartRenderer: this.heatmapRenderer,
+ icon: 'view_column',
+ description: this.translateService.instant(
+ 'A heatmap that shows values mapped to a color range',
+ ),
},
{
id: 'status-heatmap',
@@ -131,6 +155,10 @@ export class DataExplorerChartRegistry {
widgetComponent:
SpEchartsWidgetComponent<StatusHeatmapWidgetModel>,
chartRenderer: this.statusHeatmapRenderer,
+ icon: 'view_column',
+ description: this.translateService.instant(
+ 'A heatmap that lets you map specific values to a color',
+ ),
},
{
id: 'time-series-chart',
@@ -142,12 +170,18 @@ export class DataExplorerChartRegistry {
widgetComponent:
SpEchartsWidgetComponent<TimeSeriesChartWidgetModel>,
chartRenderer: this.timeseriesRenderer,
+ icon: 'insert_chart',
+ description: this.translateService.instant(
+ 'A simple chart that shows values on a value/time graph',
+ ),
},
{
id: 'image',
label: this.translateService.instant('Image'),
widgetConfigurationComponent: ImageWidgetConfigComponent,
widgetComponent: ImageWidgetComponent,
+ icon: 'image',
+ description: this.translateService.instant('Display an image'),
},
{
id: 'indicator-chart',
@@ -158,6 +192,10 @@ export class DataExplorerChartRegistry {
widgetComponent:
SpEchartsWidgetComponent<IndicatorChartWidgetModel>,
chartRenderer: this.indicatorRenderer,
+ icon: '123',
+ description: this.translateService.instant(
+ 'The current value displayed as a number',
+ ),
},
{
id: 'scatter-chart',
@@ -169,6 +207,10 @@ export class DataExplorerChartRegistry {
SpEchartsWidgetComponent<CorrelationChartWidgetModel>,
chartRenderer: this.scatterRenderer,
alias: 'correlation-chart',
+ icon: 'grain',
+ description: this.translateService.instant(
+ 'Display points on an x/y plane',
+ ),
},
{
id: 'histogram-chart',
@@ -181,6 +223,10 @@ export class DataExplorerChartRegistry {
SpEchartsWidgetComponent<HistogramChartWidgetModel>,
chartRenderer: this.histogramRenderer,
alias: 'distribution-chart',
+ icon: 'bar_chart',
+ description: this.translateService.instant(
+ 'Shows the distribution of numerical data',
+ ),
},
{
id: 'pie-chart',
@@ -190,6 +236,10 @@ export class DataExplorerChartRegistry {
widgetConfigurationComponent: SpPieChartWidgetConfigComponent,
widgetComponent: SpEchartsWidgetComponent<PieChartWidgetModel>,
chartRenderer: this.pieRenderer,
+ icon: 'pie_chart',
+ description: this.translateService.instant(
+ 'A pie chart that shows the frequency of specific values',
+ ),
},
{
id: 'value-heatmap-chart',
@@ -203,6 +253,10 @@ export class DataExplorerChartRegistry {
widgetComponent:
SpEchartsWidgetComponent<ValueHeatmapChartWidgetModel>,
chartRenderer: this.valueHeatmapRenderer,
+ icon: 'grid_on',
+ description: this.translateService.instant(
+ 'A chart that shows the distribution of numerical data as
a heatmap',
+ ),
},
{
id: 'density-chart',
@@ -213,6 +267,10 @@ export class DataExplorerChartRegistry {
widgetComponent:
SpEchartsWidgetComponent<CorrelationChartWidgetModel>,
chartRenderer: this.densityRenderer,
+ icon: 'blur_on',
+ description: this.translateService.instant(
+ 'A chart that shows data points as dots on an x/y plane
and highlights similar points',
+ ),
},
];
}
diff --git
a/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
b/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
index 7c3080bc65..652c50029a 100644
---
a/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
+++
b/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
@@ -29,12 +29,19 @@
(selectionChange)="triggerWidgetTypeChange($event)"
data-cy="data-explorer-select-visualization-type"
>
+ <mat-select-trigger>{{
+ activeWidgetType.label
+ }}</mat-select-trigger>
<mat-option
[value]="widget.id"
[attr.data-cy]="'select-widget-' + widget.id"
*ngFor="let widget of availableWidgets"
>
+ <mat-icon>{{ widget.icon }}</mat-icon>
<span class="pipeline-name">{{ widget.label }}</span>
+ <span class="widget-description">{{
+ widget.description
+ }}</span>
</mat-option>
</mat-select>
</mat-form-field>
diff --git
a/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss
b/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss
index 13cbc4aacb..7187ec52aa 100644
---
a/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss
+++
b/ui/src/app/data-explorer/components/chart-view/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss
@@ -15,3 +15,9 @@
* limitations under the License.
*
*/
+
+.widget-description {
+ display: block;
+ font-size: 12px;
+ color: var(--color-secondary-text);
+}
