fix(axes): create alias for axis value

plouc · Apr 30, 2021 · f11d034 · f11d034
1 parent 828656f
commit f11d034
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 27 deletions.
diff --git a/packages/axes/src/canvas.ts b/packages/axes/src/canvas.ts
@@ -1,8 +1,15 @@
 import { degreesToRadians, CompleteTheme } from '@nivo/core'
 import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
-import { TicksSpec, AnyScale, AxisLegendPosition, CanvasAxisProp, ValueFormatter } from './types'
-
-export const renderAxisToCanvas = <Value extends string | number | Date>(
+import {
+    AxisValue,
+    TicksSpec,
+    AnyScale,
+    AxisLegendPosition,
+    CanvasAxisProp,
+    ValueFormatter,
+} from './types'
+
+export const renderAxisToCanvas = <Value extends AxisValue>(
     ctx: CanvasRenderingContext2D,
     {
         axis,
@@ -153,10 +160,7 @@ export const renderAxisToCanvas = <Value extends string | number | Date>(
 
 const positions = ['top', 'right', 'bottom', 'left'] as const
 
-export const renderAxesToCanvas = <
-    X extends string | number | Date,
-    Y extends string | number | Date
->(
+export const renderAxesToCanvas = <X extends AxisValue, Y extends AxisValue>(
     ctx: CanvasRenderingContext2D,
     {
         xScale,
@@ -210,7 +214,7 @@ export const renderAxesToCanvas = <
     })
 }
 
-export const renderGridLinesToCanvas = <Value extends string | number | Date>(
+export const renderGridLinesToCanvas = <Value extends AxisValue>(
     ctx: CanvasRenderingContext2D,
     {
         width,

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

diff --git a/packages/axes/src/components/Axis.tsx b/packages/axes/src/components/Axis.tsx
@@ -3,9 +3,9 @@ import { useSpring, useTransition, animated } from 'react-spring'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { computeCartesianTicks, getFormatter } from '../compute'
 import { AxisTick } from './AxisTick'
-import { AxisProps } from '../types'
+import { AxisProps, AxisValue } from '../types'
 
-export const Axis = <Value extends string | number | Date>({
+export const Axis = <Value extends AxisValue>({
     axis,
     scale,
     x = 0,

diff --git a/packages/axes/src/components/AxisTick.tsx b/packages/axes/src/components/AxisTick.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react'
 import { animated } from 'react-spring'
 import { useTheme } from '@nivo/core'
-import { AxisTickProps } from '../types'
+import { AxisTickProps, AxisValue } from '../types'
 
-export const AxisTick = <Value extends string | number | Date>({
+export const AxisTick = <Value extends AxisValue>({
     value: _value,
     format,
     lineX,

diff --git a/packages/axes/src/components/Grid.tsx b/packages/axes/src/components/Grid.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react'
 import { GridLines } from './GridLines'
 import { computeGridLines } from '../compute'
-import { AnyScale } from '../types'
+import { AnyScale, AxisValue } from '../types'
 
-export const Grid = <X extends number | string | Date, Y extends number | string | Date>({
+export const Grid = <X extends AxisValue, Y extends AxisValue>({
     width,
     height,
     xScale,

diff --git a/packages/axes/src/compute.ts b/packages/axes/src/compute.ts
@@ -35,7 +35,15 @@ import { timeFormat } from 'd3-time-format'
 import { format as d3Format } from 'd3-format'
 // @ts-ignore
 import { textPropsByEngine } from '@nivo/core'
-import { Point, TicksSpec, AnyScale, ScaleWithBandwidth, ValueFormatter, Line } from './types'
+import {
+    AxisValue,
+    Point,
+    TicksSpec,
+    AnyScale,
+    ScaleWithBandwidth,
+    ValueFormatter,
+    Line,
+} from './types'
 
 export const centerScale = (scale: ScaleWithBandwidth) => {
     const bandwidth = scale.bandwidth()
@@ -76,7 +84,7 @@ const isInteger = (value: unknown): value is number =>
 
 const isArray = <T>(value: unknown): value is T[] => Array.isArray(value)
 
-export const getScaleTicks = <Value extends string | number | Date>(
+export const getScaleTicks = <Value extends AxisValue>(
     scale: AnyScale,
     spec?: TicksSpec<Value>
 ) => {
@@ -125,7 +133,7 @@ export const getScaleTicks = <Value extends string | number | Date>(
     return scale.domain()
 }
 
-export const computeCartesianTicks = <Value extends string | number | Date>({
+export const computeCartesianTicks = <Value extends AxisValue>({
     axis,
     scale,
     ticksPosition,
@@ -212,7 +220,7 @@ export const computeCartesianTicks = <Value extends string | number | Date>({
     }
 }
 
-export const getFormatter = <Value extends string | number | Date>(
+export const getFormatter = <Value extends AxisValue>(
     format: string | ValueFormatter<Value> | undefined,
     scale: AnyScale
 ): ValueFormatter<Value> | undefined => {
@@ -227,7 +235,7 @@ export const getFormatter = <Value extends string | number | Date>(
     return (d3Format(format) as unknown) as ValueFormatter<Value>
 }
 
-export const computeGridLines = <Value extends string | number | Date>({
+export const computeGridLines = <Value extends AxisValue>({
     width,
     height,
     scale,

diff --git a/packages/axes/src/types.ts b/packages/axes/src/types.ts
@@ -10,6 +10,8 @@ import {
 } from 'd3-scale'
 import React from 'react'
 
+export type AxisValue = string | number | Date
+
 export type GridValuesBuilder<T> = T extends number
     ? number[]
     : T extends string
@@ -18,7 +20,7 @@ export type GridValuesBuilder<T> = T extends number
     ? Date[]
     : never
 
-export type GridValues<T extends string | number | Date> = number | GridValuesBuilder<T>
+export type GridValues<T extends AxisValue> = number | GridValuesBuilder<T>
 
 export type Point = {
     x: number
@@ -37,7 +39,7 @@ export type AnyScale =
     | (ScaleLogarithmic<any, any> & { type: 'log' })
     | ScaleWithBandwidth
 
-export type TicksSpec<Value extends string | number | Date> =
+export type TicksSpec<Value extends AxisValue> =
     // exact number of ticks, please note that
     // depending on the current range of values,
     // you might not get this exact count
@@ -51,9 +53,9 @@ export type TicksSpec<Value extends string | number | Date> =
 
 export type AxisLegendPosition = 'start' | 'middle' | 'end'
 
-export type ValueFormatter<Value extends string | number | Date> = (value: Value) => Value
+export type ValueFormatter<Value extends AxisValue> = (value: Value) => Value
 
-export interface AxisProp<Value extends string | number | Date> {
+export interface AxisProp<Value extends AxisValue> {
     ticksPosition?: 'before' | 'after'
     tickValues?: TicksSpec<Value>
     tickSize?: number
@@ -71,7 +73,7 @@ export interface CanvasAxisProp<Value extends string | number | Date>
     legend?: string
 }
 
-export interface AxisProps<Value extends number | string | Date = any> {
+export interface AxisProps<Value extends AxisValue = any> {
     axis: 'x' | 'y'
     scale: AnyScale
     x?: number
@@ -91,7 +93,7 @@ export interface AxisProps<Value extends number | string | Date = any> {
     ariaHidden?: boolean
 }
 
-export interface AxisTickProps<Value extends number | string | Date> {
+export interface AxisTickProps<Value extends AxisValue> {
     tickIndex: number
     value: Value
     format?: string | ValueFormatter<Value>