Skip to content

Commit 36c092d

Browse files
rohanoid5rohanoid5
committed
Added new features on drilldown.
1 parent f4bee1c commit 36c092d

File tree

3 files changed

+121
-48
lines changed

3 files changed

+121
-48
lines changed

‎example/DrillDown.js‎

Lines changed: 87 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import FusionCharts from 'fusioncharts';
33
import Charts from 'fusioncharts/fusioncharts.charts';
44
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
55
import ReactFC from '../lib/ReactFC';
6+
import PropTypes from 'prop-types';
67

78
Charts(FusionCharts);
89
FusionTheme(FusionCharts);
@@ -12,34 +13,58 @@ class DrillDown extends React.Component {
1213
super(props);
1314

1415
this.state = {
16+
// Absolute position of Overlay Button
17+
positionH: (this.props.overlayBtn && this.props.overlayBtn.placement && this.props.overlayBtn.placement.includes('-')) ? this.props.overlayBtn.placement.split('-')[1] : 'right',
18+
positionV: (this.props.overlayBtn && this.props.overlayBtn.placement && this.props.overlayBtn.placement.includes('-')) ? this.props.overlayBtn.placement.split('-')[0] : 'top',
1519
selectedChild: 0,
1620
showDrillDown: false,
17-
// Parent Chat's Data Source
21+
// Parent Chart's Data Source
1822
dataSource: this.props.dataSource,
1923
// An array of indices which maps each
2024
// data plot of parent with its nested Chart Component.
2125
mappedIds: this.props.mappedIds,
2226
borderColor: (this.props.overlayBtn && this.props.overlayBtn.borderColor) ? this.props.overlayBtn.borderColor : '#000',
2327
backgroundColor: (this.props.overlayBtn && this.props.overlayBtn.backgroundColor) ? this.props.overlayBtn.backgroundColor : '#F6F6F6',
2428
color: (this.props.overlayBtn && this.props.overlayBtn.color) ? this.props.overlayBtn.color : '#000',
25-
fontSize: (this.props.overlayBtn && this.props.overlayBtn.fontSize) ? this.props.overlayBtn.fontSize : '14px'
29+
fontSize: (this.props.overlayBtn && this.props.overlayBtn.fontSize) ? this.props.overlayBtn.fontSize : '14px',
30+
padding: (this.props.overlayBtn && this.props.overlayBtn.padding) ? this.props.overlayBtn.padding : '3px',
31+
fontWeight: (this.props.fontWeight && this.props.overlayBtn.fontWeight) ? this.props.overlayBtn.fontWeight : 'bold',
32+
margin: (this.props.overlayBtn && this.props.overlayBtn.margin) ? this.props.overlayBtn.margin : '10px'
2633
};
2734
}
2835

2936
// Listens to clicks on individual data plot clicks and
3037
// replaces the original chart with that corresponding
3138
// data plot's drilled down chart.
3239
plotClicked(e) {
33-
//Index of the data plot that is clicked.
40+
// Index of the data plot that is clicked.
3441
let index = e.data.index;
35-
//Index of Drilled Down Chart.
36-
let plotPosition = this.state.mappedIds[index];
42+
// Number of children passed in parent chart
43+
let idArrLength = this.props.children.length;
3744

38-
if (!this.state.showDrillDown && plotPosition >= 0) {
39-
this.setState({
40-
showDrillDown: true,
41-
selectedChild: plotPosition
42-
});
45+
// This code will execute if array of integers is passed
46+
if(typeof this.state.mappedIds[0] == 'number') {
47+
for (let i = 0; i < this.state.mappedIds.length; i++) {
48+
let plotPosition = this.state.mappedIds[i];
49+
if(!this.state.showDrillDown && index == i && plotPosition && plotPosition < idArrLength) {
50+
this.setState({
51+
showDrillDown: true,
52+
selectedChild: plotPosition
53+
});
54+
}
55+
}
56+
// This code will execute if array of objects is passed
57+
} else if(typeof this.state.mappedIds[0] == 'object') {
58+
for (let i = 0; i < this.state.mappedIds.length; i++) {
59+
let plotPosition = this.state.mappedIds[i].plotPosition;
60+
let childPosition = this.state.mappedIds[i].childPosition;
61+
if(index == plotPosition && !this.state.showDrillDown && childPosition < idArrLength) {
62+
this.setState({
63+
showDrillDown: true,
64+
selectedChild: childPosition
65+
});
66+
}
67+
}
4368
}
4469
}
4570

@@ -51,42 +76,68 @@ class DrillDown extends React.Component {
5176
color: `${this.state.color}`,
5277
fontFamily: 'Verdana, sans',
5378
fontSize: `${this.state.fontSize}`,
54-
padding: '3px',
55-
fontWeight: 'bold',
79+
padding: `${this.state.padding}`,
80+
fontWeight: `${this.state.fontWeight}`,
5681
position: 'absolute',
57-
top: '0px',
58-
left: `${this.props.width}px`,
82+
[this.state.positionH]: `${this.state.margin}`,
83+
// left: `${this.props.width - 50}px`,
84+
[this.state.positionV]: `${this.state.margin}`,
5985
cursor: 'pointer',
6086
};
6187

62-
return (
63-
<div style={{
64-
position: 'relative',
65-
}}>
66-
{ this.state.showDrillDown ?
67-
<div style={{ position: 'relative' }}>
68-
<span style={ btnStyle }
69-
onClick={() => this.setState({ showDrillDown: false })}>
88+
console.log(btnStyle);
89+
90+
// In-line style for root element of DrillDown component
91+
const rootStyle = {
92+
position: 'relative',
93+
display: 'inline-block'
94+
}
95+
96+
const props = this.props;
97+
98+
if(this.state.showDrillDown) {
99+
return (
100+
<div style={ rootStyle }>
101+
{/* Displaying Correct Drilled Down Chart. */}
102+
{ React.cloneElement(
103+
this.props.children[this.state.selectedChild],
104+
{ width: this.props.width, height: this.props.height }
105+
)}
106+
<span style={ btnStyle }
107+
onClick={() => this.setState({ showDrillDown: false })}>
70108
{
71109
this.props.overlayBtn && this.props.overlayBtn.message ?
72-
this.props.overlayBtn.message : 'Revert'
110+
this.props.overlayBtn.message : 'Back'
73111
}
74-
</span>
75-
{/* Displaying Correct Drilled Down Chart. */}
76-
{ this.props.children[this.state.selectedChild] }
77-
</div> :
78-
<ReactFC
79-
type={this.props.type}
80-
width={this.props.width}
81-
height={this.props.height}
82-
dataFormat={this.props.dataFormat}
83-
dataSource={this.props.dataSource}
112+
</span>
113+
</div>
114+
);
115+
} else {
116+
return (
117+
<ReactFC
118+
{...props}
84119
fcEvent-dataplotClick={this.plotClicked.bind(this)}
85120
/>
86-
}
87-
</div>
88-
);
121+
);
122+
}
89123
}
90124
}
91125

