fix(ReactComponents): configure table, kpi and status to always fetch…

… raw data

package.json

@@ -16,7 +16,8 @@
     "configuration/*"
   ],
   "scripts": {
-    "bootstrap": "npm install --workspaces --include-workspace-root && npm run build",
+    "install-ws": "npm install --workspaces --include-workspace-root",
+    "bootstrap": "npm run install-ws && npm run build",
     "start": "cd packages/components && npm start",
     "build": "turbo run build",
     "clean": "git clean -dxf -e /.idea -e /.vscode -e creds.json",

packages/react-components/package.json

@@ -59,6 +59,7 @@
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
     "@types/color": "^3.0.3",
     "@types/d3": "^7.4.0",
     "@types/dompurify": "2.3.3",

packages/react-components/src/components/bar-chart/barChart.spec.tsx

@@ -18,10 +18,10 @@ it('renders', async () => {
   ]);
 
   const { container } = render(<BarChart queries={[query]} viewport={VIEWPORT} />);
-  const chart = container.querySelector('iot-app-kit-vis-bar-chart');
+  const widget = container.querySelector('iot-app-kit-vis-bar-chart');
 
-  expect(chart).not.toBeNull();
+  expect(widget).not.toBeNull();
 
-  expect(chart).toHaveProperty('viewport.duration', VIEWPORT.duration);
-  expect(chart).toHaveProperty('dataStreams', [DATA_STREAM]);
+  expect(widget).toHaveProperty('viewport', expect.objectContaining(VIEWPORT));
+  expect(widget).toHaveProperty('dataStreams', [DATA_STREAM]);
 });

packages/react-components/src/components/dial/dial.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockTimeSeriesDataQuery } from '@iot-app-kit/testing-util';
+import { Dial } from './dial';
+
+const VIEWPORT = { duration: '5m' };
+
+const LATEST_VALUE = 123.2;
+const DATA_STREAM = {
+  id: 'abc-1',
+  data: [{ x: new Date(2000, 0, 0).getTime(), y: LATEST_VALUE }],
+  resolution: 0,
+  name: 'some name',
+  unit: 'mph',
+};
+
+it('renders', async () => {
+  const query = mockTimeSeriesDataQuery([
+    {
+      dataStreams: [DATA_STREAM],
+      viewport: VIEWPORT,
+      thresholds: [],
+    },
+  ]);
+
+  render(<Dial query={query} viewport={VIEWPORT} />);
+
+  expect(screen.queryByText(DATA_STREAM.unit)).not.toBeNull();
+  expect(screen.queryByText(LATEST_VALUE)).not.toBeNull();
+});

packages/react-components/src/components/dial/dial.tsx

@@ -31,7 +31,9 @@ export const Dial = ({
   const { dataStreams } = useTimeSeriesData({
     viewport: passedInViewport,
     queries: [query],
-    settings: { fetchMostRecentBeforeEnd: true },
+    // Currently set to only fetch raw data.
+    // TODO: Support all resolutions and aggregation types
+    settings: { fetchMostRecentBeforeEnd: true, resolution: '0' },
     styles,
   });
   const { viewport } = useViewport();

packages/react-components/src/components/kpi/kpi.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockTimeSeriesDataQuery } from '@iot-app-kit/testing-util';
+import { Kpi } from './kpi';
+
+const VIEWPORT = { duration: '5m' };
+
+const LATEST_VALUE = 123.2;
+const DATA_STREAM = {
+  id: 'abc-1',
+  data: [{ x: new Date(2000, 0, 0).getTime(), y: LATEST_VALUE }],
+  resolution: 0,
+  name: 'some name',
+  unit: 'mph',
+};
+
+it('renders', async () => {
+  const query = mockTimeSeriesDataQuery([
+    {
+      dataStreams: [DATA_STREAM],
+      viewport: VIEWPORT,
+      thresholds: [],
+    },
+  ]);
+
+  render(<Kpi query={query} viewport={VIEWPORT} />);
+
+  expect(screen.queryByText(DATA_STREAM.unit)).not.toBeNull();
+  expect(screen.queryByText(LATEST_VALUE)).not.toBeNull();
+});

packages/react-components/src/components/kpi/kpi.tsx

@@ -23,7 +23,9 @@ export const Kpi = ({
   const { dataStreams, thresholds: queryThresholds } = useTimeSeriesData({
     viewport: passedInViewport,
     queries: [query],
-    settings: { fetchMostRecentBeforeEnd: true },
+    // Currently set to only fetch raw data.
+    // TODO: Support all resolutions and aggregation types
+    settings: { fetchMostRecentBeforeEnd: true, resolution: '0' },
     styles,
   });
   const { viewport } = useViewport();

packages/react-components/src/components/line-chart/lineChart.spec.tsx

@@ -18,10 +18,10 @@ it('renders', async () => {
   ]);
 
   const { container } = render(<LineChart queries={[query]} viewport={VIEWPORT} />);
-  const chart = container.querySelector('iot-app-kit-vis-line-chart');
+  const widget = container.querySelector('iot-app-kit-vis-line-chart');
 
-  expect(chart).not.toBeNull();
+  expect(widget).not.toBeNull();
 
-  expect(chart).toHaveProperty('viewport.duration', VIEWPORT.duration);
-  expect(chart).toHaveProperty('dataStreams', [DATA_STREAM]);
+  expect(widget).toHaveProperty('viewport', expect.objectContaining(VIEWPORT));
+  expect(widget).toHaveProperty('dataStreams', [DATA_STREAM]);
 });

packages/react-components/src/components/scatter-chart/scatterChart.spec.tsx

@@ -18,10 +18,10 @@ it('renders', async () => {
   ]);
 
   const { container } = render(<ScatterChart queries={[query]} viewport={VIEWPORT} />);
-  const chart = container.querySelector('iot-app-kit-vis-scatter-chart');
+  const widget = container.querySelector('iot-app-kit-vis-scatter-chart');
 
-  expect(chart).not.toBeNull();
+  expect(widget).not.toBeNull();
 
-  expect(chart).toHaveProperty('viewport.duration', VIEWPORT.duration);
-  expect(chart).toHaveProperty('dataStreams', [DATA_STREAM]);
+  expect(widget).toHaveProperty('viewport', expect.objectContaining(VIEWPORT));
+  expect(widget).toHaveProperty('dataStreams', [DATA_STREAM]);
 });

