You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2024/03/21 12:46:51 UTC
(streampipes) branch dev updated: feat(#2587): Add data zoom option (#2588)
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 ab22143e74 feat(#2587): Add data zoom option (#2588)
ab22143e74 is described below
commit ab22143e74a428df536d043e131ed60ade080560
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Thu Mar 21 13:46:41 2024 +0100
feat(#2587): Add data zoom option (#2588)
* feat(#2587): Add data zoom option
* Fix visibility of data zoom
---
.../time-series-appearance-config.component.html | 31 +++++++++++++++
.../time-series-appearance-config.component.ts | 45 +++++++++++++++++++++
.../sp-timeseries-renderer.service.ts | 35 ++++++++++++++--
.../data-zoom-config.component.html | 46 ++++++++++++++++++++++
.../data-zoom-config/data-zoom-config.component.ts | 39 ++++++++++++++++++
.../time-series-item-config.component.html | 18 ++++-----
ui/src/app/data-explorer/data-explorer.module.ts | 4 ++
.../models/dataview-dashboard.model.ts | 10 +++++
.../registry/data-explorer-widget-registry.ts | 3 +-
ui/src/scss/sp/layout.scss | 4 ++
10 files changed, 221 insertions(+), 14 deletions(-)
diff --git a/ui/src/app/data-explorer/components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component.html b/ui/src/app/data-explorer/components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component.html
new file mode 100644
index 0000000000..971b5c850c
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component.html
@@ -0,0 +1,31 @@
+<!--
+ ~ 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.
+ ~
+ -->
+
+<div fxLayout="column">
+ <sp-echarts-widget-appearance-config
+ [appearanceConfig]="appearanceConfig"
+ [widgetId]="widgetId"
+ >
+ </sp-echarts-widget-appearance-config>
+
+ <sp-data-zoom-config
+ [appearanceConfig]="appearanceConfig"
+ (configChangedEmitter)="triggerViewUpdate()"
+ >
+ </sp-data-zoom-config>
+</div>
diff --git a/ui/src/app/data-explorer/components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component.ts b/ui/src/app/data-explorer/components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component.ts
new file mode 100644
index 0000000000..639e29fdae
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/time-series-chart/appearance-config/time-series-appearance-config.component.ts
@@ -0,0 +1,45 @@
+/*
+ * 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, Input } from '@angular/core';
+import { TimeSeriesAppearanceConfig } from '../../../../models/dataview-dashboard.model';
+import { WidgetConfigurationService } from '../../../../services/widget-configuration.service';
+
+@Component({
+ selector: 'sp-time-series-appearance-config',
+ templateUrl: './time-series-appearance-config.component.html',
+})
+export class SpTimeSeriesAppearanceConfigComponent {
+ @Input()
+ appearanceConfig: TimeSeriesAppearanceConfig;
+
+ @Input()
+ widgetId: string;
+
+ constructor(
+ private widgetConfigurationService: WidgetConfigurationService,
+ ) {}
+
+ triggerViewUpdate() {
+ this.widgetConfigurationService.notify({
+ widgetId: this.widgetId,
+ refreshView: true,
+ refreshData: false,
+ });
+ }
+}
diff --git a/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts b/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts
index 73e027632f..565f12a741 100644
--- a/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts
+++ b/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts
@@ -16,7 +16,12 @@
*
*/
-import { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts';
+import {
+ BarSeriesOption,
+ EChartsOption,
+ LineSeriesOption,
+ ScatterSeriesOption,
+} from 'echarts';
import { SeriesOption } from 'echarts/types/src/util/types';
import { Injectable } from '@angular/core';
import { TimeSeriesChartWidgetModel } from './model/time-series-chart-widget.model';
@@ -86,8 +91,11 @@ export class SpTimeseriesRendererService extends SpBaseEchartsRenderer<TimeSerie
},
);
+ this.addDataZoomOptions(widgetConfig, options);
+
const showTooltip =
widgetConfig.baseAppearanceConfig.chartAppearance?.showTooltip;
+
Object.assign(options, {
series: finalSeries,
dataset:
@@ -152,13 +160,15 @@ export class SpTimeseriesRendererService extends SpBaseEchartsRenderer<TimeSerie
y: fieldIndex,
},
datasetIndex,
- } as LineSeriesOption | BarSeriesOption;
+ } as LineSeriesOption | BarSeriesOption | ScatterSeriesOption;
if (seriesType === 'line') {
this.appendLineOptions(
series as LineSeriesOption,
widgetConfig,
field,
);
+ } else if (seriesType === 'scatter') {
+ this.appendScatterOptions(series as ScatterSeriesOption);
}
return series;
}
@@ -166,10 +176,12 @@ export class SpTimeseriesRendererService extends SpBaseEchartsRenderer<TimeSerie
private makeSeriesType(
displayTypes: Record<string, string>,
field: DataExplorerField,
- ) {
+ ): 'bar' | 'line' | 'scatter' {
const type = this.getDisplayType(displayTypes, field);
if (type === 'bar') {
return 'bar';
+ } else if (type === 'normal_markers') {
+ return 'scatter';
} else {
return 'line';
}
@@ -182,6 +194,10 @@ export class SpTimeseriesRendererService extends SpBaseEchartsRenderer<TimeSerie
return displayTypes[field.fullDbName + field.sourceIndex];
}
+ private appendScatterOptions(series: ScatterSeriesOption): void {
+ series.symbolSize = 4;
+ }
+
private appendLineOptions(
series: LineSeriesOption,
conf: TimeSeriesChartWidgetModel,
@@ -225,6 +241,19 @@ export class SpTimeseriesRendererService extends SpBaseEchartsRenderer<TimeSerie
}
}
+ private addDataZoomOptions(
+ config: TimeSeriesChartWidgetModel,
+ options: EChartsOption,
+ ): void {
+ Object.assign(options, {
+ dataZoom: config.baseAppearanceConfig.dataZoom?.show
+ ? {
+ type: config.baseAppearanceConfig.dataZoom?.type,
+ }
+ : [],
+ });
+ }
+
private addAxisOptions(
config: TimeSeriesChartWidgetModel,
options: EChartsOption,
diff --git a/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.html b/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.html
new file mode 100644
index 0000000000..c5c4d4a684
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.html
@@ -0,0 +1,46 @@
+<!--
+ ~ 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-configuration-box title="Data Zoom">
+ <div fxLayout="column">
+ <mat-checkbox
+ [(ngModel)]="appearanceConfig.dataZoom.show"
+ (ngModelChange)="configChangedEmitter.emit()"
+ >Active
+ </mat-checkbox>
+
+ <div fxFlex="100" fxLayoutAlign="start center" class="ml-10">
+ <div fxLayoutAlign="start center">
+ <span>Type</span>
+ </div>
+ <span fxFlex></span>
+ <div class="form-field-small w-100" fxLayoutAlign="end center">
+ <mat-form-field appearance="outline" color="accent" fxFlex="30">
+ <mat-select
+ (ngModelChange)="configChangedEmitter.emit()"
+ [(ngModel)]="appearanceConfig.dataZoom.type"
+ [disabled]="!appearanceConfig.dataZoom.show"
+ >
+ <mat-option value="inside">Wheel</mat-option>
+ <mat-option value="slider">Slider</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ </div>
+</sp-configuration-box>
diff --git a/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts b/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts
new file mode 100644
index 0000000000..fadab18ace
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts
@@ -0,0 +1,39 @@
+/*
+ * 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, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { TimeSeriesAppearanceConfig } from '../../../../models/dataview-dashboard.model';
+
+@Component({
+ selector: 'sp-data-zoom-config',
+ templateUrl: './data-zoom-config.component.html',
+})
+export class SpDataZoomConfigComponent implements OnInit {
+ @Input()
+ appearanceConfig: TimeSeriesAppearanceConfig;
+
+ @Output()
+ configChangedEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+ ngOnInit(): void {
+ this.appearanceConfig.dataZoom ??= {
+ show: true,
+ type: 'inside',
+ };
+ }
+}
diff --git a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/time-series-item-config/time-series-item-config.component.html b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/time-series-item-config/time-series-item-config.component.html
index 6d47d0081e..3c3ce3e51f 100644
--- a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/time-series-item-config/time-series-item-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/time-series-item-config/time-series-item-config.component.html
@@ -23,13 +23,14 @@
[checked]="isSelected(field)"
(change)="toggleFieldSelection(field)"
>
- <b>{{ field.runtimeName }}</b>
- {{
- '(' +
+ <b>{{ field.runtimeName }}</b
+ ><br />
+ <small>
+ {{
(field.aggregation ? field.aggregation + ', ' : '') +
- field.measure +
- ')'
- }}
+ field.measure
+ }}</small
+ >
</mat-checkbox>
<span fxFlex></span>
<span
@@ -130,6 +131,7 @@
"
(selectionChange)="viewRefreshEmitter.emit()"
>
+ <mat-option [value]="'bar'">Bar</mat-option>
<mat-option [value]="'lines'">Line</mat-option>
<mat-option [value]="'normal_markers'"
>Scatter
@@ -137,10 +139,6 @@
<mat-option [value]="'lines+markers'"
>Scattered Line
</mat-option>
- <mat-option [value]="'bar'">Bar</mat-option>
- <mat-option [value]="'symbol_markers'"
- >Symbol
- </mat-option>
</mat-select>
</mat-form-field>
</div>
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 67163e8087..32a124f707 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -90,6 +90,8 @@ import { SpVisualizationConfigOuterComponent } from './components/widgets/utils/
import { SpSelectAxisOptionsComponent } from './components/widgets/utils/select-axis-options/select-axis-options.component';
import { SpTimeseriesItemConfigComponent } from './components/widgets/utils/select-color-properties/time-series-item-config/time-series-item-config.component';
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 { SpDataZoomConfigComponent } from './components/widgets/utils/data-zoom-config/data-zoom-config.component';
@NgModule({
imports: [
@@ -188,6 +190,8 @@ import { SpEchartsWidgetAppearanceConfigComponent } from './components/widgets/u
SpSelectAxisOptionsComponent,
SpTimeseriesItemConfigComponent,
SpEchartsWidgetAppearanceConfigComponent,
+ SpTimeSeriesAppearanceConfigComponent,
+ SpDataZoomConfigComponent,
],
providers: [SemanticTypeUtilsService],
exports: [],
diff --git a/ui/src/app/data-explorer/models/dataview-dashboard.model.ts b/ui/src/app/data-explorer/models/dataview-dashboard.model.ts
index c3141f2ebc..e6d9ae5199 100644
--- a/ui/src/app/data-explorer/models/dataview-dashboard.model.ts
+++ b/ui/src/app/data-explorer/models/dataview-dashboard.model.ts
@@ -85,6 +85,16 @@ export interface WidgetChartAppearanceConfig {
showTooltip: boolean;
}
+export interface DataZoomConfig {
+ show: boolean;
+ type: 'slider' | 'inside';
+}
+
+export interface TimeSeriesAppearanceConfig
+ extends WidgetEchartsAppearanceConfig {
+ dataZoom: DataZoomConfig;
+}
+
export interface WidgetEchartsAppearanceConfig {
chartAppearance: WidgetChartAppearanceConfig;
}
diff --git a/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts b/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
index d36f5105e0..d08204cc34 100644
--- a/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
+++ b/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
@@ -48,6 +48,7 @@ import { SpIndicatorRendererService } from '../components/widgets/indicator/indi
import { TimeSeriesChartWidgetModel } from '../components/widgets/time-series-chart/model/time-series-chart-widget.model';
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';
@Injectable({ providedIn: 'root' })
export class DataExplorerWidgetRegistry {
@@ -89,7 +90,7 @@ export class DataExplorerWidgetRegistry {
id: 'time-series-chart',
label: 'Time Series Chart',
widgetAppearanceConfigurationComponent:
- SpEchartsWidgetAppearanceConfigComponent,
+ SpTimeSeriesAppearanceConfigComponent,
widgetConfigurationComponent:
TimeSeriesChartWidgetConfigComponent,
widgetComponent:
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index 3fde73aeb6..76195f9bb7 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -92,6 +92,10 @@
margin-left: 5px;
}
+.ml-10 {
+ margin-left: 10px;
+}
+
.mr-15 {
margin-right: 15px;
}