feat(#3090): Add gauge chart to data explorer

ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts

@@ -216,6 +216,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy {
                     ? this.overrideTime(+startTime, +endTime)
                     : this.dashboard.dashboardTimeSettings;
             this.dashboardLoaded = true;
+            this.modifyRefreshInterval();
         });
     }
 

ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts

@@ -147,7 +147,6 @@ export abstract class BaseDataExplorerWidgetDirective<
                 this.timerCallback.emit(false);
                 setTimeout(() => {
                     this.validateReceivedData(results);
-                    this.refreshView();
                 });
             });
 
@@ -234,7 +233,6 @@ export abstract class BaseDataExplorerWidgetDirective<
 
     public updateData(includeTooMuchEventsParameter: boolean = true) {
         this.beforeDataFetched();
-
         this.loadData(includeTooMuchEventsParameter);
     }
 

ui/src/app/data-explorer/components/widgets/gauge/config/gauge-widget-config.component.html

@@ -0,0 +1,72 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+
+<sp-visualization-config-outer
+    [configurationValid]="
+        currentlyConfiguredWidget.visualizationConfig.configurationValid
+    "
+>
+    <sp-configuration-box title="Field">
+        <sp-select-property
+            [availableProperties]="fieldProvider.numericFields"
+            [selectedProperty]="
+                currentlyConfiguredWidget.visualizationConfig.selectedProperty
+            "
+            (changeSelectedProperty)="setSelectedProperty($event)"
+        >
+        </sp-select-property>
+    </sp-configuration-box>
+    <sp-configuration-box
+        title="Settings"
+        *ngIf="
+            currentlyConfiguredWidget.visualizationConfig.selectedProperty
+                ?.fieldCharacteristics.numeric
+        "
+    >
+        <div fxLayout="column">
+            <div fxFlex fxLayoutAlign="start center" class="ml-10 mb-10">
+                <small>Min</small>
+                <span fxFlex></span>
+                <mat-form-field appearance="outline" color="accent" fxFlex="30">
+                    <input
+                        matInput
+                        type="number"
+                        [(ngModel)]="
+                            currentlyConfiguredWidget.visualizationConfig.min
+                        "
+                        (ngModelChange)="triggerViewRefresh()"
+                    />
+                </mat-form-field>
+            </div>
+            <div fxFlex fxLayoutAlign="start center" class="ml-10 mb-10">
+                <small>Max</small>
+                <span fxFlex></span>
+                <mat-form-field appearance="outline" color="accent" fxFlex="30">
+                    <input
+                        matInput
+                        type="number"
+                        [(ngModel)]="
+                            currentlyConfiguredWidget.visualizationConfig.max
+                        "
+                        (ngModelChange)="triggerViewRefresh()"
+                    />
+                </mat-form-field>
+            </div>
+        </div>
+    </sp-configuration-box>
+</sp-visualization-config-outer>

ui/src/app/data-explorer/components/widgets/gauge/config/gauge-widget-config.component.ts

@@ -0,0 +1,60 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Component } from '@angular/core';
+import { BaseWidgetConfig } from '../../base/base-widget-config';
+import { WidgetConfigurationService } from '../../../../services/widget-configuration.service';
+import { DataExplorerFieldProviderService } from '../../../../services/data-explorer-field-provider-service';
+import { GaugeVisConfig, GaugeWidgetModel } from '../model/gauge-widget.model';
+import { DataExplorerField } from '@streampipes/platform-services';
+
+@Component({
+    selector: 'sp-data-explorer-gauge-widget-config',
+    templateUrl: './gauge-widget-config.component.html',
+})
+export class GaugeWidgetConfigComponent extends BaseWidgetConfig<
+    GaugeWidgetModel,
+    GaugeVisConfig
+> {
+    constructor(
+        widgetConfigurationService: WidgetConfigurationService,
+        fieldService: DataExplorerFieldProviderService,
+    ) {
+        super(widgetConfigurationService, fieldService);
+    }
+
+    setSelectedProperty(field: DataExplorerField) {
+        this.currentlyConfiguredWidget.visualizationConfig.selectedProperty =
+            field;
+        this.triggerViewRefresh();
+    }
+
+    protected applyWidgetConfig(config: GaugeVisConfig): void {
+        config.selectedProperty = this.fieldService.getSelectedField(
+            config.selectedProperty,
+            this.fieldProvider.numericFields,
+            () => this.fieldProvider.numericFields[0],
+        );
+        config.min ??= 0;
+        config.max ??= 100;
+    }
+
+    protected requiredFieldsForChartPresent(): boolean {
+        return this.fieldProvider.numericFields.length > 0;
+    }
+}

ui/src/app/data-explorer/components/widgets/gauge/gauge-renderer.service.ts

