Skip to content

Commit

Permalink
new(axis): pass all tick values in tickLabelProps signature (#1044)
Browse files Browse the repository at this point in the history 
* new(axis/tickLabelProps): use signature fn(value, index, tickValues)

* fix(axis/tickLabelProps): fix signature

* fix(xychart/BaseAxis): implement new tickLabelProps signature
  • Loading branch information
@williaster
williaster authored Feb 5, 2021
1 parent 91a8a80 commit a65c635
Show file tree
Hide file tree
Showing 9 changed files with 76 additions and 71 deletions.
4 changes: 2 additions & 2 deletions packages/visx-axis/src/axis/AxisRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ export default function AxisRenderer<Scale extends AxisScale>({
strokeWidth = 1,
tickClassName,
tickComponent,
tickLabelProps = (/** tickValue, index */) => defaultTextProps,
tickLabelProps = (/** tickValue, index, tickValues */) => defaultTextProps,
tickLength = 8,
tickStroke = '#222',
tickTransform,
ticks,
ticksComponent = Ticks,
}: AxisRendererProps<Scale>) {
// compute the max tick label size to compute label offset
const allTickLabelProps = ticks.map(({ value, index }) => tickLabelProps(value, index));
const allTickLabelProps = ticks.map(({ value, index }) => tickLabelProps(value, index, ticks));
const maxTickLabelFontSize = Math.max(
10,
...allTickLabelProps.map(props => (typeof props.fontSize === 'number' ? props.fontSize : 0)),
Expand Down
6 changes: 5 additions & 1 deletion packages/visx-axis/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ export type TickFormatter<T> = (
values: { value: T; index: number }[],
) => FormattedValue;

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

export type TickRendererProps = Partial<TextProps> & {
x: number;
Expand Down
43 changes: 26 additions & 17 deletions packages/visx-axis/test/Axis.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ const axisProps = {
};

describe('<Axis />', () => {
test('it should be defined', () => {
it('should be defined', () => {
expect(Axis).toBeDefined();
});

test('it should render with class .visx-axis', () => {
it('should render with class .visx-axis', () => {
const wrapper = shallow(<Axis {...axisProps} />);
expect(wrapper.prop('className')).toEqual('visx-axis');
});

test('it should call children function with required args', () => {
it('should call children function with required args', () => {
const mockFn = jest.fn();
shallow(<Axis {...axisProps}>{mockFn}</Axis>);
const args = mockFn.mock.calls[0][0];
Expand All @@ -44,7 +44,7 @@ describe('<Axis />', () => {
expect(Object.keys(args.ticks[0])).toEqual(['value', 'index', 'from', 'to', 'formattedValue']);
});

test('it should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
it('should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
const axisClassName = 'axis-test-class';
const axisLineClassName = 'axisline-test-class';
const labelClassName = 'label-test-class';
Expand All @@ -66,7 +66,7 @@ describe('<Axis />', () => {
expect(wrapper.find(`.${tickClassName}`).length).toBeGreaterThan(0);
});

test('it should pass the output of tickLabelProps to tick labels', () => {
it('should pass the output of tickLabelProps to tick labels', () => {
const tickProps = { fontSize: 50, fill: 'magenta' };
const wrapper = shallow(<Axis {...axisProps} tickLabelProps={() => tickProps} />);

Expand All @@ -78,13 +78,22 @@ describe('<Axis />', () => {
expect.hasAssertions();
});

test('it should call the tickLabelProps func with the signature (tickValue, index)', () => {
it('should call the tickLabelProps func with the signature (value, index, values)', () => {
expect.hasAssertions();
shallow(
<Axis
{...axisProps}
tickLabelProps={(value, index) => {
tickLabelProps={(value, index, values) => {
expect(value).toEqual(expect.any(Number));
expect(index).toBeGreaterThan(-1);
expect(values).toEqual(
expect.arrayContaining([
expect.objectContaining({
value: expect.any(Number),
index: expect.any(Number),
}),
]),
);
return {};
}}
/>,
Expand All @@ -93,15 +102,15 @@ describe('<Axis />', () => {
expect.hasAssertions();
});

test('it should pass labelProps to the axis label', () => {
it('should pass labelProps to the axis label', () => {
const labelProps = { fontSize: 50, fill: 'magenta' };
const wrapper = shallow(<Axis {...axisProps} labelProps={labelProps} />);

const label = wrapper.find('.visx-axis-label');
expect(label.find(Text).props()).toEqual(expect.objectContaining(labelProps));
});

test('it should render the 0th tick if hideZero is false', () => {
it('should render the 0th tick if hideZero is false', () => {
const wrapper = shallow(<Axis {...axisProps} hideZero={false} />);
expect(
wrapper
Expand All @@ -111,7 +120,7 @@ describe('<Axis />', () => {
).toBe('visx-tick-0-0');
});

test('it should not show 0th tick if hideZero is true', () => {
it('should not show 0th tick if hideZero is true', () => {
const wrapper = shallow(<Axis {...axisProps} hideZero />);
expect(
wrapper
Expand All @@ -121,7 +130,7 @@ describe('<Axis />', () => {
).toBe('visx-tick-1-0');
});

test('it should SHOW an axis line if hideAxisLine is false', () => {
it('should SHOW an axis line if hideAxisLine is false', () => {
const wrapper = shallow(<Axis {...axisProps} hideAxisLine={false} />);
expect(
wrapper
Expand All @@ -131,7 +140,7 @@ describe('<Axis />', () => {
).toHaveLength(1);
});

test('it should HIDE an axis line if hideAxisLine is true', () => {
it('should HIDE an axis line if hideAxisLine is true', () => {
const wrapper = shallow(<Axis {...axisProps} hideAxisLine />);
expect(
wrapper
Expand All @@ -141,12 +150,12 @@ describe('<Axis />', () => {
).toHaveLength(0);
});

test('it should SHOW ticks if hideTicks is false', () => {
it('should SHOW ticks if hideTicks is false', () => {
const wrapper = shallow(<Axis {...axisProps} hideTicks={false} />);
expect(wrapper.children().find('.visx-axis-tick').length).toBeGreaterThan(0);
});

test('it should HIDE ticks if hideTicks is true', () => {
it('should HIDE ticks if hideTicks is true', () => {
const wrapper = shallow(<Axis {...axisProps} hideTicks />);
expect(
wrapper
Expand All @@ -156,7 +165,7 @@ describe('<Axis />', () => {
).toHaveLength(0);
});

test('it should render one tick for each value specified in tickValues', () => {
it('should render one tick for each value specified in tickValues', () => {
let wrapper = shallow(<Axis {...axisProps} tickValues={[]} />);
expect(
wrapper
Expand All @@ -173,7 +182,7 @@ describe('<Axis />', () => {
expect(wrapper.children().find('.visx-axis-tick')).toHaveLength(7);
});

test('it should use tickFormat to format ticks if passed', () => {
it('should use tickFormat to format ticks if passed', () => {
const wrapper = shallow(<Axis {...axisProps} tickValues={[0]} tickFormat={() => 'test!!!'} />);
expect(
wrapper
Expand All @@ -197,7 +206,7 @@ describe('<Axis />', () => {
).toBe('0');
});

test('it should use center if scale is band', () => {
it('should use center if scale is band', () => {
const wrapper = shallow(
<Axis
orientation="bottom"
Expand Down
16 changes: 8 additions & 8 deletions packages/visx-axis/test/AxisBottom.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ const axisProps = {
};

describe('<AxisBottom />', () => {
test('it should be defined', () => {
it('should be defined', () => {
expect(AxisBottom).toBeDefined();
});

test('it should render with class .visx-axis-bottom', () => {
it('should render with class .visx-axis-bottom', () => {
const wrapper = shallow(<AxisBottom {...axisProps} />);
expect(wrapper.prop('axisClassName')).toEqual('visx-axis-bottom');
});

test('it should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
it('should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
const axisClassName = 'axis-test-class';
const axisLineClassName = 'axisline-test-class';
const labelClassName = 'label-test-class';
Expand All @@ -45,29 +45,29 @@ describe('<AxisBottom />', () => {
expect(axis.prop('tickClassName')).toBe(tickClassName);
});

test('it should default labelOffset prop to 8', () => {
it('should default labelOffset prop to 8', () => {
const wrapper = shallow(<AxisBottom {...axisProps} />);
expect(wrapper.prop('labelOffset')).toEqual(8);
});

test('it should set labelOffset prop', () => {
it('should set labelOffset prop', () => {
const labelOffset = 3;
const wrapper = shallow(<AxisBottom {...axisProps} labelOffset={labelOffset} />);
expect(wrapper.prop('labelOffset')).toEqual(labelOffset);
});

test('it should default tickLength prop to 8', () => {
it('should default tickLength prop to 8', () => {
const wrapper = shallow(<AxisBottom {...axisProps} />);
expect(wrapper.prop('tickLength')).toEqual(8);
});

test('it should set tickLength prop', () => {
it('should set tickLength prop', () => {
const tickLength = 15;
const wrapper = shallow(<AxisBottom {...axisProps} tickLength={tickLength} />);
expect(wrapper.prop('tickLength')).toEqual(tickLength);
});

test('it should set label prop', () => {
it('should set label prop', () => {
const label = 'test';
const wrapper = shallow(<AxisBottom {...axisProps} label={label} />).dive();
const text = wrapper.find('.visx-axis-label');
Expand Down
16 changes: 8 additions & 8 deletions packages/visx-axis/test/AxisLeft.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ const axisProps = {
};

describe('<AxisLeft />', () => {
test('it should be defined', () => {
it('should be defined', () => {
expect(AxisLeft).toBeDefined();
});

test('it should render with class .visx-axis-left', () => {
it('should render with class .visx-axis-left', () => {
const wrapper = shallow(<AxisLeft {...axisProps} />);
expect(wrapper.prop('axisClassName')).toEqual('visx-axis-left');
});

test('it should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
it('should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
const axisClassName = 'axis-test-class';
const axisLineClassName = 'axisline-test-class';
const labelClassName = 'label-test-class';
Expand All @@ -45,29 +45,29 @@ describe('<AxisLeft />', () => {
expect(axis.prop('tickClassName')).toBe(tickClassName);
});

test('it should default labelOffset prop to 36', () => {
it('should default labelOffset prop to 36', () => {
const wrapper = shallow(<AxisLeft {...axisProps} />);
expect(wrapper.prop('labelOffset')).toEqual(36);
});

test('it should set labelOffset prop', () => {
it('should set labelOffset prop', () => {
const labelOffset = 3;
const wrapper = shallow(<AxisLeft {...axisProps} labelOffset={labelOffset} />);
expect(wrapper.prop('labelOffset')).toEqual(labelOffset);
});

test('it should default tickLength prop to 8', () => {
it('should default tickLength prop to 8', () => {
const wrapper = shallow(<AxisLeft {...axisProps} />);
expect(wrapper.prop('tickLength')).toEqual(8);
});

test('it should set tickLength prop', () => {
it('should set tickLength prop', () => {
const tickLength = 15;
const wrapper = shallow(<AxisLeft {...axisProps} tickLength={tickLength} />);
expect(wrapper.prop('tickLength')).toEqual(tickLength);
});

test('it should set label prop', () => {
it('should set label prop', () => {
const label = 'test';
const wrapper = shallow(<AxisLeft {...axisProps} label={label} />).dive();
const text = wrapper.find('.visx-axis-label');
Expand Down
16 changes: 8 additions & 8 deletions packages/visx-axis/test/AxisRight.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ const axisProps = {
};

describe('<AxisRight />', () => {
test('it should be defined', () => {
it('should be defined', () => {
expect(AxisRight).toBeDefined();
});

test('it should render with class .visx-axis-right', () => {
it('should render with class .visx-axis-right', () => {
const wrapper = shallow(<AxisRight {...axisProps} />);
expect(wrapper.prop('axisClassName')).toEqual('visx-axis-right');
});

test('it should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
it('should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => {
const axisClassName = 'axis-test-class';
const axisLineClassName = 'axisline-test-class';
const labelClassName = 'label-test-class';
Expand All @@ -45,29 +45,29 @@ describe('<AxisRight />', () => {
expect(axis.prop('tickClassName')).toBe(tickClassName);
});

test('it should default labelOffset prop to 36', () => {
it('should default labelOffset prop to 36', () => {
const wrapper = shallow(<AxisRight {...axisProps} />);
expect(wrapper.prop('labelOffset')).toEqual(36);
});

test('it should set labelOffset prop', () => {
it('should set labelOffset prop', () => {
const labelOffset = 3;
const wrapper = shallow(<AxisRight {...axisProps} labelOffset={labelOffset} />);
expect(wrapper.prop('labelOffset')).toEqual(labelOffset);
});

test('it should default tickLength prop to 8', () => {
it('should default tickLength prop to 8', () => {
const wrapper = shallow(<AxisRight {...axisProps} />);
expect(wrapper.prop('tickLength')).toEqual(8);
});

test('it should set tickLength prop', () => {
it('should set tickLength prop', () => {
const tickLength = 15;
const wrapper = shallow(<AxisRight {...axisProps} tickLength={tickLength} />);
expect(wrapper.prop('tickLength')).toEqual(tickLength);
});

test('it should set label prop', () => {
it('should set label prop', () => {
const label = 'test';
const wrapper = shallow(<AxisRight {...axisProps} label={label} />).dive();
const text = wrapper.find('.visx-axis-label');
Expand Down
Loading

0 comments on commit a65c635

Please sign in to comment.