From b5d5f0f3ada72c77f9db5089f89d257629a67f78 Mon Sep 17 00:00:00 2001
From: Neil Kistner <neil.kistner@gmail.com>
Date: Sat, 24 Apr 2021 14:06:28 -0500
Subject: [PATCH] fix(axes): update some types

---
 packages/axes/src/components/AxisTick.tsx |  5 +----
 packages/axes/src/compute.ts              |  6 +++---
 packages/axes/src/types.ts                | 18 +++++++++---------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/axes/src/components/AxisTick.tsx b/packages/axes/src/components/AxisTick.tsx
index c7b038b32..d399808d5 100644
--- a/packages/axes/src/components/AxisTick.tsx
+++ b/packages/axes/src/components/AxisTick.tsx
@@ -15,10 +15,7 @@ export const AxisTick = <Value extends AxisValue>({
 }: AxisTickProps<Value>) => {
     const theme = useTheme()
 
-    let value = _value
-    if (typeof format === 'function') {
-        value = format(value)
-    }
+    const value = format?.(_value) ?? _value
 
     const props = useMemo(() => {
         const style = { opacity: animatedProps.opacity }
diff --git a/packages/axes/src/compute.ts b/packages/axes/src/compute.ts
index 862b0fe0d..e76a6443d 100644
--- a/packages/axes/src/compute.ts
+++ b/packages/axes/src/compute.ts
@@ -45,7 +45,7 @@ import {
     Line,
 } from './types'
 
-export const centerScale = (scale: ScaleWithBandwidth) => {
+export const centerScale = <Value>(scale: ScaleWithBandwidth) => {
     const bandwidth = scale.bandwidth()
 
     if (bandwidth === 0) return scale
@@ -55,7 +55,7 @@ export const centerScale = (scale: ScaleWithBandwidth) => {
         offset = Math.round(offset)
     }
 
-    return <T>(d: T) => (scale(d) ?? 0) + offset
+    return <T extends Value>(d: T) => (scale(d) ?? 0) + offset
 }
 
 const timeByType: Record<string, [CountableTimeInterval, CountableTimeInterval]> = {
@@ -161,7 +161,7 @@ export const computeCartesianTicks = <Value extends AxisValue>({
     const text = { textX: 0, textY: 0 }
 
     const isRTL = typeof document === 'object' ? document.dir === 'rtl' : false
-    let translate: (value: string | number) => Point
+    let translate: (value: Value) => Point
     let textAlign: CanvasTextAlign = textProps.align.center
     let textBaseline: CanvasTextBaseline = textProps.baseline.center
 
diff --git a/packages/axes/src/types.ts b/packages/axes/src/types.ts
index 2da83cd33..0c1047fa8 100644
--- a/packages/axes/src/types.ts
+++ b/packages/axes/src/types.ts
@@ -32,11 +32,11 @@ export type ScaleWithBandwidth =
     | (ScalePoint<any> & { type: 'point' })
 
 export type AnyScale =
-    | (ScaleLinear<any, any> & { type: 'linear' })
-    | (ScaleOrdinal<any, any> & { type: 'ordinal' })
-    | (ScaleTime<any, any> & { useUTC: boolean; type: 'time' })
-    | (ScaleSymLog<any, any> & { type: 'symlog' })
-    | (ScaleLogarithmic<any, any> & { type: 'log' })
+    | (ScaleLinear<any, number> & { type: 'linear' })
+    | (ScaleOrdinal<any, number> & { type: 'ordinal' })
+    | (ScaleTime<any, number> & { useUTC: boolean; type: 'time' })
+    | (ScaleSymLog<any, number> & { type: 'symlog' })
+    | (ScaleLogarithmic<any, number> & { type: 'log' })
     | ScaleWithBandwidth
 
 export type TicksSpec<Value extends AxisValue> =
@@ -53,7 +53,7 @@ export type TicksSpec<Value extends AxisValue> =
 
 export type AxisLegendPosition = 'start' | 'middle' | 'end'
 
-export type ValueFormatter<Value extends AxisValue> = (value: Value) => Value
+export type ValueFormatter<Value extends AxisValue> = (value: Value) => Value | string
 
 export interface AxisProp<Value extends AxisValue> {
     ticksPosition?: 'before' | 'after'
@@ -89,14 +89,14 @@ export interface AxisProps<Value extends AxisValue = any> {
     legend?: React.ReactNode
     legendPosition?: 'start' | 'middle' | 'end'
     legendOffset?: number
-    onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, value: Value) => void
+    onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, value: Value | string) => void
     ariaHidden?: boolean
 }
 
 export interface AxisTickProps<Value extends AxisValue> {
     tickIndex: number
     value: Value
-    format?: string | ValueFormatter<Value>
+    format?: ValueFormatter<Value>
     x: number
     y: number
     lineX: number
@@ -112,7 +112,7 @@ export interface AxisTickProps<Value extends AxisValue> {
         textTransform: string
         transform: string
     }>
-    onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, value: Value) => void
+    onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>, value: Value | string) => void
 }
 
 export type Line = {