From 8fb574c9413ca509405a4cee456e2beef631d9f8 Mon Sep 17 00:00:00 2001 From: plouc Date: Tue, 15 Dec 2020 07:50:13 +0900 Subject: [PATCH] feat(arcs): add the ability to pass custom arc label/arc link label components --- packages/arcs/src/ArcsLayer.tsx | 4 +- packages/arcs/src/arc_labels/ArcLabel.tsx | 40 ++++++ .../arcs/src/arc_labels/ArcLabelsLayer.tsx | 53 ++++---- packages/arcs/src/arc_labels/props.ts | 9 +- .../arcs/src/arc_link_labels/ArcLinkLabel.tsx | 27 ++++ .../arc_link_labels/ArcLinkLabelsLayer.tsx | 51 ++++---- packages/arcs/src/arc_link_labels/props.ts | 8 +- packages/pie/src/Pie.tsx | 4 + packages/pie/src/types.ts | 13 +- packages/pie/tests/Pie.test.tsx | 118 ++++++++++++------ website/src/pages/pie/canvas.js | 2 +- website/src/pages/pie/index.js | 2 +- 12 files changed, 229 insertions(+), 102 deletions(-) create mode 100644 packages/arcs/src/arc_labels/ArcLabel.tsx create mode 100644 packages/arcs/src/arc_link_labels/ArcLinkLabel.tsx diff --git a/packages/arcs/src/ArcsLayer.tsx b/packages/arcs/src/ArcsLayer.tsx index 30c2fa592..1df124816 100644 --- a/packages/arcs/src/ArcsLayer.tsx +++ b/packages/arcs/src/ArcsLayer.tsx @@ -6,7 +6,9 @@ import { useArcsTransition } from './useArcsTransition' import { ArcTransitionMode } from './arcTransitionMode' import { ArcMouseHandler, ArcShape, ArcShapeProps } from './ArcShape' -type ArcComponent = (props: ArcShapeProps) => JSX.Element +export type ArcComponent = ( + props: ArcShapeProps +) => JSX.Element interface ArcsLayerProps { center: [number, number] diff --git a/packages/arcs/src/arc_labels/ArcLabel.tsx b/packages/arcs/src/arc_labels/ArcLabel.tsx new file mode 100644 index 000000000..382fe44fa --- /dev/null +++ b/packages/arcs/src/arc_labels/ArcLabel.tsx @@ -0,0 +1,40 @@ +import React, { CSSProperties } from 'react' +import { SpringValue, Interpolation, animated } from 'react-spring' +import { useTheme } from '@nivo/core' +import { DatumWithArcAndColor } from '../types' + +const staticStyle: CSSProperties = { + pointerEvents: 'none', +} + +export interface ArcLabelProps { + datum: Datum + label: string + style: { + progress: SpringValue + transform: Interpolation + textColor: string + } +} + +export const ArcLabel = ({ + label, + style, +}: ArcLabelProps) => { + const theme = useTheme() + + return ( + + + {label} + + + ) +} diff --git a/packages/arcs/src/arc_labels/ArcLabelsLayer.tsx b/packages/arcs/src/arc_labels/ArcLabelsLayer.tsx index 6642c4cba..0f1637523 100644 --- a/packages/arcs/src/arc_labels/ArcLabelsLayer.tsx +++ b/packages/arcs/src/arc_labels/ArcLabelsLayer.tsx @@ -1,5 +1,4 @@ -import React, { useMemo, CSSProperties } from 'react' -import { animated } from 'react-spring' +import React, { useMemo } from 'react' import { // @ts-ignore getLabelGenerator, @@ -11,20 +10,22 @@ import { useArcCentersTransition } from '../centers' import { ArcTransitionMode } from '../arcTransitionMode' import { DatumWithArcAndColor } from '../types' import { ArcLabelsProps } from './props' +import { ArcLabel, ArcLabelProps } from './ArcLabel' -const sliceStyle: CSSProperties = { - pointerEvents: 'none', -} +export type ArcLabelComponent = ( + props: ArcLabelProps +) => JSX.Element interface ArcLabelsLayerProps { center: [number, number] data: Datum[] - // CompletePieSvgProps['arcLabel'] + // @todo add proper label accessor type label: any - radiusOffset: ArcLabelsProps['arcLabelsRadiusOffset'] - skipAngle: ArcLabelsProps['arcLabelsSkipAngle'] - textColor: ArcLabelsProps['arcLabelsTextColor'] + radiusOffset: ArcLabelsProps['arcLabelsRadiusOffset'] + skipAngle: ArcLabelsProps['arcLabelsSkipAngle'] + textColor: ArcLabelsProps['arcLabelsTextColor'] transitionMode: ArcTransitionMode + component?: ArcLabelComponent } export const ArcLabelsLayer = ({ @@ -35,6 +36,7 @@ export const ArcLabelsLayer = ({ radiusOffset, skipAngle, textColor, + component = ArcLabel, }: ArcLabelsLayerProps) => { const getLabel = useMemo(() => getLabelGenerator(labelAccessor), [labelAccessor]) const theme = useTheme() @@ -57,33 +59,26 @@ export const ArcLabelsLayer = ({ transitionMode ) + const Label: ArcLabelComponent = component + return ( {transition((transitionProps, datum) => { - return ( - - - {getLabel(datum)} - - - ) + ), + textColor: getTextColor(datum), + }, + }) })} ) diff --git a/packages/arcs/src/arc_labels/props.ts b/packages/arcs/src/arc_labels/props.ts index 25dbb9ecd..c5239ff5d 100644 --- a/packages/arcs/src/arc_labels/props.ts +++ b/packages/arcs/src/arc_labels/props.ts @@ -1,10 +1,13 @@ import { InheritedColorConfig } from '@nivo/colors' +import { ArcLabelComponent } from './ArcLabelsLayer' +import { DatumWithArcAndColor } from '../types' -// @ts-ignore -export interface ArcLabelsProps { - // string | LabelAccessorFunction +export interface ArcLabelsProps { + // @todo fix label accessor + // string | LabelAccessorFunction arcLabel: any arcLabelsRadiusOffset: number arcLabelsSkipAngle: number arcLabelsTextColor: InheritedColorConfig + component: ArcLabelComponent } diff --git a/packages/arcs/src/arc_link_labels/ArcLinkLabel.tsx b/packages/arcs/src/arc_link_labels/ArcLinkLabel.tsx new file mode 100644 index 000000000..f9fc35ab7 --- /dev/null +++ b/packages/arcs/src/arc_link_labels/ArcLinkLabel.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { SpringValue, Interpolation, animated } from 'react-spring' +import { DatumWithArcAndColor } from '../types' + +export interface ArcLinkLabelProps { + datum: Datum + style: { + linkColor: SpringValue + thickness: number + opacity: SpringValue + path: Interpolation + } +} + +export const ArcLinkLabel = ({ + style, +}: ArcLinkLabelProps) => { + return ( + + ) +} diff --git a/packages/arcs/src/arc_link_labels/ArcLinkLabelsLayer.tsx b/packages/arcs/src/arc_link_labels/ArcLinkLabelsLayer.tsx index 28626943f..44ca1ddc3 100644 --- a/packages/arcs/src/arc_link_labels/ArcLinkLabelsLayer.tsx +++ b/packages/arcs/src/arc_link_labels/ArcLinkLabelsLayer.tsx @@ -1,21 +1,26 @@ import React from 'react' -import { animated } from 'react-spring' -import { useArcLinkLabelsTransition } from './useArcLinkLabelsTransition' import { DatumWithArcAndColor } from '../types' +import { useArcLinkLabelsTransition } from './useArcLinkLabelsTransition' import { ArcLinkLabelsProps } from './props' +import { ArcLinkLabel, ArcLinkLabelProps } from './ArcLinkLabel' + +export type ArcLinkLabelComponent = ( + props: ArcLinkLabelProps +) => JSX.Element interface ArcLinkLabelsLayerProps { center: [number, number] data: Datum[] - label: ArcLinkLabelsProps['arcLinkLabel'] - skipAngle: ArcLinkLabelsProps['arcLinkLabelsSkipAngle'] - offset: ArcLinkLabelsProps['arcLinkLabelsOffset'] - diagonalLength: ArcLinkLabelsProps['arcLinkLabelsDiagonalLength'] - straightLength: ArcLinkLabelsProps['arcLinkLabelsStraightLength'] - strokeWidth: ArcLinkLabelsProps['arcLinkLabelsThickness'] - textOffset: ArcLinkLabelsProps['arcLinkLabelsTextOffset'] - textColor: ArcLinkLabelsProps['arcLinkLabelsTextColor'] - linkColor: ArcLinkLabelsProps['arcLinkLabelsColor'] + label: ArcLinkLabelsProps['arcLinkLabel'] + skipAngle: ArcLinkLabelsProps['arcLinkLabelsSkipAngle'] + offset: ArcLinkLabelsProps['arcLinkLabelsOffset'] + diagonalLength: ArcLinkLabelsProps['arcLinkLabelsDiagonalLength'] + straightLength: ArcLinkLabelsProps['arcLinkLabelsStraightLength'] + strokeWidth: ArcLinkLabelsProps['arcLinkLabelsThickness'] + textOffset: ArcLinkLabelsProps['arcLinkLabelsTextOffset'] + textColor: ArcLinkLabelsProps['arcLinkLabelsTextColor'] + linkColor: ArcLinkLabelsProps['arcLinkLabelsColor'] + component?: ArcLinkLabelComponent } export const ArcLinkLabelsLayer = ({ @@ -30,6 +35,7 @@ export const ArcLinkLabelsLayer = ({ textOffset, textColor, linkColor, + component = ArcLinkLabel, }: ArcLinkLabelsLayerProps) => { const { transition, interpolateLink } = useArcLinkLabelsTransition({ data, @@ -43,17 +49,18 @@ export const ArcLinkLabelsLayer = ({ textColor, }) + const Label: ArcLinkLabelComponent = component + return ( {transition((transitionProps, datum) => { - return ( - ({ transitionProps.offset, transitionProps.diagonalLength, transitionProps.straightLength - )} - /> - ) + ), + }, + }) })} ) diff --git a/packages/arcs/src/arc_link_labels/props.ts b/packages/arcs/src/arc_link_labels/props.ts index f000a0bed..63ada9bcc 100644 --- a/packages/arcs/src/arc_link_labels/props.ts +++ b/packages/arcs/src/arc_link_labels/props.ts @@ -1,8 +1,9 @@ import { InheritedColorConfig } from '@nivo/colors' +import { ArcLinkLabelComponent } from './ArcLinkLabelsLayer' +import { DatumWithArcAndColor } from '../types' -// @ts-ignore -export interface ArcLinkLabelsProps { - // string | LabelAccessorFunction +export interface ArcLinkLabelsProps { + // string | LabelAccessorFunction arcLinkLabel: any arcLinkLabelsSkipAngle: number arcLinkLabelsTextOffset: number @@ -12,4 +13,5 @@ export interface ArcLinkLabelsProps { arcLinkLabelsStraightLength: number arcLinkLabelsThickness: number arcLinkLabelsColor: InheritedColorConfig + component: ArcLinkLabelComponent } diff --git a/packages/pie/src/Pie.tsx b/packages/pie/src/Pie.tsx index d5ecff13b..1ddb17df4 100644 --- a/packages/pie/src/Pie.tsx +++ b/packages/pie/src/Pie.tsx @@ -48,6 +48,7 @@ const InnerPie = ({ arcLabelsSkipAngle = defaultProps.arcLabelsSkipAngle, arcLabelsTextColor = defaultProps.arcLabelsTextColor, arcLabelsRadiusOffset = defaultProps.arcLabelsRadiusOffset, + arcLabelComponent, // arc link labels enableArcLinkLabels = defaultProps.enableArcLinkLabels, @@ -60,6 +61,7 @@ const InnerPie = ({ arcLinkLabelsTextOffset = defaultProps.arcLinkLabelsTextOffset, arcLinkLabelsTextColor = defaultProps.arcLinkLabelsTextColor, arcLinkLabelsColor = defaultProps.arcLinkLabelsColor, + arcLinkLabelComponent, // styling defs = defaultProps.defs, @@ -139,6 +141,7 @@ const InnerPie = ({ textOffset={arcLinkLabelsTextOffset} textColor={arcLinkLabelsTextColor} linkColor={arcLinkLabelsColor} + component={arcLinkLabelComponent} /> ) } @@ -175,6 +178,7 @@ const InnerPie = ({ skipAngle={arcLabelsSkipAngle} textColor={arcLabelsTextColor} transitionMode={transitionMode} + component={arcLabelComponent} /> ) } diff --git a/packages/pie/src/types.ts b/packages/pie/src/types.ts index 86c2fa9cd..20bdb6fd0 100644 --- a/packages/pie/src/types.ts +++ b/packages/pie/src/types.ts @@ -111,8 +111,8 @@ export type CommonPieProps = { legends: LegendProps[] role: string -} & Partial>> & - Partial>> +} & Partial>> & + Partial>> export type PieHandlers = { onClick?: MouseEventHandler @@ -121,6 +121,11 @@ export type PieHandlers = { onMouseLeave?: MouseEventHandler } +export type PieSvgCustomComponents = { + arcLabelComponent?: ArcLabelsProps>['component'] + arcLinkLabelComponent?: ArcLinkLabelsProps>['component'] +} + export type PieSvgProps = DataProps & Dimensions & Partial> & @@ -130,7 +135,7 @@ export type PieSvgProps = DataProps & animate?: boolean motionConfig?: ModernMotionProps['motionConfig'] transitionMode?: ArcTransitionMode - } + } & PieSvgCustomComponents export type CompletePieSvgProps = DataProps & Dimensions & @@ -141,7 +146,7 @@ export type CompletePieSvgProps = DataProps & animate: boolean motionConfig: ModernMotionProps['motionConfig'] transitionMode: ArcTransitionMode - } + } & PieSvgCustomComponents export type PieCanvasProps = DataProps & Dimensions & diff --git a/packages/pie/tests/Pie.test.tsx b/packages/pie/tests/Pie.test.tsx index f2e9b0396..414f9e481 100644 --- a/packages/pie/tests/Pie.test.tsx +++ b/packages/pie/tests/Pie.test.tsx @@ -42,7 +42,7 @@ describe('Pie', () => { ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -70,7 +70,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -98,7 +98,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -125,7 +125,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -146,7 +146,7 @@ describe('Pie', () => { ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) const slice30 = slices.at(0) @@ -168,7 +168,7 @@ describe('Pie', () => { ) // we can use a slice to check computed radii - const slice = wrapper.find('Slice').at(0) + const slice = wrapper.find('ArcShape').at(0) expect(slice.prop('datum').arc.innerRadius).toEqual(100) expect(slice.prop('datum').arc.outerRadius).toEqual(200) }) @@ -178,7 +178,7 @@ describe('Pie', () => { ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) slices.forEach(slice => { expect(radiansToDegrees(slice.prop('datum').arc.padAngle)).toEqual(10) @@ -217,7 +217,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(radiansToDegrees(slices.at(0).prop('datum').arc.startAngle)).toEqual(90) expect(radiansToDegrees(slices.at(2).prop('datum').arc.endAngle)).toEqual(180) @@ -238,7 +238,7 @@ describe('Pie', () => { ) // we can use a slice to check computed radii - const slice = wrapper.find('Slice').at(0) + const slice = wrapper.find('ArcShape').at(0) expect(slice.prop('datum').arc.innerRadius).toEqual(200) expect(slice.prop('datum').arc.outerRadius).toEqual(400) }) @@ -256,7 +256,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -280,7 +280,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -304,7 +304,7 @@ describe('Pie', () => { /> ) - const slices = wrapper.find('Slice') + const slices = wrapper.find('ArcShape') expect(slices).toHaveLength(sampleData.length) expect(slices.at(0).prop('datum').id).toEqual('A') @@ -328,13 +328,14 @@ describe('Pie', () => { }) }) - describe('slice labels', () => { + describe('arc labels', () => { it('should render labels when enabled', () => { const wrapper = mount( ) - const labels = wrapper.find('SliceLabels').find(animated.g) + expect(wrapper.find('ArcLabelsLayer').exists()).toBeTruthy() + const labels = wrapper.find('ArcLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { @@ -348,11 +349,11 @@ describe('Pie', () => { width={400} height={400} data={sampleData} - enableSliceLabels={false} + enableArcLabels={false} animate={false} /> ) - expect(wrapper.find('SliceLabels')).toHaveLength(0) + expect(wrapper.find('ArcLabelsLayer').exists()).toBeFalsy() }) it('should use formattedValue', () => { @@ -366,7 +367,7 @@ describe('Pie', () => { /> ) - const labels = wrapper.find('SliceLabels').find(animated.g) + const labels = wrapper.find('ArcLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { @@ -376,10 +377,10 @@ describe('Pie', () => { it('should allow to change the label accessor using a path', () => { const wrapper = mount( - + ) - const labels = wrapper.find('SliceLabels').find(animated.g) + const labels = wrapper.find('ArcLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { @@ -393,27 +394,48 @@ describe('Pie', () => { width={400} height={400} data={sampleData} - sliceLabel={datum => `${datum.id} - ${datum.value}`} + arcLabel={datum => `${datum.id} - ${datum.value}`} animate={false} /> ) - const labels = wrapper.find('SliceLabels').find(animated.g) + const labels = wrapper.find('ArcLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { expect(labels.at(index).find('text').text()).toEqual(`${datum.id} - ${datum.value}`) }) }) + + it('should allow to customize the label component', () => { + const CustomArcLabel = () => null + const wrapper = mount( + + ) + + const labels = wrapper.find(CustomArcLabel) + expect(labels).toHaveLength(sampleData.length) + + sampleData.forEach((datum, index) => { + expect(labels.at(index).prop('label')).toEqual(datum.value) + }) + }) }) - describe('radial labels', () => { + describe('arc link labels', () => { it('should render labels when enabled', () => { const wrapper = mount( ) - const labels = wrapper.find('RadialLabel') + expect(wrapper.find('ArcLinkLabelsLayer').exists()).toBeTruthy() + const labels = wrapper.find('ArcLinkLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { @@ -427,11 +449,11 @@ describe('Pie', () => { width={400} height={400} data={sampleData} - enableRadialLabels={false} + enableArcLinkLabels={false} animate={false} /> ) - expect(wrapper.find('RadialLabel')).toHaveLength(0) + expect(wrapper.find('ArcLinkLabelsLayer').exists()).toBeFalsy() }) it('should allow to change the label accessor using a path', () => { @@ -445,7 +467,7 @@ describe('Pie', () => { /> ) - const labels = wrapper.find('RadialLabel') + const labels = wrapper.find('ArcLinkLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { @@ -459,18 +481,38 @@ describe('Pie', () => { width={400} height={400} data={sampleData} - radialLabel={datum => `${datum.id} - ${datum.value}`} + arcLinkLabel={datum => `${datum.id} - ${datum.value}`} animate={false} /> ) - const labels = wrapper.find('RadialLabel') + const labels = wrapper.find('ArcLinkLabel') expect(labels).toHaveLength(sampleData.length) sampleData.forEach((datum, index) => { expect(labels.at(index).find('text').text()).toEqual(`${datum.id} - ${datum.value}`) }) }) + + it('should allow to customize the label component', () => { + const CustomArcLinkLabel = () => null + const wrapper = mount( + + ) + + const labels = wrapper.find(CustomArcLinkLabel) + expect(labels).toHaveLength(sampleData.length) + + sampleData.forEach((datum, index) => { + expect(labels.at(index).prop('label')).toEqual(datum.id) + }) + }) }) describe('legends', () => { @@ -513,7 +555,7 @@ describe('Pie', () => { ) - wrapper.find('Slice').at(0).simulate('click') + wrapper.find('ArcShape').at(0).simulate('click') expect(onClick).toHaveBeenCalledTimes(1) const [datum] = onClick.mock.calls[0] @@ -532,7 +574,7 @@ describe('Pie', () => { /> ) - wrapper.find('Slice').at(1).simulate('mouseenter') + wrapper.find('ArcShape').at(1).simulate('mouseenter') expect(onMouseEnter).toHaveBeenCalledTimes(1) const [datum] = onMouseEnter.mock.calls[0] @@ -551,7 +593,7 @@ describe('Pie', () => { /> ) - wrapper.find('Slice').at(2).simulate('mousemove') + wrapper.find('ArcShape').at(2).simulate('mousemove') expect(onMouseMove).toHaveBeenCalledTimes(1) const [datum] = onMouseMove.mock.calls[0] @@ -570,7 +612,7 @@ describe('Pie', () => { /> ) - wrapper.find('Slice').at(0).simulate('mouseleave') + wrapper.find('ArcShape').at(0).simulate('mouseleave') expect(onMouseLeave).toHaveBeenCalledTimes(1) const [datum] = onMouseLeave.mock.calls[0] @@ -597,7 +639,7 @@ describe('Pie', () => { /> ) - const slice = wrapper.find('Slice').at(0) + const slice = wrapper.find('ArcShape').at(0) slice.simulate('click') slice.simulate('mouseenter') slice.simulate('mousemove') @@ -608,7 +650,7 @@ describe('Pie', () => { expect(onMouseMove).not.toHaveBeenCalled() expect(onMouseLeave).not.toHaveBeenCalled() - wrapper.find('Slice').forEach(slice => { + wrapper.find('ArcShape').forEach(slice => { const shape = slice.find('path') expect(shape.prop('onClick')).toBeUndefined() expect(shape.prop('onMouseEnter')).toBeUndefined() @@ -626,7 +668,7 @@ describe('Pie', () => { expect(wrapper.find('PieTooltip').exists()).toBeFalsy() - wrapper.find('Slice').at(1).simulate('mouseenter') + wrapper.find('ArcShape').at(1).simulate('mouseenter') const tooltip = wrapper.find('PieTooltip') expect(tooltip.exists()).toBeTruthy() @@ -645,7 +687,7 @@ describe('Pie', () => { /> ) - wrapper.find('Slice').at(1).simulate('mouseenter') + wrapper.find('ArcShape').at(1).simulate('mouseenter') expect(wrapper.find(CustomTooltip).exists()).toBeTruthy() }) @@ -656,10 +698,10 @@ describe('Pie', () => { const wrapper = mount( ) - expect(wrapper.find('Slice')).toHaveLength(3) + expect(wrapper.find('ArcShape')).toHaveLength(3) wrapper.setProps({ layers: ['radialLabels', 'sliceLabels', 'legends'] }) - expect(wrapper.find('Slice')).toHaveLength(0) + expect(wrapper.find('ArcShape')).toHaveLength(0) }) it('should support adding a custom layer', () => { diff --git a/website/src/pages/pie/canvas.js b/website/src/pages/pie/canvas.js index c4274aca2..ad3dde72f 100644 --- a/website/src/pages/pie/canvas.js +++ b/website/src/pages/pie/canvas.js @@ -42,7 +42,7 @@ const initialProperties = { cornerRadius: 3, fit: true, activeInnerRadiusOffset: defaultProps.activeInnerRadiusOffset, - activeOuterRadiusOffset: 16, + activeOuterRadiusOffset: 8, colors: { scheme: 'paired' }, diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js index 982e7c5b6..50fa92272 100644 --- a/website/src/pages/pie/index.js +++ b/website/src/pages/pie/index.js @@ -31,7 +31,7 @@ const initialProperties = { cornerRadius: 3, fit: defaultProps.fit, activeInnerRadiusOffset: defaultProps.activeInnerRadiusOffset, - activeOuterRadiusOffset: 16, + activeOuterRadiusOffset: 8, colors: defaultProps.colors,