From f178c297210397359ae205e9081f2fcd5ce753f9 Mon Sep 17 00:00:00 2001 From: Nicholas Tettenborn Date: Mon, 18 Jan 2016 17:54:32 +0000 Subject: [PATCH] changed repository to react-easy-chart --- LICENSE | 3 +- README.md | 49 +++++++++++++++++++---------- examples/area-chart/App.js | 2 +- examples/bar-chart/App.js | 2 +- examples/line-chart/app.js | 2 +- examples/pie-chart/App.js | 2 +- examples/webpack.config.js | 2 +- karma.conf.js | 2 +- package.json | 8 ++--- tests/bar-chart/bar-chart.test.js | 2 +- tests/line-chart/line-chart.test.js | 2 +- tests/pie-chart/pie-chart.test.js | 2 +- 12 files changed, 47 insertions(+), 31 deletions(-) diff --git a/LICENSE b/LICENSE index 426612c..69c04c4 100644 --- a/LICENSE +++ b/LICENSE @@ -11,7 +11,7 @@ modification, are permitted provided that the following conditions are met: this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. -* Neither the name of rc-d3 nor the names of its +* Neither the name of react-easy-chart nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. @@ -25,4 +25,3 @@ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - diff --git a/README.md b/README.md index addff4d..9813b19 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![animated graph](examples/images/animated-graph.gif) -# Introduction +## Introduction This set of graphing components aims to be the easiest and fastest way of implementing a graph within a React application. @@ -16,31 +16,48 @@ The graphs all have the following features: Under the hood we use the fantastic [D3](http://d3js.org/) to create and render the charts into SVG. D3 requires some learning and will ultimately provide more flexible charts. The aim of React Easy Chart is to avoid that learning and have a common set of charts that can be set up in minutes. -We have concentrated on making an API that is consistent across a different set of graphs and so. Currently we provide a bar, line, area, scatter and pie chart. +We have concentrated on making an API that is consistent across a different set of graphs so allowing different graphs to be chosen for the same data set. Currently we provide a bar, line, area, scatter and pie chart. -The graphs though also support more advanced use cases such as mouseover, mousemove, mouseout, on-click events. +## Installation +`npm install react-easy-chart --save` -##Background and Motivation -There are quite a few d3/React libraries about including probably the most sophisticated being: -- https://github.com/esbullington/react-d3/ +The chart component you wish to use can then be simply imported. +Area chart: -There are also a few different techniques for implementing D3 +`import {AreaChart} from 'react-easy-chart';` -There are some subtle differences in how rc-d3 is implemented that react-d3. -Rather than re-develop the existing excellent (D3)[https://github.com/mbostock/d3/wiki/Gallery] charts into seperate +Bar chart: +`import BarChart from 'react-easy-chart/bar-chart';` +Line chart: -https://github.com/esbullington/react-d3 +`import {LineChart} from 'react-easy-chart';` -It is aimed at +Pie chart: +`import PieChart from 'react-easy-chart/pie-chart';` -[![Build Status](https://travis-ci.org/rma-consulting/rc-d3.svg)](https://travis-ci.org/rma-consulting/rc-d3) +Scatter chart: -React component implementations of Mike Bostok's D3 visualisation library. +`import ScatterChart from 'react-easy-chart/scatter-chart';` -Inspired by http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/ -Using: -https://github.com/Olical/react-faux-dom +## Documentation +Each of the charts have had extensive documentation produced for them with working examples. These can be found here TODO ADD LINK + +## Contributing +We welcome pull requests and forks of the current graph implementations. If you are able to follow the API we have set out and are developing a chart we currently do not have we would love to add to our existing library. + +## Background and Motivation +The project started by trying to optimize D3 charts for React. After some reading and trial and error we came across this blog post http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/ +Oliver provided us with a solution that can utilize the react shadow DOM by creating a faux DOM to attach the SVG elements to. This is in our opinion the best current solution. + +The complexity of developing D3 based graphs intermittently often means that even experienced JavaScript developers can take days getting back up to speed for making the most simple of Graphs. The React Easy Chart Library is flexible and robust enough to avoid needing to remember D3 syntax when simple graphs are required. + + +### Version +[![npm version](https://badge.fury.io/js/react-easy-chart.png)](https://www.npmjs.com/package/react-easy-chart) + +### Build Status +[![Build Status](https://travis-ci.org/rma-consulting/react-easy-chart.svg)](https://travis-ci.org/rma-consulting/react-easy-chart) diff --git a/examples/area-chart/App.js b/examples/area-chart/App.js index b5899a7..0edbec6 100644 --- a/examples/area-chart/App.js +++ b/examples/area-chart/App.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDom from 'react-dom'; import {escapeHTML} from '../util'; import ToolTip from '../ToolTip'; -import {AreaChart} from 'rc-d3'; +import {AreaChart} from 'react-easy-chart'; import moment from 'moment'; import {format} from 'd3-time-format'; diff --git a/examples/bar-chart/App.js b/examples/bar-chart/App.js index c3c8cdf..5c48cc5 100644 --- a/examples/bar-chart/App.js +++ b/examples/bar-chart/App.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import BarChart from 'rc-d3/bar-chart'; +import BarChart from 'react-easy-chart/bar-chart'; import ToolTip from '../ToolTip'; import {escapeHTML} from '../util'; diff --git a/examples/line-chart/app.js b/examples/line-chart/app.js index 66e82d9..7ca6b19 100644 --- a/examples/line-chart/app.js +++ b/examples/line-chart/app.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDom from 'react-dom'; import {escapeHTML} from '../util'; import ToolTip from '../ToolTip'; -import {LineChart} from 'rc-d3'; +import {LineChart} from 'react-easy-chart'; import moment from 'moment'; import {format} from 'd3-time-format'; diff --git a/examples/pie-chart/App.js b/examples/pie-chart/App.js index 50c71bf..96d5052 100644 --- a/examples/pie-chart/App.js +++ b/examples/pie-chart/App.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import ToolTip from '../ToolTip'; import {escapeHTML} from '../util'; -import PieChart from 'rc-d3/pie-chart'; +import PieChart from 'react-easy-chart/pie-chart'; export default class PieChartContainer extends React.Component { constructor(props) { diff --git a/examples/webpack.config.js b/examples/webpack.config.js index 258ca56..98e4a92 100644 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -32,7 +32,7 @@ module.exports = { resolve: { alias: { - 'rc-d3': path.join(__dirname, '..', 'modules') + 'react-easy-chart': path.join(__dirname, '..', 'modules') } }, diff --git a/karma.conf.js b/karma.conf.js index 5ff240c..4c52a95 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -14,7 +14,7 @@ module.exports = (config) => { webpack: { resolve: { alias: { - 'rc-d3': path.join(__dirname, 'modules') + 'react-easy-chart': path.join(__dirname, 'modules') } }, module: { diff --git a/package.json b/package.json index b192c9c..97f61ac 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "rc-d3", + "name": "react-easy-chart", "version": "0.0.1", "description": "React component implementations of Mike Bostok's D3 visualisation library.", "main": "lib/index.js", @@ -11,13 +11,13 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/rma-consulting/rc-d3.git" + "url": "git+https://github.com/rma-consulting/react-easy-chart.git" }, "license": "BSD-3-Clause", "bugs": { - "url": "https://github.com/rma-consulting/rc-d3/issues" + "url": "https://github.com/rma-consulting/react-easy-chart/issues" }, - "homepage": "https://github.com/rma-consulting/rc-d3#readme", + "homepage": "https://github.com/rma-consulting/react-easy-chart#readme", "devDependencies": { "babel-cli": "^6.3.17", "babel-core": "^6.3.21", diff --git a/tests/bar-chart/bar-chart.test.js b/tests/bar-chart/bar-chart.test.js index 5372937..f26ef36 100644 --- a/tests/bar-chart/bar-chart.test.js +++ b/tests/bar-chart/bar-chart.test.js @@ -3,7 +3,7 @@ import chai, {should as chaiShould, expect} from 'chai'; import React from 'react'; import ReactDOM from 'react-dom'; import TestUtils from 'react/lib/ReactTestUtils'; -import {BarChart} from 'rc-d3'; +import {BarChart} from 'react-easy-chart'; import spies from 'chai-spies'; const should = chaiShould(); diff --git a/tests/line-chart/line-chart.test.js b/tests/line-chart/line-chart.test.js index fc2afd3..327c944 100644 --- a/tests/line-chart/line-chart.test.js +++ b/tests/line-chart/line-chart.test.js @@ -2,7 +2,7 @@ import {should as chaiShould, expect} from 'chai'; import React from 'react'; import TestUtils from 'react/lib/ReactTestUtils'; -import {LineChart} from 'rc-d3'; +import {LineChart} from 'react-easy-chart'; const should = chaiShould(); const testDataBasic = [[ diff --git a/tests/pie-chart/pie-chart.test.js b/tests/pie-chart/pie-chart.test.js index d47ec61..2ed3919 100644 --- a/tests/pie-chart/pie-chart.test.js +++ b/tests/pie-chart/pie-chart.test.js @@ -2,7 +2,7 @@ import {should as chaiShould, expect} from 'chai'; import React from 'react'; import TestUtils from 'react/lib/ReactTestUtils'; -import {PieChart} from 'rc-d3'; +import {PieChart} from 'react-easy-chart'; const should = chaiShould();