refactor: use typescript

.eslintrc.yml

@@ -4,14 +4,38 @@ env:
 extends:
   - airbnb
   - prettier
-parser: 'babel-eslint'
+parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaFeatures:
     jsx: true
   ecmaVersion: 12
   sourceType: module
 plugins:
   - prettier
-rules: {
-  import/no-extraneous-dependencies: off
-}
+rules:
+  import/no-extraneous-dependencies: 0
+  no-use-before-define: 0
+overrides:
+  - files:
+    - src/**/*.tsx
+    - src/**/*.ts
+    parser: '@typescript-eslint/parser'
+    parserOptions:
+      project: './tsconfig.json'
+      ecmaFeatures:
+        jsx: true
+        ecmaVersion: 2018
+        sourceType: module
+    plugins:
+      - react
+      - '@typescript-eslint'
+    extends:
+      - 'plugin:@typescript-eslint/eslint-recommended'
+      - 'plugin:@typescript-eslint/recommended'
+      - airbnb-typescript
+      - prettier
+    rules:
+      import/no-extraneous-dependencies: 0
+  - files:
+    - src/**/*.jsx
+    - src/**/*.js

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   plugins: ['react-native-web'],
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/typescript'],
 };

nebula.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  build: {
+    typescript: true,
+  },
+};

package.json

@@ -22,36 +22,48 @@
   "module": "dist/sn-pivot-table.esm.js",
   "scripts": {
     "build": "nebula build",
-    "lint": "eslint src",
+    "lint": "eslint src/",
     "start": "nebula serve",
-    "sense": "nebula sense --ext src/ext.js --meta src/meta.json"
+    "sense": "nebula sense --ext src/ext.js --meta src/meta.json",
+    "types:check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.15.0",
     "@nebula.js/cli": "1.7.0",
     "@nebula.js/cli-build": "1.7.0",
     "@nebula.js/cli-sense": "1.7.0",
     "@nebula.js/cli-serve": "1.7.0",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-react-native-web": "^0.17.1",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "@rollup/plugin-typescript": "8.2.5",
+    "@types/react": "17.0.24",
+    "@types/react-dom": "17.0.9",
+    "@types/react-native": "0.65.3",
+    "@typescript-eslint/eslint-plugin": "4.32.0",
+    "@typescript-eslint/parser": "4.32.0",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-react-native-web": "0.17.1",
+    "eslint": "7.32.0",
+    "eslint-config-airbnb": "18.2.1",
     "eslint-config-airbnb-base": "14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-config-airbnb-typescript": "14.0.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-import-resolver-typescript": "2.5.0",
+    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mocha": "9.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-native-paper": "^4.9.2",
-    "react-native-web": "^0.17.1",
-    "shx": "^0.3.3"
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.26.0",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "prettier": "2.4.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native-paper": "4.9.2",
+    "react-native-web": "0.17.1",
+    "shx": "0.3.3",
+    "tslib": "2.3.1",
+    "typescript": "4.4.3"
   },
   "peerDependencies": {
-    "@nebula.js/stardust": "^1.x"
+    "@nebula.js/stardust": "1.x"
   }
 }

src/index.js → src/index.ts

