refactor(axes): respond to pr feedback

plouc · Apr 30, 2021 · 934a299 · 934a299
1 parent f11d034
commit 934a299
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 23 deletions.
diff --git a/packages/axes/src/canvas.ts b/packages/axes/src/canvas.ts
@@ -1,5 +1,6 @@
 import { degreesToRadians, CompleteTheme } from '@nivo/core'
 import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
+import { positions } from './props'
 import {
     AxisValue,
     TicksSpec,
@@ -23,7 +24,7 @@ export const renderAxisToCanvas = <Value extends AxisValue>(
         tickSize = 5,
         tickPadding = 5,
         tickRotation = 0,
-        format,
+        format: _format,
 
         legend,
         legendPosition = 'end',
@@ -80,6 +81,8 @@ export const renderAxisToCanvas = <Value extends AxisValue>(
         ctx.stroke()
     }
 
+    const format = typeof _format === 'function' ? _format : (value: unknown) => `${value}`
+
     ticks.forEach(tick => {
         if ((theme.axis.ticks.line.strokeWidth ?? 0) > 0) {
             ctx.lineWidth = Number(theme.axis.ticks.line.strokeWidth)
@@ -95,7 +98,7 @@ export const renderAxisToCanvas = <Value extends AxisValue>(
             ctx.stroke()
         }
 
-        const value = typeof format === 'function' ? format(tick.value) : (tick.value as string)
+        const value = format(tick.value)
 
         ctx.save()
         ctx.translate(tick.x + tick.textX, tick.y + tick.textY)
@@ -158,8 +161,6 @@ export const renderAxisToCanvas = <Value extends AxisValue>(
     ctx.restore()
 }
 
-const positions = ['top', 'right', 'bottom', 'left'] as const
-
 export const renderAxesToCanvas = <X extends AxisValue, Y extends AxisValue>(
     ctx: CanvasRenderingContext2D,
     {

diff --git a/packages/axes/src/components/Axes.tsx b/packages/axes/src/components/Axes.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
 import { Axis } from './Axis'
+import { positions } from '../props'
 import { AnyScale, AxisProp, AxisValue } from '../types'
 
-const positions = ['top', 'right', 'bottom', 'left'] as const
-
 export const Axes = <X extends AxisValue, Y extends AxisValue>({
     xScale,
     yScale,

diff --git a/packages/axes/src/compute.ts b/packages/axes/src/compute.ts
@@ -138,18 +138,18 @@ export const computeCartesianTicks = <Value extends AxisValue>({
     scale,
     ticksPosition,
     tickValues,
-    tickSize = NaN,
-    tickPadding = NaN,
-    tickRotation = NaN,
+    tickSize,
+    tickPadding,
+    tickRotation,
     engine = 'svg',
 }: {
     axis: 'x' | 'y'
     scale: AnyScale
     ticksPosition?: 'after' | 'before'
     tickValues?: TicksSpec<Value>
-    tickSize?: number
-    tickPadding?: number
-    tickRotation?: number
+    tickSize: number
+    tickPadding: number
+    tickRotation: number
     engine?: 'svg' | 'canvas'
 }) => {
     const values = getScaleTicks(scale, tickValues)
@@ -255,25 +255,22 @@ export const computeGridLines = <Value extends AxisValue>({
 
     const position = 'bandwidth' in scale ? centerScale(scale) : scale
 
-    const lines: Line[] = values.map(value => {
-        const key = `${value}`
-
-        return axis === 'x'
-            ? {
-                  key,
+    const lines: Line[] =
+        axis === 'x'
+            ? values.map(value => ({
+                  key: `${value}`,
                   x1: position(value) ?? 0,
                   x2: position(value) ?? 0,
                   y1: 0,
                   y2: height,
-              }
-            : {
-                  key,
+              }))
+            : values.map(value => ({
+                  key: `${value}`,
                   x1: 0,
                   x2: width,
                   y1: position(value) ?? 0,
                   y2: position(value) ?? 0,
-              }
-    })
+              }))
 
     return lines
 }
diff --git a/packages/axes/src/props.ts b/packages/axes/src/props.ts
@@ -21,3 +21,5 @@ export const axisPropTypes = {
 }
 
 export const axisPropType = PropTypes.shape(axisPropTypes)
+
+export const positions = ['top', 'right', 'bottom', 'left'] as const
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,3 +21,5 @@ export const axisPropTypes = {
		}

		export const axisPropType = PropTypes.shape(axisPropTypes)

		export const positions = ['top', 'right', 'bottom', 'left'] as const