in packages/showcase/misc/triangle-example.js [54:93]
render() {
const {hoveredIndex} = this.state;
return (
<XYPlot width={300} height={300}>
<GradientDefs>
<radialGradient
id="grad1"
cx="50%"
cy="50%"
r="50%"
fx="50%"
fy="50%"
>
<stop offset="0%" stopColor="#829AE3" stopOpacity="0" />
<stop offset="100%" stopColor="#12939A" stopOpacity="1" />
</radialGradient>
</GradientDefs>
<XAxis />
<YAxis />
{triangles.map((triangle, index) => {
return (
<PolygonSeries
key={`triangle-${index}`}
data={triangle}
onSeriesMouseOver={() => this.setState({hoveredIndex: index})}
onSeriesMouseOut={() => this.setState({hoveredIndex: false})}
color={index !== hoveredIndex ? 'url(#grad1)' : null}
style={{
strokeWidth: 0.5,
strokeOpacity: 1,
opacity: 0.5,
fill: index === hoveredIndex ? '#EF5D28' : null
}}
/>
);
})}
</XYPlot>
);
}