feat(generators): migrate package to typescript (#1492)

Close #1220

packages/generators/package.json

@@ -19,21 +19,24 @@
   },
   "main": "./dist/nivo-generators.cjs.js",
   "module": "./dist/nivo-generators.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
-  "engines": {
-    "node": ">=6.0.0",
-    "npm": ">=3.0.0"
-  },
   "dependencies": {
     "d3-random": "^1.1.2",
     "d3-time": "^1.0.10",
     "d3-time-format": "^2.1.3",
     "lodash": "^4.17.11"
   },
+  "devDependencies": {
+    "@types/d3-random": "^1.1.3",
+    "@types/d3-time": "^1.0.10",
+    "@types/d3-time-format": "^2.3.1"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/generators/src/bullet.js → packages/generators/src/bullet.ts

@@ -1,18 +1,26 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import range from 'lodash/range'
 import random from 'lodash/random'
 
+type Options = Partial<{
+    float: boolean
+    markerCount: number
+    measureCount: number
+    rangeCount: number
+    subtitle: string
+    title: string
+}>
+
 export const generateBulletData = (
-    id,
-    max,
-    { title, subtitle, rangeCount = 5, measureCount = 1, markerCount = 1, float = false } = {}
+    id: string,
+    max: number,
+    {
+        title,
+        subtitle,
+        rangeCount = 5,
+        measureCount = 1,
+        markerCount = 1,
+        float = false,
+    }: Options = {}
 ) => {
     const ranges = range(rangeCount - 1).reduce(
         acc => {
@@ -22,7 +30,7 @@ export const generateBulletData = (
         [max]
     )
 
-    const measures = range(measureCount).reduce(acc => {
+    const measures = range(measureCount).reduce<number[]>(acc => {
         if (acc.length === 0) return [random(max, float)]
         return [random(acc[0], float), ...acc]
     }, [])

packages/generators/src/chord.js → packages/generators/src/chord.ts

@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import range from 'lodash/range'
 import random from 'lodash/random'
 import { names } from './sets'

packages/generators/src/color.ts

@@ -0,0 +1 @@
+export const randColor = () => `hsl(${Math.round(Math.random() * 360)}, 70%, 50%)`

packages/generators/src/index.js → packages/generators/src/index.ts

@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import range from 'lodash/range'
 import random from 'lodash/random'
 import shuffle from 'lodash/shuffle'
@@ -33,10 +25,10 @@ export const generateProgrammingLanguageStats = (shouldShuffle = true, limit = -
     }))
 }
 
-export const uniqRand = generator => {
-    const used = []
+export const uniqRand = <T>(generator: (...args: unknown[]) => T) => {
+    const used: T[] = []
 
-    return (...args) => {
+    return (...args: unknown[]) => {
         let value
         do {
             value = generator(...args)
@@ -50,12 +42,22 @@ export const uniqRand = generator => {
 
 export const randCountryCode = () => shuffle(sets.countryCodes)[0]
 
+type DrinkDatum = {
+    id: string
+    color: string
+    data: Array<{
+        color: string
+        x: string
+        y: number
+    }>
+}
+
 export const generateDrinkStats = (xSize = 16) => {
     const rand = () => random(0, 60)
     const types = ['whisky', 'rhum', 'gin', 'vodka', 'cognac']
     const country = uniqRand(randCountryCode)
 
-    const data = types.map(id => ({
+    const data: DrinkDatum[] = types.map(id => ({
         id,
         color: randColor(),
         data: [],
@@ -64,7 +66,7 @@ export const generateDrinkStats = (xSize = 16) => {
     range(xSize).forEach(() => {
         const x = country()
         types.forEach(id => {
-            data.find(d => d.id === id).data.push({
+            data.find(d => d.id === id)?.data.push({
                 color: randColor(),
                 x,
                 y: rand(),
@@ -81,7 +83,7 @@ export const generateSerie = (xSize = 20) => {
     return range(xSize).map(() => Math.round(Math.random() * max))
 }
 
-export const generateSeries = (ids, xKeys) =>
+export const generateSeries = (ids: string[], xKeys: string[]) =>
     ids.map(id => ({
         id,
         color: randColor(),
@@ -93,16 +95,16 @@ export const generateStackData = (size = 3) => {
     return range(size).map(() => generateSerie(length).map((v, i) => ({ x: i, y: v })))
 }
 
-export const generateCountriesPopulation = size => {
-    const countryCode = uniqRand(randCountryCode())
+export const generateCountriesPopulation = (size: number) => {
+    const countryCode = uniqRand(randCountryCode)
 
     return range(size).map(() => ({
         country: countryCode(),
         population: 200 + Math.round(Math.random() * Math.random() * 1000000),
     }))
 }
 
-export const generateDayCounts = (from, to, maxSize = 0.9) => {
+export const generateDayCounts = (from: Date, to: Date, maxSize = 0.9) => {
     const days = timeDays(from, to)
 
     const size =
@@ -122,11 +124,11 @@ export const generateDayCounts = (from, to, maxSize = 0.9) => {
 }
 
 export const generateCountriesData = (
-    keys,
+    keys: string[],
     { size = 12, min = 0, max = 200, withColors = true } = {}
 ) =>
     sets.countryCodes.slice(0, size).map(country => {
-        const d = {
+        const d: Record<string, unknown> = {
             country,
         }
         keys.forEach(key => {
@@ -221,22 +223,22 @@ const libTreeItems = [
     ],
 ]
 
-export const generateLibTree = (name = 'nivo', limit, children = libTreeItems) => {
+export const generateLibTree = (name = 'nivo', limit?: number | null, children = libTreeItems) => {
     limit = limit || children.length
     if (limit > children.length) {
         limit = children.length
     }
 
-    const tree = {
+    const tree: Record<string, unknown> = {
         name,
         color: randColor(),
     }
-    if (children && children.length > 0) {
-        tree.children = range(limit).map((o, i) => {
+    if (children?.length > 0) {
+        tree.children = range(limit).map((_, i) => {
             const leaf = children[i]
 
             // full path `${name}.${leaf[0]}`
-            return generateLibTree(leaf[0], null, leaf[1] || [])
+            return generateLibTree(leaf[0] as string, null, (leaf[1] ?? []) as any)
         })
     } else {
         tree.loc = Math.round(Math.random() * 200000)
@@ -247,9 +249,10 @@ export const generateLibTree = (name = 'nivo', limit, children = libTreeItems) =
 
 const wines = ['chardonay', 'carmenere', 'syrah']
 const wineTastes = ['fruity', 'bitter', 'heavy', 'strong', 'sunny']
+
 export const generateWinesTastes = ({ randMin = 20, randMax = 120 } = {}) => {
     const data = wineTastes.map(taste => {
-        const d = { taste }
+        const d: Record<string, unknown> = { taste }
         wines.forEach(wine => {
             d[wine] = random(randMin, randMax)
         })

packages/generators/src/network.js → packages/generators/src/network.ts

@@ -1,13 +1,18 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import random from 'lodash/random'
 
+type Link = {
+    distance: number
+    source: string
+    target: string
+}
+
+type ExtraNode = {
+    color: string
+    depth: number
+    id: string
+    radius: number
+}
+
 export const generateNetworkData = ({
     rootNodeRadius = 12,
     minMidNodes = 6,
@@ -23,15 +28,15 @@ export const generateNetworkData = ({
         depth: 0,
         color: 'rgb(244, 117, 96)',
     }
-    let nodes = Array.from({ length: random(minMidNodes, maxMidNodes) }, (v, k) => ({
+    let nodes = Array.from({ length: random(minMidNodes, maxMidNodes) }, (_, k) => ({
         id: `${k + 1}`,
         radius: midNodeRadius,
         depth: 1,
         color: 'rgb(97, 205, 187)',
     }))
 
-    const links = []
-    const extraNodes = []
+    const links: Link[] = []
+    const extraNodes: ExtraNode[] = []
     nodes.forEach(source => {
         links.push({
             source: '0',
@@ -47,7 +52,7 @@ export const generateNetworkData = ({
                 })
             }
         })
-        Array.from({ length: random(minLeaves, maxLeaves) }, (v, k) => {
+        Array.from({ length: random(minLeaves, maxLeaves) }, (_, k) => {
             extraNodes.push({
                 id: `${source.id}.${k}`,
                 radius: leafRadius,
@@ -59,6 +64,8 @@ export const generateNetworkData = ({
                 target: `${source.id}.${k}`,
                 distance: 30,
             })
+
+            return null
         })
     })
 

packages/generators/src/parallelCoordinates.js → packages/generators/src/parallelCoordinates.ts

@@ -1,15 +1,16 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import random from 'lodash/random'
 import range from 'lodash/range'
 import shuffle from 'lodash/shuffle'
 
+type Options = Partial<{
+    size: number
+    keys: Array<{
+        key: string
+        random?: [number, number]
+        shuffle?: string[]
+    }>
+}>
+
 export const generateParallelCoordinatesData = ({
     size = 26,
     keys = [
@@ -19,7 +20,7 @@ export const generateParallelCoordinatesData = ({
         { key: 'target', shuffle: ['A', 'B', 'C', 'D', 'E'] },
         { key: 'volume', random: [0.2, 7.6] },
     ],
-} = {}) => {
+}: Options = {}) => {
     const datumGenerator = () =>
         keys.reduce((acc, key) => {
             let value