Skip to content

Commit 9d201fb

Browse files
gor181gor181
authored
Merge pull request #12 from renddiyeh/master
Added horizontalBar chart type
2 parents 8262192 + 25a4559 commit 9d201fb

File tree

7 files changed

+103
-9
lines changed

7 files changed

+103
-9
lines changed

‎README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,23 @@ import {Doughnut} from 'react-chartjs-2';
4040
* data: PropTypes.object.isRequired,
4141
* height: PropTypes.number,
4242
* legend: PropTypes.object,
43+
* onElementsClick: PropTypes.func,
4344
* options: PropTypes.object,
4445
* redraw: PropTypes.bool,
4546
* width: PropTypes.number
4647

48+
### Events
49+
50+
#### onElementsClick (function)
51+
52+
A function to be called when mouse clicked on chart elememts, will return all element at that point as an array. [Check](https://github.com/chartjs/Chart.js/blob/master/docs/09-Advanced.md#getelementsatevente)
53+
54+
```
55+
{
56+
onElementsClick: (elems) => {}
57+
// `elems` is an array of chartElements
58+
}
59+
```
4760

4861
## Development (`src`, `lib` and the build process)
4962

‎dist/react-chartjs-2.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ exports.Doughnut = Doughnut;
1212
exports.Pie = Pie;
1313
exports.Line = Line;
1414
exports.Bar = Bar;
15+
exports.HorizontalBar = HorizontalBar;
1516
exports.Radar = Radar;
1617
exports.Polar = Polar;
1718

@@ -41,9 +42,10 @@ var ChartComponent = _react2['default'].createClass({
4142
data: _react.PropTypes.object.isRequired,
4243
height: _react.PropTypes.number,
4344
legend: _react.PropTypes.object,
45+
onElementsClick: _react.PropTypes.func,
4446
options: _react.PropTypes.object,
4547
redraw: _react.PropTypes.bool,
46-
type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'radar', 'polarArea']),
48+
type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']),
4749
width: _react.PropTypes.number
4850
},
4951

@@ -133,14 +135,25 @@ var ChartComponent = _react2['default'].createClass({
133135
});
134136
},
135137

138+
handleOnClick: function handleOnClick(evt) {
139+
var elems = this.chart_instance.getElementsAtEvent(evt);
140+
if (elems.length) {
141+
var onElementsClick = this.props.onElementsClick;
142+
143+
onElementsClick(elems);
144+
}
145+
},
146+
136147
render: function render() {
137148
var _props3 = this.props;
138149
var height = _props3.height;
139150
var width = _props3.width;
151+
var onElementsClick = _props3.onElementsClick;
140152

141153
return _react2['default'].createElement('canvas', {
142154
height: height,
143-
width: width
155+
width: width,
156+
onClick: typeof onElementsClick === 'function' ? this.handleOnClick : null
144157
});
145158
}
146159
});
@@ -163,6 +176,10 @@ function Bar(props) {
163176
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'bar' }));
164177
}
165178

179+
function HorizontalBar(props) {
180+
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'horizontalBar' }));
181+
}
182+
166183
function Radar(props) {
167184
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'radar' }));
168185
}

‎dist/react-chartjs-2.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/components/horizontalBar.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import {HorizontalBar} from 'react-chartjs-2';
3+
4+
const data = {
5+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
6+
datasets: [
7+
{
8+
label: 'My First dataset',
9+
backgroundColor: 'rgba(255,99,132,0.2)',
10+
borderColor: 'rgba(255,99,132,1)',
11+
borderWidth: 1,
12+
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
13+
hoverBorderColor: 'rgba(255,99,132,1)',
14+
data: [65, 59, 80, 81, 56, 55, 40]
15+
}
16+
]
17+
};
18+
19+
export default React.createClass({
20+
displayName: 'BarExample',
21+
22+
render() {
23+
return (
24+
<div>
25+
<h2>Horizontal Bar Example</h2>
26+
<HorizontalBar data={data} />
27+
</div>
28+
);
29+
}
30+
});

