new(shape): support dynamic fill directly in Pie (#1225)

* fix(pie): support dynamic fill directly in Pie

* improvements from PR comments

* docs(shapes/Pie): add type description period

* fix(shapes/Pie): remove extra asterisk in comment close

Co-authored-by: Chris Williams <williaster@users.noreply.github.com>

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

@@ -7,6 +7,8 @@ import { arc as arcPath, pie as piePath } from '../util/D3ShapeFactories';
 
 export type PieArcDatum<Datum> = PieArcDatumType<Datum>;
 
+type StringAccessor<Datum> = (pieArcDatum: PieArcDatum<Datum>) => string;
+
 export type ProvidedProps<Datum> = {
   path: ArcType<$TSFIXME, PieArcDatum<Datum>>;
   arcs: PieArcDatum<Datum>[];
@@ -33,6 +35,8 @@ 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;
+  /** Optional accessor function to return the fill string value of a given arc. */
+  fill?: string | StringAccessor<Datum>;
 } & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> &
   Pick<
     ArcPathConfig<PieArcDatum<Datum>>,
@@ -56,6 +60,7 @@ export default function Pie<Datum>({
   pieSortValues,
   pieValue,
   children,
+  fill = '',
   ...restProps
 }: AddSVGProps<PieProps<Datum>, SVGPathElement>) {
   const path = arcPath<PieArcDatum<Datum>>({
@@ -82,7 +87,12 @@ export default function Pie<Datum>({
     <Group className="visx-pie-arcs-group" top={top} left={left}>
       {arcs.map((arc, i) => (
         <g key={`pie-arc-${i}`}>
-          <path className={cx('visx-pie-arc', className)} d={path(arc) || ''} {...restProps} />
+          <path
+            className={cx('visx-pie-arc', className)}
+            d={path(arc) || ''}
+            fill={fill == null || typeof fill === 'string' ? fill : fill(arc)}
+            {...restProps}
+          />
           {centroid?.(path.centroid(arc), arc)}
         </g>
       ))}

packages/visx-shape/test/Pie.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { Pie } from '../src';
-import { PieProps } from '../src/shapes/Pie';
+import { PieArcDatum, PieProps } from '../src/shapes/Pie';
 
 interface Datum {
   date: string;
@@ -14,6 +14,7 @@ interface Datum {
   Opera: string;
   Mozilla: string;
   'Other/Unknown': string;
+  color: string;
 }
 
 const browserUsage: Datum[] = [
@@ -27,6 +28,7 @@ const browserUsage: Datum[] = [
     Opera: '1.32',
     Mozilla: '0.12',
     'Other/Unknown': '0.01',
+    color: 'blue',
   },
   {
     date: '2015 Jun 16',
@@ -38,6 +40,7 @@ const browserUsage: Datum[] = [
     Opera: '1.32',
     Mozilla: '0.12',
     'Other/Unknown': '0.01',
+    color: 'red',
   },
 ];
 
@@ -102,6 +105,22 @@ describe('<Pie />', () => {
     expect(fn).toHaveBeenCalled();
   });
 
+  test('it should accept a custom fill function', () => {
+    const paths = PieWrapper({
+      fill: (datum: PieArcDatum<Datum>) => datum.data.color,
+    }).find('path');
+    expect(paths.at(0).prop('fill')).toBe('blue');
+    expect(paths.at(1).prop('fill')).toBe('red');
+  });
+
+  test('it should accept a constant string fill value', () => {
+    const paths = PieWrapper({
+      fill: 'purple',
+    }).find('path');
+    expect(paths.at(0).prop('fill')).toBe('purple');
+    expect(paths.at(1).prop('fill')).toBe('purple');
+  });
+
   test('it should call children function with { arcs, path, pie }', () => {
     const fn = jest.fn();
     PieChildren({ children: fn });