diff --git a/examples/barChart/index.js b/examples/barChart/index.js index 63634c3..f7a5adc 100644 --- a/examples/barChart/index.js +++ b/examples/barChart/index.js @@ -39,14 +39,21 @@ ]; // Unmounting example - var Chart = React.createClass({ - getInitialState: function(){ - return {visible: true}; - }, - toggleVisibility: function(){; - this.setState({visible: !this.state.visible}); - }, - render: function(){ + class Chart extends React.Component { + + constructor(props) { + super(props); + this.state = { + visible: true + }; + this.toggleVisibility = this.toggleVisibility.bind(this); + } + + toggleVisibility() { + this.setState({ visible: !this.state.visible }); + } + + render() { var chart; var context = { getColor: function(i){ @@ -65,11 +72,15 @@ ); } - }) + } ReactDOM.render( , document.getElementById('barChart') ); + ReactDOM.render( + , + document.getElementById('barChart') + ); })(window); diff --git a/examples/index.html b/examples/index.html index 2e8de7e..f7e3051 100644 --- a/examples/index.html +++ b/examples/index.html @@ -15,8 +15,11 @@

Examples

  • Bar Chart
  • Cumulative Line Chart
  • Line Chart
  • +
  • Line Plush Bar Chart
  • Multibar Chart
  • Pie Chart
  • +
  • Scatter Chart
  • +
  • Stacked Area Chart
  • diff --git a/examples/lineChart/index.js b/examples/lineChart/index.js index a7e77b5..6983ee7 100644 --- a/examples/lineChart/index.js +++ b/examples/lineChart/index.js @@ -23,14 +23,20 @@ ]; } - var LineWrapper = React.createClass({ - getInitialState: function() { - return { count: 1} - }, - handleClick: function() { + class LineWrapper extends React.Component { + constructor(props) { + super(props); + this.state = { + count: 1 + }; + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { this.setState({count: this.state.count + 1}) - }, - render: function() { + } + + render() { const data = (this.state.count % 2 == 0)? getDatum(10): getDatum(11); return (
    @@ -61,7 +67,7 @@
    ) } - }); + }; ReactDOM.render( , diff --git a/examples/pieChart/index.js b/examples/pieChart/index.js index e6f5915..2789513 100644 --- a/examples/pieChart/index.js +++ b/examples/pieChart/index.js @@ -17,14 +17,20 @@ var data2 = [ ]; -var PieWrapper = React.createClass({ - getInitialState: function() { - return { count: 1} - }, - handleClick: function() { +class PieWrapper extends React.Component { + constructor(props) { + super(props); + this.state = { + count: 1 + }; + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { this.setState({count: this.state.count + 1}) - }, - render: function() { + } + + render() { const data = (this.state.count % 2 == 0)? data1: data2; return (
    @@ -44,11 +50,11 @@ var PieWrapper = React.createClass({
    ) } -}) +} ReactDOM.render( , document.getElementById('pieChart') ); -})(window); \ No newline at end of file +})(window); diff --git a/examples/scatterChart/index.js b/examples/scatterChart/index.js index afed36a..17d7392 100644 --- a/examples/scatterChart/index.js +++ b/examples/scatterChart/index.js @@ -21,14 +21,18 @@ return data; } - var Main = React.createClass({ - getInitialState: function() { - return { data: randomData(4, 40) }; - }, - handleClick: function() { + class Main extends React.Component { + constructor(props) { + super(props); + this.state = { data: randomData(4, 40) } + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { this.setState({ data: randomData(4, 40) }); - }, - render: function() { + } + + render() { return (
    ); } - }); + }; ReactDOM.render(
    ,