‎example/src/example.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import DynamicDoughnutExample from './components/dynamic-doughnut';
66
import PieExample from './components/pie';
77
import LineExample from './components/line';
88
import BarExample from './components/bar';
9+
import HorizontalBarExample from './components/horizontalBar';
910
import RadarExample from './components/radar';
1011
import PolarExample from './components/polar';
1112
import MixedDataExample from './components/mix';
@@ -25,6 +26,8 @@ class App extends React.Component {
2526
<hr />
2627
<BarExample />
2728
<hr />
29+
<HorizontalBarExample />
30+
<hr />
2831
<RadarExample />
2932
<hr />
3033
<PolarExample />

‎lib/Chart.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ exports.Doughnut = Doughnut;
1010
exports.Pie = Pie;
1111
exports.Line = Line;
1212
exports.Bar = Bar;
13+
exports.HorizontalBar = HorizontalBar;
1314
exports.Radar = Radar;
1415
exports.Polar = Polar;
1516

@@ -39,9 +40,10 @@ var ChartComponent = _react2['default'].createClass({
3940
data: _react.PropTypes.object.isRequired,
4041
height: _react.PropTypes.number,
4142
legend: _react.PropTypes.object,
43+
onElementsClick: _react.PropTypes.func,
4244
options: _react.PropTypes.object,
4345
redraw: _react.PropTypes.bool,
44-
type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'radar', 'polarArea']),
46+
type: _react.PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']),
4547
width: _react.PropTypes.number
4648
},
4749

@@ -131,14 +133,25 @@ var ChartComponent = _react2['default'].createClass({
131133
});
132134
},
133135

136+
handleOnClick: function handleOnClick(evt) {
137+
var elems = this.chart_instance.getElementsAtEvent(evt);
138+
if (elems.length) {
139+
var onElementsClick = this.props.onElementsClick;
140+
141+
onElementsClick(elems);
142+
}
143+
},
144+
134145
render: function render() {
135146
var _props3 = this.props;
136147
var height = _props3.height;
137148
var width = _props3.width;
149+
var onElementsClick = _props3.onElementsClick;
138150

139151
return _react2['default'].createElement('canvas', {
140152
height: height,
141-
width: width
153+
width: width,
154+
onClick: typeof onElementsClick === 'function' ? this.handleOnClick : null
142155
});
143156
}
144157
});
@@ -161,6 +174,10 @@ function Bar(props) {
161174
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'bar' }));
162175
}
163176

177+
function HorizontalBar(props) {
178+
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'horizontalBar' }));
179+
}
180+
164181
function Radar(props) {
165182
return _react2['default'].createElement(ChartComponent, _extends({}, props, { type: 'radar' }));
166183
}

‎src/Chart.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ const ChartComponent = React.createClass({
1111
data: PropTypes.object.isRequired,
1212
height: PropTypes.number,
1313
legend: PropTypes.object,
14+
onElementsClick: PropTypes.func,
1415
options: PropTypes.object,
1516
redraw: PropTypes.bool,
16-
type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'radar', 'polarArea']),
17-
width: PropTypes.number
17+
type: PropTypes.oneOf(['doughnut', 'pie', 'line', 'bar', 'horizontalBar', 'radar', 'polarArea']),
18+
width: PropTypes.number,
1819
},
1920

2021
getDefaultProps() {
@@ -26,7 +27,7 @@ const ChartComponent = React.createClass({
2627
type: 'doughnut',
2728
height: 200,
2829
width: 200,
29-
redraw: false
30+
redraw: false,
3031
};
3132
},
3233

@@ -94,13 +95,22 @@ const ChartComponent = React.createClass({
9495
});
9596
},
9697

98+
handleOnClick(evt) {
99+
const elems = this.chart_instance.getElementsAtEvent(evt);
100+
if (elems.length) {
101+
const {onElementsClick} = this.props;
102+
onElementsClick(elems);
103+
}
104+
},
105+
97106
render() {
98-
const {height, width} = this.props;
107+
const {height, width, onElementsClick} = this.props;
99108

100109
return (
101110
<canvas
102111
height={height}
103112
width={width}
113+
onClick={typeof onElementsClick === 'function' ? this.handleOnClick : null}
104114
/>
105115
);
106116
}
@@ -124,6 +134,10 @@ export function Bar (props) {
124134
return <ChartComponent {...props} type='bar' />;
125135
}
126136

137+
export function HorizontalBar (props) {
138+
return <ChartComponent {...props} type='horizontalBar' />;
139+
}
140+
127141
export function Radar (props) {
128142
return <ChartComponent {...props} type='radar' />;
129143
}

0 commit comments

Comments
 (0)