feat(parallel-coords): migrate to TypeScript

Author: plouc

.eslintrc.yml

@@ -12,6 +12,7 @@ rules:
   '@typescript-eslint/no-empty-interface': 'warn'
   '@typescript-eslint/no-empty-function': 'warn'
   '@typescript-eslint/no-use-before-define': 'warn'
+  '@typescript-eslint/no-non-null-assertion': 'off'
   'no-use-before-define': 'off'
 
 settings:

packages/generators/src/parallelCoordinates.ts

@@ -1,37 +1,40 @@
 import random from 'lodash/random'
-import range from 'lodash/range'
-import shuffle from 'lodash/shuffle'
+
+interface IdSpec {
+    id: string
+    label?: string
+}
+
+interface VariableSpec {
+    id: string
+    range: [number, number]
+}
 
 type Options = Partial<{
-    size: number
-    keys: Array<{
-        key: string
-        random?: [number, number]
-        shuffle?: string[]
-    }>
+    ids: IdSpec[]
+    variables: VariableSpec[]
 }>
 
 export const generateParallelCoordinatesData = ({
-    size = 26,
-    keys = [
-        { key: 'temp', random: [-10, 40] },
-        { key: 'cost', random: [200, 400000] },
-        { key: 'color', shuffle: ['red', 'yellow', 'green'] },
-        { key: 'target', shuffle: ['A', 'B', 'C', 'D', 'E'] },
-        { key: 'volume', random: [0.2, 7.6] },
+    ids = [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }, { id: 'E' }],
+    variables = [
+        { id: 'temp', range: [-10, 40] },
+        { id: 'cost', range: [200, 40000] },
+        { id: 'weight', range: [10, 300] },
+        { id: 'volume', range: [0.2, 7.6] },
     ],
 }: Options = {}) => {
     const datumGenerator = () =>
-        keys.reduce((acc, key) => {
-            let value
-            if (key.random !== undefined) {
-                value = random(...key.random)
-            } else if (key.shuffle !== undefined) {
-                value = shuffle(key.shuffle)[0]
-            }
+        variables.reduce((acc, variable) => {
+            const value = random(...variable.range)
 
-            return { ...acc, [key.key]: value }
+            return { ...acc, [variable.id]: value }
         }, {})
 
-    return range(size).map(datumGenerator)
+    return ids.map(id => {
+        return {
+            ...datumGenerator(),
+            ...id,
+        }
+    })
 }

packages/parallel-coordinates/package.json

@@ -19,24 +19,27 @@
         "charts",
         "parrallel-coordinates-chart"
     ],
+    "sideEffects": false,
     "main": "./dist/nivo-parallel-coordinates.cjs.js",
     "module": "./dist/nivo-parallel-coordinates.es.js",
-    "types": "./index.d.ts",
+    "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
         "LICENSE.md",
-        "index.d.ts",
-        "dist/"
+        "dist/",
+        "!dist/tsconfig.tsbuildinfo"
     ],
     "dependencies": {
         "@nivo/axes": "workspace:*",
         "@nivo/colors": "workspace:*",
         "@nivo/core": "workspace:*",
+        "@nivo/scales": "workspace:*",
         "@nivo/tooltip": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
+        "@types/d3-scale": "^3.2.3",
+        "@types/d3-shape": "^2.0.0",
         "d3-scale": "^3.2.3",
-        "d3-shape": "^1.3.5",
-        "prop-types": "^15.7.2"
+        "d3-shape": "^1.3.5"
     },
     "peerDependencies": {
         "react": ">= 16.14.0 < 19.0.0"