render()

in packages/showcase/treemap/simple-treemap.js [64:105]

• 41 lines of code
• 4 McCabe index (conditional complexity)

  render() {
    const {modeIndex, useSVG} = this.state;

    return (
      <div className="centered-and-flexed">
        <div className="centered-and-flexed-controls">
          <ShowcaseButton
            onClick={() => this.setState({useSVG: !useSVG})}
            buttonContent={useSVG ? 'USE DOM' : 'USE SVG'}
          />
        </div>
        <div className="centered-and-flexed-controls">
          <ShowcaseButton
            onClick={this.updateModeIndex(false)}
            buttonContent={'PREV MODE'}
          />
          <div> {MODE[modeIndex]} </div>
          <ShowcaseButton
            onClick={this.updateModeIndex(true)}
            buttonContent={'NEXT MODE'}
          />
        </div>
        <Treemap
          {...{
            animation: true,
            className: 'nested-tree-example',
            colorType: 'literal',
            colorRange: ['#88572C'],
            data: D3FlareData,
            mode: MODE[modeIndex],
            renderMode: useSVG ? 'SVG' : 'DOM',
            height: 300,
            width: 350,
            margin: 10,
            getSize: d => d.value,
            getColor: d => d.hex,
            style: STYLES[useSVG ? 'SVG' : 'DOM']
          }}
        />
      </div>
    );
  }