packages/react-components/src/components/status/status.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockTimeSeriesDataQuery } from '@iot-app-kit/testing-util';
+import { Status } from './status';
+
+const VIEWPORT = { duration: '5m' };
+
+const LATEST_VALUE = 123.2;
+const DATA_STREAM = {
+  id: 'abc-1',
+  data: [{ x: new Date(2000, 0, 0).getTime(), y: LATEST_VALUE }],
+  resolution: 0,
+  name: 'some name',
+  unit: 'mph',
+};
+
+it('renders', async () => {
+  const query = mockTimeSeriesDataQuery([
+    {
+      dataStreams: [DATA_STREAM],
+      viewport: VIEWPORT,
+      thresholds: [],
+    },
+  ]);
+
+  render(<Status query={query} viewport={VIEWPORT} />);
+
+  expect(screen.queryByText(DATA_STREAM.unit)).not.toBeNull();
+  expect(screen.queryByText(LATEST_VALUE)).not.toBeNull();
+});

packages/react-components/src/components/status/status.tsx

@@ -30,7 +30,9 @@ export const Status = ({
   const { dataStreams, thresholds: queryThresholds } = useTimeSeriesData({
     viewport: passedInViewport,
     queries: [query],
-    settings: { fetchMostRecentBeforeEnd: true },
+    // Currently set to only fetch raw data.
+    // TODO: Support all resolutions and aggregation types
+    settings: { fetchMostRecentBeforeEnd: true, resolution: '0' },
     styles,
   });
 

packages/react-components/src/components/table/table.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { mockTimeSeriesDataQuery } from '@iot-app-kit/testing-util';
+import { DataStream } from '@iot-app-kit/core';
+import { Table } from './table';
+
+const VIEWPORT = { duration: '5m' };
+
+const DATA_STREAM: DataStream = { id: 'abc-1', data: [], resolution: 0, name: 'my-name' };
+
+it('renders', async () => {
+  const query = mockTimeSeriesDataQuery([
+    {
+      dataStreams: [DATA_STREAM],
+      viewport: VIEWPORT,
+      thresholds: [],
+    },
+  ]);
+
+  expect(() => {
+    render(<Table columnDefinitions={[]} items={[]} queries={[query]} viewport={VIEWPORT} />);
+  }).not.toThrowError();
+});

packages/react-components/src/components/table/table.tsx

@@ -34,7 +34,9 @@ export const Table = ({
   const { dataStreams, thresholds: queryThresholds } = useTimeSeriesData({
     viewport: passedInViewport,
     queries,
-    settings: { fetchMostRecentBeforeEnd: true },
+    // Currently set to only fetch raw data.
+    // TODO: Support all resolutions and aggregation types
+    settings: { fetchMostRecentBeforeEnd: true, resolution: '0' },
     styles,
   });
   const { viewport } = useViewport();