@@ -1,9 +1,10 @@
-import { useElement, useStaleLayout, useEffect, usePromise, useState, useModel } from '@nebula.js/stardust';
+import { useElement, useStaleLayout, useEffect, usePromise, useModel } from '@nebula.js/stardust';
 import properties from './object-properties';
 import data from './data';
 import manageData from './pivot-table/handle-data';
 import { render, teardown } from './pivot-table/Root';
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default function supernova() {
   return {
     qae: {
@@ -16,8 +17,8 @@ export default function supernova() {
       const element = useElement();
       const layout = useStaleLayout();
       const model = useModel();
-      const [pageInfo] = useState(() => ({ top: 0, height: 100 }));
-      const [pivotData] = usePromise(() => manageData(layout, pageInfo), [layout, pageInfo]);
+      // const [pageInfo] = useState(() => ({ top: 0, height: 100 }));
+      const [pivotData] = usePromise(() => manageData(layout), [layout]);
 
       useEffect(() => {
         if (layout && pivotData && model) {

src/object-properties.js → src/object-properties.ts

@@ -20,6 +20,16 @@ const properties = {
     qSuppressZero: false,
     /** @type {boolean} */
     qShowTotalsAbove: true,
+    qNoOfLeftDims: 2,
+    qInitialDataFetch: [
+      {
+        qTop: 0,
+        qLeft: 0,
+        qWidth: 50,
+        qHeight: 50,
+      },
+    ],
+    qIndentMode: true,
   },
   /**
    * Show title for the visualization

src/pivot-table/Root.tsx

@@ -0,0 +1,12 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import PivotTable, { PivotTableProps } from './components/PivotTable';
+
+export function render(rootElement: Element, props: PivotTableProps): void {
+  // eslint-disable-next-line
+  ReactDOM.render(<PivotTable {...props} />, rootElement);
+}
+
+export function teardown(rootElement: Element): void {
+  ReactDOM.unmountComponentAtNode(rootElement);
+}

src/pivot-table/components/HeaderCell.jsx → src/pivot-table/components/HeaderCell.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
 import { DataTable, Button } from 'react-native-paper';
+import { Model } from '../../types';
 
-const HeaderCell = ({ element, model, rowNumber, indexKey }) => {
+export interface HeaderCellProps {
+  element: { qCanExpand: boolean; qCanCollapse: boolean; qText: string; column: number };
+  model: Model;
+  rowNumber: number;
+  indexKey: string;
+}
+
+const HeaderCell = ({ element, model, rowNumber, indexKey }: HeaderCellProps): JSX.Element => {
   const { qCanExpand, qCanCollapse, qText, column } = element;
   const openColumn = () => {
     model.expandLeft('/qHyperCubeDef', rowNumber, column, false);
   };
   const collapseColumn = () => {
     model.collapseLeft('/qHyperCubeDef', rowNumber, column, false);
   };
+
   return (
     <DataTable.Cell key={indexKey}>
       {qCanExpand && <Button onPress={openColumn}>+ {qText}</Button>}

src/pivot-table/components/PivotTable.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DataTable } from 'react-native-paper';
+import HeaderCell from './HeaderCell';
+import { Model, PivotTableData } from '../../types';
+
+export interface PivotTableProps {
+  pivotData: PivotTableData;
+  model: Model;
+}
+
+const PivotTable = ({ pivotData: { leftColumns, topColumns, rows }, model }: PivotTableProps): JSX.Element => (
+  <DataTable style={{ height: '100%' }}>
+    <DataTable.Header>
+      {leftColumns.headers.map((header) => (
+        <DataTable.Title>{header.qFallbackTitle}</DataTable.Title>
+      ))}
+      {topColumns.items.map((column) => (
+        <DataTable.Title key={column.qText}>{column.qText}</DataTable.Title>
+      ))}
+    </DataTable.Header>
+    <div style={{ overflow: 'auto' }}>
+      {rows.map((row, rowIndex) => (
+        <DataTable.Row key={JSON.stringify(row)}>
+          {leftColumns.headers.map((header, headerIndex) => {
+            const { qElemNo, column } = leftColumns.items[rowIndex];
+            return headerIndex === column ? (
+              <HeaderCell
+                indexKey={`left-column-${qElemNo}`}
+                element={leftColumns.items[rowIndex]}
+                model={model}
+                rowNumber={rowIndex}
+              />
+            ) : (
+              <DataTable.Cell> - </DataTable.Cell>
+            );
+          })}
+          {row.map(({ qElemNo, qText }) => (
+            <DataTable.Cell key={qElemNo}>{qText}</DataTable.Cell>
+          ))}
+        </DataTable.Row>
+      ))}
+    </div>
+  </DataTable>
+);
+
+export default PivotTable;

src/pivot-table/handle-data.ts

@@ -0,0 +1,41 @@
+import { ColumnNode, Layout, PivotColumns, PivotTableData, QDimensionInfo } from '../types';
+
+const addSubNodes = (
+  leftColumns: PivotColumns,
+  subNode: ColumnNode,
+  column: number,
+  qDimensionInfo: QDimensionInfo
+) => {
+  if (!leftColumns.headers[column]) {
+    leftColumns.headers.push(qDimensionInfo[column]);
+  }
+  if (subNode.qElemNo > -1) {
+    leftColumns.items.push({ ...subNode, column });
+    subNode.qSubNodes.forEach((subSubNode) => {
+      addSubNodes(leftColumns, subSubNode, column + 1, qDimensionInfo);
+    });
+  }
+};
+
+const handleSubNodes = (nodes: Array<ColumnNode>, qDimensionInfo: QDimensionInfo): PivotColumns => {
+  const pivotColumns = { items: [], headers: [qDimensionInfo[0]] } as PivotColumns;
+  nodes.forEach((row) => {
+    pivotColumns.items.push({ ...row, column: 0 });
+    if (!row.qCanExpand) {
+      row.qSubNodes.forEach((subNode) => {
+        addSubNodes(pivotColumns, subNode, 1, qDimensionInfo);
+      });
+    }
+  });
+  return pivotColumns;
+};
+
+export default async function manageData(layout: Layout): Promise<PivotTableData> {
+  const { qDimensionInfo } = layout.qHyperCube;
+  const { qTop, qLeft, qData } = layout.qHyperCube.qPivotDataPages[0];
+  const leftColumns = handleSubNodes(qLeft, qDimensionInfo);
+  const topColumns = handleSubNodes(qTop, qDimensionInfo);
+  const rows = qData;
+
+  return { rows, topColumns, leftColumns };
+}