Skip to content

Commit 9312cbe

Browse files
rohanoid5rohanoid5
committed
Fixed overlay button customization
1 parent 2294016 commit 9312cbe

File tree

2 files changed

+69
-30
lines changed

2 files changed

+69
-30
lines changed

‎example/DrillDown.js‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,27 @@ class DrillDown extends React.Component {
1313
super(props);
1414

1515
this.state = {
16+
showDefaultOverlayBtn: (this.props.showDefaultOverlayBtn === null) ? true : this.props.showDefaultOverlayBtn,
1617
showOverlaybtn: true,
1718
overlayZindex: 1,
1819
// Absolute position of Overlay Button
19-
positionH: (this.props.overlayBtn && this.props.overlayBtn.placement && this.props.overlayBtn.placement.includes('-')) ? this.props.overlayBtn.placement.split('-')[1] : 'right',
20-
positionV: (this.props.overlayBtn && this.props.overlayBtn.placement && this.props.overlayBtn.placement.includes('-')) ? this.props.overlayBtn.placement.split('-')[0] : 'top',
20+
positionH: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.placement && this.props.defaultOverlayBtnSettings.placement.includes('-')) ? this.props.defaultOverlayBtnSettings.placement.split('-')[1] : 'right',
21+
positionV: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.placement && this.props.defaultOverlayBtnSettings.placement.includes('-')) ? this.props.defaultOverlayBtnSettings.placement.split('-')[0] : 'top',
2122
selectedChild: 0,
2223
showDrillDown: false,
2324
// Parent Chart's Data Source
2425
dataSource: this.props.dataSource,
2526
// An array of indices which maps each
2627
// data plot of parent with its nested Chart Component.
2728
mappedIds: this.props.mappedIds,
28-
borderColor: (this.props.overlayBtn && this.props.overlayBtn.borderColor) ? this.props.overlayBtn.borderColor : '#000',
29-
backgroundColor: (this.props.overlayBtn && this.props.overlayBtn.backgroundColor) ? this.props.overlayBtn.backgroundColor : '#F6F6F6',
30-
color: (this.props.overlayBtn && this.props.overlayBtn.color) ? this.props.overlayBtn.color : '#000',
31-
fontSize: (this.props.overlayBtn && this.props.overlayBtn.fontSize) ? this.props.overlayBtn.fontSize : '14px',
32-
padding: (this.props.overlayBtn && this.props.overlayBtn.padding) ? this.props.overlayBtn.padding : '3px',
33-
fontWeight: (this.props.fontWeight && this.props.overlayBtn.fontWeight) ? this.props.overlayBtn.fontWeight : 'bold',
34-
margin: (this.props.overlayBtn && this.props.overlayBtn.margin) ? this.props.overlayBtn.margin : '10px'
29+
borderColor: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.borderColor) ? this.props.defaultOverlayBtnSettings.borderColor : '#000',
30+
backgroundColor: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.backgroundColor) ? this.props.defaultOverlayBtnSettings.backgroundColor : '#F6F6F6',
31+
color: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.color) ? this.props.defaultOverlayBtnSettings.color : '#000',
32+
fontSize: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.fontSize) ? this.props.defaultOverlayBtnSettings.fontSize : '14px',
33+
padding: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.padding) ? this.props.defaultOverlayBtnSettings.padding : '3px',
34+
fontWeight: (this.props.fontWeight && this.props.defaultOverlayBtnSettings.fontWeight) ? this.props.defaultOverlayBtnSettings.fontWeight : 'bold',
35+
margin: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.margin) ? this.props.defaultOverlayBtnSettings.margin : '10px',
36+
fontFamily: (this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.fontFamily) ? this.props.defaultOverlayBtnSettings.fontFamily : 'Verdana, sans',
3537
};
3638
}
3739

@@ -70,30 +72,50 @@ class DrillDown extends React.Component {
7072
}
7173
}
7274

75+
// Checks whether our current Chart has a parent whose Overlay Button an be hidden.
7376
renderComplete() {
7477
if(this.props && this.props.toggleParentOverlayBtnVisibility) {
7578
this.props.toggleParentOverlayBtnVisibility(false);
7679
}
7780
}
7881

82+
// Toggles the visibilty of the Overlay Button
7983
toggleParentOverlayBtnVisibility(visibility) {
80-
this.setState({showOverlaybtn: visibility});
84+
this.setState({ showOverlaybtn: visibility });
8185
}
8286

87+
// Handles click of the Overlay Button
8388
onClickOverlayBtn() {
8489
this.setState({ showDrillDown: false });
8590
if(this.props && this.props.toggleParentOverlayBtnVisibility && this.state.showDrillDown) {
8691
this.props.toggleParentOverlayBtnVisibility(true);
8792
}
8893
}
8994

