Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(axis): support object type tickLabelProp #1662

Merged
merged 3 commits into from Mar 8, 2023
Merged

feat(axis): support object type tickLabelProp #1662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d63ee17
Allow specifying 'tickLabelProps' as object
Robin-Hoodie Feb 16, 2023
7b437c3
Don't have consumer override all default props if only specifying a c…
Robin-Hoodie Feb 28, 2023
a501cb5
refactor: repeat logic for improved readability over utility function
Robin-Hoodie Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 17 additions & 10 deletions packages/visx-axis/src/axis/AxisBottom.tsx
View file
Open in desktop
Expand Up @@ -4,28 +4,35 @@ import Axis from './Axis';
import Orientation from '../constants/orientation';
import { SharedAxisProps, AxisScale } from '../types';

export const bottomTickLabelProps = (/** tickValue, index */) =>
Robin-Hoodie marked this conversation as resolved.
Show resolved Hide resolved
({
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'middle',
} as const);
export const bottomTickLabelProps = {
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'middle',
} as const;

export default function AxisBottom<Scale extends AxisScale>({
axisClassName,
labelOffset = 8,
tickLabelProps = bottomTickLabelProps,
tickLength = 8,
tickLabelProps,
...restProps
}: SharedAxisProps<Scale>) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...bottomTickLabelProps,
...tickLabelProps,
};

