render()

in packages/showcase/plot/custom-svg-all-the-marks.js [68:99]

• 31 lines of code
• 3 McCabe index (conditional complexity)

  render() {
    const {reverse, hoveredCell} = this.state;

    return (
      <div>
        <ShowcaseButton
          buttonContent="REVERSE"
          onClick={() => this.setState({reverse: !reverse})}
        />
        <XYPlot margin={50} width={300} height={300}>
          <VerticalGridLines />
          <HorizontalGridLines />
          <XAxis />
          <YAxis />
          <CustomSVGSeries
            animation
            style={{stroke: 'red', fill: 'orange'}}
            data={reverse ? REVERSED_DATA : DATA}
            onValueMouseOver={v => {
              this.setState({hoveredCell: v});
            }}
            onValueMouseOut={() => this.setState({hoveredCell: false})}
          />
          {hoveredCell && (
            <Hint value={hoveredCell}>
              <div style={tipStyle}>{hoveredCell.customComponent}</div>
            </Hint>
          )}
        </XYPlot>
      </div>
    );
  }