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

airbnb · Aug 3, 2020 · 6b0f90e · 6b0f90e
1 parent 2a5e23e
commit 6b0f90e
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 61 deletions.
diff --git a/packages/vx-demo/src/sandboxes/vx-area/Example.tsx b/packages/vx-demo/src/sandboxes/vx-area/Example.tsx
@@ -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>
+          <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"

diff --git a/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx b/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
@@ -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}

diff --git a/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx b/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
@@ -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}

diff --git a/packages/vx-grid/package.json b/packages/vx-grid/package.json
@@ -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"

diff --git a/packages/vx-grid/src/grids/Grid.tsx b/packages/vx-grid/src/grids/Grid.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Group } from '@vx/group';
 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 +14,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?: 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'];
+};
 
-export default function Grid<XScaleInput, YScaleInput>({
+export default function Grid<XScale extends GridScale, YScale extends GridScale>({
   top,
   left,
   xScale,
@@ -61,10 +60,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 +76,7 @@ export default function Grid<XScaleInput, YScaleInput>({
         tickValues={rowTickValues}
         {...restProps}
       />
-      <GridColumns<XScaleInput>
+      <GridColumns
         className={className}
         scale={xScale}
         height={height}

diff --git a/packages/vx-grid/src/grids/GridColumns.tsx b/packages/vx-grid/src/grids/GridColumns.tsx
@@ -3,22 +3,23 @@ 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 } from '@vx/scale';
+import { CommonGridProps, GridScale } from '../types';
 
-export type GridColumnProps<ScaleInput> = CommonGridProps & {
+export type GridColumnProps<Scale extends GridScale> = CommonGridProps & {
   /** `@vx/scale` or `d3-scale` object used to map from ScaleInput to x-coordinates. */
-  scale: Scale<ScaleInput, number>;
+  scale: 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 +33,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) => {

diff --git a/packages/vx-grid/src/grids/GridRows.tsx b/packages/vx-grid/src/grids/GridRows.tsx
@@ -3,22 +3,23 @@ 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 } from '@vx/scale';
+import { CommonGridProps, GridScale } from '../types';
 
-export type GridRowsProps<ScaleInput> = CommonGridProps & {
+export type GridRowsProps<Scale extends GridScale> = CommonGridProps & {
   /** `@vx/scale` or `d3-scale` object used to map from ScaleInput to y-coordinates. */
-  scale: Scale<ScaleInput, number>;
+  scale: 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 +33,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) => {

diff --git 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<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,12 @@ 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. */
+  /** Exact values used to generate grid coordinates (y- for Rows, x- for Columns) lines using `scale`. Overrides `numTicks` if specified. */
   tickValues?: number[];
 };