return (
<Axis
axisClassName={cx('visx-axis-bottom', axisClassName)}
labelOffset={labelOffset}
orientation={Orientation.bottom}
tickLabelProps={tickLabelProps}
tickLabelProps={tickLabelPropsFinal}
tickLength={tickLength}
{...restProps}
/>
Expand Down
28 changes: 17 additions & 11 deletions packages/visx-axis/src/axis/AxisLeft.tsx
View file
Open in desktop
Expand Up @@ -4,29 +4,35 @@ import Axis from './Axis';
import Orientation from '../constants/orientation';
import { SharedAxisProps, AxisScale } from '../types';

export const leftTickLabelProps = (/** tickValue, index */) =>
({
dx: '-0.25em',
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'end',
} as const);
export const leftTickLabelProps = {
dx: '-0.25em',
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'end',
} as const;

export default function AxisLeft<Scale extends AxisScale>({
axisClassName,
labelOffset = 36,
tickLabelProps = leftTickLabelProps,
tickLength = 8,
tickLabelProps,
...restProps
}: SharedAxisProps<Scale>) {
const tickLabelPropsFinal =
Robin-Hoodie marked this conversation as resolved.
Show resolved Hide resolved
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...leftTickLabelProps,
...tickLabelProps,
};
return (
<Axis
axisClassName={cx('visx-axis-left', axisClassName)}
labelOffset={labelOffset}
orientation={Orientation.left}
tickLabelProps={tickLabelProps}
tickLabelProps={tickLabelPropsFinal}
tickLength={tickLength}
{...restProps}
/>
Expand Down
12 changes: 10 additions & 2 deletions packages/visx-axis/src/axis/AxisRenderer.tsx
View file
Open in desktop
Expand Up @@ -35,15 +35,23 @@ export default function AxisRenderer<Scale extends AxisScale>({
tickClassName,
tickComponent,
tickLineProps,
tickLabelProps = (/** tickValue, index, tickValues */) => defaultTextProps,
tickLabelProps,
tickLength = 8,
tickStroke = '#222',
tickTransform,
ticks,
ticksComponent = Ticks,
}: AxisRendererProps<Scale>) {
const tickLabelPropsDefault = {
...defaultTextProps,
...(typeof tickLabelProps === 'object' ? tickLabelProps : null),
};
// compute the max tick label size to compute label offset
const allTickLabelProps = ticks.map(({ value, index }) => tickLabelProps(value, index, ticks));
const allTickLabelProps = ticks.map(({ value, index }) =>
typeof tickLabelProps === 'function'
? tickLabelProps(value, index, ticks)
: tickLabelPropsDefault,
);
const maxTickLabelFontSize = Math.max(
10,
...allTickLabelProps.map((props) => (typeof props.fontSize === 'number' ? props.fontSize : 0)),
Expand Down
28 changes: 17 additions & 11 deletions packages/visx-axis/src/axis/AxisRight.tsx
View file
Open in desktop
Expand Up @@ -6,29 +6,35 @@ import { SharedAxisProps, AxisScale } from '../types';

export type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;

export const rightTickLabelProps = (/** tickValue, index */) =>
({
dx: '0.25em',
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'start',
} as const);
export const rightTickLabelProps = {
dx: '0.25em',
dy: '0.25em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'start',
} as const;

export default function AxisRight<Scale extends AxisScale>({
axisClassName,
labelOffset = 36,
tickLabelProps = rightTickLabelProps,
tickLength = 8,
tickLabelProps,
...restProps
}: AxisRightProps<Scale>) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...rightTickLabelProps,
...tickLabelProps,
};
return (
<Axis
axisClassName={cx('visx-axis-right', axisClassName)}
labelOffset={labelOffset}
orientation={Orientation.right}
tickLabelProps={tickLabelProps}
tickLabelProps={tickLabelPropsFinal}
tickLength={tickLength}
{...restProps}
/>
Expand Down
26 changes: 16 additions & 10 deletions packages/visx-axis/src/axis/AxisTop.tsx
View file
Open in desktop
Expand Up @@ -6,28 +6,34 @@ import { SharedAxisProps, AxisScale } from '../types';

export type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;

export const topTickLabelProps = (/** tickValue, index */) =>
({
dy: '-0.75em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'middle',
} as const);
export const topTickLabelProps = {
dy: '-0.75em',
fill: '#222',
fontFamily: 'Arial',
fontSize: 10,
textAnchor: 'middle',
} as const;

export default function AxisTop<Scale extends AxisScale>({
axisClassName,
labelOffset = 8,
tickLabelProps = topTickLabelProps,
tickLength = 8,
tickLabelProps,
...restProps
}: AxisTopProps<Scale>) {
const tickLabelPropsFinal =
typeof tickLabelProps === 'function'
? tickLabelProps
: {
...topTickLabelProps,
...tickLabelProps,
};
return (
<Axis
axisClassName={cx('visx-axis-top', axisClassName)}
labelOffset={labelOffset}
orientation={Orientation.top}
tickLabelProps={tickLabelProps}
tickLabelProps={tickLabelPropsFinal}
tickLength={tickLength}
{...restProps}
/>
Expand Down
10 changes: 4 additions & 6 deletions packages/visx-axis/src/types.ts
View file
Open in desktop
Expand Up @@ -21,11 +21,9 @@ export type TickFormatter<T> = (
values: { value: T; index: number }[],
) => FormattedValue;

export type TickLabelProps<T> = (
value: T,
index: number,
values: { value: T; index: number }[],
) => Partial<TextProps>;
export type TickLabelProps<T> =
| Partial<TextProps>
| ((value: T, index: number, values: { value: T; index: number }[]) => Partial<TextProps>);

export type TickRendererProps = Partial<TextProps> & {
x: number;
Expand Down Expand Up @@ -89,7 +87,7 @@ export type CommonProps<Scale extends AxisScale> = {
ticksComponent?: (tickRendererProps: TicksRendererProps<Scale>) => ReactNode;
/** A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous_tickFormat) for the tick text. */
tickFormat?: TickFormatter<ScaleInput<Scale>>;
/** A function that returns props for a given tick label. */
/** Either an object with the props for all tick labels or a function that returns props for a given tick label. */
tickLabelProps?: TickLabelProps<ScaleInput<Scale>>;
/** The length of the tick lines. */
tickLength?: number;
Expand Down
13 changes: 6 additions & 7 deletions packages/visx-demo/src/sandboxes/visx-axis/Example.tsx
View file
Open in desktop
Expand Up @@ -24,13 +24,12 @@ const margin = {
left: 50,
};

const tickLabelProps = () =>
({
fill: tickLabelColor,
fontSize: 12,
fontFamily: 'sans-serif',
textAnchor: 'middle',
} as const);
const tickLabelProps = {
fill: tickLabelColor,
fontSize: 12,
fontFamily: 'sans-serif',
textAnchor: 'middle',
} as const;

const getMinMax = (vals: (number | { valueOf(): number })[]) => {
const numericVals = vals.map(coerceNumber);
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-demo/src/sandboxes/visx-bargroup-horizontal/Example.tsx
View file
Open in desktop
Expand Up @@ -110,12 +110,12 @@ export default function Example({
tickStroke={green}
tickFormat={formatDate}
hideAxisLine
tickLabelProps={() => ({
tickLabelProps={{
fill: green,
fontSize: 11,
textAnchor: 'end',
dy: '0.33em',
})}
}}
/>
</Group>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-demo/src/sandboxes/visx-bargroup/Example.tsx
View file
Open in desktop
Expand Up @@ -108,11 +108,11 @@ export default function Example({
stroke={green}
tickStroke={green}
hideAxisLine
tickLabelProps={() => ({
tickLabelProps={{
fill: green,
fontSize: 11,
textAnchor: 'middle',
})}
}}
/>
</svg>
);
Expand Down
8 changes: 4 additions & 4 deletions packages/visx-demo/src/sandboxes/visx-barstack-horizontal/Example.tsx
View file
Open in desktop
Expand Up @@ -151,23 +151,23 @@ export default withTooltip<BarStackHorizontalProps, TooltipData>(
tickFormat={formatDate}
stroke={purple3}
tickStroke={purple3}
tickLabelProps={() => ({
tickLabelProps={{
fill: purple3,
fontSize: 11,
textAnchor: 'end',
dy: '0.33em',
})}
}}
/>
<AxisBottom
top={yMax}
scale={temperatureScale}
stroke={purple3}
tickStroke={purple3}
tickLabelProps={() => ({
tickLabelProps={{
fill: purple3,
fontSize: 11,
textAnchor: 'middle',
})}
}}
/>
</Group>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-demo/src/sandboxes/visx-barstack/Example.tsx
View file
Open in desktop
Expand Up @@ -169,11 +169,11 @@ export default function Example({
tickFormat={formatDate}
stroke={purple3}
tickStroke={purple3}
tickLabelProps={() => ({
tickLabelProps={{
fill: purple3,
fontSize: 11,
textAnchor: 'middle',
})}
}}
/>
</svg>
<div
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-demo/src/sandboxes/visx-brush/AreaChart.tsx
View file
Open in desktop
Expand Up @@ -81,7 +81,7 @@ export default function AreaChart({
numTicks={width > 520 ? 10 : 5}
stroke={axisColor}
tickStroke={axisColor}
tickLabelProps={() => axisBottomTickLabelProps}
tickLabelProps={axisBottomTickLabelProps}
/>
)}
{!hideLeftAxis && (
Expand All @@ -90,7 +90,7 @@ export default function AreaChart({
numTicks={5}
stroke={axisColor}
tickStroke={axisColor}
tickLabelProps={() => axisLeftTickLabelProps}
tickLabelProps={axisLeftTickLabelProps}
/>
)}
{children}
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-demo/src/sandboxes/visx-shape-line-radial/Example.tsx
View file
Open in desktop
Expand Up @@ -119,7 +119,7 @@ function Example({ width, height, animate = true }: LineRadialProps) {
scale={reverseYScale}
numTicks={5}
tickStroke="none"
tickLabelProps={(val) => ({
tickLabelProps={{
fontSize: 8,
fill: blue,
fillOpacity: 1,
Expand All @@ -129,7 +129,7 @@ function Example({ width, height, animate = true }: LineRadialProps) {
stroke: strokeColor,
strokeWidth: 0.5,
paintOrder: 'stroke',
})}
}}
tickFormat={formatTicks}
hideAxisLine
/>
Expand Down
4 changes: 3 additions & 1 deletion packages/visx-xychart/src/components/axis/BaseAxis.tsx
View file
Open in desktop
Expand Up @@ -47,7 +47,9 @@ export default function BaseAxis<Scale extends AxisScale>({
orientation === 'left' || orientation === 'right'
? margin?.[orientation]
: undefined,
...maybeTickLabelProps?.(value, index, values),
...(typeof maybeTickLabelProps === 'function'
? maybeTickLabelProps(value, index, values)
: maybeTickLabelProps),
})
: undefined,
[maybeTickLabelProps, axisStyles, orientation, margin],
Expand Down