fix(axes): update some types

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

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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 = {