Merge pull request #104 from Driftrock/data-argument-as-func

Add option to pass data as function that receives canvas node as argument

Author: jerairrest

README.md

@@ -48,7 +48,7 @@ import {Doughnut} from 'react-chartjs-2';
 
 ### Properties
 
-* data: PropTypes.object.isRequired,
+* data: (PropTypes.object | PropTypes.func).isRequired,
 * width: PropTypes.number,
 * height: PropTypes.number,
 * legend: PropTypes.object,
@@ -87,6 +87,31 @@ render() {
 }
 ```
 
+### Getting context for data generation
+Canvas node and hence context, that can be used to create CanvasGradient background,
+is passed as argument to data if given as function:
+
+This approach is useful when you want to keep your components pure.
+
+```js
+render() {
+	const data = (canvas) => {
+		const ctx = canvas.getContext("2d")
+		const gradient = ctx.createLinearGradient(0,0,100,0);
+		...
+		return {
+			...
+			backgroundColor: gradient
+			...
+		}
+	}
+
+	return (
+		<Line data={data} />
+	)
+}
+```
+
 ### Chart.js Defaults
 Chart.js defaults can be set by importing the `defaults` object:
 

dist/react-chartjs-2.js

@@ -1973,13 +1973,22 @@ var ChartComponent = function (_React$Component) {
         return true;
       }
 
-      return !(0, _lodash2.default)(this.shadowDataProp, nextProps.data);
+      var nextData = this.transformDataProp();
+      return !(0, _lodash2.default)(this.shadowDataProp, nextData);
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       this.chart_instance.destroy();
     }
+  }, {
+    key: 'transformDataProp',
+    value: function transformDataProp() {
+      var data = this.props.data;
+
+      var node = _reactDom2.default.findDOMNode(this);
+      return typeof data == "function" ? data(node) : data;
+    }
 
     // Chart.js directly mutates the data.dataset objects by adding _meta proprerty
     // this makes impossible to compare the current and next data changes
@@ -1989,28 +1998,27 @@ var ChartComponent = function (_React$Component) {
   }, {
     key: 'memoizeDataProps',
     value: function memoizeDataProps() {
-      var data = this.props.data;
-
-
-      if (!data) {
+      if (!this.props.data) {
         return;
       }
 
+      var data = this.transformDataProp();
+
       this.shadowDataProp = _extends({}, data, {
         datasets: data.datasets && data.datasets.map(function (set) {
           return _extends({}, set);
         })
       });
+
+      return data;
     }
   }, {
     key: 'updateChart',
     value: function updateChart() {
-      var _props2 = this.props,
-          data = _props2.data,
-          options = _props2.options;
+      var options = this.props.options;
 
 
-      this.memoizeDataProps();
+      var data = this.memoizeDataProps();
 
       if (!this.chart_instance) return;
 
@@ -2023,6 +2031,11 @@ var ChartComponent = function (_React$Component) {
       var currentDatasets = this.chart_instance.config.data && this.chart_instance.config.data.datasets || [];
       var nextDatasets = data.datasets || [];
 
+      // Prevent charting of legend items that no longer exist
+      while (currentDatasets.length > nextDatasets.length) {
+        currentDatasets.pop();
+      }
+
       nextDatasets.forEach(function (dataset, sid) {
         if (currentDatasets[sid] && currentDatasets[sid].data) {
           currentDatasets[sid].data.splice(nextDatasets[sid].data.length);
@@ -2052,16 +2065,14 @@ var ChartComponent = function (_React$Component) {
   }, {
     key: 'renderChart',
     value: function renderChart() {
-      var _props3 = this.props,
-          data = _props3.data,
-          options = _props3.options,
-          legend = _props3.legend,
-          type = _props3.type,
-          redraw = _props3.redraw;
+      var _props2 = this.props,
+          options = _props2.options,
+          legend = _props2.legend,
+          type = _props2.type,
+          redraw = _props2.redraw;
 
       var node = _reactDom2.default.findDOMNode(this);
-
-      this.memoizeDataProps();
+      var data = this.memoizeDataProps();
 
       this.chart_instance = new _chart2.default(node, {
         type: type,
@@ -2072,10 +2083,10 @@ var ChartComponent = function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _props4 = this.props,
-          height = _props4.height,
-          width = _props4.width,
-          onElementsClick = _props4.onElementsClick;
+      var _props3 = this.props,
+          height = _props3.height,
+          width = _props3.width,
+          onElementsClick = _props3.onElementsClick;
 
 
       return _react2.default.createElement('canvas', {
@@ -2090,7 +2101,7 @@ var ChartComponent = function (_React$Component) {
 }(_react2.default.Component);
 
 ChartComponent.propTypes = {
-  data: _react.PropTypes.object.isRequired,
+  data: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.func]).isRequired,
   getDatasetAtEvent: _react.PropTypes.func,
   getElementAtEvent: _react.PropTypes.func,
   getElementsAtEvent: _react.PropTypes.func,

dist/react-chartjs-2.min.js

@@ -119,13 +119,22 @@ var ChartComponent = function (_React$Component) {
         return true;
       }
 
-      return !(0, _lodash2.default)(this.shadowDataProp, nextProps.data);
+      var nextData = this.transformDataProp();
+      return !(0, _lodash2.default)(this.shadowDataProp, nextData);
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       this.chart_instance.destroy();
     }
+  }, {
+    key: 'transformDataProp',
+    value: function transformDataProp() {
+      var data = this.props.data;
+
+      var node = _reactDom2.default.findDOMNode(this);
+      return typeof data == "function" ? data(node) : data;
+    }
 
     // Chart.js directly mutates the data.dataset objects by adding _meta proprerty
     // this makes impossible to compare the current and next data changes
@@ -135,28 +144,27 @@ var ChartComponent = function (_React$Component) {
   }, {
     key: 'memoizeDataProps',
     value: function memoizeDataProps() {
-      var data = this.props.data;
-
-
-      if (!data) {
+      if (!this.props.data) {
         return;
       }
 
+      var data = this.transformDataProp();
+
       this.shadowDataProp = _extends({}, data, {
         datasets: data.datasets && data.datasets.map(function (set) {
           return _extends({}, set);
         })
       });
+
+      return data;
     }
   }, {
     key: 'updateChart',
     value: function updateChart() {
-      var _props2 = this.props,
-          data = _props2.data,
-          options = _props2.options;
+      var options = this.props.options;
 
 
-      this.memoizeDataProps();
+      var data = this.memoizeDataProps();
 
       if (!this.chart_instance) return;
 
@@ -169,6 +177,11 @@ var ChartComponent = function (_React$Component) {
       var currentDatasets = this.chart_instance.config.data && this.chart_instance.config.data.datasets || [];
       var nextDatasets = data.datasets || [];
 
+      // Prevent charting of legend items that no longer exist
+      while (currentDatasets.length > nextDatasets.length) {
+        currentDatasets.pop();
+      }
+
       nextDatasets.forEach(function (dataset, sid) {
         if (currentDatasets[sid] && currentDatasets[sid].data) {
           currentDatasets[sid].data.splice(nextDatasets[sid].data.length);
@@ -198,16 +211,14 @@ var ChartComponent = function (_React$Component) {
   }, {
     key: 'renderChart',
     value: function renderChart() {
-      var _props3 = this.props,
-          data = _props3.data,
-          options = _props3.options,
-          legend = _props3.legend,
-          type = _props3.type,
-          redraw = _props3.redraw;
+      var _props2 = this.props,
+          options = _props2.options,
+          legend = _props2.legend,
+          type = _props2.type,
+          redraw = _props2.redraw;
 
       var node = _reactDom2.default.findDOMNode(this);
-
-      this.memoizeDataProps();
+      var data = this.memoizeDataProps();
 
       this.chart_instance = new _chart2.default(node, {
         type: type,
@@ -218,10 +229,10 @@ var ChartComponent = function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _props4 = this.props,
-          height = _props4.height,
-          width = _props4.width,
-          onElementsClick = _props4.onElementsClick;
+      var _props3 = this.props,
+          height = _props3.height,
+          width = _props3.width,
+          onElementsClick = _props3.onElementsClick;
 
 
       return _react2.default.createElement('canvas', {
@@ -236,7 +247,7 @@ var ChartComponent = function (_React$Component) {
 }(_react2.default.Component);
 
 ChartComponent.propTypes = {
-  data: _react.PropTypes.object.isRequired,
+  data: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.func]).isRequired,
   getDatasetAtEvent: _react.PropTypes.func,
   getElementAtEvent: _react.PropTypes.func,
   getElementsAtEvent: _react.PropTypes.func,

lib/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-chartjs-2",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "react-chartjs-2",
   "main": "lib/index.js",
   "author": "Goran Udosic",

package.json

@@ -5,7 +5,10 @@ import isEqual from 'lodash.isequal';
 
 class ChartComponent extends React.Component {
   static propTypes = {
-    data: PropTypes.object.isRequired,
+    data: PropTypes.oneOfType([
+    	PropTypes.object,
+    	PropTypes.func
+    ]).isRequired,
     getDatasetAtEvent: PropTypes.func,
     getElementAtEvent: PropTypes.func,
     getElementsAtEvent: PropTypes.func,
@@ -78,24 +81,35 @@ class ChartComponent extends React.Component {
       return true;
     }
 
-    return !isEqual(this.shadowDataProp, nextProps.data);
+    const nextData = this.transformDataProp(nextProps)
+    return !isEqual(this.shadowDataProp, nextData);
   }
 
   componentWillUnmount() {
     this.chart_instance.destroy();
   }
 
+  transformDataProp(props) {
+    const { data } = props;
+    if (typeof(data) == "function") {
+      const node = ReactDOM.findDOMNode(this);
+      return data(node)
+    } else {
+      return data;
+    }
+  }
+
   // Chart.js directly mutates the data.dataset objects by adding _meta proprerty
   // this makes impossible to compare the current and next data changes
   // therefore we memoize the data prop while sending a fake to Chart.js for mutation.
   // see https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L615-L617
   memoizeDataProps() {
-    const { data } = this.props;
-
-    if (!data) {
+    if (!this.props.data) {
       return;
     }
 
+    const data = this.transformDataProp(this.props);
+
     this.shadowDataProp = {
       ...data,
       datasets: data.datasets && data.datasets.map(set => {
@@ -104,12 +118,14 @@ class ChartComponent extends React.Component {
         }
       })
     };
+
+    return data;
   }
 
   updateChart() {
-    const {data, options} = this.props;
+    const {options} = this.props;
 
-    this.memoizeDataProps();
+    const data = this.memoizeDataProps(this.props);
 
     if (!this.chart_instance) return;
 
@@ -121,7 +137,7 @@ class ChartComponent extends React.Component {
     // seamless transitions
     let currentDatasets = (this.chart_instance.config.data && this.chart_instance.config.data.datasets) || [];
     const nextDatasets = data.datasets || [];
-		
+
 		// Prevent charting of legend items that no longer exist
     while (currentDatasets.length > nextDatasets.length) {
       currentDatasets.pop();
@@ -158,10 +174,9 @@ class ChartComponent extends React.Component {
   }
 
   renderChart() {
-    const {data, options, legend, type, redraw} = this.props;
+    const {options, legend, type, redraw} = this.props;
     const node = ReactDOM.findDOMNode(this);
-
-    this.memoizeDataProps();
+    const data = this.memoizeDataProps();
 
     this.chart_instance = new Chart(node, {
       type,

src/index.js

@@ -209,4 +209,17 @@ describe('<Chart />', () => {
 
     expect(onElementsClick.called).to.equal(true);
   });
+
+  describe('props.data function', () => {
+    it('calls data func with canvas node', () => {
+      const resultData = { test: 1 }
+      const dataFn = sinon.spy((canvas) => resultData);
+      const wrapper = mountComponent({ data: dataFn });
+
+      const canvas = wrapper.find('canvas').at(0).node;
+
+      expect(dataFn.callCount).to.equal(1);
+      expect(dataFn.calledWith(canvas)).to.equal(true);
+    });
+  })
 });