fix: address comments

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

@@ -3,7 +3,14 @@ import cx from 'classnames';
 import { stack as d3stack, SeriesPoint } from 'd3-shape';
 import { Group } from '@vx/group';
 import { ScaleInput } from '@vx/scale';
-import { PositionScale, AddSVGProps, BarStack, BaseBarStackProps, StackKey } from '../types';
+import {
+  PositionScale,
+  AddSVGProps,
+  BarStack,
+  BaseBarStackProps,
+  StackKey,
+  Accessor,
+} from '../types';
 import { getFirstItem, getSecondItem } from '../util/accessors';
 import getBandwidth from '../util/getBandwidth';
 import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
@@ -18,11 +25,11 @@ export type BarStackProps<
   YScale extends PositionScale = PositionScale
 > = BaseBarStackProps<Datum, Key, XScale, YScale> & {
   /** Returns the value mapped to the x of a bar. */
-  x: (d: Datum) => ScaleInput<XScale>;
+  x: Accessor<Datum, ScaleInput<XScale>>;
   /** Returns the value mapped to the y0 of a bar. */
-  y0?: (d: SeriesPoint<Datum>) => ScaleInput<YScale>;
+  y0?: Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>;
   /** Returns the value mapped to the y1 of a bar. */
-  y1?: (d: SeriesPoint<Datum>) => ScaleInput<YScale>;
+  y1?: Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>;
 };
 
 export default function BarStackComponent<

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

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { stack as d3stack, SeriesPoint } from 'd3-shape';
 import { Group } from '@vx/group';
 import { ScaleInput } from '@vx/scale';
-import { AddSVGProps, PositionScale, BaseBarStackProps, StackKey } from '../types';
+import { AddSVGProps, PositionScale, BaseBarStackProps, StackKey, Accessor } from '../types';
 import { getFirstItem, getSecondItem } from '../util/accessors';
 import getBandwidth from '../util/getBandwidth';
 import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
@@ -18,11 +18,11 @@ export type BarStackHorizontalProps<
   YScale extends PositionScale = PositionScale
 > = BaseBarStackProps<Datum, Key, XScale, YScale> & {
   /** Returns the value mapped to the x0 of a bar. */
-  x0?: (d: SeriesPoint<Datum>) => ScaleInput<XScale>;
+  x0?: Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>;
   /** Returns the value mapped to the x1 of a bar. */
-  x1?: (d: SeriesPoint<Datum>) => ScaleInput<XScale>;
+  x1?: Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>;
   /** Returns the value mapped to the y of a bar. */
-  y: (d: Datum) => ScaleInput<YScale>;
+  y: Accessor<Datum, ScaleInput<YScale>>;
 };
 
 export default function BarStackHorizontal<

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

