render()

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>
    );
  }