feat(chart): add basic bar chart

colinmeinke · Mar 5, 2016 · 8428bfb · 8428bfb
commit 8428bfb
Show file tree

Hide file tree

Showing 14 changed files with 410 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+lib/
+node_modules/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+.gitignore
+.travis.yml
+examples/
+src/
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,18 @@
+sudo: false
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false
+node_js:
+  - '5.7'
+before_install:
+  - npm i -g npm@^3.6.0
+before_script:
+  - npm prune
+after_success:
+  - npm run semantic-release
+branches:
+  except:
+    - "/^v\\d+\\.\\d+\\.\\d+$/"
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,16 @@
+Internet Systems Consortium license
+===================================
+
+Copyright (c) `2016`, `Colin Meinke`
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# React SVG chart
+
+Animated SVG charts for React.
+
+## Installation
+
+```
+npm install react-svg-chart
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { BarChart } from 'react-svg-chart';
+
+const App = () => (
+  <BarChart
+    bars={[
+      { value: 11 },
+      { value: 27 },
+      { value: 4 },
+      { value: 19 },
+      { value: 10 },
+    ]}
+    height={ 400 }
+    width={ 600 }
+  />
+);
+```
diff --git a/examples/barChart/.gitignore b/examples/barChart/.gitignore
@@ -0,0 +1,2 @@
+client.dist.js
+node_modules/
diff --git a/examples/barChart/App.js b/examples/barChart/App.js
@@ -0,0 +1,67 @@
+import React, { createClass } from 'react';
+import { BarChart } from '../../src';
+
+const days = [
+  {
+    title: 'Thursday, 9th March',
+    bars: [
+      { value: 3.50 },
+      { value: 7.45 },
+      { value: 1.27 },
+      { value: 1.15 },
+      { value: 2.93 },
+    ],
+  },
+  {
+    title: 'Wednesday, 8th March',
+    bars: [
+      { value: 1.92 },
+      { value: 1.11 },
+      { value: 7.20 },
+      { value: 6.34 },
+      { value: 3.15 },
+    ],
+  },
+  {
+    title: 'Tuesday, 7th March',
+    bars: [
+      { 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 (
+      <section>
+        <select onChange={ this.onChange }>
+          { days.map(( day, i ) => (
+            <option key={ i } value={ i }>{ day.title }</option>
+          ))}
+        </select>
+        <BarChart
+          chartClassName="chart"
+          bars={ this.state.day.bars }
+        />
+      </section>
+    );
+  }
+});
+
+export default App;
diff --git a/examples/barChart/Page.js b/examples/barChart/Page.js
@@ -0,0 +1,41 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  app: PropTypes.string.isRequired,
+};
+
+const Page = ({ app }) => (
+  <html lang="en">
+    <head>
+      <style>{ `
+        select,
+        .chart {
+          margin-top: 20px;
+          padding: 10px 10px 10px 0;
+        }
+
+        select {
+          display: block;
+        }
+
+        .chart {
+          background-color: rgb(240,240,240);
+        }
+
+        .chart:after {
+          content: "";
+          display: table;
+          clear: both;
+        }
+      ` }</style>
+    </head>
+    <body>
+      <section className="app" dangerouslySetInnerHTML={{ __html: app }} />
+      <script src="/client.dist.js" />
+    </body>
+  </html>
+);
+
+Page.propTypes = propTypes;
+
+export default Page;
diff --git a/examples/barChart/client.js b/examples/barChart/client.js
@@ -0,0 +1,8 @@
+import 'babel-polyfill';
+
+import React from 'react';
+import { render } from 'react-dom';
+
+import App from './App';
+
+render( <App />, document.querySelector( '.app' ));
diff --git a/examples/barChart/package.json b/examples/barChart/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 bar 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/barChart/server.js b/examples/barChart/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( '<!DOCTYPE html>' +
+    renderToStaticMarkup(
+      <Page app={ renderToString( <App /> )} />
+    )
+  );
+});
+
+app.listen( 3000, () => {
+  console.log( 'Listening for requests on http://localhost:3000' );
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,69 @@
+{
+  "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"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "dependencies": {
+    "svg-tween": "^1.0.1"
+  },
+  "description": "Animated SVG charts for React",
+  "devDependencies": {
+    "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",
+    "commitizen": "^2.5.0",
+    "cz-conventional-changelog": "^1.1.5",
+    "react": "^0.14.7",
+    "semantic-release": "^4.3.5"
+  },
+  "keywords": [
+    "animate",
+    "bar",
+    "chart",
+    "data",
+    "ease",
+    "graph",
+    "line",
+    "path",
+    "points",
+    "react",
+    "svg",
+    "tween"
+  ],
+  "license": "ISC",
+  "main": "lib/index.js",
+  "name": "react-svg-chart",
+  "peerDependencies": {
+    "react": "^0.14.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/colinmeinke/react-svg-chart.git"
+  },
+  "scripts": {
+    "build": "babel src --out-dir lib",
+    "commit": "git-cz",
+    "prepublish": "npm run build",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+  },
+  "version": "0.0.0-semantically-released"
+}