Rc 2.5.0 (#163)

* Add legend support to charts * added polyfill for find
reactchartjs · Jul 15, 2017 · 6e32667 · 6e32667
1 parent 3a3323f
commit 6e32667
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 6 deletions.
diff --git a/example/src/components/legend-handlers.js b/example/src/components/legend-handlers.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {Pie} from 'react-chartjs-2';
+
+const data = {
+  labels: [
+    'Red',
+    'Green',
+    'Yellow'
+  ],
+  datasets: [{
+    data: [300, 50, 100],
+    backgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ],
+    hoverBackgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ]
+  }]
+};
+
+const legendOpts = {
+  onClick: (e, item) => alert(`Item with text ${item.text} and index ${item.index} clicked`),
+  onHover: (e, item) => alert(`Item with text ${item.text} and index ${item.index} hovered`),
+};
+
+export default React.createClass({
+  displayName: 'LegendExample',
+
+  getInitialState() {
+    return {
+      legend: legendOpts
+    }
+  },
+
+  applyLegendSettings() {
+    const { value } = this.legendOptsInput;
+
+    try {
+      const opts = JSON.parse(value);
+      this.setState({
+        legend: opts
+      });
+    } catch(e) {
+      alert(e.message);
+      throw Error(e);
+    }
+  },
+
+  render() {
+    return (
+      <div>
+        <h2>Legend Handlers Example</h2>
+        <p>Hover over label and click</p>
+        <Pie data={data} legend={this.state.legend} />
+      </div>
+    );
+  }
+})
diff --git a/example/src/components/legend-options.js b/example/src/components/legend-options.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import {Pie} from 'react-chartjs-2';
+
+const data = {
+  labels: [
+    'Red',
+    'Green',
+    'Yellow'
+  ],
+  datasets: [{
+    data: [300, 50, 100],
+    backgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ],
+    hoverBackgroundColor: [
+    '#FF6384',
+    '#36A2EB',
+    '#FFCE56'
+    ]
+  }]
+};
+
+const legendOpts = {
+  display: true,
+  position: 'top',
+  fullWidth: true,
+  reverse: false,
+  labels: {
+    fontColor: 'rgb(255, 99, 132)'
+  }
+};
+
+export default React.createClass({
+  displayName: 'LegendExample',
+
+  getInitialState() {
+    return {
+      legend: legendOpts
+    }
+  },
+
+  applyLegendSettings() {
+    const { value } = this.legendOptsInput;
+
+    try {
+      const opts = JSON.parse(value);
+      this.setState({
+        legend: opts
+      });
+    } catch(e) {
+      alert(e.message);
+      throw Error(e);
+    }
+  },
+
+  render() {
+    return (
+      <div>
+        <h2>Legend Options Example</h2>
+        <textarea
+          cols="40"
+          rows="15"
+          ref={input => { this.legendOptsInput = input; }}
+          defaultValue={JSON.stringify(this.state.legend, null, 2)}></textarea>
+        <div>
+          <button onClick={this.applyLegendSettings}>Apply legend settings</button>
+        </div>
+        <Pie data={data} legend={this.state.legend} redraw />
+      </div>
+    );
+  }
+})
diff --git a/example/src/example.js b/example/src/example.js
@@ -14,6 +14,8 @@ import ScatterExample from './components/scatter';
 import MixedDataExample from './components/mix';
 import RandomizedDataLineExample from './components/randomizedLine';
 import CrazyDataLineExample from './components/crazyLine';
+import LegendOptionsExample from './components/legend-options'
+import LegendHandlersExample from './components/legend-handlers'
 
 class App extends React.Component {
 	render() {
@@ -45,6 +47,10 @@ class App extends React.Component {
 				<RandomizedDataLineExample />
 				<hr />
 				<CrazyDataLineExample />
+				<hr />
+				<LegendOptionsExample />
+				<hr />
+				<LegendHandlersExample />
 			</div>
 		);
 	}

diff --git a/example/src/index.html b/example/src/index.html
@@ -6,14 +6,14 @@
 <body>
 	<div class="container">
 		<h1>react-chartjs-2</h1>
-		<h2><a href="https://github.com/gor181/react-chartjs-2">View project on GitHub</a></h2>
+		<h2><a href="https://github.com/jerairrest/react-chartjs-2">View project on GitHub</a></h2>
 		<!-- the example app is rendered into this div -->
 		<div id="app"></div>
 		<div class="hint">
 			<!-- put any hints about your component example here -->
 		</div>
 		<div class="footer">
-			Copyright &copy; 2016 Goran Udosic.
+			Copyright &copy; 2017 Jeremy Ayerst.
 		</div>
 	</div>
 	<script src="common.js"></script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chartjs-2",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "react-chartjs-2",
   "main": "lib/index.js",
   "author": "Goran Udosic",

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import Chart from 'chart.js';
 import isEqual from 'lodash.isequal';
 
+
+//Taken from MDN
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    }
+  });
+}
+
+
 class ChartComponent extends React.Component {
   static getLabelAsKey = d => d.label;
 
@@ -22,6 +68,7 @@ class ChartComponent extends React.Component {
     plugins: PropTypes.arrayOf(PropTypes.object),
     redraw: PropTypes.bool,
     type: function(props, propName, componentName) {
+
       if(!Object.keys(Chart.controllers).find((chartType) => chartType === props[propName])){
         return new Error(
           'Invalid chart type `' + props[propName] + '` supplied to' +
@@ -203,6 +250,7 @@ class ChartComponent extends React.Component {
     const {options, legend, type, redraw, plugins} = this.props;
     const node = this.element;
     const data = this.memoizeDataProps();
+    options.legend = legend;
 
     this.chart_instance = new Chart(node, {
       type,

diff --git a/test/__tests__/Chart_spec.js b/test/__tests__/Chart_spec.js
@@ -122,14 +122,15 @@ describe('<Chart />', () => {
   it('renders on props.options change', () => {
     const spy = sinon.spy(Chart.prototype, 'render');
     const wrapper = mountComponent({ options: {} });
+    const defaultLegendOpts = wrapper.prop('legend');  
 
     expect(spy.callCount).to.equal(1);
 
-    wrapper.setProps({ options: {} });
+    wrapper.setProps({ options: { legend: defaultLegendOpts } });
 
     expect(spy.callCount).to.equal(1);
 
-    wrapper.setProps({ options: { a: 1 } });
+    wrapper.setProps({ options: { legend: defaultLegendOpts, a: 1 } });
 
     expect(spy.callCount).to.equal(2);