typescript(vx-shape): consolidate and move stack and group types into…

… types file

packages/vx-shape/src/shapes/BarGroup.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Group } from '@vx/group';
 import Bar from './Bar';
-import { ScaleType } from '../types';
-
-export type Key = string | number;
+import { BarGroup, ScaleType, GroupKey } from '../types';
 
 export type BarGroupProps<Datum> = {
   /** Array of data for which to generate grouped bars. */
@@ -18,9 +16,9 @@ export type BarGroupProps<Datum> = {
   /** @vx/scale or d3-scale that takes an y value (Datum[key]) and maps it to a y axis position. */
   yScale: ScaleType;
   /** Returns the desired color for a bar with a given key and index. */
-  color: (key: Key, index: number) => string;
+  color: (key: GroupKey, index: number) => string;
   /** Array of keys corresponding to stack layers. */
-  keys: Key[];
+  keys: GroupKey[];
   /** Total height of the y-axis. */
   height: number;
   /** className applied to Bars. */
@@ -33,33 +31,6 @@ export type BarGroupProps<Datum> = {
   children?: (barGroups: BarGroup[]) => React.ReactNode;
 };
 
-/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */
-export interface BarGroup {
-  /** index of BarGroup (matches input Datum index). */
-  index: number;
-  /** x0 position of bar group */
-  x0: number;
-  /** bars within group, one for each key. */
-  bars: ({
-    /** group key */
-    key: Key;
-    /** index of BarGroup (matches input Datum index). */
-    index: number;
-    /** group value (Datum[key]) */
-    value: number;
-    /** height of bar. */
-    height: number;
-    /** width of bar. */
-    width: number;
-    /** x position of bar. */
-    x: number;
-    /** y position of bar. */
-    y: number;
-    /** color of bar. */
-    color: string;
-  })[];
-}
-
 /**
  * Generates bar groups as an array of objects and renders `<rect />`s for each datum grouped by `key`. A general setup might look like this:
  *

packages/vx-shape/src/shapes/BarGroupHorizontal.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import { Group } from '@vx/group';
 import Bar from './Bar';
-import { BarGroupProps, Key } from './BarGroup';
-import { ScaleType } from '../types';
+import { BarGroupProps } from './BarGroup';
+import { ScaleType, BarGroupHorizontal } from '../types';
 
 type BarGroupHorizontalProps<Datum> = Pick<
   BarGroupProps<Datum>,
@@ -22,36 +22,9 @@ type BarGroupHorizontalProps<Datum> = Pick<
   /** Total width of the x-axis. */
   width: number;
   /** Override render function which is passed the computed Ba/rGroups. */
-  children?: (barGroups: BarGroup[]) => React.ReactNode;
+  children?: (barGroups: BarGroupHorizontal[]) => React.ReactNode;
 };
 
-/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */
-export interface BarGroup {
-  /** index of BarGroup (matches input Datum index). */
-  index: number;
-  /** y0 position of bar group */
-  y0: number;
-  /** bars within group, one for each key. */
-  bars: ({
-    /** group key */
-    key: Key;
-    /** index of BarGroup (matches input Datum index). */
-    index: number;
-    /** group value (Datum[key]) */
-    value: number;
-    /** height of bar. */
-    height: number;
-    /** width of bar. */
-    width: number;
-    /** x position of bar. */
-    x: number;
-    /** y position of bar. */
-    y: number;
-    /** color of bar. */
-    color: string;
-  })[];
-}
-
 export default function BarGroupHorizontal<Datum extends { [key: string]: number }>({
   data,
   className,

packages/vx-shape/src/shapes/BarStack.tsx

@@ -6,8 +6,8 @@ import { stack as d3stack, SeriesPoint } from 'd3-shape';
 import stackOrder from '../util/stackOrder';
 import stackOffset from '../util/stackOffset';
 import Bar from './Bar';
-import { StackProps, Key } from './Stack';
-import { ScaleType } from '../types';
+import { StackProps } from './Stack';
+import { ScaleType, StackKey, BarStack } from '../types';
 
 export type BarStackProps<Datum> = Pick<
   StackProps<Datum>,
@@ -24,26 +24,11 @@ export type BarStackProps<Datum> = Pick<
   /** @vx/scale or d3-scale that takes a y value and maps it to an y axis position. */
   yScale: ScaleType;
   /** Returns the desired color for a bar with a given key and index. */
-  color: (key: Key, index: number) => string;
+  color: (key: StackKey, index: number) => string;
   /** Override render function which is passed the configured arc generator as input. */
   children?: (stacks: BarStack<Datum>[]) => React.ReactNode;
 };
 
-export interface BarStack<Datum> {
-  index: number;
-  key: Key;
-  bars: ({
-    bar: SeriesPoint<Datum>;
-    key: Key;
-    index: number;
-    height: number;
-    width: number;
-    x: number;
-    y: number;
-    color: string;
-  })[];
-}
-
 export default function BarStack<Datum>({
   data,
   className,
@@ -62,7 +47,7 @@ export default function BarStack<Datum>({
   children,
   ...restProps
 }: BarStackProps<Datum> & Omit<React.SVGProps<SVGRectElement>, keyof BarStackProps<Datum>>) {
-  const stack = d3stack<Datum, Key>();
+  const stack = d3stack<Datum, StackKey>();
   if (keys) stack.keys(keys);
   if (value) stack.value(value);
   if (order) stack.order(stackOrder(order));

packages/vx-shape/src/shapes/BarStackHorizontal.tsx

@@ -7,6 +7,7 @@ import stackOrder from '../util/stackOrder';
 import stackOffset from '../util/stackOffset';
 import Bar from './Bar';
 import { BarStackProps } from './BarStack';
+import { StackKey } from '../types';
 
 export type BarStackHorizontalProps<Datum> = Pick<
   BarStackProps<Datum>,
@@ -50,7 +51,7 @@ export default function BarStackHorizontal<Datum>({
   ...restProps
 }: BarStackHorizontalProps<Datum> &
   Omit<React.SVGProps<SVGRectElement>, keyof BarStackHorizontalProps<Datum>>) {
-  const stack = d3stack<Datum>();
+  const stack = d3stack<Datum, StackKey>();
   if (keys) stack.keys(keys);
   if (value) stack.value(value);
   if (order) stack.order(stackOrder(order));

packages/vx-shape/src/shapes/Stack.tsx

@@ -13,9 +13,9 @@ import {
 
 import stackOrder, { STACK_ORDERS } from '../util/stackOrder';
 import stackOffset, { STACK_OFFSETS } from '../util/stackOffset';
+import { StackKey } from '../types';
 
 type Accessor<Datum> = (datum: Datum, index: number, data: Datum[]) => number;
-export type Key = string | number;
 
 export type StackProps<Datum> = {
   /** Array of data for which to generate a stack. */
@@ -29,14 +29,14 @@ export type StackProps<Datum> = {
   /** Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear. */
   curve?: CurveFactory;
   /** Returns a color for a given stack key and index. */
-  color?: (key: Key, index: number) => string;
+  color?: (key: StackKey, index: number) => string;
   /** Array of keys corresponding to stack layers. */
-  keys?: Key[];
+  keys?: StackKey[];
   /** Override render function which is passed the configured arc generator as input. */
   children?: (args: {
-    stacks: Series<Datum, Key>[];
+    stacks: Series<Datum, StackKey>[];
     path: AreaType<SeriesPoint<Datum>>;
-    stack: StackType<any, Datum, Key>;
+    stack: StackType<any, Datum, StackKey>;
   }) => React.ReactNode;
   /** Sets the x0 accessor function, and sets x1 to null. */
   x?: Accessor<SeriesPoint<Datum>>;
@@ -49,7 +49,7 @@ export type StackProps<Datum> = {
   /** Specifies the y1 accessor function which defaults to d => d[1]. */
   y1?: Accessor<SeriesPoint<Datum>>;
   /** Sets the value accessor for a Datum, which defaults to d[key]. */
-  value?: (d: Datum, key: Key) => number;
+  value?: (d: Datum, key: StackKey) => number;
   /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */
   defined?: (datum: SeriesPoint<Datum>, index: number, data: SeriesPoint<Datum>[]) => boolean;
   /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */
@@ -78,7 +78,7 @@ export default function Stack<Datum>({
   children,
   ...restProps
 }: StackProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof StackProps<Datum>>) {
-  const stack = d3stack<Datum, Key>();
+  const stack = d3stack<Datum, StackKey>();
   if (keys) stack.keys(keys);
   if (value) stack.value(value);
   if (order) stack.order(stackOrder(order));

packages/vx-shape/src/types.ts

@@ -1,3 +1,74 @@
+import { SeriesPoint } from 'd3-shape';
+
+/** Unique key for item in a stack. */
+export type StackKey = string | number;
+
+/** Unique key for item in a group. */
+export type GroupKey = string | number;
+
+/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */
+export interface BarGroup {
+  /** index of BarGroup (matches input Datum index). */
+  index: number;
+  /** x0 position of bar group */
+  x0: number;
+  /** bars within group, one for each key. */
+  bars: BarGroupBar[];
+}
+
+/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */
+export interface BarGroupHorizontal {
+  /** index of BarGroup (matches input Datum index). */
+  index: number;
+  /** y0 position of bar group */
+  y0: number;
+  /** bars within group, one for each key. */
+  bars: BarGroupBar[];
+}
+
+export interface BarGroupBar {
+  /** group key */
+  key: GroupKey;
+  /** index of BarGroup (matches input Datum index). */
+  index: number;
+  /** group value (Datum[key]) */
+  value: number;
+  /** height of bar. */
+  height: number;
+  /** width of bar. */
+  width: number;
+  /** x position of bar. */
+  x: number;
+  /** y position of bar. */
+  y: number;
+  /** color of bar. */
+  color: string;
+}
+
+/** One BarStack is returned for each datum, which has multiple sub-bars (based on keys). */
+export interface BarStack<Datum> {
+  index: number;
+  key: StackKey;
+  bars: ({
+    /** Processed bar Datum with bar bounds and original datum. */
+    bar: SeriesPoint<Datum>;
+    /** group key */
+    key: StackKey;
+    /** index of BarGroup (matches input Datum index). */
+    index: number;
+    /** height of bar. */
+    height: number;
+    /** width of bar. */
+    width: number;
+    /** x position of bar. */
+    x: number;
+    /** y position of bar. */
+    y: number;
+    /** color of bar. */
+    color: string;
+  })[];
+}
+
 export type AccessorProps<Link, Node> = {
   /** Given a node, returns its x coordinate. */
   x?: (node: Node) => number;