@@ -24,20 +24,7 @@ export type PieProps<Datum> = {
   data?: Datum[];
   /** Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid. */
   centroid?: (xyCoords: [number, number], arc: PieArcDatum<Datum>) => React.ReactNode;
-  /** Inner radius of the Arc shape. */
-  innerRadius?: ArcPathConfig<PieArcDatum<Datum>>['innerRadius'];
-  /** Outer radius of the Arc shape. */
-  outerRadius?: ArcPathConfig<PieArcDatum<Datum>>['outerRadius'];
-  /** Corner radius of the Arc shape. */
-  cornerRadius?: ArcPathConfig<PieArcDatum<Datum>>['cornerRadius'];
-  /** Padding radius of the Arc shape, which determines the fixed linear distance separating adjacent arcs. */
-  padRadius?: ArcPathConfig<PieArcDatum<Datum>>['padRadius'];
-  /** Returns the start angle of the overall Pie shape (the first value starts at startAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */
-  startAngle?: PiePathConfig<Datum>['startAngle'];
-  /** Returns the end angle of the overall Pie shape (the last value ends at endAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */
-  endAngle?: PiePathConfig<Datum>['endAngle'];
-  /** Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs. */
-  padAngle?: PiePathConfig<Datum>['padAngle'];
+  // These three fields are renamed
   /** Invoked for each datum, returns the value for a given Pie segment/arc datum. */
   pieValue?: PiePathConfig<Datum>['value'];
   /** Comparator function to sort *arcs*, overridden by pieSortValues if defined. If pieSort and pieSortValues are null, arcs match input data order. */
@@ -46,7 +33,11 @@ export type PieProps<Datum> = {
   pieSortValues?: PiePathConfig<Datum>['sortValues'];
   /** Render function override which is passed the configured arc generator as input. */
   children?: (provided: ProvidedProps<Datum>) => React.ReactNode;
-};
+} & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> &
+  Pick<
+    ArcPathConfig<PieArcDatum<Datum>>,
+    'innerRadius' | 'outerRadius' | 'cornerRadius' | 'padRadius'
+  >;
 
 export default function Pie<Datum>({
   className,

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

@@ -1,17 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { Group } from '@vx/group';
-import {
-  Area as AreaType,
-  stack as d3stack,
-  Stack as StackType,
-  SeriesPoint,
-  Series,
-} from 'd3-shape';
-
-import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
-import stackOrder from '../util/stackOrder';
-import stackOffset from '../util/stackOffset';
+import { Area as AreaType, Stack as StackType, SeriesPoint, Series } from 'd3-shape';
 import {
   $TSFIXME,
   AddSVGProps,
@@ -20,7 +10,7 @@ import {
   BaseStackProps,
   AreaPathConfig,
 } from '../types';
-import { area } from '../util/D3ShapeFactories';
+import { area, stack as stackPath } from '../util/D3ShapeFactories';
 
 export type StackProps<Datum, Key> = BaseStackProps<Datum, Key> & {
   /** Returns a color for a given stack key and index. */
@@ -63,12 +53,7 @@ export default function Stack<Datum, Key extends StackKey = StackKey>({
   children,
   ...restProps
 }: AddSVGProps<StackProps<Datum, Key>, SVGPathElement>) {
-  const stack = d3stack<Datum, Key>();
-  if (keys) stack.keys(keys);
-  if (value) setNumOrAccessor(stack.value, value);
-  if (order) stack.order(stackOrder(order));
-  if (offset) stack.offset(stackOffset(offset));
-
+  const stack = stackPath<Datum, Key>({ keys, value, order, offset });
   const path = area<SeriesPoint<Datum>>({
     x,
     x0,

packages/vx-shape/src/types/D3ShapeConfig.ts

@@ -1,5 +1,7 @@
 import { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
 import { Accessor, AccessorForArrayItem } from './accessor';
+import { STACK_OFFSETS } from '../util/stackOffset';
+import { STACK_ORDERS } from '../util/stackOrder';
 
 export type ArcPathConfig<Datum> = {
   /** Number or accessor function which returns a number, which defines the arc innerRadius. */
@@ -76,3 +78,14 @@ export type RadialLinePathConfig<Datum> = {
   /** Returns the radius value in radians for a given Datum, with 0 at the center. */
   radius?: number | AccessorForArrayItem<Datum, number>;
 };
+
+export type StackPathConfig<Datum, Key> = {
+  /** Array of keys corresponding to stack layers. */
+  keys?: Key[];
+  /** Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset. */
+  offset?: keyof typeof STACK_OFFSETS;
+  /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */
+  order?: keyof typeof STACK_ORDERS;
+  /** Sets the value accessor for a Datum, which defaults to d[key]. */
+  value?: number | ((d: Datum, key: Key) => number);
+};

packages/vx-shape/src/types/barStack.ts

@@ -49,6 +49,6 @@ export type BaseBarStackProps<
   yScale: YScale;
   /** Returns the desired color for a bar with a given key and index. */
   color: (key: Key, index: number) => string;
-  /** Override render function which is passed the configured arc generator as input. */
+  /** Override render function which is passed the configured stack generator as input. */
   children?: (stacks: BarStack<Datum, Key>[]) => React.ReactNode;
 };

packages/vx-shape/src/types/index.ts

@@ -1,5 +1,4 @@
 export * from './base';
-
 export * from './accessor';
 export * from './area';
 export * from './barGroup';

packages/vx-shape/src/types/stack.ts

@@ -1,5 +1,4 @@
-import { STACK_ORDERS } from '../util/stackOrder';
-import { STACK_OFFSETS } from '../util/stackOffset';
+import { StackPathConfig } from './D3ShapeConfig';
 
 /** Unique key for item in a stack. */
 export type StackKey = string | number;
@@ -13,12 +12,4 @@ export type BaseStackProps<Datum, Key> = {
   top?: number;
   /** Left offset of rendered Stack. */
   left?: number;
-  /** Array of keys corresponding to stack layers. */
-  keys?: Key[];
-  /** Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset. */
-  offset?: keyof typeof STACK_OFFSETS;
-  /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */
-  order?: keyof typeof STACK_ORDERS;
-  /** Sets the value accessor for a Datum, which defaults to d[key]. */
-  value?: number | ((d: Datum, key: Key) => number);
-};
+} & StackPathConfig<Datum, Key>;

packages/vx-shape/src/util/D3ShapeFactories.ts

@@ -4,6 +4,7 @@ import {
   line as d3Line,
   pie as d3Pie,
   radialLine as d3RadialLine,
+  stack as d3Stack,
 } from 'd3-shape';
 import setNumberOrNumberAccessor from './setNumberOrNumberAccessor';
 import {
@@ -12,7 +13,10 @@ import {
   LinePathConfig,
   PiePathConfig,
   RadialLinePathConfig,
+  StackPathConfig,
 } from '../types';
+import stackOrder from './stackOrder';
+import stackOffset from './stackOffset';
 
 export function arc<Datum>({
   innerRadius,
@@ -98,3 +102,13 @@ export function radialLine<Datum>({
 
   return path;
 }
+
+export function stack<Datum, Key>({ keys, value, order, offset }: StackPathConfig<Datum, Key>) {
+  const path = d3Stack<Datum, Key>();
+  if (keys) path.keys(keys);
+  if (value) setNumberOrNumberAccessor(path.value, value);
+  if (order) path.order(stackOrder(order));
+  if (offset) path.offset(stackOffset(offset));
+
+  return path;
+}

packages/vx-shape/src/util/getBandwidth.ts

@@ -1,9 +1,11 @@
 import { AnyD3Scale } from '@vx/scale';
 
 export default function getBandwidth(scale: AnyD3Scale) {
+  if ('bandwidth' in scale) {
+    return scale.bandwidth();
+  }
+
   const range = scale.range();
   const domain = scale.domain();
-  return 'bandwidth' in scale
-    ? scale.bandwidth()
-    : Math.abs(range[range.length - 1] - range[0]) / domain.length;
+  return Math.abs(range[range.length - 1] - range[0]) / domain.length;
 }