126+
DrillDown.propTypes = {
127+
overlayBtn: PropTypes.objectOf(PropTypes.string),
128+
mappedIds: PropTypes.oneOfType([
129+
PropTypes.arrayOf(PropTypes.shape({
130+
plotPosition: PropTypes.number,
131+
childPosition: PropTypes.number
132+
})),
133+
PropTypes.arrayOf(PropTypes.number)
134+
]),
135+
dataSource: PropTypes.object,
136+
dataFormat: PropTypes.string,
137+
type: PropTypes.string,
138+
height: PropTypes.string,
139+
width: PropTypes.string,
140+
props: PropTypes.object
141+
}
142+
92143
export default DrillDown;

‎example/Example.js‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,29 @@ const thirdDataSource = {
118118
}]
119119
};
120120

121+
const mappedIdsIntegers = [1, null, 2, null, 0];
122+
123+
const mappedIdsObjects = [
124+
{
125+
'plotPosition': 0,
126+
'childPosition': 1
127+
},
128+
{
129+
'plotPosition': 2,
130+
'childPosition': 0
131+
},
132+
{
133+
'plotPosition': 4,
134+
'childPosition': 1
135+
}
136+
]
137+
121138
class Example extends React.Component {
122139
constructor(props) {
123-
super(props)
140+
super(props);
124141

125142
this.state = {
126-
mappedIds: [2, 1, 0],
143+
mappedIds: mappedIdsObjects,
127144
dataSource: {
128145
chart: {
129146
caption: 'PARENT',
@@ -157,23 +174,26 @@ class Example extends React.Component {
157174

158175
render() {
159176
return (
160-
<div>
177+
<div style={{display: 'flex', flexDirection: 'row'}}>
161178
<DrillDown
162179
type="column2d"
163180
width='600'
164181
height='400'
165182
dataFormat="JSON"
166183
overlayBtn={{ //This object holds the style of the overlay back button.
167-
message: 'BACK',
184+
message: 'ESCAPE',
168185
fontColor: '#880000',
169186
bgColor: '#FFEEEE',
170187
borderColor: '#660000',
171-
fontSize: '12px'
188+
fontSize: '8px',
189+
placement: 'top-right',
190+
margin: '10px'
191+
// position
172192
}}
173193
dataSource={this.state.dataSource}
174194
mappedIds={this.state.mappedIds}>
175195
{/* Further Drilled Down */}
176-
{/* <DrillDown
196+
<DrillDown
177197
type="column2d"
178198
width='600'
179199
height='400'
@@ -182,23 +202,23 @@ class Example extends React.Component {
182202
mappedIds={[0, 2, 1]}>
183203
<ReactFC
184204
type="bar2d"
185-
width='600'
186-
height='400'
205+
width='800'
206+
height='300'
187207
dataFormat="JSON"
188208
dataSource={firstDataSource} />
189209
<ReactFC
190210
type="pie2d"
191-
width='600'
211+
width='200'
192212
height='400'
193213
dataFormat="JSON"
194214
dataSource={secondDataSource} />
195215
<ReactFC
196216
type="column2d"
197-
width='600'
198-
height='400'
217+
width='100'
218+
height='100'
199219
dataFormat="JSON"
200220
dataSource={thirdDataSource} />
201-
</DrillDown> */}
221+
</DrillDown>
202222
<ReactFC
203223
type="pie2d"
204224
width='600'
@@ -218,6 +238,7 @@ class Example extends React.Component {
218238
dataFormat="JSON"
219239
dataSource={thirdDataSource} />
220240
</DrillDown>
241+
<div style={{height: 300, backgroundColor:'red', width: 400}}></div>
221242
</div>
222243
)
223244
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
},
3131
"dependencies": {
3232
"fusioncharts": "^3.13.1-sr.1",
33+
"prop-types": "^15.6.2",
3334
"uuid": "^3.2.1"
3435
},
3536
"devDependencies": {

0 commit comments

Comments
 (0)