A LineChart which has customized dots

by ling ding

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  background-color: #fff;
}

Babel + JSX

const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} = Recharts;
const data0 = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const data1 = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const CustomizedDot = React.createClass({
	getInitialState() {
  	return {
    	first: true,
      second: false,
      color: '#44cc44'
    };
  },
  
  componentDidMount () {
    this.timer = setInterval(() => {
      if (this.state.first) {
        this.setState({
          first: false,
          second: true,
          color: '#44cc44'
        })
      } else {
        this.setState({
          first: true,
          second: false,
          color: '#ff0000'
        })
      }
    }, 4000)
  },

  render () {
  	return this.state.first
                  ? (
                    <ResponsiveContainer height={120}>
                      <LineChart data={data0}>
                        <Line type='monotone' dataKey='pv' dot={false} strokeWidth={5} stroke={this.state.color} />
                        <CartesianGrid vertical={false} />
                      </LineChart>
                    </ResponsiveContainer>
                  )
                  : (
                    <ResponsiveContainer height={120}>
                      <LineChart data={data1.slice()}>
          ...