95+
// Configurable events for linked charts
96+
beforeLinkedItemOpen() {
97+
98+
}
99+
100+
linkedItemOpened() {
101+
102+
}
103+
104+
beforeLinkedItemClosed() {
105+
106+
}
107+
108+
linkedItemClosed() {
109+
110+
}
111+
90112
render() {
91-
// In-line style for overlay button
113+
// In-line style for default overlay button
92114
const btnStyle = {
93115
border: `1px solid ${this.state.borderColor}`,
94116
backgroundColor: `${this.state.backgroundColor}`,
95117
color: `${this.state.color}`,
96-
fontFamily: 'Verdana, sans',
118+
fontFamily: `${this.state.fontFamily}`,
97119
fontSize: `${this.state.fontSize}`,
98120
padding: `${this.state.padding}`,
99121
fontWeight: `${this.state.fontWeight}`,
@@ -122,18 +144,23 @@ class DrillDown extends React.Component {
122144
width: this.props.width,
123145
height: this.props.height,
124146
onRender: this.renderComplete.bind(this),
125-
// overlayBtn: this.props.overlayBtn,
126147
toggleParentOverlayBtnVisibility: this.toggleParentOverlayBtnVisibility.bind(this)
127148
}
128149
)}
129150
{ this.state.showOverlaybtn ?
130-
<span style={ btnStyle }
151+
<button style={
152+
this.state.showDefaultOverlayBtn ?
153+
btnStyle : (
154+
this.props.customOverlayBtnStyle ?
155+
{cursor: 'pointer', ...this.props.customOverlayBtnStyle} : btnStyle
156+
)
157+
}
131158
onClick={this.onClickOverlayBtn.bind(this)}>
132159
{
133-
this.props.overlayBtn && this.props.overlayBtn.message ?
134-
this.props.overlayBtn.message : 'Back'
160+
this.props.defaultOverlayBtnSettings && this.props.defaultOverlayBtnSettings.message ?
161+
this.props.defaultOverlayBtnSettings.message : 'Back'
135162
}
136-
</span> : null
163+
</button> : null
137164
}
138165
</div>
139166
);

‎example/Example.js‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const firstDataSource = {
4444
{
4545
label: 'Daly City Serramonte',
4646
value: '330000',
47+
link: "https://www.google.com"
4748
}]
4849
};
4950

@@ -174,21 +175,20 @@ class Example extends React.Component {
174175

175176
render() {
176177
return (
177-
<div style={{ display: 'flex', flexDirection: 'row' }}>
178+
<div>
178179
<DrillDown
179180
type="column2d"
180181
width='600'
181182
height='400'
182183
dataFormat="JSON"
183-
overlayBtn={{ //This object holds the style of the overlay back button.
184+
defaultOverlayBtnSettings={{ // This object holds the style of the overlay back button.
184185
message: 'ESCAPE',
185-
fontColor: '#880000',
186-
bgColor: '#FFEEEE',
186+
color: '#FFFFFF',
187+
backgroundColor: '#512A44',
187188
borderColor: '#660000',
188189
fontSize: '8px',
189-
placement: 'top-right',
190+
placement: 'top-right', // Absolute position of the overlay button. Can take values: 'top-right', 'top-left', 'bottom-right' & 'bottom-left'
190191
margin: '10px'
191-
// position
192192
}}
193193
dataSource={this.state.dataSource}
194194
mappedIds={this.state.mappedIds}>
@@ -198,13 +198,13 @@ class Example extends React.Component {
198198
width='600'
199199
height='400'
200200
dataFormat="JSON"
201-
overlayBtn={{ //This object holds the style of the overlay back button.
202-
message: 'REVERT',
203-
fontSize: '14px',
204-
placement: 'top-right',
205-
margin: '10px'
206-
// position
207-
}}
201+
// defaultOverlayBtnSettings={{ // This object holds the style of the overlay back button.
202+
// message: 'REVERT',
203+
// fontSize: '14px',
204+
// placement: 'top-right',
205+
// margin: '10px'
206+
// }}
207+
customOverlayBtnStyle={{backgroundColor: 'red', color: 'white', padding: 8, fontSize: 16}}
208208
dataSource={zerothDataScource}
209209
mappedIds={[0, 1, 2]}>
210210
<DrillDown
@@ -257,6 +257,18 @@ class Example extends React.Component {
257257
width='600'
258258
height='400'
259259
dataFormat="JSON"
260+
fcEvent-beforeDataUpdate={() => {
261+
console.log('This chart is updating its data.')
262+
}}
263+
fcEvent-dataUpdated={() => {
264+
console.log('This chart has successfully updated its data.')
265+
}}
266+
fcEvent-drawComplete={() => {
267+
console.log('This chart has been successfully drawn.')
268+
}}
269+
fcEvent-renderComplete={() => {
270+
console.log('This chart has successfully rendered.')
271+
}}
260272
dataSource={firstDataSource} />
261273
<ReactFC
262274
type="column2d"

0 commit comments

Comments
 (0)