diff --git a/README.md b/README.md
index d08113f..4748978 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ npm install react-svg-chart
## Usage
+### Bar chart
+
```js
import React from 'react';
import { BarChart } from 'react-svg-chart';
@@ -28,3 +30,26 @@ const App = () => (
/>
);
```
+
+### Line chart
+
+```js
+import React from 'react';
+import { LineChart } from 'react-svg-chart';
+
+const App = () => (
+
+);
+```
diff --git a/examples/lineChart/.gitignore b/examples/lineChart/.gitignore
new file mode 100644
index 0000000..8c7d1b8
--- /dev/null
+++ b/examples/lineChart/.gitignore
@@ -0,0 +1,2 @@
+client.dist.js
+node_modules/
diff --git a/examples/lineChart/App.js b/examples/lineChart/App.js
new file mode 100644
index 0000000..88f8934
--- /dev/null
+++ b/examples/lineChart/App.js
@@ -0,0 +1,80 @@
+import React, { createClass } from 'react';
+import { LineChart } from '../../src';
+
+const days = [
+ {
+ title: 'Thursday, 9th March',
+ lines: [
+ {
+ points: [
+ { value: 3.50 },
+ { value: 7.45 },
+ { value: 1.27 },
+ { value: 1.15 },
+ { value: 2.93 },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Wednesday, 8th March',
+ lines: [
+ {
+ points: [
+ { value: 1.92 },
+ { value: 1.11 },
+ { value: 7.20 },
+ { value: 6.34 },
+ { value: 3.15 },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Tuesday, 7th March',
+ lines: [
+ {
+ points: [
+ { value: 5.37 },
+ { value: 7.32 },
+ { value: 0.90 },
+ { value: 4.78 },
+ { value: 2.75 },
+ ],
+ },
+ ],
+ },
+];
+
+const App = createClass({
+ onChange ( e ) {
+ this.setState({
+ day: days[ e.target.value ],
+ });
+ },
+
+ getInitialState () {
+ return {
+ day: days[ 0 ],
+ };
+ },
+
+ render () {
+ return (
+
+
+
+
+ );
+ }
+});
+
+export default App;
diff --git a/examples/lineChart/Page.js b/examples/lineChart/Page.js
new file mode 100644
index 0000000..6c22910
--- /dev/null
+++ b/examples/lineChart/Page.js
@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+ app: PropTypes.string.isRequired,
+};
+
+const Page = ({ app }) => (
+
+
+
+
+
+
+
+
+
+);
+
+Page.propTypes = propTypes;
+
+export default Page;
diff --git a/examples/lineChart/client.js b/examples/lineChart/client.js
new file mode 100644
index 0000000..12d276b
--- /dev/null
+++ b/examples/lineChart/client.js
@@ -0,0 +1,8 @@
+import 'babel-polyfill';
+
+import React from 'react';
+import { render } from 'react-dom';
+
+import App from './App';
+
+render( , document.querySelector( '.app' ));
diff --git a/examples/lineChart/package.json b/examples/lineChart/package.json
new file mode 100644
index 0000000..4bb8d09
--- /dev/null
+++ b/examples/lineChart/package.json
@@ -0,0 +1,43 @@
+{
+ "author": {
+ "name": "Colin Meinke",
+ "email": "hello@colinmeinke.com",
+ "url": "www.colinmeinke.com"
+ },
+ "babel": {
+ "plugins": [
+ "transform-object-rest-spread"
+ ],
+ "presets": [
+ "es2015",
+ "react"
+ ]
+ },
+ "bugs": {
+ "url": "https://github.com/colinmeinke/react-svg-chart/issues"
+ },
+ "dependencies": {
+ "babel-cli": "^6.6.5",
+ "babel-plugin-transform-object-rest-spread": "^6.6.5",
+ "babel-preset-es2015": "^6.6.0",
+ "babel-preset-react": "^6.5.0",
+ "express": "^4.13.4",
+ "react": "^0.14.7",
+ "react-dom": "^0.14.7"
+ },
+ "description": "SVG charts line chart example",
+ "devDependencies": {
+ "babelify": "^7.2.0",
+ "browserify": "^13.0.0"
+ },
+ "license": "ISC",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/colinmeinke/react-svg-chart.git"
+ },
+ "scripts": {
+ "build": "browserify ./client.js -o ./client.dist.js -t babelify",
+ "start": "npm run build && babel-node ./server.js"
+ },
+ "version": "0.0.0-semantically-released"
+}
diff --git a/examples/lineChart/server.js b/examples/lineChart/server.js
new file mode 100644
index 0000000..c5ab2fa
--- /dev/null
+++ b/examples/lineChart/server.js
@@ -0,0 +1,24 @@
+import express from 'express';
+import React from 'react';
+import { renderToStaticMarkup, renderToString } from 'react-dom/server';
+
+import App from './App';
+import Page from './Page';
+
+const app = express();
+
+app.get( '/client.dist.js', ( req, res ) => {
+ res.sendFile( `${ __dirname }/client.dist.js` );
+});
+
+app.get( '/', ( req, res ) => {
+ res.send( '' +
+ renderToStaticMarkup(
+ )} />
+ )
+ );
+});
+
+app.listen( 3000, () => {
+ console.log( 'Listening for requests on http://localhost:3000' );
+});
diff --git a/src/LineChart.js b/src/LineChart.js
new file mode 100644
index 0000000..83f71c9
--- /dev/null
+++ b/src/LineChart.js
@@ -0,0 +1,90 @@
+import React, { createClass, PropTypes } from 'react';
+import tween from 'tweening';
+
+const LineChart = createClass({
+ propTypes: {
+ chartClassName: PropTypes.string,
+ easing: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]),
+ height: PropTypes.number,
+ lineClassName: PropTypes.string,
+ lines: PropTypes.array.isRequired,
+ preserveAspectRatio: PropTypes.string,
+ width: PropTypes.number,
+ },
+
+ getDefaultProps () {
+ return {
+ duration: 400,
+ easing: 'easeInOutQuad',
+ height: 500,
+ preserveAspectRatio: 'xMidYMid meet',
+ width: 800,
+ };
+ },
+
+ getInitialState () {
+ return {
+ lines: this.relativeLines( this.props.lines ),
+ spacing: this.props.width / ( this.props.lines.reduce(( p, c ) => {
+ return Math.max( p, c.points.length );
+ }, 0 ) - 1 ),
+ };
+ },
+
+ componentWillReceiveProps ({ lines }) {
+ const relativeLines = this.relativeLines( lines );
+ if ( JSON.stringify( relativeLines ) !== JSON.stringify( this.state.lines )) {
+ this.animateLines( this.state.lines, relativeLines );
+ }
+ },
+
+ render () {
+ return (
+
+ );
+ },
+
+ animateLines ( from, to ) {
+ tween({
+ duration: this.props.duration,
+ easing: this.props.easing,
+ from,
+ to,
+ next: lines => this.setState({ lines }),
+ });
+ },
+
+ relativeLines ( lines ) {
+ const absolutePercent = this.props.height / 100;
+
+ const relativePercent = Math.max(
+ ...lines.map( l => Math.max( ...l.points.map( p => p.value )))
+ ) / 100;
+
+ return lines.map( l => ({
+ ...l,
+ points: l.points.map( p => ({ ...p, value: this.props.height - ( p.value / relativePercent * absolutePercent )})),
+ }));
+ }
+});
+
+export default LineChart;
diff --git a/src/index.js b/src/index.js
index c5bd01b..a0fcdba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
import BarChart from './BarChart';
+import LineChart from './LineChart';
-export { BarChart };
+export { BarChart, LineChart };