diff --git a/README.md b/README.md index 228485c..71d55bf 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o * Line chart * Bar chart +* HorizontalBar chart * Radar chart * Polar area chart * Pie chart diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js index 17f2fd9..ddee080 100644 --- a/dist/react-chartjs.js +++ b/dist/react-chartjs.js @@ -56,11 +56,13 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = { Bar: __webpack_require__(1), - Doughnut: __webpack_require__(6), - Line: __webpack_require__(7), - Pie: __webpack_require__(8), - PolarArea: __webpack_require__(9), - Radar: __webpack_require__(10), + Bubble: __webpack_require__(6), + Doughnut: __webpack_require__(7), + Line: __webpack_require__(8), + Pie: __webpack_require__(9), + PolarArea: __webpack_require__(10), + Radar: __webpack_require__(11), + Scatter: __webpack_require__(12), createClass: __webpack_require__(2).createClass }; @@ -78,6 +80,13 @@ return /******/ (function(modules) { // webpackBootstrap /* 2 */ /***/ function(module, exports, __webpack_require__) { + // Designed to be used with the current v2.0-dev version of Chart.js + // It's not on NPM, but if you'd like to use it you can, install it + // by setting the chart.js version in your package.json to: + // "chart.js": "git://github.com/danmolitor/Chart.js.git#v2.0-dev" + + // I'll try to rework this for their 2.0.0 beta as well. + var React = __webpack_require__(3); var ReactDOM = __webpack_require__(4); @@ -112,6 +121,7 @@ return /******/ (function(modules) { // webpackBootstrap this.initializeChart(this.props); }; + classData.componentWillUnmount = function() { var chart = this.state.chart; chart.destroy(); @@ -119,28 +129,55 @@ return /******/ (function(modules) { // webpackBootstrap classData.componentWillReceiveProps = function(nextProps) { var chart = this.state.chart; - if (nextProps.redraw) { - chart.destroy(); - this.initializeChart(nextProps); - } else { - dataKey = dataKey || dataKeys[chart.name]; - updatePoints(nextProps, chart, dataKey); - if (chart.scale) { - chart.scale.xLabels = nextProps.data.labels; - chart.scale.calculateXLabelRotation(); - } - chart.update(); - } - }; + + // // Reset the array of datasets + chart.data.datasets.forEach(function(set, setIndex) { + set.data.forEach(function(val, pointIndex) { + set.data = []; + }); + }); + + // // Reset the array of labels + chart.data.labels = []; + + // Adds the datapoints from nextProps + nextProps.data.datasets.forEach(function(set, setIndex) { + set.data.forEach(function(val, pointIndex) { + chart.data.datasets[setIndex].data[pointIndex] = nextProps.data.datasets[setIndex].data[pointIndex]; + }); + }); + + // Sets the labels from nextProps + nextProps.data.labels.forEach(function(val, labelIndex) { + chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex]; + }); + + // Updates Chart with new data + chart.update(); + }; classData.initializeChart = function(nextProps) { var Chart = __webpack_require__(5); var el = ReactDOM.findDOMNode(this); var ctx = el.getContext("2d"); - var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {}); + + if (chartType === 'PolarArea'){ + var chart = new Chart(ctx, { + type: 'polarArea', + data: nextProps.data, + options: nextProps.options + }); + } else { + var chart = new Chart(ctx, { + type: chartType.toLowerCase(), + data: nextProps.data, + options: nextProps.options + }); + } this.state.chart = chart; }; + // return the chartjs instance classData.getChart = function() { return this.state.chart; @@ -165,50 +202,6 @@ return /******/ (function(modules) { // webpackBootstrap } }; - var dataKeys = { - 'Line': 'points', - 'Radar': 'points', - 'Bar': 'bars' - }; - - var updatePoints = function(nextProps, chart, dataKey) { - var name = chart.name; - - if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') { - nextProps.data.forEach(function(segment, segmentIndex) { - if (!chart.segments[segmentIndex]) { - chart.addData(segment); - } else { - Object.keys(segment).forEach(function (key) { - chart.segments[segmentIndex][key] = segment[key]; - }); - } - }); - } else { - while (chart.scale.xLabels.length > nextProps.data.labels.length) { - chart.removeData(); - } - nextProps.data.datasets.forEach(function(set, setIndex) { - set.data.forEach(function(val, pointIndex) { - if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") { - addData(nextProps, chart, setIndex, pointIndex); - } else { - chart.datasets[setIndex][dataKey][pointIndex].value = val; - } - }); - }); - } - }; - - var addData = function(nextProps, chart, setIndex, pointIndex) { - var values = []; - nextProps.data.datasets.forEach(function(set) { - values.push(set.data[pointIndex]); - }); - chart.addData(values, nextProps.data.labels[setIndex]); - }; - - /***/ }, /* 3 */ /***/ function(module, exports) { @@ -233,7 +226,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']); + module.exports = vars.createClass('Bubble', ['getPointsAtEvent']); /***/ }, @@ -242,7 +235,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('Line', ['getPointsAtEvent']); + module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']); /***/ }, @@ -251,7 +244,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']); + module.exports = vars.createClass('Line', ['getPointsAtEvent']); /***/ }, @@ -260,7 +253,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']); + module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']); /***/ }, @@ -269,9 +262,27 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); + module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']); + + +/***/ }, +/* 11 */ +/***/ function(module, exports, __webpack_require__) { + + var vars = __webpack_require__(2); + module.exports = vars.createClass('Radar', ['getPointsAtEvent']); +/***/ }, +/* 12 */ +/***/ function(module, exports, __webpack_require__) { + + var vars = __webpack_require__(2); + + module.exports = vars.createClass('Scatter', ['getPointsAtEvent']); + + /***/ } /******/ ]) }); diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js index 3051eff..d45285f 100644 --- a/dist/react-chartjs.min.js +++ b/dist/react-chartjs.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(6),Line:a(7),Pie:a(8),PolarArea:a(9),Radar:a(10),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,i){function c(t){u[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},f=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];u.componentDidMount=function(){this.initializeChart(this.props)},u.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},u.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(i=i||s[e.name],o(t,e,i),e.scale&&(e.scale.xLabels=t.data.labels,e.scale.calculateXLabelRotation()),e.update())},u.initializeChart=function(e){var r=a(5),s=n.findDOMNode(this),o=s.getContext("2d"),i=new r(o)[t](e.data,e.options||{});this.state.chart=i},u.getChart=function(){return this.state.chart},u.getCanvass=function(){return this.refs.canvass},u.getCanvas=u.getCanvass;var l;for(l=0;lt.data.labels.length;)e.removeData();t.data.datasets.forEach(function(r,n){r.data.forEach(function(r,s){"undefined"==typeof e.datasets[n][a][s]?i(t,e,n,s):e.datasets[n][a][s].value=r})})}},i=function(t,e,a,r){var n=[];t.data.datasets.forEach(function(t){n.push(t.data[r])}),e.addData(n,t.data.labels[a])}},function(e,a){e.exports=t},function(t,a){t.exports=e},function(t,e){t.exports=a},function(t,e,a){var r=a(2);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Radar",["getPointsAtEvent"])}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Bubble:a(6),Doughnut:a(7),Line:a(8),Pie:a(9),PolarArea:a(10),Radar:a(11),Scatter:a(12),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4),s=a(5);t.exports={createClass:function(t,e,a){function o(t){i[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var i={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},c=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];i.componentDidMount=function(){this.initializeChart(this.props)},i.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},i.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(t.data.datasets.forEach(function(t,a){var r=e.data.datasets[a];for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n])}),e.data.labels=t.data.labels,e.update())},i.initializeChart=function(e){var a=n.findDOMNode(this),r=a.getContext("2d"),o="PolarArea"===t?"polarArea":t.toLowerCase();this.state.chart=new s(r,{type:o,data:e.data,options:e.options})},i.getChart=function(){return this.state.chart},i.getCanvass=function(){return this.refs.canvass},i.getCanvas=i.getCanvass;var u;for(u=0;u nextProps.data.labels.length) { - chart.removeData(); - } - nextProps.data.datasets.forEach(function(set, setIndex) { - set.data.forEach(function(val, pointIndex) { - if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") { - addData(nextProps, chart, setIndex, pointIndex); - } else { - chart.datasets[setIndex][dataKey][pointIndex].value = val; - } - }); - }); - } -}; - -var addData = function(nextProps, chart, setIndex, pointIndex) { - var values = []; - nextProps.data.datasets.forEach(function(set) { - values.push(set.data[pointIndex]); - }); - chart.addData(values, nextProps.data.labels[setIndex]); -}; diff --git a/lib/horizontal-bar.js b/lib/horizontal-bar.js new file mode 100644 index 0000000..1e51b3a --- /dev/null +++ b/lib/horizontal-bar.js @@ -0,0 +1,3 @@ +var vars = require('./core'); + +module.exports = vars.createClass('HorizontalBar', ['getHorizontalBarsAtEvent']); diff --git a/lib/scatter.js b/lib/scatter.js new file mode 100644 index 0000000..967571b --- /dev/null +++ b/lib/scatter.js @@ -0,0 +1,3 @@ +var vars = require('./core'); + +module.exports = vars.createClass('Scatter', ['getPointsAtEvent']); diff --git a/package.json b/package.json index 5ba410a..fdcc397 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-chartjs", - "version": "0.7.3", + "version": "2.0.0-beta2", "description": "react charting components using the chartjs lib", "main": "index.js", "scripts": { @@ -27,9 +27,9 @@ }, "homepage": "https://github.com/jhudson8/react-chartjs", "peerDependencies": { + "create-react-class": "^15.5.2", "react": "*", - "react-dom": "*", - "chart.js": "*" + "react-dom": "*" }, "devDependencies": { "uglify-js": "^2.4.16",