feat: update vx/axis types #773
Conversation
|
|
||
| /** A catch-all type for scales that are compatible with axis */ | ||
| export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> = | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any |
There was a problem hiding this comment.
This has to be any. unknown does not work for this case.
| export type SharedAxisProps<ScaleInput> = { | ||
| /** The class name applied to the outermost axis group element. */ | ||
| axisClassName?: string; | ||
| interface CommonProps<Scale extends AxisScale> { |
There was a problem hiding this comment.
This is a new interface that is the shared props between Axis and AxisRenderer
| x: number; | ||
| y: number; | ||
| } | ||
|
|
||
| export type ChildRenderProps<ScaleInput> = { | ||
| export type AxisRendererProps<Scale extends AxisScale> = CommonProps<Scale> & { |
There was a problem hiding this comment.
Instead of accepting ScaleInput generic, accept Scale with the constraint that it must be a scale compatible for axis (compatible meaning scale output is AxisScaleOutput = number | NumberLike | undefined regardless of input type) then infer ScaleInput from Scale
| * * "Type 'number' is not assignable to type 'DefaultThresholdInput'" | ||
| */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export type AnyD3Scale = D3Scale<any, any, any>; |
There was a problem hiding this comment.
This has to be any. Cannot use unknown.
|
|
||
| export default function AxisBottom<ScaleInput>({ | ||
| children, | ||
| export default function AxisBottom<Scale extends AxisScale>({ |
There was a problem hiding this comment.
only destructure fields that are modified or used.
| @@ -0,0 +1,109 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Extracted from Axis.tsx
| @@ -161,7 +161,7 @@ export default function Example({ | |||
| } | |||
| </BarStack> | |||
| </Group> | |||
| <AxisBottom<string> | |||
| <AxisBottom | |||
There was a problem hiding this comment.
generic type can be inferred from the passed scale
| const tickSign = isLeft || isTop ? -1 : 1; | ||
|
|
||
| const position = center(scale.copy()); | ||
|
|
||
| const axisFromPoint = new Point({ |
There was a problem hiding this comment.
I extracted the logic for flipping x and y into util function createPoint({x, y}, horizontal).
💥 Breaking Changes
🚀 Enhancements
vx/axis
vx/scaleandvx/axis.Axisvx/scale
AnyD3Scale,InferD3ScaleOutput,InferD3ScaleDiscreteInput,InferD3ScaleThresholdInputandScaleInput.getTicks,coerceNumberandtoString.📝 Documentation
🏠 Internal
vx/axis
SharedAxisPropstype is now based on generic typeScaleinstead ofScaleInput. We can inferScaleInputfromScalebut not the other way around.Axis. Separate the logic that were used when a child renderer prop (children) was not provided into its own componentAxisRenderer. ThisAxisRendererwill receive the exact same props withchildrenso that enforces us to pass everything necessary.AxisRight,AxisLeft,AxisBottom,AxisTopto only list modified/used fields and pass the rest ofpropsthrough via....AxisOrientationand constantOrientation. Also refer to it asOrientationconsistently. (Replace allORIENTandAxisOrientationwithOrientation)center.tstogetTickPosition.ts,toNumberOrUndefined.tstocoerceNumber.ts,labelTransform.tstogetLabelTransform.ts🏋️ Tests