diff --git a/packages/axes/src/components/Axes.tsx b/packages/axes/src/components/Axes.tsx index b0ddfcb52..3e2881e3d 100644 --- a/packages/axes/src/components/Axes.tsx +++ b/packages/axes/src/components/Axes.tsx @@ -1,7 +1,7 @@ import React from 'react' import { Axis } from './Axis' import { positions } from '../props' -import { AnyScale, SingleAxisProp, AxisValue } from '../types' +import { AnyScale, AxisProps, AxisValue } from '../types' export const Axes = ({ xScale, @@ -17,10 +17,10 @@ export const Axes = ({ yScale: AnyScale width: number height: number - top?: SingleAxisProp - right?: SingleAxisProp - bottom?: SingleAxisProp - left?: SingleAxisProp + top?: AxisProps + right?: AxisProps + bottom?: AxisProps + left?: AxisProps }) => { const axes = { top, right, bottom, left } @@ -28,8 +28,8 @@ export const Axes = ({ <> {positions.map(position => { const axis = axes[position] as typeof position extends 'bottom' | 'top' - ? SingleAxisProp | undefined - : SingleAxisProp | undefined + ? AxisProps | undefined + : AxisProps | undefined if (!axis) return null diff --git a/packages/axes/src/components/Axis.tsx b/packages/axes/src/components/Axis.tsx index bb27cca9e..8bd170359 100644 --- a/packages/axes/src/components/Axis.tsx +++ b/packages/axes/src/components/Axis.tsx @@ -3,7 +3,7 @@ import { useSpring, useTransition, animated } from 'react-spring' import { useTheme, useMotionConfig } from '@nivo/core' import { computeCartesianTicks, getFormatter } from '../compute' import { AxisTick } from './AxisTick' -import { AxisProps, AxisValue } from '../types' +import { AnyScale, AxisProps, AxisValue } from '../types' export const Axis = ({ axis, @@ -23,7 +23,14 @@ export const Axis = ({ legendOffset = 0, onClick, ariaHidden, -}: AxisProps) => { +}: AxisProps & { + axis: 'x' | 'y' + scale: AnyScale + x?: number + y?: number + length: number + onClick?: (event: React.MouseEvent, value: Value | string) => void +}) => { const theme = useTheme() const formatValue = useMemo(() => getFormatter(format, scale), [format, scale]) diff --git a/packages/axes/src/types.ts b/packages/axes/src/types.ts index 09a177615..1ccca9061 100644 --- a/packages/axes/src/types.ts +++ b/packages/axes/src/types.ts @@ -55,7 +55,7 @@ export type AxisLegendPosition = 'start' | 'middle' | 'end' export type ValueFormatter = (value: Value) => Value | string -export interface SingleAxisProp { +export interface AxisProps { ticksPosition?: 'before' | 'after' tickValues?: TicksSpec tickSize?: number @@ -66,33 +66,14 @@ export interface SingleAxisProp { legend?: React.ReactNode legendPosition?: AxisLegendPosition legendOffset?: number + ariaHidden?: boolean } export interface CanvasAxisProp - extends Omit, 'legend'> { + extends Omit, 'legend'> { legend?: string } -export interface AxisProps { - axis: 'x' | 'y' - scale: AnyScale - x?: number - y?: number - length: number - ticksPosition: 'before' | 'after' - tickValues?: TicksSpec - tickSize?: number - tickPadding?: number - tickRotation?: number - format?: string | ValueFormatter - renderTick?: (props: AxisTickProps) => JSX.Element - legend?: React.ReactNode - legendPosition?: 'start' | 'middle' | 'end' - legendOffset?: number - onClick?: (event: React.MouseEvent, value: Value | string) => void - ariaHidden?: boolean -} - export interface AxisTickProps { tickIndex: number value: Value