Skip to content

Commit

Permalink
fix(axes): create alias for axis value
Browse files Browse the repository at this point in the history
  • Loading branch information
wyze committed Apr 30, 2021
1 parent 828656f commit f11d034
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 27 deletions.
20 changes: 12 additions & 8 deletions packages/axes/src/canvas.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -210,7 +214,7 @@ export const renderAxesToCanvas = <
})
}

export const renderGridLinesToCanvas = <Value extends string | number | Date>(
export const renderGridLinesToCanvas = <Value extends AxisValue>(
ctx: CanvasRenderingContext2D,
{
width,
Expand Down
4 changes: 2 additions & 2 deletions packages/axes/src/components/Axes.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/axes/src/components/Axis.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/axes/src/components/AxisTick.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/axes/src/components/Grid.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
18 changes: 13 additions & 5 deletions packages/axes/src/compute.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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>
) => {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 => {
Expand All @@ -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,
Expand Down
14 changes: 8 additions & 6 deletions packages/axes/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down

0 comments on commit f11d034

Please sign in to comment.