You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2022/01/25 08:38:31 UTC

[incubator-streampipes] branch STREAMPIPES-507 updated (42473eb -> 26d71c6)

This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a change to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.


    from 42473eb  [STREAMPIPES-431] Add protect widget from too much data to time series chart
     new 35cfa48  [STREAMPIPES-507] Protect heatmap widget from too much data
     new 643f987  [STREAMPIPES-507] Protect map widget from too much data
     new 4783f01  [STREAMPIPES-507] Protect indicator widget from too much data
     new 26d71c6  [STREAMPIPES-507] Protect correlation and distribution widget from too much data

The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../dataexplorer/v4/query/DataExplorerQueryV4.java |  7 +-
 .../base/base-data-explorer-widget.directive.ts    |  1 +
 .../correlation-chart-widget.component.html        |  9 ++-
 .../correlation-chart-widget.component.ts          |  5 +-
 .../distribution-chart-widget.component.html       |  8 +-
 .../distribution-chart-widget.component.ts         |  1 +
 .../widgets/heatmap/heatmap-widget.component.html  | 20 ++++-
 .../widgets/heatmap/heatmap-widget.component.ts    | 86 +++++++++++-----------
 .../indicator-chart-widget.component.html          |  8 +-
 .../indicator/indicator-chart-widget.component.ts  |  1 +
 .../widgets/map/map-widget.component.html          | 25 +++++--
 .../components/widgets/map/map-widget.component.ts | 17 +++--
 .../time-series-chart-widget.component.ts          |  8 +-
 13 files changed, 128 insertions(+), 68 deletions(-)

[incubator-streampipes] 02/04: [STREAMPIPES-507] Protect map widget from too much data

Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit 643f987eb7d7e7241b3da53578d4170c1d1423ce
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Jan 25 09:25:44 2022 +0100

    [STREAMPIPES-507] Protect map widget from too much data
---
 .../widgets/map/map-widget.component.html          | 25 ++++++++++++++++------
 .../components/widgets/map/map-widget.component.ts | 17 ++++++++++-----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html
index 79aded7..fdacf07 100644
--- a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html
@@ -15,12 +15,25 @@
   ~ limitations under the License.
   ~
   -->
-  <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel">
-    <div [ngStyle]="{'width': mapWidth + 'px', 'height': mapHeight + 'px'}"
-         leaflet
-         [leafletOptions]="options"
-         (leafletMapReady)="onMapReady($event)">
-        <div *ngFor="let layer of layers" [leafletLayer]="layer"></div>
+
+<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel">
+
+    <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
+
+    <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
+
+    <sp-too-much-data
+            [amountOfEvents]="amountOfTooMuchEvents"
+            (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
+            *ngIf="showTooMuchData"></sp-too-much-data>
+
+    <div *ngIf="showData">
+        <div [ngStyle]="{'width': mapWidth + 'px', 'height': mapHeight + 'px'}"
+             leaflet
+             [leafletOptions]="options"
+             (leafletMapReady)="onMapReady($event)">
+            <div *ngFor="let layer of layers" [leafletLayer]="layer"></div>
+        </div>
     </div>
 </div>
 
diff --git a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts
index e87d054..f55326b 100644
--- a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts
@@ -109,14 +109,19 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
     const usedCenter = this.dataExplorerWidget.visualizationConfig.useLastEventCoordinates ? lastCoordinate : currentCenter;
 
     this.makeLayers(this.lastDataResults);
-    this.map.setView(usedCenter, zoom);
-    this.map.invalidateSize();
+    if (this.map) {
+      this.map.setView(usedCenter, zoom);
+      this.map.invalidateSize();
+    }
+
   }
 
   onResize(width: number, height: number) {
     this.mapWidth = width;
     this.mapHeight = height;
-    this.map.invalidateSize();
+    if (this.map) {
+      this.map.invalidateSize();
+    }
   }
 
   handleUpdatedFields(addedFields: DataExplorerField[],
@@ -128,6 +133,8 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
   }
 
   onDataReceived(spQueryResult: SpQueryResult[]) {
+
+    this.setShownComponents(false, true, false, false);
     this.lastDataResults = spQueryResult[0];
     this.makeLayers(spQueryResult[0]);
   }
