import type { Domain } from '@h5web/shared' ; import { ScaleType } from '@h5web/shared' ; import type { SharedAxisProps } from '@visx/axis' ; import { AxisLeft , AxisBottom } from '@visx/axis' ; import { GridColumns , GridRows } from '@visx/grid' ; import type { ElementType } from 'react' ; import type { Size , AxisConfig , AxisScale } from '../models' ; import { adaptedNumTicks , getIntegerTicks , getTickFormatter , createAxisScale , } from '../utils' ; import styles from './AxisSystem.module.css' ; import Tick from './Tick' ; const AXIS_PROPS = { labelClassName : styles . label , labelProps : { } , tickClassName : styles . tick , tickComponent : Tick , } ; const COMPONENTS = { abscissa : [ AxisBottom , GridColumns ] , ordinate : [ AxisLeft , GridRows ] , } ; interface Props { type : 'abscissa' | 'ordinate' ; config : AxisConfig ; domain : Domain ; canvasSize : Size ; flipAxis ? : boolean ; } function Axis ( props ) { const { type , config , domain , canvasSize , flipAxis } = props ; const { width , height } = canvasSize ; const axisLength = type === 'abscissa' ? width : height ; const { scaleType = ScaleType . Linear , isIndexAxis , showGrid , label } = config ; const scale = createAxisScale ( scaleType , { domain , range : flipAxis ? [ axisLength , 0 ] : [ 0 , axisLength ] , } ) ; const [ AxisComponent , GridComponent ] = COMPONENTS [ type ] ; const numTicks = adaptedNumTicks ( axisLength ) ; const ticksProp = isIndexAxis ? { tickValues : getIntegerTicks ( domain , numTicks ) } : { numTicks } ; return ( < > < svg className = { styles . axis } data - type = { type } > < AxisComponent scale = { scale } tickFormat = { getTickFormatter ( domain , axisLength , scaleType ) } label = { label } labelOffset = { type === 'abscissa' ? 28 : 42 } hideAxisLine = { showGrid } { ... ticksProp } { ... AXIS_PROPS } /> < /svg> { showGrid && ( < svg className = { styles . grid } > < GridComponent scale = { scale } width = { width } height = { height } { ... ticksProp } /> < /svg>)} < />); } export default Axis ;