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.

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

feat(grid): update scale types in vx/grid #775

Merged
merged 2 commits into from
Aug 4, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/vx-demo/src/sandboxes/vx-area/Example.tsx
Original file line number Diff line number Diff line change
@@ -109,15 +109,15 @@ export default withTooltip<AreaProps, TooltipData>(
/>
<LinearGradient id="area-background-gradient" from={background} to={background2} />
<LinearGradient id="area-gradient" from={accentColor} to={accentColor} toOpacity={0.1} />
<GridRows<number>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The generic type can be inferred from the input scale and this is no longer needed.

<GridRows
scale={stockValueScale}
width={xMax}
strokeDasharray="3,3"
stroke={accentColor}
strokeOpacity={0.3}
pointerEvents="none"
/>
<GridColumns<Date>
<GridColumns
scale={dateScale}
height={yMax}
strokeDasharray="3,3"
2 changes: 1 addition & 1 deletion packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
Original file line number Diff line number Diff line change
@@ -118,7 +118,7 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
fill={gridColor}
fillOpacity={0.2}
/>
<Grid<typeof values[0], number>
<Grid
xScale={scale}
yScale={yScale}
stroke={gridColor}
2 changes: 1 addition & 1 deletion packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
Original file line number Diff line number Diff line change
@@ -107,7 +107,7 @@ export default function Example({
<div style={{ position: 'relative' }}>
<svg ref={containerRef} width={width} height={height}>
<rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
<Grid<string, number>
<Grid
top={margin.top}
left={margin.left}
xScale={dateScale}
1 change: 1 addition & 0 deletions packages/vx-grid/package.json
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@
"@types/react": "*",
"@vx/group": "0.0.198",
"@vx/point": "0.0.198",
"@vx/scale": "0.0.198",
"@vx/shape": "0.0.198",
"classnames": "^2.2.5",
"prop-types": "^15.6.2"
60 changes: 30 additions & 30 deletions packages/vx-grid/src/grids/Grid.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import cx from 'classnames';
import { Group } from '@vx/group';
import { ScaleInput } from '@vx/scale';
import GridRows, { AllGridRowsProps } from './GridRows';
import GridColumns, { AllGridColumnProps } from './GridColumns';
import { Scale, CommonGridProps } from '../types';
import { CommonGridProps, GridScale } from '../types';

type CommonPropsToOmit =
| 'scale'
@@ -14,34 +15,33 @@ type CommonPropsToOmit =
| 'from'
| 'to';

export type GridProps<XScaleInput, YScaleInput> = Omit<
AllGridRowsProps<YScaleInput>,
export type GridProps<XScale extends GridScale, YScale extends GridScale> = Omit<
AllGridRowsProps<YScale> & AllGridColumnProps<XScale>,
CommonPropsToOmit
> &
Omit<AllGridColumnProps<XScaleInput>, CommonPropsToOmit> & {
/** `@vx/scale` or `d3-scale` object used to map from ScaleInput to x-coordinates (GridColumns). */
xScale: Scale<XScaleInput, number>;
/** `@vx/scale` or `d3-scale` object used to map from ScaleInput to y-coordinates (GridRows). */
yScale: Scale<YScaleInput, number>;
/** Pixel offset to apply as an x-translation to each GridColumns line. */
xOffset?: CommonGridProps['offset'];
/** Pixel offset to apply as an y-translation to each GridRows line. */
yOffset?: CommonGridProps['offset'];
/** Approximate number of row gridlines. */
numTicksRows?: CommonGridProps['numTicks'];
/** Approximate number of column gridlines. */
numTicksColumns?: CommonGridProps['numTicks'];
/** Style object to apply to GridRows. */
rowLineStyle?: CommonGridProps['lineStyle'];
/** Style object to apply to GridColumns. */
columnLineStyle?: CommonGridProps['lineStyle'];
/** Exact values to be used for GridRows lines, passed to yScale. Use this if you need precise control over GridRows values. */
rowTickValues?: CommonGridProps['tickValues'];
/** Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values. */
columnTickValues?: CommonGridProps['tickValues'];
};
> & {
/** `@vx/scale` or `d3-scale` object used to map from ScaleInput to x-coordinates (GridColumns). */
xScale: XScale;
/** `@vx/scale` or `d3-scale` object used to map from ScaleInput to y-coordinates (GridRows). */
yScale: YScale;
/** Pixel offset to apply as an x-translation to each GridColumns line. */
xOffset?: CommonGridProps['offset'];
/** Pixel offset to apply as an y-translation to each GridRows line. */
yOffset?: CommonGridProps['offset'];
/** Approximate number of row gridlines. */
numTicksRows?: CommonGridProps['numTicks'];
/** Approximate number of column gridlines. */
numTicksColumns?: CommonGridProps['numTicks'];
/** Style object to apply to GridRows. */
rowLineStyle?: CommonGridProps['lineStyle'];
/** Style object to apply to GridColumns. */
columnLineStyle?: CommonGridProps['lineStyle'];
/** Exact values to be used for GridRows lines, passed to yScale. Use this if you need precise control over GridRows values. */
rowTickValues?: ScaleInput<YScale>[];
/** Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values. */
columnTickValues?: ScaleInput<XScale>[];
};

export default function Grid<XScaleInput, YScaleInput>({
export default function Grid<XScale extends GridScale, YScale extends GridScale>({
top,
left,
xScale,
@@ -61,10 +61,10 @@ export default function Grid<XScaleInput, YScaleInput>({
rowTickValues,
columnTickValues,
...restProps
}: GridProps<XScaleInput, YScaleInput>) {
}: GridProps<XScale, YScale>) {
return (
<Group className={cx('vx-grid', className)} top={top} left={left}>
<GridRows<YScaleInput>
<GridRows
className={className}
scale={yScale}
width={width}
@@ -77,7 +77,7 @@ export default function Grid<XScaleInput, YScaleInput>({
tickValues={rowTickValues}
{...restProps}
/>
<GridColumns<XScaleInput>
<GridColumns
className={className}
scale={xScale}
height={height}
25 changes: 15 additions & 10 deletions packages/vx-grid/src/grids/GridColumns.tsx
Original file line number Diff line number Diff line change
@@ -3,22 +3,28 @@ import cx from 'classnames';
import Line, { LineProps } from '@vx/shape/lib/shapes/Line';
import { Group } from '@vx/group';
import { Point } from '@vx/point';
import { Scale, CommonGridProps } from '../types';
import { getTicks, ScaleInput } from '@vx/scale';
import { CommonGridProps, GridScale } from '../types';

export type GridColumnProps<ScaleInput> = CommonGridProps & {
/** `@vx/scale` or `d3-scale` object used to map from ScaleInput to x-coordinates. */
scale: Scale<ScaleInput, number>;
export type GridColumnProps<Scale extends GridScale> = CommonGridProps & {
/** `@vx/scale` or `d3-scale` object used to convert value to position. */
scale: Scale;
/**
* Exact values used to generate grid lines using `scale`.
* Overrides `numTicks` if specified.
*/
tickValues?: ScaleInput<Scale>[];
/** Total height of the each grid column line. */
height: number;
};

export type AllGridColumnProps<ScaleInput> = GridColumnProps<ScaleInput> &
export type AllGridColumnProps<Scale extends GridScale> = GridColumnProps<Scale> &
Omit<
LineProps & Omit<React.SVGProps<SVGLineElement>, keyof LineProps>,
keyof GridColumnProps<ScaleInput> | keyof CommonGridProps
keyof GridColumnProps<Scale>
>;

export default function GridColumns<ScaleInput>({
export default function GridColumns<Scale extends GridScale>({
top = 0,
left = 0,
scale,
@@ -32,9 +38,8 @@ export default function GridColumns<ScaleInput>({
offset,
tickValues,
...restProps
}: AllGridColumnProps<ScaleInput>) {
const ticks = (tickValues ||
(scale.ticks ? scale.ticks(numTicks) : scale.domain())) as ScaleInput[];
}: AllGridColumnProps<Scale>) {
const ticks = tickValues ?? getTicks(scale, numTicks);
return (
<Group className={cx('vx-columns', className)} top={top} left={left}>
{ticks.map((d, i) => {
25 changes: 15 additions & 10 deletions packages/vx-grid/src/grids/GridRows.tsx
Original file line number Diff line number Diff line change
@@ -3,22 +3,28 @@ import cx from 'classnames';
import Line, { LineProps } from '@vx/shape/lib/shapes/Line';
import { Group } from '@vx/group';
import { Point } from '@vx/point';
import { Scale, CommonGridProps } from '../types';
import { getTicks, ScaleInput } from '@vx/scale';
import { CommonGridProps, GridScale } from '../types';

export type GridRowsProps<ScaleInput> = CommonGridProps & {
/** `@vx/scale` or `d3-scale` object used to map from ScaleInput to y-coordinates. */
scale: Scale<ScaleInput, number>;
export type GridRowsProps<Scale extends GridScale> = CommonGridProps & {
/** `@vx/scale` or `d3-scale` object used to convert value to position. */
scale: Scale;
/**
* Exact values used to generate grid lines using `scale`.
* Overrides `numTicks` if specified.
*/
tickValues?: ScaleInput<Scale>[];
/** Total width of the each grid row line. */
width: number;
};

export type AllGridRowsProps<ScaleInput> = GridRowsProps<ScaleInput> &
export type AllGridRowsProps<Scale extends GridScale> = GridRowsProps<Scale> &
Omit<
LineProps & Omit<React.SVGProps<SVGLineElement>, keyof LineProps>,
keyof GridRowsProps<ScaleInput> | keyof CommonGridProps
keyof GridRowsProps<Scale>
>;

export default function GridRows<ScaleInput>({
export default function GridRows<Scale extends GridScale>({
top = 0,
left = 0,
scale,
@@ -32,9 +38,8 @@ export default function GridRows<ScaleInput>({
offset,
tickValues,
...restProps
}: AllGridRowsProps<ScaleInput>) {
const ticks = (tickValues ||
(scale.ticks ? scale.ticks(numTicks) : scale.domain())) as ScaleInput[];
}: AllGridRowsProps<Scale>) {
const ticks = tickValues ?? getTicks(scale, numTicks);
return (
<Group className={cx('vx-rows', className)} top={top} left={left}>
{ticks.map((d, i) => {
17 changes: 7 additions & 10 deletions packages/vx-grid/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/** Generic d3 scale type. */
export interface Scale<Input = unknown, Output = unknown> {
(value: Input): Output | undefined;
ticks?: (count?: number) => Input[];
domain(): Input[];
range(): Output[] | [Output];
}
import { D3Scale } from '@vx/scale';

/** A catch-all type for scales that are compatible with grid */
export type GridScale =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
D3Scale<number, any, any>;

export type CommonGridProps = {
/** classname to apply to line group element. */
@@ -19,12 +18,10 @@ export type CommonGridProps = {
strokeWidth?: string | number;
/** Grid line stroke-dasharray attribute. */
strokeDasharray?: string;
/** Approximate number of grid lines. Approximate due to d3 alogrithm, specify `tickValues` for precise control. */
/** Approximate number of grid lines. Approximate due to d3 alogrithm, specify `tickValues` for precise control. */
numTicks?: number;
/** Styles to apply as grid line style. */
lineStyle?: React.CSSProperties;
/** Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines. */
offset?: number;
/** Exact values used to generate grid cordinates (y- for Rows, x- for Columns) lines using `scale`. Overrides `numTicks` if specified. */
tickValues?: number[];
};