@@ -137,7 +144,7 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
   }
 
   getLastCoordinate(spQueryResults: SpQueryResult) {
-    if (spQueryResults.total > 0) {
+    if (spQueryResults && spQueryResults.total > 0) {
       const result = spQueryResults.allDataSeries;
 
       const latitudeIndex = this.getColumnIndex(this.dataExplorerWidget.visualizationConfig.selectedLatitudeProperty, spQueryResults);
@@ -155,7 +162,7 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
   makeLayers(spQueryResult: SpQueryResult) {
     this.layers = [];
 
-    if (spQueryResult.total > 0) {
+    if (spQueryResult && spQueryResult.total > 0) {
 
       for (let i = 0; i <= spQueryResult.allDataSeries.length - 1; i++) {
 

[incubator-streampipes] 04/04: [STREAMPIPES-507] Protect correlation and distribution widget from too much data

Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit 26d71c691a848be2fc723937a5a00055ae783f75
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Jan 25 09:38:23 2022 +0100

    [STREAMPIPES-507] Protect correlation and distribution widget from too much data
---
 .../correlation-chart/correlation-chart-widget.component.html    | 9 ++++++++-
 .../correlation-chart/correlation-chart-widget.component.ts      | 5 +++--
 .../distribution-chart/distribution-chart-widget.component.html  | 8 +++++++-
 .../distribution-chart/distribution-chart-widget.component.ts    | 1 +
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.html
index dfc0665..cd0e477 100644
--- a/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.html
@@ -20,9 +20,16 @@
      [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
 
     <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
+
     <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
 
-      <plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
+    <sp-too-much-data
+            [amountOfEvents]="amountOfTooMuchEvents"
+            (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
+            *ngIf="showTooMuchData"></sp-too-much-data>
+
+
+    <plotly-plot *ngIf="showData"
                   [divId]="dataExplorerWidget._id"
                   class="plotly-container"
                   [data]="data"
diff --git a/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.ts
index 32d9c7e..ad0e2d4 100644
--- a/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/correlation-chart/correlation-chart-widget.component.ts
@@ -80,7 +80,7 @@ export class CorrelationChartWidgetComponent extends BaseDataExplorerWidgetDirec
   }
 
   prepareData(result: SpQueryResult[]) {
-    
+
     const xIndex = this.getColumnIndex(this.dataExplorerWidget.visualizationConfig.firstField, result[0]);
     const yIndex = this.getColumnIndex(this.dataExplorerWidget.visualizationConfig.secondField, result[0]);
 
@@ -164,7 +164,7 @@ export class CorrelationChartWidgetComponent extends BaseDataExplorerWidgetDirec
           //   row: rowCount,
           //   column: colCount,
           // },
-        };    
+        };
 
         this.data.push(component2);
 
@@ -210,6 +210,7 @@ export class CorrelationChartWidgetComponent extends BaseDataExplorerWidgetDirec
   onDataReceived(spQueryResult: SpQueryResult[]) {
     this.prepareData(spQueryResult);
     this.updateAppearance();
+    this.setShownComponents(false, true, false, false);
   }
 
   handleUpdatedFields(addedFields: DataExplorerField[], removedFields: DataExplorerField[]) {
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html
index 202fb78..074d1fa 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html
@@ -20,9 +20,15 @@
      [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
 
     <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
+
     <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
 
-    <plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
+    <sp-too-much-data
+            [amountOfEvents]="amountOfTooMuchEvents"
+            (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
+            *ngIf="showTooMuchData"></sp-too-much-data>
+
+    <plotly-plot *ngIf="showData"
                  [divId]="dataExplorerWidget._id"
                  class="plotly-container"
                  [data]="data"
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts
index 4f3862b..4bfc6fe 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts
@@ -185,6 +185,7 @@ export class DistributionChartWidgetComponent extends BaseDataExplorerWidgetDire
 
   onDataReceived(spQueryResult: SpQueryResult[]) {
     this.prepareData(spQueryResult);
+    this.setShownComponents(false, true, false, false);
   }
 
   handleUpdatedFields(addedFields: DataExplorerField[], removedFields: DataExplorerField[]) {

[incubator-streampipes] 01/04: [STREAMPIPES-507] Protect heatmap widget from too much data

Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit 35cfa4874b785d015aec15aee8735c31bcb1a1ac
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Jan 25 08:49:33 2022 +0100

    [STREAMPIPES-507] Protect heatmap widget from too much data
---
 .../dataexplorer/v4/query/DataExplorerQueryV4.java |  7 +-
 .../base/base-data-explorer-widget.directive.ts    |  1 +
 .../widgets/heatmap/heatmap-widget.component.html  | 20 ++++-
 .../widgets/heatmap/heatmap-widget.component.ts    | 86 +++++++++++-----------
 .../time-series-chart-widget.component.ts          |  8 +-
 5 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/v4/query/DataExplorerQueryV4.java b/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/v4/query/DataExplorerQueryV4.java
index de6cab2..f516128 100644
--- a/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/v4/query/DataExplorerQueryV4.java
+++ b/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/v4/query/DataExplorerQueryV4.java
@@ -87,7 +87,12 @@ public class DataExplorerQueryV4 {
     }
 
     private double getAmountOfResults(QueryResult countQueryResult) {
-        return (double) countQueryResult.getResults().get(0).getSeries().get(0).getValues().get(0).get(1);
+        if (countQueryResult.getResults().get(0).getSeries() != null &&
+                countQueryResult.getResults().get(0).getSeries().get(0).getValues() != null) {
+            return (double) countQueryResult.getResults().get(0).getSeries().get(0).getValues().get(0).get(1);
+        } else {
+            return 0.0;
+        }
     }
 
 
diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
index d097146..5ada1de 100644
--- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
+++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
@@ -75,6 +75,7 @@ export abstract class BaseDataExplorerWidgetDirective<T extends DataExplorerWidg
   }
 
   ngOnInit(): void {
+    this.showData = true;
     const sourceConfigs = this.dataExplorerWidget.dataConfig.sourceConfigs;
     this.fieldProvider = this.fieldService.generateFieldLists(sourceConfigs);
     this.widgetConfigurationSub = this.widgetConfigurationService.configurationChangedSubject.subscribe(refreshMessage => {
diff --git a/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.html b/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.html
index 230cf1d..24a404a 100644
--- a/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.html
@@ -17,9 +17,23 @@
   -->
 
   <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel">
+
+    <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
+
+    <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
+
+    <sp-too-much-data
+            [amountOfEvents]="amountOfTooMuchEvents"
+            (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
+            *ngIf="showTooMuchData"></sp-too-much-data>
+
     <div class="value-panel">
-      <div echarts [options]="option" [ngStyle]="{'width': currentWidth, 'height': '100%'}"
-           (chartInit)="onChartInit($event)" [merge]= "dynamic" *ngIf="configReady">
+      <div echarts [options]="option"
+           [ngStyle]="{'width': currentWidth, 'height': '100%'}"
+           (chartInit)="onChartInit($event)"
+           [merge]= "dynamic"
+           [ngStyle]="(showData) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"
+           *ngIf="configReady">
       </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.ts b/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.ts
index 82e6bf2..b745049 100644
--- a/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/heatmap/heatmap-widget.component.ts
@@ -25,7 +25,6 @@ import { DataExplorerField } from '../../../models/dataview-dashboard.model';
 
 import { EChartsOption } from 'echarts';
 import { ECharts } from 'echarts/core';
-import { time } from 'echarts/core';
 
 @Component({
   selector: 'sp-data-explorer-heatmap-widget',
@@ -46,6 +45,7 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
   ngOnInit(): void {
     super.ngOnInit();
     this.onSizeChanged(this.gridsterItemComponent.width, this.gridsterItemComponent.height);
+    this.initOptions();
   }
 
   ngOnDestroy(): void {
@@ -67,10 +67,12 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
   }
 
   onDataReceived(spQueryResult: SpQueryResult[]) {
+    this.setShownComponents(false, true, false, false);
     const dataBundle = this.convertData(spQueryResult);
     if (Object.keys(this.option).length > 0) {
       this.setOptions(dataBundle[0], dataBundle[1], dataBundle[2], dataBundle[3], dataBundle[4]);
     }
+
   }
 
   onChartInit(ec: ECharts) {
@@ -103,25 +105,25 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
     const aggregatedXData = [];
     result.forEach(x => {
       const localXAxisData = this.transform(x.rows, 0);
-      aggregatedXData.push(...localXAxisData)
+      aggregatedXData.push(...localXAxisData);
     });
 
     const xAxisData = aggregatedXData.sort();
-    
-    let convXAxisData = [];
+
+    const convXAxisData = [];
     xAxisData.forEach(x => {
-     const date = new Date(x);
-     const size = 2;
-     const year = date.getFullYear();
-     const month = this.pad(date.getMonth()+1, size);
-     const day = date.getDate();
-     const hours = this.pad(date.getHours(), size);
-     const minutes = this.pad(date.getMinutes(), size);
-     const seconds = this.pad(date.getSeconds(), size);
-     const milli = this.pad(date.getMilliseconds(), 3);
-
-     const strDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + "." + milli;
-     convXAxisData.push(strDate);
+      const date = new Date(x);
+      const size = 2;
+      const year = date.getFullYear();
+      const month = this.pad(date.getMonth() + 1, size);
+      const day = date.getDate();
+      const hours = this.pad(date.getHours(), size);
+      const minutes = this.pad(date.getMinutes(), size);
+      const seconds = this.pad(date.getSeconds(), size);
+      const milli = this.pad(date.getMilliseconds(), 3);
+
+      const strDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds + '.' + milli;
+      convXAxisData.push(strDate);
     });
 
     const heatIndex = this.getColumnIndex(this.dataExplorerWidget.visualizationConfig.selectedHeatProperty, spQueryResult[0]);
@@ -135,9 +137,9 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
 
       if (groupedList['tags'] != null) {
         Object.entries(groupedList['tags']).forEach(
-          ([key, value]) => {
-            groupedVal = value;
-          });
+            ([key, value]) => {
+              groupedVal = value;
+            });
       }
 
       yAxisData.push(groupedVal);
@@ -153,48 +155,48 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
 
       contentDataPure.map((cnt, colIndex) => {
         const currentX =  localXAxisData[colIndex];
-        const searchedIndex = aggregatedXData.indexOf(currentX)
+        const searchedIndex = aggregatedXData.indexOf(currentX);
         contentData.push([searchedIndex, index, cnt]);
       });
     });
 
-    const timeNames = convXAxisData
-    const groupNames = yAxisData
+    const timeNames = convXAxisData;
+    const groupNames = yAxisData;
 
     this.option['tooltip'] = {
-      formatter: function(params) {
-        const timeIndex = params.value[0]
-        const groupNameIndex = params.value[1]
+      formatter(params) {
+        const timeIndex = params.value[0];
+        const groupNameIndex = params.value[1];
 
-        const value = params.value[2]
+        const value = params.value[2];
         const time = timeNames[timeIndex];
         const groupName = groupNames[groupNameIndex];
 
         let formattedTip = '<style>' +
-                          'ul {margin: 0px; padding: 0px; list-style-type: none; text-align: left}' +
-                          '</style>' +
-                          '<ul>' +
-                          '<li><b>' + 'Time: ' + '</b>'+ time + '</li>';
+            'ul {margin: 0px; padding: 0px; list-style-type: none; text-align: left}' +
+            '</style>' +
+            '<ul>' +
+            '<li><b>' + 'Time: ' + '</b>' + time + '</li>';
 
         if (groupName !== '') {
           formattedTip = formattedTip + '<li><b>' + 'Group: ' + '</b>' + groupName + '</li>';
         }
 
         formattedTip = formattedTip + '<li><b>' + 'Value: ' + '</b>' + value + '</li>' +
-                                      '</ul>';
+            '</ul>';
 
         return formattedTip;
-       },
-       position: 'top',
-    }
+      },
+      position: 'top',
+    };
 
     if (groupNames.length === 1) {
-      this.option['tooltip']['position'] = function (point, params, dom, rect, size) {
-                                              return [point[0], '10%'];
-                                           }
+      this.option['tooltip']['position'] =  (point, params, dom, rect, size) => {
+        return [point[0], '10%'];
+      };
     }
 
-    
+
 
     return [contentData, convXAxisData, yAxisData, min, max];
   }
@@ -256,7 +258,9 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
     this.dynamic['yAxis']['data'] = yAxisData;
     this.dynamic['visualMap']['min'] = min;
     this.dynamic['visualMap']['max'] = max;
-    this.eChartsInstance.setOption(this.dynamic as EChartsOption);
+    if (this.eChartsInstance) {
+      this.eChartsInstance.setOption(this.dynamic as EChartsOption);
+    }
     this.option = this.dynamic;
   }
 
@@ -266,8 +270,8 @@ export class HeatmapWidgetComponent extends BaseDataExplorerWidgetDirective<Heat
 
   pad(num, size) {
     num = num.toString();
-    while (num.length < size) num = "0" + num;
+    while (num.length < size) { num = '0' + num; }
     return num;
-}
+  }
 
 }
diff --git a/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
index 92715c8..fb000c1 100644
--- a/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
@@ -435,14 +435,8 @@ export class TimeSeriesChartWidgetComponent extends BaseDataExplorerWidgetDirect
         });
       });
 
+      this.setShownComponents(false, true, false, false);
 
-      if (spQueryResults[0].total > 0) {
-        this.setShownComponents(false, true, false, false);
-      } else {
-        this.setShownComponents(true, false, false, false);
-      }
-
-    // }
   }
 
   handleUpdatedFields(addedFields: DataExplorerField[],

[incubator-streampipes] 03/04: [STREAMPIPES-507] Protect indicator widget from too much data

Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit 4783f01424da906cd3c7829ca87e0c29c46dc8fe
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Jan 25 09:32:37 2022 +0100

    [STREAMPIPES-507] Protect indicator widget from too much data
---
 .../widgets/indicator/indicator-chart-widget.component.html       | 8 +++++++-
 .../widgets/indicator/indicator-chart-widget.component.ts         | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.html
index 202fb78..074d1fa 100644
--- a/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.html
@@ -20,9 +20,15 @@
      [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
 
     <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
+
     <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
 
-    <plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
+    <sp-too-much-data
+            [amountOfEvents]="amountOfTooMuchEvents"
+            (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
+            *ngIf="showTooMuchData"></sp-too-much-data>
+
+    <plotly-plot *ngIf="showData"
                  [divId]="dataExplorerWidget._id"
                  class="plotly-container"
                  [data]="data"
diff --git a/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.ts
index 1b32bbc..615c719 100644
--- a/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/indicator/indicator-chart-widget.component.ts
@@ -102,6 +102,7 @@ export class IndicatorChartWidgetComponent extends BaseDataExplorerWidgetDirecti
 
   onDataReceived(spQueryResult: SpQueryResult[]) {
     this.prepareData(spQueryResult);
+    this.setShownComponents(false, true, false, false);
   }
 
   handleUpdatedFields(addedFields: DataExplorerField[], removedFields: DataExplorerField[]) {