render() — react Function Reference

Architecture documentation for the render() function in Charts.js from the react codebase.

Function javascript BabelCompiler Optimization called by 1

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  a9610b16_5cb9_beda_e5fc_ca410358d178["render()"]
  f4df3a91_6c44_d711_f000_dd1eb50d4ac0["Charts"]
  a9610b16_5cb9_beda_e5fc_ca410358d178 -->|defined in| f4df3a91_6c44_d711_f000_dd1eb50d4ac0
  180ba2a5_ca78_9a74_efcc_7a8883de46ec["render()"]
  180ba2a5_ca78_9a74_efcc_7a8883de46ec -->|calls| a9610b16_5cb9_beda_e5fc_ca410358d178
  style a9610b16_5cb9_beda_e5fc_ca410358d178 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/concurrent/time-slicing/src/Charts.js lines 15–125

  render() {
    const streamData = this.props.data;
    return (
      <div>
        <div style={{display: 'flex'}}>
          <VictoryChart
            theme={VictoryTheme.material}
            width={400}
            height={400}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryScatter
              data={streamData[0]}
              size={6}
              style={{
                data: {
                  fill: d => colors[d.x % 5],
                },
              }}
            />
          </VictoryChart>

          <VictoryChart
            theme={VictoryTheme.material}
            width={400}
            height={400}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}
            domainPadding={[20, 20]}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryBar
              data={streamData[0]}
              style={{
                data: {
                  fill: d => colors[d.x % 5],
                  stroke: 'none',
                  padding: 5,
                },
              }}
            />
          </VictoryChart>
        </div>
        <div
          style={{
            display: 'flex',
            position: 'relative',
            top: '-50px',
          }}>
          <VictoryChart
            theme={VictoryTheme.material}