Skip to content

Commit 9017a01

Browse files
ashok1994ashok1994
authored
Merge pull request #28 from rohanoid5/feature/drill-down
Drill Down component
2 parents 5a14d1d + f5bd8ca commit 9017a01

File tree

5 files changed

+484
-4
lines changed

5 files changed

+484
-4
lines changed

‎example/ChartViewer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Charts from 'fusioncharts/fusioncharts.charts';
44
import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
55
import ReactFC from '../lib/ReactFC';
66

7-
Charts(FusionCharts);
7+
// Charts(FusionCharts);
88
OceanTheme(FusionCharts);
99

1010
const myDataSource = {

‎example/DrillDown.js‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import React from 'react';
2+
import FusionCharts from 'fusioncharts';
3+
import Charts from 'fusioncharts/fusioncharts.charts';
4+
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
5+
import ReactFC from '../lib/ReactFC';
6+
import PropTypes from 'prop-types';
7+
8+
Charts(FusionCharts);
9+
FusionTheme(FusionCharts);
10+
11+
class DrillDown extends React.Component {
12+
constructor(props) {
13+
super(props);
14+
15+
this.state = {
16+
showOverlaybtn: true,
17+
// Absolute position of Overlay Button
18+
positionH: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.placement && this.props.defaultOverlayBtnSettings.placement.includes('-')) ? this.props.defaultOverlayBtnSettings.placement.split('-')[1] : 'right',
19+
positionV: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.placement && this.props.defaultOverlayBtnSettings.placement.includes('-')) ? this.props.defaultOverlayBtnSettings.placement.split('-')[0] : 'top',
20+
selectedChild: 0,
21+
showDrillDown: false,
22+
// Parent Chart's Data Source
23+
dataSource: this.props.dataSource,
24+
// An array of indices which maps each
25+
// data plot of parent with its nested Chart Component.
26+
mappedIds: this.props.mappedIds,
27+
borderColor: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.borderColor) ? this.props.defaultOverlayBtnSettings.borderColor : '#000',
28+
backgroundColor: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.backgroundColor) ? this.props.defaultOverlayBtnSettings.backgroundColor : '#F6F6F6',
29+
color: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.color) ? this.props.defaultOverlayBtnSettings.color : '#000',
30+
fontSize: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.fontSize) ? this.props.defaultOverlayBtnSettings.fontSize : '14px',
31+
padding: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.padding) ? this.props.defaultOverlayBtnSettings.padding : '3px',
32+
fontWeight: (this.props.fontWeight && this.props.defaultOverlayBtnSettings.fontWeight) ? this.props.defaultOverlayBtnSettings.fontWeight : 'bold',
33+
margin: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.margin) ? this.props.defaultOverlayBtnSettings.margin : '10px',
34+
fontFamily: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.fontFamily) ? this.props.defaultOverlayBtnSettings.fontFamily : 'Verdana, sans',
35+
};
36+
}
37+
38+
// Listens to clicks on individual data plot clicks and
39+
// replaces the original chart with that corresponding
40+
// data plot's drilled down chart.
41+
plotClicked(e) {
42+
// Index of the data plot that is clicked.
43+
let index = e.data.index;
44+
// Number of children passed in parent chart
45+
let idArrLength = this.props.children.length;
46+
47+
// This code will execute if array of integers is passed
48+
if(typeof this.state.mappedIds[0] == 'number') {
49+
for (let i = 0; i < this.state.mappedIds.length; i++) {
50+
let plotPosition = this.state.mappedIds[i];
51+
if(!this.state.showDrillDown && index == i && plotPosition != null && plotPosition < idArrLength) {
52+
this.setState({
53+
showDrillDown: true,
54+
selectedChild: plotPosition
55+
});
56+
}
57+
}
58+
// This code will execute if array of objects is passed
59+
} else if(typeof this.state.mappedIds[0] == 'object') {
60+
for (let i = 0; i < this.state.mappedIds.length; i++) {
61+
let plotPosition = this.state.mappedIds[i].plotPosition;
62+
let childPosition = this.state.mappedIds[i].childPosition;
63+
if(index == plotPosition && !this.state.showDrillDown && childPosition < idArrLength) {
64+
this.setState({
65+
showDrillDown: true,
66+
selectedChild: childPosition
67+
});
68+
}
69+
}
70+
}
71+
}
72+
73+
// Checks whether our current Chart has a parent whose Overlay Button an be hidden.
74+
renderComplete() {
75+
if(this.props && this.props.toggleParentOverlayBtnVisibility) {
76+
this.props.toggleParentOverlayBtnVisibility(false);
77+
}
78+
}
79+
80+
// Toggles the visibilty of the Overlay Button
81+
toggleParentOverlayBtnVisibility(visibility) {
82+
this.setState({ showOverlaybtn: visibility });
83+
}
84+
85+
// Handles click of the Overlay Button
86+
onClickOverlayBtn() {
87+
this.setState({ showDrillDown: false });
88+
if(this.props && this.props.toggleParentOverlayBtnVisibility && this.state.showDrillDown) {
89+
this.props.toggleParentOverlayBtnVisibility(true);
90+
}
91+
}
92+
93+
// Configurable events for linked charts
94+
beforeLinkedItemOpen() {
95+
96+
}
97+
98+
linkedItemOpened() {
99+
100+
}
101+
102+
beforeLinkedItemClosed() {
103+
104+
}
105+
106+
linkedItemClosed() {
107+
108+
}
109+
110+
render() {
111+
// In-line style for default overlay button
112+
const btnStyle = {
113+
border: `1px solid ${this.state.borderColor}`,
114+
backgroundColor: `${this.state.backgroundColor}`,
115+
color: `${this.state.color}`,
116+
fontFamily: `${this.state.fontFamily}`,
117+
fontSize: `${this.state.fontSize}`,
118+
padding: `${this.state.padding}`,
119+
fontWeight: `${this.state.fontWeight}`,
120+
position: 'absolute',
121+
[this.state.positionH]: `${this.state.margin}`,
122+
[this.state.positionV]: `${this.state.margin}`,
123+
cursor: 'pointer'
124+
};
125+
126+
// In-line style for root element of DrillDown component
127+
const rootStyle = {
128+
position: 'relative',
129+
display: 'inline-block'
130+
}
131+
132+
if(this.state.showDrillDown) {
133+
return (
134+
<div style={ rootStyle }>
135+
{/* Displaying Correct Drilled Down Chart. */}
136+
{ React.cloneElement(
137+
this.props.children[this.state.selectedChild],
138+
{
139+
width: this.props.width,
140+
height: this.props.height,
141+
onRender: this.renderComplete.bind(this),
142+
toggleParentOverlayBtnVisibility: this.toggleParentOverlayBtnVisibility.bind(this)
143+
}
144+
)}
145+
{ this.state.showOverlaybtn ?
146+
<button style={
147+
this.props.customOverlayBtnStyle === undefined ?
148+
btnStyle : {cursor: 'pointer', ...this.props.customOverlayBtnStyle}
149+
}
150+
onClick={this.onClickOverlayBtn.bind(this)}>
151+
{
152+
this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.message ?
153+
this.props.defaultOverlayBtnSettings.message : 'Back'
154+
}
155+
</button> : null
156+
}
157+
</div>
158+
);
159+
} else {
160+
return (
161+
<ReactFC
162+
{...this.props}
163+
fcEvent-dataplotClick={this.plotClicked.bind(this)}
164+
/>
165+
);
166+
}
167+
}
168+
}
169+
170+
DrillDown.propTypes = {
171+
overlayBtn: PropTypes.objectOf(PropTypes.string),
172+
mappedIds: PropTypes.oneOfType([
173+
PropTypes.arrayOf(PropTypes.shape({
174+
plotPosition: PropTypes.number,
175+
childPosition: PropTypes.number
176+
})),
177+
PropTypes.arrayOf(PropTypes.number)
178+
]),
179+
dataSource: PropTypes.object,
180+
dataFormat: PropTypes.string,
181+
type: PropTypes.string,
182+
height: PropTypes.string,
183+
width: PropTypes.string,
184+
props: PropTypes.object
185+
}
186+
187+
export default DrillDown;

0 commit comments

Comments
 (0)