@@ -0,0 +1,118 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { inject, Injectable } from '@angular/core';
+import { GaugeWidgetModel } from './model/gauge-widget.model';
+import { EChartsOption, GaugeSeriesOption } from 'echarts';
+import { FieldUpdateInfo } from '../../../models/field-update.model';
+import {
+    DataExplorerField,
+    SpQueryResult,
+} from '@streampipes/platform-services';
+import {
+    SpEchartsRenderer,
+    WidgetEchartsAppearanceConfig,
+} from '../../../models/dataview-dashboard.model';
+import { WidgetSize } from '../../../models/dataset.model';
+import { EchartsBasicOptionsGeneratorService } from '../../../echarts-renderer/echarts-basic-options-generator.service';
+import { SpFieldUpdateService } from '../../../services/field-update.service';
+
+@Injectable({ providedIn: 'root' })
+export class SpGaugeRendererService
+    implements SpEchartsRenderer<GaugeWidgetModel>
+{
+    protected fieldUpdateService = inject(SpFieldUpdateService);
+    protected echartsBaseOptionsGenerator = inject(
+        EchartsBasicOptionsGeneratorService,
+    );
+
+    makeSeriesItem(
+        seriesName: string,
+        fieldName: string,
+        value: number,
+        widgetConfig: GaugeWidgetModel,
+    ): GaugeSeriesOption {
+        const visConfig = widgetConfig.visualizationConfig;
+        return {
+            name: seriesName,
+            type: 'gauge',
+            progress: {
+                show: true,
+            },
+            detail: {
+                show: true,
+                valueAnimation: false,
+                formatter: '{value}',
+            },
+            min: visConfig.min,
+            max: visConfig.max,
+            data: [
+                {
+                    value: value,
+                    name: fieldName,
+                },
+            ],
+        };
+    }
+
+    getSelectedField(widgetConfig: GaugeWidgetModel): DataExplorerField {
+        return widgetConfig.visualizationConfig.selectedProperty;
+    }
+
+    handleUpdatedFields(
+        fieldUpdateInfo: FieldUpdateInfo,
+        widgetConfig: GaugeWidgetModel,
+    ): void {
+        this.fieldUpdateService.updateAnyField(
+            this.getSelectedField(widgetConfig),
+            fieldUpdateInfo,
+        );
+    }
+
+    render(
+        queryResult: SpQueryResult[],
+        widgetConfig: GaugeWidgetModel,
+        _widgetSize: WidgetSize,
+    ): EChartsOption {
+        const option = this.echartsBaseOptionsGenerator.makeBaseConfig(
+            widgetConfig.baseAppearanceConfig as WidgetEchartsAppearanceConfig,
+            {},
+        );
+        const selectedField = this.getSelectedField(widgetConfig);
+        const sourceIndex = selectedField.sourceIndex;
+        const dataSeries = queryResult[sourceIndex].allDataSeries[0];
+        const columnIndex = dataSeries.headers.indexOf(
+            selectedField.fullDbName,
+        );
+        const data = parseFloat(dataSeries.rows[0][columnIndex].toFixed(2));
+        Object.assign(option, {
+            grid: {
+                width: '100%',
+                height: '100%',
+            },
+            series: this.makeSeriesItem(
+                '',
+                selectedField.fullDbName,
+                data,
+                widgetConfig,
+            ),
+        });
+
+        return option;
+    }
+}

ui/src/app/data-explorer/components/widgets/gauge/model/gauge-widget.model.ts

@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {
+    DataExplorerDataConfig,
+    DataExplorerField,
+    DataExplorerWidgetModel,
+} from '@streampipes/platform-services';
+import {
+    AxisConfig,
+    DataExplorerVisConfig,
+} from '../../../../models/dataview-dashboard.model';
+
+export interface GaugeVisConfig extends DataExplorerVisConfig {
+    selectedProperty: DataExplorerField;
+    min: number;
+    max: number;
+}
+
+export interface GaugeWidgetModel extends DataExplorerWidgetModel {
+    dataConfig: DataExplorerDataConfig;
+    visualizationConfig: GaugeVisConfig;
+}

ui/src/app/data-explorer/data-explorer.module.ts

@@ -129,6 +129,7 @@ import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-
 import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component';
 import { DataExplorerRefreshIntervalSettingsComponent } from './components/dashboard/dashboard-toolbar/refresh-interval-settings/refresh-interval-settings.component';
 import { OrderSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component';
+import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/gauge-widget-config.component';
 
 @NgModule({
     imports: [
@@ -230,6 +231,7 @@ import { OrderSelectionPanelComponent } from './components/data-view/data-view-d
         FieldSelectionPanelComponent,
         FieldSelectionComponent,
         FilterSelectionPanelComponent,
+        GaugeWidgetConfigComponent,
         GroupConfigurationComponent,
         ImageWidgetComponent,
         ImageBarComponent,

ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts

@@ -49,12 +49,16 @@ import { TimeSeriesChartWidgetModel } from '../components/widgets/time-series-ch
 import { SpTimeseriesRendererService } from '../components/widgets/time-series-chart/sp-timeseries-renderer.service';
 import { SpEchartsWidgetAppearanceConfigComponent } from '../components/widgets/utils/echarts-widget-appearance-config/echarts-widget-appearance-config.component';
 import { SpTimeSeriesAppearanceConfigComponent } from '../components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component';
+import { SpGaugeRendererService } from '../components/widgets/gauge/gauge-renderer.service';
+import { GaugeWidgetConfigComponent } from '../components/widgets/gauge/config/gauge-widget-config.component';
+import { GaugeWidgetModel } from '../components/widgets/gauge/model/gauge-widget.model';
 
 @Injectable({ providedIn: 'root' })
 export class DataExplorerWidgetRegistry {
     widgetTypes: IWidget<any>[] = [];
 
     constructor(
+        private gaugeRenderer: SpGaugeRendererService,
         private heatmapRenderer: SpHeatmapRendererService,
         private histogramRenderer: SpHistogramRendererService,
         private pieRenderer: SpPieRendererService,
@@ -65,6 +69,15 @@ export class DataExplorerWidgetRegistry {
         private timeseriesRenderer: SpTimeseriesRendererService,
     ) {
         this.widgetTypes = [
+            {
+                id: 'gauge',
+                label: 'Gauge',
+                widgetAppearanceConfigurationComponent:
+                    SpEchartsWidgetAppearanceConfigComponent,
+                widgetConfigurationComponent: GaugeWidgetConfigComponent,
+                widgetComponent: SpEchartsWidgetComponent<GaugeWidgetModel>,
+                chartRenderer: this.gaugeRenderer,
+            },
             {
                 id: 'table',
                 label: 'Table',