From dfbd466b0292871daaad02263904536c55133edd Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Mon, 3 Aug 2020 14:31:37 -0700 Subject: [PATCH 1/2] feat(grid): update scale types in vx/grid --- .../vx-demo/src/sandboxes/vx-area/Example.tsx | 4 +- .../vx-demo/src/sandboxes/vx-axis/Example.tsx | 2 +- .../src/sandboxes/vx-barstack/Example.tsx | 2 +- packages/vx-grid/package.json | 1 + packages/vx-grid/src/grids/Grid.tsx | 60 +++++++++---------- packages/vx-grid/src/grids/GridColumns.tsx | 20 ++++--- packages/vx-grid/src/grids/GridRows.tsx | 20 ++++--- packages/vx-grid/src/types.ts | 17 +++--- 8 files changed, 64 insertions(+), 62 deletions(-) diff --git a/packages/vx-demo/src/sandboxes/vx-area/Example.tsx b/packages/vx-demo/src/sandboxes/vx-area/Example.tsx index d78e9eb4e..38401b2e9 100644 --- a/packages/vx-demo/src/sandboxes/vx-area/Example.tsx +++ b/packages/vx-demo/src/sandboxes/vx-area/Example.tsx @@ -109,7 +109,7 @@ export default withTooltip( /> - + ( strokeOpacity={0.3} pointerEvents="none" /> - + - + - + = Omit< - AllGridRowsProps, +export type GridProps = Omit< + AllGridRowsProps & AllGridColumnProps, CommonPropsToOmit -> & - Omit, CommonPropsToOmit> & { - /** `@vx/scale` or `d3-scale` object used to map from ScaleInput to x-coordinates (GridColumns). */ - xScale: Scale; - /** `@vx/scale` or `d3-scale` object used to map from ScaleInput to y-coordinates (GridRows). */ - yScale: Scale; - /** 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[]; + /** Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values. */ + columnTickValues?: ScaleInput[]; +}; -export default function Grid({ +export default function Grid({ top, left, xScale, @@ -61,10 +61,10 @@ export default function Grid({ rowTickValues, columnTickValues, ...restProps -}: GridProps) { +}: GridProps) { return ( - + ({ tickValues={rowTickValues} {...restProps} /> - + = CommonGridProps & { +export type GridColumnProps = CommonGridProps & { /** `@vx/scale` or `d3-scale` object used to map from ScaleInput to x-coordinates. */ - scale: Scale; + scale: Scale; + /** Exact values used to generate grid coordinates (y- for Rows, x- for Columns) lines using `scale`. Overrides `numTicks` if specified. */ + tickValues?: ScaleInput[]; /** Total height of the each grid column line. */ height: number; }; -export type AllGridColumnProps = GridColumnProps & +export type AllGridColumnProps = GridColumnProps & Omit< LineProps & Omit, keyof LineProps>, - keyof GridColumnProps | keyof CommonGridProps + keyof GridColumnProps >; -export default function GridColumns({ +export default function GridColumns({ top = 0, left = 0, scale, @@ -32,9 +35,8 @@ export default function GridColumns({ offset, tickValues, ...restProps -}: AllGridColumnProps) { - const ticks = (tickValues || - (scale.ticks ? scale.ticks(numTicks) : scale.domain())) as ScaleInput[]; +}: AllGridColumnProps) { + const ticks = tickValues ?? getTicks(scale, numTicks); return ( {ticks.map((d, i) => { diff --git a/packages/vx-grid/src/grids/GridRows.tsx b/packages/vx-grid/src/grids/GridRows.tsx index b68cf1521..ced58a5de 100644 --- a/packages/vx-grid/src/grids/GridRows.tsx +++ b/packages/vx-grid/src/grids/GridRows.tsx @@ -3,22 +3,25 @@ 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 = CommonGridProps & { +export type GridRowsProps = CommonGridProps & { /** `@vx/scale` or `d3-scale` object used to map from ScaleInput to y-coordinates. */ - scale: Scale; + scale: Scale; + /** Exact values used to generate grid coordinates (y- for Rows, x- for Columns) lines using `scale`. Overrides `numTicks` if specified. */ + tickValues?: ScaleInput[]; /** Total width of the each grid row line. */ width: number; }; -export type AllGridRowsProps = GridRowsProps & +export type AllGridRowsProps = GridRowsProps & Omit< LineProps & Omit, keyof LineProps>, - keyof GridRowsProps | keyof CommonGridProps + keyof GridRowsProps >; -export default function GridRows({ +export default function GridRows({ top = 0, left = 0, scale, @@ -32,9 +35,8 @@ export default function GridRows({ offset, tickValues, ...restProps -}: AllGridRowsProps) { - const ticks = (tickValues || - (scale.ticks ? scale.ticks(numTicks) : scale.domain())) as ScaleInput[]; +}: AllGridRowsProps) { + const ticks = tickValues ?? getTicks(scale, numTicks); return ( {ticks.map((d, i) => { diff --git a/packages/vx-grid/src/types.ts b/packages/vx-grid/src/types.ts index fbae345fb..a20bd4e55 100644 --- a/packages/vx-grid/src/types.ts +++ b/packages/vx-grid/src/types.ts @@ -1,10 +1,9 @@ -/** Generic d3 scale type. */ -export interface Scale