Skip to content

Commit

Permalink
Add inactiveShape prop to Pie component (#2900)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rockcs1992
rockcs1992 committed Sep 1, 2022
1 parent 2f1a6e9 commit deee55f
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 12 deletions.
12 changes: 9 additions & 3 deletions src/polar/Pie.tsx
View file
Expand Up @@ -87,6 +87,7 @@ interface PieProps extends PieDef {
data?: any[];
sectors?: PieSectorDataItem[];
activeShape?: PieActiveShape;
inactiveShape?: PieActiveShape;
labelLine?: PieLabelLine;
label?: PieLabel;

Expand Down Expand Up @@ -349,6 +350,11 @@ export class Pie extends PureComponent<Props, State> {
return i === activeIndex;
}

hasActiveIndex() {
const { activeIndex } = this.props;
return Array.isArray(activeIndex) ? activeIndex.length !== 0 : activeIndex || activeIndex === 0;
}

handleAnimationEnd = () => {
const { onAnimationEnd } = this.props;

Expand Down Expand Up @@ -472,10 +478,10 @@ export class Pie extends PureComponent<Props, State> {
}

renderSectorsStatically(sectors: PieSectorDataItem[]) {
const { activeShape, blendStroke } = this.props;

const { activeShape, blendStroke, inactiveShape: inactiveShapeProp } = this.props;
return sectors.map((entry, i) => {
const sectorOptions = this.isActiveIndex(i) ? activeShape : null;
const inactiveShape = inactiveShapeProp && this.hasActiveIndex() ? inactiveShapeProp : null;
const sectorOptions = this.isActiveIndex(i) ? activeShape : inactiveShape;
const sectorProps = {
...entry,
stroke: blendStroke ? entry.fill : entry.stroke,
Expand Down
101 changes: 92 additions & 9 deletions test/specs/polar/PieSpec.js
View file
Expand Up @@ -34,7 +34,7 @@ describe('<Pie />', () => {
expect(wrapper.find('.recharts-pie-sector').length).to.equal(sectors.length);
});

it('Render customized active sector when activeShape is set to be a element', () => {
it('Render customized active sector when activeShape is set to be an element', () => {
const ActiveShape = props =>
<Sector {...props} fill="#ff7300" className="customized-active-shape" />
;
Expand Down Expand Up @@ -78,7 +78,7 @@ describe('<Pie />', () => {
expect(wrapper.find('.customized-active-shape').length).to.equal(1);
});

it('Render customized active sector when activeShape is set to be a object', () => {
it('Render customized active sector when activeShape is set to be an object', () => {
const wrapper = render(
<Surface width={500} height={500}>
<Pie
Expand All @@ -97,6 +97,89 @@ describe('<Pie />', () => {
expect(wrapper.find('.customized-active-shape').length).to.equal(0);
});

it('Render customized active sector when inactiveShape is set to be an element', () => {
const ActiveShape = props => <Sector {...props} fill="#ff7300" className="customized-active-shape" />;
const InactiveShape = props => <Sector {...props} fill="#ff7300" className="customized-inactive-shape" />;

const wrapper = render(
<Surface width={500} height={500}>
<Pie
isAnimationActive={false}
activeIndex={0}
activeShape={<ActiveShape />}
inactiveShape={<InactiveShape />}
cx={250}
cy={250}
innerRadius={0}
outerRadius={200}
sectors={sectors}
/>
</Surface>,
);
expect(wrapper.find('.customized-inactive-shape').length).to.equal(4);
});

it('Render customized inactive sector when inactiveShape is set to be a function', () => {
const renderActiveShape = props => <Sector {...props} fill="#ff7300" className="customized-active-shape" />;
const renderInactiveShape = props => <Sector {...props} fill="#ff7300" className="customized-inactive-shape" />;
const wrapper = render(
<Surface width={500} height={500}>
<Pie
isAnimationActive={false}
activeIndex={0}
activeShape={renderActiveShape}
inactiveShape={renderInactiveShape}
cx={250}
cy={250}
innerRadius={0}
outerRadius={200}
sectors={sectors}
/>
</Surface>,
);
expect(wrapper.find('.customized-inactive-shape').length).to.equal(4);
});

it('Render customized inactive sector when inactiveShape is set to be an object', () => {
const wrapper = render(
<Surface width={500} height={500}>
<Pie
isAnimationActive={false}
activeIndex={0}
activeShape={{ fill: '#ff7300' }}
inactiveShape={{ fill: '#ff7322' }}
cx={250}
cy={250}
innerRadius={0}
outerRadius={200}
sectors={sectors}
/>
</Surface>,
);

expect(wrapper.find('.customized-inactive-shape').length).to.equal(0);
});

it('should not render customized inactive sectors if there is no active index', () => {
const renderActiveShape = props => <Sector {...props} fill="#ff7300" className="customized-active-shape" />;
const renderInactiveShape = props => <Sector {...props} fill="#ff7300" className="customized-inactive-shape" />;
const wrapper = render(
<Surface width={500} height={500}>
<Pie
isAnimationActive={false}
activeShape={renderActiveShape}
inactiveShape={renderInactiveShape}
cx={250}
cy={250}
innerRadius={0}
outerRadius={200}
sectors={sectors}
/>
</Surface>,
);
expect(wrapper.find('.customized-inactive-shape').length).to.equal(0);
});

it('Support multiple active sectors', () => {
const ActiveShape = props =>
<Sector {...props} fill="#ff7300" className="customized-active-shape" />
Expand All @@ -113,7 +196,7 @@ describe('<Pie />', () => {
outerRadius={200}
sectors={sectors}
/>
</Surface>
</Surface>,
);

expect(wrapper.find('.customized-active-shape').length).to.equal(2);
Expand All @@ -135,7 +218,7 @@ describe('<Pie />', () => {
outerRadius={200}
sectors={sectors}
/>
</Surface>
</Surface>,
);

expect(wrapper.find('.customized-label').length).to.equal(sectors.length);
Expand All @@ -157,7 +240,7 @@ describe('<Pie />', () => {
outerRadius={200}
sectors={sectors}
/>
</Surface>
</Surface>,
);

setTimeout(() => {
Expand All @@ -182,7 +265,7 @@ describe('<Pie />', () => {
outerRadius={200}
sectors={sectors}
/>
</Surface>
</Surface>,
);

expect(wrapper.find('.customized-label').length).to.equal(sectors.length);
Expand All @@ -206,7 +289,7 @@ describe('<Pie />', () => {
outerRadius={200}
sectors={sectors}
/>
</Surface>
</Surface>,
);

expect(wrapper.find('.customized-label-line').length).to.equal(sectors.length);
Expand All @@ -230,7 +313,7 @@ describe('<Pie />', () => {
outerRadius={200}
sectors={sectors}
/>
</Surface>
</Surface>,
);

expect(wrapper.find('.customized-label-line').length).to.equal(sectors.length);
Expand Down Expand Up @@ -265,7 +348,7 @@ describe('<Pie />', () => {
onMouseLeave={onMouseLeave}
onClick={onClick}
/>
</Surface>
</Surface>,
);
const se = wrapper.find(Layer).at(3);

Expand Down

0 comments on commit deee55f

Please sign in to comment.