fix: use viewport from provider (#515)

awslabs · Jan 25, 2023 · eb515a5 · eb515a5
1 parent e6490b6
commit eb515a5
Show file tree

Hide file tree

Showing 10 changed files with 633 additions and 561 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -56,7 +56,7 @@
     "@iot-app-kit/source-iotsitewise": "^2.6.4",
     "@iot-app-kit/table": "^2.6.4",
     "@stencil/core": "^2.7.0",
-    "@synchro-charts/core": "^7.0.0",
+    "@synchro-charts/core": "^7.1.5",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
@@ -88,4 +88,4 @@
     "nth-check": "^2.1.1"
   },
   "license": "Apache-2.0"
-}
+}
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -151,7 +151,6 @@ export namespace Components {
     interface IotTimeSeriesConnector {
         "annotations": Annotations;
         "assignDefaultColors": boolean | undefined;
-        "initialViewport": Viewport;
         "provider": Provider<TimeSeriesData[]>;
         "renderFunc": (data: TimeSeriesData) => void;
         "styleSettings": StyleSettingsMap | undefined;
@@ -437,7 +436,6 @@ declare namespace LocalJSX {
     interface IotTimeSeriesConnector {
         "annotations"?: Annotations;
         "assignDefaultColors"?: boolean | undefined;
-        "initialViewport"?: Viewport;
         "provider"?: Provider<TimeSeriesData[]>;
         "renderFunc"?: (data: TimeSeriesData) => void;
         "styleSettings"?: StyleSettingsMap | undefined;

diff --git a/packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx b/packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx
@@ -103,10 +103,10 @@ export class IotBarChart {
         assignDefaultColors
         annotations={this.annotations}
         supportedDataTypes={['NUMBER']}
-        renderFunc={({ dataStreams, annotations }) => (
+        renderFunc={({ dataStreams, annotations, viewport }) => (
           <sc-bar-chart
             widgetId={this.widgetId}
-            viewport={this.viewport}
+            viewport={viewport}
             size={this.size}
             movement={this.movement}
             scale={this.scale}

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.tsx b/packages/components/src/components/iot-kpi/iot-kpi.tsx
@@ -78,11 +78,11 @@ export class IotKpi {
         styleSettings={this.styleSettings}
         annotations={this.annotations}
         supportedDataTypes={['NUMBER', 'STRING', 'BOOLEAN']}
-        renderFunc={({ dataStreams, annotations }) => (
+        renderFunc={({ dataStreams, annotations, viewport }) => (
           <sc-kpi
             dataStreams={dataStreams as SynchroChartsDataStream[]}
             annotations={annotations}
-            viewport={this.viewport}
+            viewport={viewport}
             isEditing={this.isEditing}
             widgetId={this.widgetId}
             messageOverrides={this.messageOverrides}

diff --git a/packages/components/src/components/iot-line-chart/iot-line-chart.tsx b/packages/components/src/components/iot-line-chart/iot-line-chart.tsx
@@ -95,11 +95,11 @@ export class IotLineChart {
         assignDefaultColors
         annotations={this.annotations}
         supportedDataTypes={['NUMBER']}
-        renderFunc={({ dataStreams, annotations }) => {
+        renderFunc={({ dataStreams, annotations, viewport }) => {
           return (
             <sc-line-chart
               widgetId={this.widgetId}
-              viewport={this.viewport}
+              viewport={viewport}
               size={this.size}
               movement={this.movement}
               scale={this.scale}

diff --git a/packages/components/src/components/iot-scatter-chart/iot-scatter-chart.tsx b/packages/components/src/components/iot-scatter-chart/iot-scatter-chart.tsx
@@ -98,12 +98,12 @@ export class IotScatterChart {
         assignDefaultColors
         annotations={this.annotations}
         supportedDataTypes={['NUMBER']}
-        renderFunc={({ dataStreams, annotations }) => {
+        renderFunc={({ dataStreams, annotations, viewport }) => {
           return (
             <sc-scatter-chart
               dataStreams={dataStreams as SynchroChartsDataStream[]}
               annotations={annotations}
-              viewport={this.viewport}
+              viewport={viewport}
               isEditing={this.isEditing}
               widgetId={this.widgetId}
               movement={this.movement}

diff --git a/packages/components/src/components/iot-status-grid/iot-status-grid.tsx b/packages/components/src/components/iot-status-grid/iot-status-grid.tsx
@@ -78,11 +78,11 @@ export class IotStatusGrid {
         styleSettings={this.styleSettings}
         annotations={this.annotations}
         supportedDataTypes={['NUMBER', 'STRING', 'BOOLEAN']}
-        renderFunc={({ dataStreams, annotations }) => (
+        renderFunc={({ dataStreams, annotations, viewport }) => (
           <sc-status-grid
             dataStreams={dataStreams as SynchroChartsDataStream[]}
             annotations={annotations}
-            viewport={this.viewport}
+            viewport={viewport}
             isEditing={this.isEditing}
             widgetId={this.widgetId}
             labelsConfig={this.labelsConfig}

diff --git a/packages/components/src/components/iot-status-timeline/iot-status-timeline.tsx b/packages/components/src/components/iot-status-timeline/iot-status-timeline.tsx
@@ -98,15 +98,15 @@ export class IotStatusTimeline {
         assignDefaultColors
         annotations={this.annotations}
         supportedDataTypes={['NUMBER', 'STRING', 'BOOLEAN']}
-        renderFunc={({ dataStreams, annotations }) => {
+        renderFunc={({ dataStreams, annotations, viewport }) => {
           const alarmStreamAnnotations = getAlarmStreamAnnotations({ annotations, dataStreams });
           const combinedAnnotations = combineAnnotations(this.annotations, alarmStreamAnnotations);
 
           return (
             <sc-status-timeline
               dataStreams={dataStreams as SynchroChartsDataStream[]}
               annotations={combinedAnnotations}
-              viewport={this.viewport}
+              viewport={viewport}
               isEditing={this.isEditing}
               widgetId={this.widgetId}
               gestures={this.gestures}

diff --git a/packages/components/src/components/iot-time-series-connector/iot-time-series-connector.tsx b/packages/components/src/components/iot-time-series-connector/iot-time-series-connector.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop, State, Watch } from '@stencil/core';
-import { Provider, StyleSettingsMap, TimeSeriesData, Viewport, DataType } from '@iot-app-kit/core';
+import { Provider, StyleSettingsMap, TimeSeriesData, DataType } from '@iot-app-kit/core';
 import { bindStylesToDataStreams } from '../common/bindStylesToDataStreams';
 import { combineAnnotations } from '../common/combineAnnotations';
 import { Annotations } from '@synchro-charts/core';
@@ -33,8 +33,6 @@ export class IotTimeSeriesConnector {
 
   @Prop() renderFunc: (data: TimeSeriesData) => void;
 
-  @Prop() initialViewport: Viewport;
-
   @Prop() styleSettings: StyleSettingsMap | undefined;
 
   @Prop() assignDefaultColors: boolean | undefined;