feat: set up table package and add createTableItems method

.eslintrc.js

@@ -44,5 +44,9 @@ module.exports = {
       files: ['./packages/related-table/**/*'],
       extends: './packages/related-table/.eslintrc.js',
     },
+    {
+      files: ['./packages/table/**/*'],
+      extends: './packages/table/.eslintrc.js',
+    },
   ],
 };

packages/table/.eslintrc.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+const tsConfig = fs.existsSync('tsconfig.json')
+  ? path.resolve('tsconfig.json')
+  : path.resolve('./packages/table/tsconfig.json');
+
+module.exports = {
+  ignorePatterns: ['.storybook', 'stories', 'config', 'jest.config.ts', '**/*.js'],
+  plugins: [
+    'eslint-plugin-import',
+    'eslint-plugin-jsx-a11y',
+    'eslint-plugin-prettier',
+    'eslint-plugin-react',
+    'eslint-plugin-react-hooks',
+  ],
+  parserOptions: {
+    project: tsConfig,
+  },
+  rules: {
+    'import/prefer-default-export': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/comma-dangle': 'off',
+    'no-param-reassign': 'warn',
+    'react/no-array-index-key': 'warn',
+    'no-plusplus': 'warn',
+  },
+  extends: ['airbnb-typescript', 'airbnb/hooks', 'plugin:prettier/recommended'],
+};

packages/table/.gitignore

@@ -0,0 +1,8 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+build
+storybook-static
+coverage

packages/table/jest.config.js

@@ -0,0 +1,22 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  setupFilesAfterEnv: ['jest-extended/all'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  testPathIgnorePatterns: ['/dist'],
+  coverageReporters: ['text-summary', 'cobertura', 'html', 'json', 'json-summary'],
+  moduleNameMapper: {
+    '\\.(css|scss|svg)$': 'identity-obj-proxy',
+    'd3-array': '<rootDir>/node_modules/d3-array/dist/d3-array.min.js',
+  },
+
+  coverageThreshold: {
+    global: {
+      statements: 80,
+      branches: 80,
+      functions: 80,
+      lines: 80,
+    },
+  },
+};

packages/table/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@iot-app-kit/table",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.3.0",
+  "description": "IoT Application Kit - Table component",
+  "license": "Apache-2.0",
+  "main": "./dist/index.cj.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "directories": {
+    "dist": "dist"
+  },
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "*NOTICE"
+  ],
+  "author": {
+    "name": "Amazon Web Services",
+    "url": "https://aws.amazon.com/"
+  },
+  "scripts": {
+    "clean": "rm -rf dist && rm -rf screenshot",
+    "build": "yarn run clean && yarn run build:types && rollup --config rollup.config.js",
+    "build:types": "tsc --outDir dist/types --declaration true --emitDeclarationOnly true",
+    "test": "npm-run-all -p test:jest test:typescript",
+    "test:jest": "TZ=UTC jest --coverage",
+    "test.watch": "TZ=UTC jest --watchAll",
+    "jest": "TZ=UTC jest",
+    "test:typescript": "tsc",
+    "copy:license": "cp ../../LICENSE LICENSE",
+    "copy:notice": "cp ../../NOTICE NOTICE",
+    "prepack": "yarn run copy:license && yarn run copy:notice",
+    "pack": "yarn pack"
+  },
+  "devDependencies": {
+    "@aws-sdk/client-iotsitewise": "^3.39.0",
+    "@awsui/design-tokens": "^3.0.0",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@types/jest": "^28.1.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "jest": "^28.1.0",
+    "jest-cli": "^28.1.0",
+    "jest-extended": "^2.0.0",
+    "rollup-plugin-import-css": "^3.0.3",
+    "sass": "^1.30.0",
+    "ts-jest": "^28.0.4"
+  },
+  "dependencies": {
+    "@awsui/collection-hooks": "^1.0.0",
+    "@awsui/components-react": "^3.0.0",
+    "@iot-app-kit/core": "^1.3.0",
+    "@synchro-charts/core": "^4.0.0",
+    "@synchro-charts/react": "^4.0.0",
+    "d3-array": "^3.1.6",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}

packages/table/rollup.config.js

@@ -0,0 +1,20 @@
+import typescript from '@rollup/plugin-typescript';
+import pkg from './package.json';
+import css from 'rollup-plugin-import-css';
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+      {
+        file: pkg.module,
+        format: 'esm',
+      },
+    ],
+    plugins: [typescript({ tsconfig: './tsconfig.json' }), css()],
+  },
+];

packages/table/src/index.ts

@@ -0,0 +1,2 @@
+// export * from './table'; WIP
+export * from './utils';

packages/table/src/utils/createTableItems.spec.ts

