From 428e58ec94d7722b9f557accac6fabb7eecbf755 Mon Sep 17 00:00:00 2001 From: ChristianVersloot Date: Mon, 3 Oct 2016 17:14:29 +0200 Subject: [PATCH 1/2] Added Bubble chart component --- lib/Chart.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/lib/Chart.js b/lib/Chart.js index e14ed13e3..0d6e3f920 100644 --- a/lib/Chart.js +++ b/lib/Chart.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.Polar = exports.Radar = exports.HorizontalBar = exports.Bar = exports.Line = exports.Pie = exports.Doughnut = undefined; +exports.Polar = exports.Radar = exports.HorizontalBar = exports.Bar = exports.Line = exports.Pie = exports.Doughnut = exports.Bubble = undefined; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); @@ -44,7 +44,7 @@ var ChartComponent = _react2.default.createClass({ onElementsClick: _react.PropTypes.func, options: _react.PropTypes.object, redraw: _react.PropTypes.bool, - type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']), + type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea', 'bubble']), width: _react.PropTypes.number }, @@ -328,4 +328,30 @@ var Polar = exports.Polar = function (_React$Component7) { }]); return Polar; +}(_react2.default.Component); + +var Bubble = exports.Bubble = function (_React$Component8) { + _inherits(Bubble, _React$Component8); + + function Bubble() { + _classCallCheck(this, Bubble); + + return _possibleConstructorReturn(this, (Bubble.__proto__ || Object.getPrototypeOf(Bubble)).apply(this, arguments)); + } + + _createClass(Bubble, [{ + key: 'render', + value: function render() { + var _this16 = this; + + return _react2.default.createElement(ChartComponent, _extends({}, this.props, { + ref: function ref(_ref8) { + return _this16.chart_instance = _ref8 && _ref8.chart_instance; + }, + type: 'bubble' + })); + } + }]); + + return Bubble; }(_react2.default.Component); \ No newline at end of file From 2a61976f85578d58b709b179a03f1740594330f1 Mon Sep 17 00:00:00 2001 From: ChristianVersloot Date: Mon, 3 Oct 2016 17:31:50 +0200 Subject: [PATCH 2/2] Added requested files --- dist/react-chartjs-2.js | 30 +++++++++++++++++++++-- dist/react-chartjs-2.min.js | 2 +- example/src/components/bubble.js | 42 ++++++++++++++++++++++++++++++++ src/Chart.js | 14 ++++++++++- 4 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 example/src/components/bubble.js diff --git a/dist/react-chartjs-2.js b/dist/react-chartjs-2.js index a2278582c..ed26daa3b 100644 --- a/dist/react-chartjs-2.js +++ b/dist/react-chartjs-2.js @@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.Polar = exports.Radar = exports.HorizontalBar = exports.Bar = exports.Line = exports.Pie = exports.Doughnut = undefined; +exports.Polar = exports.Radar = exports.HorizontalBar = exports.Bar = exports.Line = exports.Pie = exports.Doughnut = exports.Bubble = undefined; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); @@ -46,7 +46,7 @@ var ChartComponent = _react2.default.createClass({ onElementsClick: _react.PropTypes.func, options: _react.PropTypes.object, redraw: _react.PropTypes.bool, - type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']), + type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea', 'bubble']), width: _react.PropTypes.number }, @@ -332,6 +332,32 @@ var Polar = exports.Polar = function (_React$Component7) { return Polar; }(_react2.default.Component); +var Bubble = exports.Bubble = function (_React$Component8) { + _inherits(Bubble, _React$Component8); + + function Bubble() { + _classCallCheck(this, Bubble); + + return _possibleConstructorReturn(this, (Bubble.__proto__ || Object.getPrototypeOf(Bubble)).apply(this, arguments)); + } + + _createClass(Bubble, [{ + key: 'render', + value: function render() { + var _this16 = this; + + return _react2.default.createElement(ChartComponent, _extends({}, this.props, { + ref: function ref(_ref8) { + return _this16.chart_instance = _ref8 && _ref8.chart_instance; + }, + type: 'bubble' + })); + } + }]); + + return Bubble; +}(_react2.default.Component); + }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) },{"./utils/deepEqual":2,"chart.js":undefined,"react-dom":undefined}],2:[function(require,module,exports){ 'use strict'; diff --git a/dist/react-chartjs-2.min.js b/dist/react-chartjs-2.min.js index 421643b2c..a30d0d1c8 100644 --- a/dist/react-chartjs-2.min.js +++ b/dist/react-chartjs-2.min.js @@ -1 +1 @@ -!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Chart=t()}}(function(){return function t(e,n,r){function o(a,u){if(!n[a]){if(!e[a]){var c="function"==typeof require&&require;if(!u&&c)return c(a,!0);if(i)return i(a,!0);var f=new Error("Cannot find module '"+a+"'");throw f.code="MODULE_NOT_FOUND",f}var s=n[a]={exports:{}};e[a][0].call(s.exports,function(t){var n=e[a][1][t];return o(n?n:t)},s,s.exports,t,e,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},shouldComponentUpdate:function(t,e){var n=["id","width","height","onElementsClick"],r=this._objectWithoutProperties(t,n),o=this._objectWithoutProperties(this.props,n);return!(0,_["default"])(r,o,{strict:!0})},componentWillUnmount:function(){this.chart_instance.destroy()},updateChart:function(){var t=this.props,e=t.data,n=t.options;this.chart_instance&&(n&&(this.chart_instance.options=d["default"].helpers.configMerge(this.chart_instance.options,n)),this.chart_instance.config.data=c({},this.chart_instance.config.data,e),this.chart_instance.update())},renderChart:function(){var t=this.props,e=t.data,n=t.options,r=(t.legend,t.type),o=l["default"].findDOMNode(this);this.chart_instance=new d["default"](o,{type:r,data:e,options:n})},handleOnClick:function(t){var e=this.chart_instance.getElementsAtEvent(t);if(e.length){var n=this.props.onElementsClick;n(e)}},render:function(){var t=this.props,e=t.height,n=t.width,r=t.onElementsClick;return s["default"].createElement("canvas",{height:e,width:n,onClick:"function"==typeof r?this.handleOnClick:null})}});n["default"]=b;n.Doughnut=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"doughnut"}))}}]),e}(s["default"].Component),n.Pie=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"pie"}))}}]),e}(s["default"].Component),n.Line=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"line"}))}}]),e}(s["default"].Component),n.Bar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bar"}))}}]),e}(s["default"].Component),n.HorizontalBar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"horizontalBar"}))}}]),e}(s["default"].Component),n.Radar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"radar"}))}}]),e}(s["default"].Component),n.Polar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"polarArea"}))}}]),e}(s["default"].Component)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./utils/deepEqual":2,"chart.js":void 0,"react-dom":void 0}],2:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},o=Object.prototype.hasOwnProperty,i=function(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e},a=function u(t,e){if(i(t,e))return!0;if("object"!==("undefined"==typeof t?"undefined":r(t))||null===t||"object"!==("undefined"==typeof e?"undefined":r(e))||null===e)return!1;for(var n=Object.keys(t),a=0;a=0||Object.prototype.hasOwnProperty.call(b,e)&&(d[e]=b[e]);return d},shouldComponentUpdate:function(b,c){var d=["id","width","height","onElementsClick"],e=this._objectWithoutProperties(b,d),f=this._objectWithoutProperties(this.props,d);return!(0,m.default)(e,f,{strict:!0})},componentWillUnmount:function(){this.chart_instance.destroy()},updateChart:function(){var b=this.props,c=b.data,d=b.options;this.chart_instance&&(d&&(this.chart_instance.options=k.default.helpers.configMerge(this.chart_instance.options,d)),this.chart_instance.config.data=e({},this.chart_instance.config.data,c),this.chart_instance.update())},renderChart:function(){var b=this.props,c=b.data,d=b.options,f=(b.legend,b.type),g=i.default.findDOMNode(this);this.chart_instance=new k.default(g,{type:f,data:c,options:d})},handleOnClick:function(b){var c=this.chart_instance.getElementsAtEvent(b);if(c.length){var d=this.props.onElementsClick;d(c)}},render:function(){var b=this.props,c=b.height,d=b.width,e=b.onElementsClick;return g.default.createElement("canvas",{height:c,width:d,onClick:"function"==typeof e?this.handleOnClick:null})}});c.default=r;c.Doughnut=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"doughnut"}))}}]),b}(g.default.Component),c.Pie=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"pie"}))}}]),b}(g.default.Component),c.Line=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"line"}))}}]),b}(g.default.Component),c.Bar=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"bar"}))}}]),b}(g.default.Component),c.HorizontalBar=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"horizontalBar"}))}}]),b}(g.default.Component),c.Radar=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"radar"}))}}]),b}(g.default.Component),c.Polar=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"polarArea"}))}}]),b}(g.default.Component),c.Bubble=function(a){function b(){return o(this,b),p(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return q(b,a),d(b,[{key:"render",value:function(){var b=this;return g.default.createElement(r,e({},this.props,{ref:function(c){return b.chart_instance=c&&c.chart_instance},type:"bubble"}))}}]),b}(g.default.Component)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./utils/deepEqual":2,"chart.js":void 0,"react-dom":void 0}],2:[function(a,b,c){"use strict";Object.defineProperty(c,"__esModule",{value:!0});var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol?"symbol":typeof a},e=Object.prototype.hasOwnProperty,f=function(b,c){return b===c?0!==b||1/b===1/c:b!==b&&c!==c},g=function a(b,c){if(f(b,c))return!0;if("object"!==("undefined"==typeof b?"undefined":d(b))||null===b||"object"!==("undefined"==typeof c?"undefined":d(c))||null===c)return!1;for(var g=Object.keys(b),h=0;h +

Bubble Example

+ + + ); + } +}); diff --git a/src/Chart.js b/src/Chart.js index 57cb9ad7c..fc04cc192 100644 --- a/src/Chart.js +++ b/src/Chart.js @@ -14,7 +14,7 @@ const ChartComponent = React.createClass({ onElementsClick: PropTypes.func, options: PropTypes.object, redraw: PropTypes.bool, - type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']), + type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea', 'bubble']), width: PropTypes.number, }, @@ -203,3 +203,15 @@ export class Polar extends React.Component { ); } } + +export class Bubble extends React.Component { + render() { + return ( + this.chart_instance = ref && ref.chart_instance} + type='bubble' + /> + ); + } +}