fix: Add missing *TickValues prop type

This adds two field types, fields already available in `<BaseGrid>`, to
the `CommonGridTProps` type.

Author: f1multiviewer

packages/visx-grid/src/types.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { D3Scale, NumberLike } from '@visx/scale';
+import { D3Scale, NumberLike, ScaleInput } from '@visx/scale';
 
 // In order to plot values on an axis, output of the scale must be number.
 // Some scales return undefined.
@@ -31,8 +31,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 `rowTickValues` or `columnTickValues` for precise control. */
   numTicks?: number;
+  /** Exact values to be used for GridRows lines, passed to yScale. Use this if you need precise control over GridRows values.  */
+  rowTickValues?: ScaleInput<GridScale>[];
+  /** Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values.  */
+  columnTickValues?: ScaleInput<GridScale>[];
   /** Styles to apply as grid line style. */
   lineStyle?: CSSProperties;
   /** Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines. */

packages/visx-xychart/src/components/grid/BaseGrid.tsx

@@ -22,6 +22,8 @@ export default function BaseGrid({
   columns = true,
   GridRowsComponent,
   GridColumnsComponent,
+  rowTickValues,
+  columnTickValues,
   ...props
 }: BaseGridProps) {
   const {
@@ -43,6 +45,7 @@ export default function BaseGrid({
           lineStyle={gridLineStyles}
           width={innerWidth}
           scale={rowsScale}
+          tickValues={rowTickValues}
           {...props}
         />
       )}
@@ -52,6 +55,7 @@ export default function BaseGrid({
           lineStyle={gridLineStyles}
           height={innerHeight}
           scale={columnsScale}
+          tickValues={columnTickValues}
           {...props}
         />
       )}