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 2022/08/08 08:42:28 UTC
[incubator-streampipes] 01/04: [hotfix] Fix rendering of stacked area chart
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/incubator-streampipes.git
commit c7c60745194c8eaa6a85b532d014243f1aff1bf4
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Fri Aug 5 16:12:05 2022 +0200
[hotfix] Fix rendering of stacked area chart
---
.../components/grid/dashboard-grid.component.html | 2 +-
.../panel/dashboard-panel.component.html | 1 +
.../components/widgets/base/base-echarts-widget.ts | 3 +-
.../stacked-line-chart-widget.component.ts | 45 ++++++++++++----------
4 files changed, 28 insertions(+), 23 deletions(-)
diff --git a/ui/src/app/dashboard/components/grid/dashboard-grid.component.html b/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
index d0d379531..1e9a69f15 100644
--- a/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
+++ b/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
@@ -16,7 +16,7 @@
~
-->
-<div *ngIf="dashboard.displayHeader" class="text-center">
+<div *ngIf="dashboard && dashboard.displayHeader" class="text-center">
<h2>{{dashboard.name}}</h2>
<h3>{{dashboard.description}}</h3>
</div>
diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
index a0684c5f2..2b09d951f 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
@@ -58,6 +58,7 @@
[headerVisible]="headerVisible"
(updateCallback)="updateAndQueueItemForDeletion($event)"
(deleteCallback)="removeAndQueueItemForDeletion($event)"
+ *ngIf="dashboard"
class="h-100 dashboard-grid"></dashboard-grid>
</div>
</sp-basic-view>
diff --git a/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts b/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts
index ff3773481..ebfcf10b9 100644
--- a/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts
+++ b/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts
@@ -50,8 +50,9 @@ export abstract class BaseEchartsWidget extends BaseStreamPipesWidget {
}
applySize(width: number, height: number) {
+ console.log(height);
if (this.eChartsInstance) {
- this.eChartsInstance.resize({width, height});
+ this.eChartsInstance.resize({width, height: height});
}
}
diff --git a/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.ts b/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.ts
index d7cd1da14..90c471696 100644
--- a/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.ts
@@ -24,7 +24,7 @@ import { StackedLineChartConfig } from './stacked-line-chart-config';
import { EChartsOption } from 'echarts';
import { DatalakeRestService } from '@streampipes/platform-services';
import { BaseNgxLineChartsStreamPipesWidget } from '../base/base-ngx-line-charts-widget';
-import { WidgetConfigBuilder } from "../../../registry/widget-config-builder";
+import { WidgetConfigBuilder } from '../../../registry/widget-config-builder';
@Component({
@@ -39,6 +39,12 @@ export class StackedLineChartWidgetComponent extends BaseEchartsWidget implement
timestampField: string;
chartOption = {
+ grid: {
+ left: 50,
+ top: 10,
+ right: 50,
+ bottom: 100
+ },
tooltip: {
trigger: 'axis',
formatter (params) {
@@ -71,11 +77,12 @@ export class StackedLineChartWidgetComponent extends BaseEchartsWidget implement
}
},
series: [],
- animationDuration: 500
+ animationDuration: 300
};
constructor(dataLakeService: DatalakeRestService, resizeService: ResizeService) {
super(dataLakeService, resizeService);
+ this.configReady = true;
}
protected extractConfig(extractor: StaticPropertyExtractor) {
@@ -84,38 +91,34 @@ export class StackedLineChartWidgetComponent extends BaseEchartsWidget implement
this.chartOption.yAxis.axisLabel.textStyle.color = this.selectedPrimaryTextColor;
}
- protected onEvent(event: any) {
+ protected onEvent(events: any) {
this.dynamicData = this.chartOption;
- const timestamp = event[BaseNgxLineChartsStreamPipesWidget.TIMESTAMP_KEY];
+ this.dynamicData.series = [];
+
this.valueFields.forEach(field => {
- if (this.dynamicData.series.some(d => d.name === field)) {
- const date = new Date(timestamp);
- this.dynamicData.series.find(d => d.name === field).data.push(
- {'name': date.toString(), value: [timestamp, event[field]]}
- );
- if (this.dynamicData.series.find(d => d.name === field).data.length > 5) {
- this.dynamicData.series.find(d => d.name === field).data.shift();
- }
- } else {
- this.dynamicData.series.push(this.makeNewSeries(field, timestamp, event[field]));
- }
+ const series = this.makeNewSeries(field);
+ series.data = events.map(event => {
+ const timestamp = event[BaseNgxLineChartsStreamPipesWidget.TIMESTAMP_KEY];
+ return {
+ 'name': timestamp.toString(),
+ value: [timestamp, event[field]]
+ };
+ });
+ this.dynamicData.series.push(series);
});
if (this.eChartsInstance) {
this.eChartsInstance.setOption(this.dynamicData as EChartsOption);
}
+
}
- makeNewSeries(seriesName, timestamp, value) {
- const date = new Date(timestamp);
+ makeNewSeries(seriesName: string): any {
return {
type: 'line',
smooth: true,
name: seriesName,
- data: [{
- 'name': date.toString(),
- value: [timestamp, value]
- }],
+ data: [],
};
}