upsetjs import type { NumericScaleLike } from '@upsetjs/model' ; import React , { PropsWithChildren , CSSProperties } from 'react' ; import { clsx } from '../utils' ; export type AxisProps = { scale : NumericScaleLike ; orient : 'top' | 'bottom' | 'left' | 'right' ; tickSizeInner ? : number ; tickSizeOuter ? : number ; tickPadding ? : number ; size : number ; start : number ; style : AxisStyle ; transform ? : string ; } ; export type AxisStyle = { id : string ; classNames : { axisTick ? : string ; } ; styles : { axisTick ? : CSSProperties ; } ; } ; declare type TickProps = { pos : number ; spacing : number ; tickSizeInner : number ; orient : 'top' | 'bottom' | 'left' | 'right' ; name ? : string ; style : AxisStyle ; } ; const HorizontalTick = React . memo ( function HorizontalTick ( { pos , spacing , tickSizeInner , orient , name , style , } ) { const k = orient === 'top' || orient === 'left' ? - 1 : 1 ; return ( < g transform = { `translate(0, ${ pos + 0.5 })` } > { name && ( < text x = { k * spacing } dy = { '0.32em' } className = { clsx ( `axisTextStyle-${ style . id } `, orient === 'right' ? ` startText - $ { style . id } ` : ` endText - $ { style . id } `, style.classNames.axisTick)} style={style.styles.axisTick}>
          {name}
        </text>)}
      <line x2={k * tickSizeInner} className={` axisLine - $ { style . id } `}/>
    </g>);
});
const VerticalTick = /*!#__PURE__*/ React.memo(function VerticalTick({ pos, name, spacing, orient, tickSizeInner, style, }) {
    const k = orient === 'top' || orient === 'left' ? -1 : 1;
    return (<g transform={` translate ( $ { pos + 0.5 } , 0 ) `}>
      {name && (<text y={k * spacing} dy={orient === 'top' ? '0em' : '0.71em'} className={clsx(` axisTextStyle - $ { style . id } `, style.classNames.axisTick)} style={style.styles.axisTick}>
          {name}
        </text>)}
      <line y2={k * tickSizeInner} className={` axisLine - $ { style . id } `}/>
    </g>);
});
export default function Axis({ scale, orient, tickSizeInner = 6, tickSizeOuter = 6, tickPadding = 3, size, start, style, transform, }) {
    const spacing = Math.max(tickSizeInner, 0) + tickPadding;
    const range0 = start;
    const range1 = size;
    const k = orient === 'top' || orient === 'left' ? -1 : 1;
    const Tick = orient === 'left' || orient === 'right' ? HorizontalTick : VerticalTick;
    const values = scale
        .ticks()
        .map((d) => (typeof d === 'number' ? { value: d, label: d.toLocaleString() } : d));
    return (<g transform={transform}>
      {values.map((d) => (<Tick key={d.value} pos={scale(d.value)} name={d.label} spacing={spacing} tickSizeInner={tickSizeInner} orient={orient} style={style}/>))}
      <path className={` axisLine - $ { style . id } `} d={orient === 'left' || orient === 'right'
            ? tickSizeOuter
                ? ` M$ { k * tickSizeOuter } , $ { range0 } H0 .5 V$ { range1 } H$ { k * tickSizeOuter } `
                : ` M0 .5 , $ { range0 } V$ { range1 } `
            : tickSizeOuter
                ? ` M$ { range0 } , $ { k * tickSizeOuter } V0 .5 H$ { range1 } V$ { k * tickSizeOuter } `
                : ` M$ { range0 } , 0.5 H$ { range1 } `}/>
    </g>);
}
