<div id="__react-content"></div>

import createG2 from 'g2-react';
import { Stat } from 'g2';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import data from './data.json';

const Line = createG2(chart => {
  chart.line().position('time*price').color('name').shape('spline').size(2);
  chart.render();
});

class MyComponent extends Component {
  state = {
    data: data.slice(0, data.length / 2 - 1),
    width: 500,
    height: 250,
    plotCfg: {
      margin: [10, 100, 50, 120],
    },
  }

  changeHandler = () => {
    this.setState({
      data: data.slice(data.length / 2, data.length - 1),
    });
  }

  render() {
    return (
      <div>
        <Line
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
        />
        <button onClick={this.changeHandler}>Change Data</button>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('__react-content'));