diff --git a/packages/visx-shape/src/shapes/Pie.tsx b/packages/visx-shape/src/shapes/Pie.tsx index 8eb34afde..42870b24d 100644 --- a/packages/visx-shape/src/shapes/Pie.tsx +++ b/packages/visx-shape/src/shapes/Pie.tsx @@ -7,6 +7,8 @@ import { arc as arcPath, pie as piePath } from '../util/D3ShapeFactories'; export type PieArcDatum = PieArcDatumType; +type StringAccessor = (pieArcDatum: PieArcDatum) => string; + export type ProvidedProps = { path: ArcType<$TSFIXME, PieArcDatum>; arcs: PieArcDatum[]; @@ -33,6 +35,8 @@ export type PieProps = { pieSortValues?: PiePathConfig['sortValues']; /** Render function override which is passed the configured arc generator as input. */ children?: (provided: ProvidedProps) => React.ReactNode; + /** Optional accessor function to return the fill string value of a given arc. */ + fill?: string | StringAccessor; } & Pick, 'startAngle' | 'endAngle' | 'padAngle'> & Pick< ArcPathConfig>, @@ -56,6 +60,7 @@ export default function Pie({ pieSortValues, pieValue, children, + fill = '', ...restProps }: AddSVGProps, SVGPathElement>) { const path = arcPath>({ @@ -82,7 +87,12 @@ export default function Pie({ {arcs.map((arc, i) => ( - + {centroid?.(path.centroid(arc), arc)} ))} diff --git a/packages/visx-shape/test/Pie.test.tsx b/packages/visx-shape/test/Pie.test.tsx index f2b4af48b..2cdecbdd3 100644 --- a/packages/visx-shape/test/Pie.test.tsx +++ b/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('', () => { expect(fn).toHaveBeenCalled(); }); + test('it should accept a custom fill function', () => { + const paths = PieWrapper({ + fill: (datum: PieArcDatum) => 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 });