@@ -0,0 +1,192 @@
+import { DataStream, Viewport } from '@iot-app-kit/core';
+import { Annotations, COMPARISON_OPERATOR, getThresholds } from '@synchro-charts/core';
+import { createTableItems } from './createTableItems';
+
+const dataStreams: DataStream[] = [
+  {
+    id: 'data-1',
+    data: [
+      { y: 0, x: new Date(2021, 1, 1, 0, 0, 1).getTime() },
+      { y: 1, x: new Date(2022, 1, 1, 0, 0, 2).getTime() },
+      { y: 2, x: new Date(2022, 1, 1, 0, 0, 3).getTime() },
+      { y: 3, x: new Date(2022, 1, 1, 0, 0, 4).getTime() },
+      { y: 4, x: new Date(2022, 1, 1, 0, 0, 5).getTime() },
+    ],
+    resolution: 0,
+  },
+  {
+    id: 'data-2',
+    data: [{ y: 11, x: new Date(2022, 1, 1, 0, 0, 1).getTime() }],
+    resolution: 0,
+  },
+];
+
+const viewport = {
+  duration: '1000',
+};
+
+const itemWithRef = [
+  {
+    value1: {
+      $cellRef: {
+        id: 'data-1',
+        resolution: 0,
+      },
+      noRef: 'No Ref',
+    },
+    value2: {
+      $cellRef: {
+        id: 'data-2',
+        resolution: 0,
+      },
+    },
+    noRef: {
+      data: [1, 2, 3, 4],
+    },
+    rawValue: 10,
+  },
+  {
+    data: {
+      $cellRef: {
+        id: 'data-1',
+        resolution: 0,
+      },
+    },
+    invalid: {
+      $cellRef: {
+        id: 'invalid-data-stream',
+        resolution: 0,
+      },
+    },
+  },
+];
+
+describe('createTableItems method', () => {
+  it('should create table items', () => {
+    const items = createTableItems({ dataStreams, viewport, items: itemWithRef });
+    expect(items).toMatchObject([
+      {
+        value1: { value: 4 },
+        value2: { value: 11 },
+        noRef: {
+          value: {
+            data: [1, 2, 3, 4],
+          },
+        },
+        rawValue: { value: 10 },
+      },
+      { data: { value: 4 }, invalid: { value: undefined } },
+    ]);
+  });
+
+  it('should be able to access value as it is a primitive value', () => {
+    const items = createTableItems({ dataStreams, viewport, items: itemWithRef });
+    const data = items[0].value1;
+    expect((data as number) + 0).toBe(4);
+  });
+
+  it('should get different data points on different viewports on the same data stream', () => {
+    const viewport1: Viewport = {
+      start: new Date(2022, 1, 1, 0, 0, 1),
+      end: new Date(2022, 1, 1, 0, 0, 2),
+    };
+
+    const viewport2 = {
+      start: new Date(2022, 1, 1, 0, 0, 1),
+      end: new Date(2022, 1, 1, 0, 0, 3),
+    };
+
+    const itemDef = [
+      {
+        value1: {
+          $cellRef: {
+            id: 'data-1',
+            resolution: 0,
+          },
+        },
+      },
+    ];
+    const items1 = createTableItems({ dataStreams, viewport: viewport1, items: itemDef });
+    const items2 = createTableItems({ dataStreams, viewport: viewport2, items: itemDef });
+
+    expect(items1).not.toEqual(items2);
+  });
+
+  it('should return empty when no data points in data stream', () => {
+    // no data point would match this viewport
+    const viewport1: Viewport = {
+      start: new Date(2020, 1, 1, 0),
+      end: new Date(2021, 1, 1, 0),
+    };
+    const itemDef = [
+      {
+        value1: {
+          $cellRef: {
+            id: 'data-1',
+            resolution: 0,
+          },
+        },
+      },
+    ];
+    const items1 = createTableItems({ dataStreams, viewport: viewport1, items: itemDef });
+    expect(items1).toMatchObject([{ value1: { value: undefined } }]);
+  });
+
+  it('should contain breached thresholds', () => {
+    const thresholdOne = {
+      value: 1,
+      color: 'red',
+      comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN,
+      dataStreamIds: ['data-1'],
+    };
+    const thresholdTwo = {
+      value: 0,
+      color: 'black',
+      comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN,
+    };
+
+    const annotations: Annotations = {
+      y: [
+        // only apply to data stream 'data-1'
+        thresholdOne,
+
+        // apply to both data stream
+        thresholdTwo,
+      ],
+    };
+
+    const items = [
+      {
+        itemOne: {
+          $cellRef: {
+            id: 'data-1',
+            resolution: 0,
+          },
+        },
+        itemTwo: {
+          $cellRef: {
+            id: 'data-2',
+            resolution: 0,
+          },
+        },
+
+        noRef: 10,
+      },
+    ];
+
+    const tableItems = createTableItems({
+      dataStreams,
+      viewport,
+      items,
+      thresholds: getThresholds(annotations),
+    });
+
+    const { itemOne, itemTwo, noRef } = tableItems[0];
+
+    expect(itemOne.threshold).toMatchObject(thresholdOne);
+    expect(itemTwo.threshold).toMatchObject(thresholdTwo);
+
+    // Item with no $cellRef does not support threshold
+    expect(noRef).toMatchObject({ threshold: undefined });
+  });
+});