Merge pull request #158 from ekscentrysytet/master

Add legend support to charts

Author: jerairrest

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>
+    );
+  }
+})

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>
+    );
+  }
+})

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>
 		);
 	}

src/index.js

@@ -203,6 +203,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,

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);