diff --git a/README.md b/README.md index f217e28..c4f237b 100644 --- a/README.md +++ b/README.md @@ -14,32 +14,16 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o Installation ------------ -### Browser +This is a CommonJS component only (to be used with something like Webpack or Browserify) ``` - - - -``` - -### CommonJS -``` - // nothing you need to do here for initialization -``` - -### AMD -``` - define('path/to/chart.js', 'react', 'react-chartjs', function(Chart, React, ReactChart) { - // initialize ReactChartjs - ReactChart(Chart, React); - /// now you can refer to React charts as Chart.React.* - }); +npm install --save react-chartjs ``` +You must also include the [chartjs](http://www.chartjs.org/) script on your html page Example Usage ------------- ``` -var LineChart = Chart.React.Line; // for browser or AMD (using define('path/to/chart.js')) -var LineChart = require("react-chartjs/line"); // for commonJS +var LineChart = require("react-chartjs").Line; var MyComponent = React.createClass({ render: function() { diff --git a/bower.json b/bower.json deleted file mode 100644 index 8150b63..0000000 --- a/bower.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "react-chartjs", - "main": "react-chartjs.js", - "version": "0.2.1", - "homepage": "https://github.com/jhudson8/react-chartjs", - "authors": [ - "Joe Hudson " - ], - "description": "rich interactive react charting components using chart.js", - "dependencies": { - "Chart.js": "~1.0" - }, - "keywords": [ - "react", - "react-component", - "chart", - "charts", - "graph", - "chartjs" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/index.js b/index.js index 0ec4113..6b8887c 100644 --- a/index.js +++ b/index.js @@ -1,23 +1,8 @@ -(function(main) { - if (typeof Chart === 'function') { - // script include - main(Chart); - } else { - // AMD - define([], function() { - return main; - }); - } -})(function(Chart, React) { - require('./vars').React = React; - Chart.React = { - Bar: require('./bar'), - Doughnut: require('./doughnut'), - Line: require('./line'), - Pie: require('./pie'), - PolarArea: require('./polar-area'), - Radar: require('./radar') - }; - return Chart; -}); - +module.exports = { + Bar: require('./lib/bar'), + Doughnut: require('./lib/doughnut'), + Line: require('./lib/line'), + Pie: require('./lib/pie'), + PolarArea: require('./lib/polar-area'), + Radar: require('./lib/radar') +}; diff --git a/bar.js b/lib/bar.js similarity index 67% rename from bar.js rename to lib/bar.js index 948eb02..f411382 100644 --- a/bar.js +++ b/lib/bar.js @@ -1,3 +1,3 @@ -var vars = require('./vars'); +var vars = require('./core'); module.exports = vars.createClass('Bar', ['getBarsAtEvent']); diff --git a/vars.js b/lib/core.js similarity index 82% rename from vars.js rename to lib/core.js index c9f5043..a49d68f 100644 --- a/vars.js +++ b/lib/core.js @@ -55,15 +55,7 @@ module.exports = { } } - var React = this.React || global.React; - if (!React && (typeof require !== 'undefined') && (typeof define !== 'function')) { - // allow the charts to not need to be initialized for commonJS - React = this.React = require('react'); - } - if (!React) { - throw new Error("The charts were not initialized with the React instance"); - } - + var React = require('react'); return React.createClass(classData); } }; diff --git a/doughnut.js b/lib/doughnut.js similarity index 70% rename from doughnut.js rename to lib/doughnut.js index 66f7e8a..feb913b 100644 --- a/doughnut.js +++ b/lib/doughnut.js @@ -1,3 +1,3 @@ -var vars = require('./vars'); +var vars = require('./core'); module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']); diff --git a/line.js b/lib/line.js similarity index 68% rename from line.js rename to lib/line.js index 0e4cd0b..d2e6925 100644 --- a/line.js +++ b/lib/line.js @@ -1,3 +1,3 @@ -var vars = require('./vars'); +var vars = require('./core'); module.exports = vars.createClass('Line', ['getPointsAtEvent']); diff --git a/pie.js b/lib/pie.js similarity index 69% rename from pie.js rename to lib/pie.js index abbc4f5..bde762c 100644 --- a/pie.js +++ b/lib/pie.js @@ -1,3 +1,3 @@ -var vars = require('./vars'); +var vars = require('./core'); module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']); diff --git a/polar-area.js b/lib/polar-area.js similarity index 70% rename from polar-area.js rename to lib/polar-area.js index 337f1aa..f0d1e47 100644 --- a/polar-area.js +++ b/lib/polar-area.js @@ -1,3 +1,3 @@ -var vars = require('./vars'); +var vars = require('./core'); module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']); diff --git a/radar.js b/lib/radar.js similarity index 69% rename from radar.js rename to lib/radar.js index c43e0f9..3873c3b 100644 --- a/radar.js +++ b/lib/radar.js @@ -1,3 +1,3 @@ -var vars = require('./vars'); +var vars = require('./core'); module.exports = vars.createClass('Radar', ['getPointsAtEvent']); diff --git a/react-chartjs.js b/react-chartjs.js deleted file mode 100644 index f2dc7b2..0000000 --- a/react-chartjs.js +++ /dev/null @@ -1,299 +0,0 @@ -/*! - * react-charts v0.2.1 - * https://github.com/jhudson8/react-charts - * - * - * Copyright (c) 2014 Joe Hudson - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ -/*! - * react-charts v0.2.0 - * https://github.com/jhudson8/react-charts - * - * - * Copyright (c) 2014 Joe Hudson - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ -/*! - * react-charts v0.1.3 - * https://github.com/jhudson8/react-charts - * - * - * Copyright (c) 2014 Joe Hudson - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ -/*! - * react-charts v0.1.1 - * https://github.com/jhudson8/react-charts - * - * - * Copyright (c) 2014 Joe Hudson - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) -/******/ return installedModules[moduleId].exports; -/******/ -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.loaded = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ function(module, exports, __webpack_require__) { - - var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function(main) { - if (typeof Chart === 'function') { - // script include - main(Chart); - } else { - // AMD - !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function() { - return main; - }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - } - })(function(Chart, React) { - __webpack_require__(1).React = React; - Chart.React = { - Bar: __webpack_require__(2), - Doughnut: __webpack_require__(3), - Line: __webpack_require__(4), - Pie: __webpack_require__(5), - PolarArea: __webpack_require__(6), - Radar: __webpack_require__(7) - }; - return Chart; - }); - - - -/***/ }, -/* 1 */ -/***/ function(module, exports, __webpack_require__) { - - /* WEBPACK VAR INJECTION */(function(global) {module.exports = { - createClass: function(chartType, methodNames) { - var classData = { - displayName: chartType + 'Chart', - getInitialState: function() { return {}; }, - render: function() { - var _props = {}; - for (var name in this.props) { - if (this.props.hasOwnProperty(name)) { - if (name !== 'data' && name !== 'options') { - _props[name] = this.props[name]; - } - } - } - return React.createElement('canvas', _props); - } - }; - - var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData']; - function extra(type) { - classData[type] = function() { - this.state.chart[name].apply(this.state.chart, arguments); - }; - } - - if (global.Chart) { - classData.componentDidMount = function() { - this.initializeChart(this.props); - }; - - classData.componentWillUnmount = function() { - var chart = this.state.chart; - chart.destroy(); - }; - - classData.componentWillReceiveProps = function(props) { - var chart = this.state.chart; - chart.destroy(); - this.initializeChart(props); - }; - - classData.initializeChart = function(props) { - var el = this.getDOMNode(); - var ctx = el.getContext("2d"); - var chart = new Chart(ctx)[chartType](this.props.data, this.props.options || {}); - this.state.chart = chart; - }; - - var i; - for (i=0; i - */ -!function(t){function e(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return t[r].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){var r,a;!function(n){"function"==typeof Chart?n(Chart):(r=[],a=function(){return n}.apply(e,r),!(void 0!==a&&(t.exports=a)))}(function(t,e){return n(1).React=e,t.React={Bar:n(2),Doughnut:n(3),Line:n(4),Pie:n(5),PolarArea:n(6),Radar:n(7)},t})},function(t,e){(function(e){t.exports={createClass:function(t,n){function r(t){a[t]=function(){this.state.chart[name].apply(this.state.chart,arguments)}}var a={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return s.createElement("canvas",t)}},i=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];if(e.Chart){a.componentDidMount=function(){this.initializeChart(this.props)},a.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},a.componentWillReceiveProps=function(t){var e=this.state.chart;e.destroy(),this.initializeChart(t)},a.initializeChart=function(){var e=this.getDOMNode(),n=e.getContext("2d"),r=new Chart(n)[t](this.props.data,this.props.options||{});this.state.chart=r};var o;for(o=0;o