feat(axes): init migration to typescript

Close #1217

packages/axes/package.json

@@ -19,10 +19,10 @@
   ],
   "main": "./dist/nivo-axes.cjs.js",
   "module": "./dist/nivo-axes.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
     "dist/"
   ],
   "dependencies": {
@@ -33,7 +33,10 @@
     "react-spring": "9.1.2"
   },
   "devDependencies": {
-    "@nivo/core": "0.68.0"
+    "@nivo/core": "0.68.0",
+    "@types/d3-format": "^1.4.1",
+    "@types/d3-time": "^1.1.1",
+    "@types/d3-time-format": "^2.3.1"
   },
   "peerDependencies": {
     "@nivo/core": "0.68.0",

packages/axes/src/canvas.js → packages/axes/src/canvas.ts

@@ -1,16 +1,9 @@
-/*
- * 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 { degreesToRadians } from './utils'
+import { degreesToRadians, CompleteTheme } from '@nivo/core'
 import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
+import { TicksSpec, AllScales, AxisLegendPosition, CanvasAxisProp, ValueFormatter } from './types'
 
-export const renderAxisToCanvas = (
-    ctx,
+export const renderAxisToCanvas = <Value>(
+    ctx: CanvasRenderingContext2D,
     {
         axis,
         scale,
@@ -30,6 +23,22 @@ export const renderAxisToCanvas = (
         legendOffset = 0,
 
         theme,
+    }: {
+        axis: 'x' | 'y'
+        scale: AllScales
+        x?: number
+        y?: number
+        length: number
+        ticksPosition: 'before' | 'after'
+        tickValues?: TicksSpec<Value>
+        tickSize?: number
+        tickPadding?: number
+        tickRotation?: number
+        format?: ValueFormatter
+        legend?: string
+        legendPosition?: AxisLegendPosition
+        legendOffset?: number
+        theme: CompleteTheme
     }
 ) => {
     const { ticks, textAlign, textBaseline } = computeCartesianTicks({
@@ -50,33 +59,45 @@ export const renderAxisToCanvas = (
     ctx.textBaseline = textBaseline
     ctx.font = `${theme.axis.ticks.text.fontSize}px ${theme.axis.ticks.text.fontFamily}`
 
-    if (theme.axis.domain.line.strokeWidth > 0) {
-        ctx.lineWidth = theme.axis.domain.line.strokeWidth
+    if ((theme.axis.domain.line.strokeWidth ?? 0) > 0) {
+        ctx.lineWidth = Number(theme.axis.domain.line.strokeWidth)
         ctx.lineCap = 'square'
-        ctx.strokeStyle = theme.axis.domain.line.stroke
+
+        if (theme.axis.domain.line.stroke) {
+            ctx.strokeStyle = theme.axis.domain.line.stroke
+        }
+
         ctx.beginPath()
         ctx.moveTo(0, 0)
         ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length)
         ctx.stroke()
     }
 
     ticks.forEach(tick => {
-        if (theme.axis.ticks.line.strokeWidth > 0) {
-            ctx.lineWidth = theme.axis.ticks.line.strokeWidth
+        if ((theme.axis.ticks.line.strokeWidth ?? 0) > 0) {
+            ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth)
             ctx.lineCap = 'square'
-            ctx.strokeStyle = theme.axis.ticks.line.stroke
+
+            if (theme.axis.ticks.line.stroke) {
+                ctx.strokeStyle = theme.axis.ticks.line.stroke
+            }
+
             ctx.beginPath()
             ctx.moveTo(tick.x, tick.y)
             ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY)
             ctx.stroke()
         }
 
-        const value = format !== undefined ? format(tick.value) : tick.value
+        const value = format !== undefined ? format(String(tick.value)) : (tick.value as string)
 
         ctx.save()
         ctx.translate(tick.x + tick.textX, tick.y + tick.textY)
         ctx.rotate(degreesToRadians(tickRotation))
-        ctx.fillStyle = theme.axis.ticks.text.fill
+
+        if (theme.axis.ticks.text.fill) {
+            ctx.fillStyle = theme.axis.ticks.text.fill
+        }
+
         ctx.fillText(value, 0, 0)
         ctx.restore()
     })
@@ -85,7 +106,7 @@ export const renderAxisToCanvas = (
         let legendX = 0
         let legendY = 0
         let legendRotation = 0
-        let textAlign
+        let textAlign: CanvasTextAlign = 'center'
 
         if (axis === 'y') {
             legendRotation = -90
@@ -117,7 +138,11 @@ export const renderAxisToCanvas = (
         ctx.font = `${
             theme.axis.legend.text.fontWeight ? `${theme.axis.legend.text.fontWeight} ` : ''
         }${theme.axis.legend.text.fontSize}px ${theme.axis.legend.text.fontFamily}`
-        ctx.fillStyle = theme.axis.legend.text.fill
+
+        if (theme.axis.legend.text.fill) {
+            ctx.fillStyle = theme.axis.legend.text.fill
+        }
+
         ctx.textAlign = textAlign
         ctx.textBaseline = 'middle'
         ctx.fillText(legend, 0, 0)
@@ -126,10 +151,10 @@ export const renderAxisToCanvas = (
     ctx.restore()
 }
 
-const positions = ['top', 'right', 'bottom', 'left']
+const positions = ['top', 'right', 'bottom', 'left'] as const
 
-export const renderAxesToCanvas = (
-    ctx,
+export const renderAxesToCanvas = <X, Y>(
+    ctx: CanvasRenderingContext2D,
     {
         xScale,
         yScale,
@@ -142,6 +167,16 @@ export const renderAxesToCanvas = (
         left,
 
         theme,
+    }: {
+        xScale: AllScales
+        yScale: AllScales
+        width: number
+        height: number
+        top?: CanvasAxisProp<X>
+        right?: CanvasAxisProp<Y>
+        bottom?: CanvasAxisProp<X>
+        left?: CanvasAxisProp<Y>
+        theme: CompleteTheme
     }
 ) => {
     const axes = { top, right, bottom, left }
@@ -156,7 +191,7 @@ export const renderAxesToCanvas = (
         const scale = isXAxis ? xScale : yScale
         const format = getFormatter(axis.format, scale)
 
-        renderAxisToCanvas(ctx, {
+        renderAxisToCanvas<unknown>(ctx, {
             ...axis,
             axis: isXAxis ? 'x' : 'y',
             x: position === 'right' ? width : 0,
@@ -170,7 +205,22 @@ export const renderAxesToCanvas = (
     })
 }
 
-export const renderGridLinesToCanvas = (ctx, { width, height, scale, axis, values }) => {
+export const renderGridLinesToCanvas = <Value>(
+    ctx: CanvasRenderingContext2D,
+    {
+        width,
+        height,
+        scale,
+        axis,
+        values,
+    }: {
+        width: number
+        height: number
+        scale: AllScales
+        axis: 'x' | 'y'
+        values?: TicksSpec<Value>
+    }
+) => {
     const lines = computeGridLines({ width, height, scale, axis, values })
 
     lines.forEach(line => {

packages/axes/src/components/Axes.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Axis } from './Axis'
+import { AllScales, AxisProp } from '../types'
+
+const positions = ['top', 'right', 'bottom', 'left'] as const
+
+export const Axes = <X extends number | string | Date, Y extends number | string | Date>({
+    xScale,
+    yScale,
+    width,
+    height,
+    top,
+    right,
+    bottom,
+    left,
+}: {
+    xScale: AllScales
+    yScale: AllScales
+    width: number
+    height: number
+    top?: AxisProp<X>
+    right?: AxisProp<Y>
+    bottom?: AxisProp<X>
+    left?: AxisProp<Y>
+}) => {
+    const axes = { top, right, bottom, left }
+
+    return (
+        <>
+            {positions.map(position => {
+                const axis = axes[position]
+
+                if (!axis) return null
+
+                const isXAxis = position === 'top' || position === 'bottom'
+                const ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after'
+
+                return (
+                    <Axis
+                        key={position}
+                        {...axis}
+                        axis={isXAxis ? 'x' : 'y'}
+                        x={position === 'right' ? width : 0}
+                        y={position === 'bottom' ? height : 0}
+                        scale={isXAxis ? xScale : yScale}
+                        length={isXAxis ? width : height}
+                        ticksPosition={ticksPosition}
+                    />
+                )
+            })}
+        </>
+    )
+}