From cc48b6e74315a1c30c2aa1d77facf986b45a1fe1 Mon Sep 17 00:00:00 2001
From: Nazar Ilkiv <ekscentrysytet@gmail.com>
Date: Wed, 5 Jul 2017 10:56:54 +0300
Subject: [PATCH] Add legend support to charts

---
 example/src/components/legend-handlers.js | 62 +++++++++++++++++++
 example/src/components/legend-options.js  | 74 +++++++++++++++++++++++
 example/src/example.js                    |  6 ++
 src/index.js                              |  1 +
 test/__tests__/Chart_spec.js              |  5 +-
 5 files changed, 146 insertions(+), 2 deletions(-)
 create mode 100644 example/src/components/legend-handlers.js
 create mode 100644 example/src/components/legend-options.js

diff --git a/example/src/components/legend-handlers.js b/example/src/components/legend-handlers.js
new file mode 100644
index 000000000..2ef957160
--- /dev/null
+++ 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>
+    );
+  }
+})
\ No newline at end of file
diff --git a/example/src/components/legend-options.js b/example/src/components/legend-options.js
new file mode 100644
index 000000000..acae3d8d3
--- /dev/null
+++ 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>
+    );
+  }
+})
\ No newline at end of file
diff --git a/example/src/example.js b/example/src/example.js
index 2aa076b75..00ae1faee 100644
--- a/example/src/example.js
+++ b/example/src/example.js
@@ -13,6 +13,8 @@ import BubbleExample from './components/bubble';
 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() {
@@ -42,6 +44,10 @@ class App extends React.Component {
 				<RandomizedDataLineExample />
 				<hr />
 				<CrazyDataLineExample />
+				<hr />
+				<LegendOptionsExample />
+				<hr />
+				<LegendHandlersExample />
 			</div>
 		);
 	}
diff --git a/src/index.js b/src/index.js
index ad7d68e42..369f079a9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -196,6 +196,7 @@ class ChartComponent extends React.Component {
     const {options, legend, type, redraw, plugins} = this.props;
     const node = ReactDOM.findDOMNode(this);
     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
index c205ec5e6..42fcf631d 100644
--- 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);