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(
,