| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
const { __ } = wp.i18n; |
| 5 |
|
| 6 |
const { |
| 7 |
apiFetch, |
| 8 |
apiRequest |
| 9 |
} = wp; |
| 10 |
|
| 11 |
const { Component } = wp.element; |
| 12 |
|
| 13 |
const { |
| 14 |
Button, |
| 15 |
ExternalLink, |
| 16 |
IconButton, |
| 17 |
Modal, |
| 18 |
PanelBody, |
| 19 |
SelectControl, |
| 20 |
TextControl |
| 21 |
} = wp.components; |
| 22 |
|
| 23 |
class JSONImport extends Component { |
| 24 |
constructor() { |
| 25 |
super( ...arguments ); |
| 26 |
|
| 27 |
this.openModal = this.openModal.bind( this ); |
| 28 |
this.initTable = this.initTable.bind( this ); |
| 29 |
this.onToggle = this.onToggle.bind( this ); |
| 30 |
this.toggleHeaders = this.toggleHeaders.bind( this ); |
| 31 |
this.getJSONRoot = this.getJSONRoot.bind( this ); |
| 32 |
this.getJSONData = this.getJSONData.bind( this ); |
| 33 |
this.getTableData = this.getTableData.bind( this ); |
| 34 |
|
| 35 |
this.state = { |
| 36 |
isOpen: false, |
| 37 |
isLoading: false, |
| 38 |
isFirstStepOpen: true, |
| 39 |
isSecondStepOpen: false, |
| 40 |
isThirdStepOpen: false, |
| 41 |
isFourthStepOpen: false, |
| 42 |
isHeaderPanelOpen: false, |
| 43 |
endpointRoots: [], |
| 44 |
endpointPaging: [], |
| 45 |
table: null, |
| 46 |
requestHeaders: { |
| 47 |
method: 'GET', |
| 48 |
username: '', |
| 49 |
password: '', |
| 50 |
auth: '' |
| 51 |
} |
| 52 |
}; |
| 53 |
} |
| 54 |
|
| 55 |
async openModal() { |
| 56 |
await this.setState({ isOpen: true }); |
| 57 |
|
| 58 |
const table = document.querySelector( '#visualizer-json-query-table' ); |
| 59 |
|
| 60 |
if ( this.state.isFourthStepOpen && null !== this.state.table ) { |
| 61 |
table.innerHTML = this.state.table; |
| 62 |
this.initTable(); |
| 63 |
} |
| 64 |
} |
| 65 |
|
| 66 |
initTable() { |
| 67 |
jQuery( '#visualizer-json-query-table table' ).DataTable({ |
| 68 |
paging: false, |
| 69 |
searching: false, |
| 70 |
ordering: false, |
| 71 |
select: false, |
| 72 |
scrollX: '600px', |
| 73 |
scrollY: '400px', |
| 74 |
info: false, |
| 75 |
colReorder: { |
| 76 |
fixedColumnsLeft: 1 |
| 77 |
}, |
| 78 |
dom: 'Bt', |
| 79 |
buttons: [ |
| 80 |
{ |
| 81 |
extend: 'colvis', |
| 82 |
columns: ':gt(0)', |
| 83 |
collectionLayout: 'four-column' |
| 84 |
} |
| 85 |
] |
| 86 |
}); |
| 87 |
} |
| 88 |
|
| 89 |
async onToggle( value ) { |
| 90 |
if ( null === this.state.table && ( this.state.endpointRoots && 0 < this.state.endpointRoots.length ) && ( 'isFirstStepOpen' === value || 'isSecondStepOpen' === value ) ) { |
| 91 |
this.setState({ |
| 92 |
isFirstStepOpen: ( 'isFirstStepOpen' === value ? true : false ), |
| 93 |
isSecondStepOpen: ( 'isSecondStepOpen' === value ? true : false ), |
| 94 |
isThirdStepOpen: false, |
| 95 |
isFourthStepOpen: false |
| 96 |
}); |
| 97 |
} |
| 98 |
|
| 99 |
if ( null !== this.state.table ) { |
| 100 |
await this.setState({ |
| 101 |
isFirstStepOpen: ( 'isFirstStepOpen' === value ? true : false ), |
| 102 |
isSecondStepOpen: ( 'isSecondStepOpen' === value ? true : false ), |
| 103 |
isThirdStepOpen: ( 'isThirdStepOpen' === value ? true : false ), |
| 104 |
isFourthStepOpen: ( 'isFourthStepOpen' === value ? true : false ) |
| 105 |
}); |
| 106 |
|
| 107 |
if ( 'isFourthStepOpen' === value ) { |
| 108 |
const table = document.querySelector( '#visualizer-json-query-table' ); |
| 109 |
|
| 110 |
if ( this.state.isFourthStepOpen ) { |
| 111 |
table.innerHTML = this.state.table; |
| 112 |
this.initTable(); |
| 113 |
} |
| 114 |
} |
| 115 |
} |
| 116 |
} |
| 117 |
|
| 118 |
toggleHeaders() { |
| 119 |
this.setState({ isHeaderPanelOpen: ! this.state.isHeaderPanelOpen }); |
| 120 |
} |
| 121 |
|
| 122 |
async getJSONRoot() { |
| 123 |
this.setState({ |
| 124 |
isLoading: true, |
| 125 |
endpointRoots: [], |
| 126 |
endpointPaging: [], |
| 127 |
table: null |
| 128 |
}); |
| 129 |
|
| 130 |
let response = await apiRequest({ |
| 131 |
path: `/visualizer/v1/get-json-root?url=${ this.props.chart['visualizer-json-url'] }`, |
| 132 |
data: { |
| 133 |
method: this.props.chart['visualizer-json-headers'] ? this.props.chart['visualizer-json-headers'].method : this.state.requestHeaders.method, |
| 134 |
username: this.props.chart['visualizer-json-headers'] ? |
| 135 |
( |
| 136 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 137 |
this.props.chart['visualizer-json-headers'].auth.username : |
| 138 |
this.state.requestHeaders.username |
| 139 |
) : |
| 140 |
this.state.requestHeaders.username, |
| 141 |
password: this.props.chart['visualizer-json-headers'] ? |
| 142 |
( |
| 143 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 144 |
this.props.chart['visualizer-json-headers'].auth.password : |
| 145 |
this.state.requestHeaders.password |
| 146 |
) : |
| 147 |
this.state.requestHeaders.password, |
| 148 |
auth: this.props.chart['visualizer-json-headers'] ? |
| 149 |
( |
| 150 |
'object' !== typeof this.props.chart['visualizer-json-headers'].auth ? |
| 151 |
this.props.chart['visualizer-json-headers'].auth : |
| 152 |
this.state.requestHeaders.auth |
| 153 |
) : |
| 154 |
this.state.requestHeaders.auth |
| 155 |
}, |
| 156 |
method: 'GET' |
| 157 |
}); |
| 158 |
|
| 159 |
if ( response.success ) { |
| 160 |
const roots = Object.keys( response.data.roots ).map( i => { |
| 161 |
return { |
| 162 |
label: response.data.roots[i].replace( />/g, ' ➤ ' ), |
| 163 |
value: response.data.roots[i] |
| 164 |
}; |
| 165 |
}); |
| 166 |
|
| 167 |
this.setState({ |
| 168 |
isLoading: false, |
| 169 |
isFirstStepOpen: false, |
| 170 |
isSecondStepOpen: true, |
| 171 |
endpointRoots: roots |
| 172 |
}); |
| 173 |
} else { |
| 174 |
this.setState({ isLoading: false }); |
| 175 |
alert( response.data.msg ); |
| 176 |
} |
| 177 |
} |
| 178 |
|
| 179 |
async getJSONData() { |
| 180 |
this.setState({ isLoading: true }); |
| 181 |
|
| 182 |
let response = await apiRequest({ |
| 183 |
path: `/visualizer/v1/get-json-data?url=${ this.props.chart['visualizer-json-url'] }&chart=${ this.props.id }`, |
| 184 |
data: { |
| 185 |
root: this.props.chart['visualizer-json-root'] || this.state.endpointRoots[0].value, |
| 186 |
method: this.props.chart['visualizer-json-headers'] ? this.props.chart['visualizer-json-headers'].method : this.state.requestHeaders.method, |
| 187 |
username: this.props.chart['visualizer-json-headers'] ? |
| 188 |
( |
| 189 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 190 |
this.props.chart['visualizer-json-headers'].auth.username : |
| 191 |
this.state.requestHeaders.username |
| 192 |
) : |
| 193 |
this.state.requestHeaders.username, |
| 194 |
password: this.props.chart['visualizer-json-headers'] ? |
| 195 |
( |
| 196 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 197 |
this.props.chart['visualizer-json-headers'].auth.password : |
| 198 |
this.state.requestHeaders.password |
| 199 |
) : |
| 200 |
this.state.requestHeaders.password, |
| 201 |
auth: this.props.chart['visualizer-json-headers'] ? |
| 202 |
( |
| 203 |
'object' !== typeof this.props.chart['visualizer-json-headers'].auth ? |
| 204 |
this.props.chart['visualizer-json-headers'].auth : |
| 205 |
this.state.requestHeaders.auth |
| 206 |
) : |
| 207 |
this.state.requestHeaders.auth |
| 208 |
}, |
| 209 |
method: 'GET' |
| 210 |
}); |
| 211 |
|
| 212 |
if ( response.success ) { |
| 213 |
const paging = [ |
| 214 |
{ |
| 215 |
label: __( 'Don\'t use pagination' ), |
| 216 |
value: 0 |
| 217 |
} |
| 218 |
]; |
| 219 |
|
| 220 |
if ( response.data.paging && 'root>next' === response.data.paging[0]) { |
| 221 |
paging.push( |
| 222 |
{ |
| 223 |
label: __( 'Get first 5 pages using root ➤ next' ), |
| 224 |
value: 'root>next' |
| 225 |
} |
| 226 |
); |
| 227 |
} |
| 228 |
|
| 229 |
this.setState({ |
| 230 |
isLoading: false, |
| 231 |
isSecondStepOpen: false, |
| 232 |
isFourthStepOpen: true, |
| 233 |
endpointPaging: paging, |
| 234 |
table: response.data.table |
| 235 |
}); |
| 236 |
|
| 237 |
const table = document.querySelector( '#visualizer-json-query-table' ); |
| 238 |
table.innerHTML = response.data.table; |
| 239 |
|
| 240 |
this.initTable(); |
| 241 |
} else { |
| 242 |
this.setState({ isLoading: false }); |
| 243 |
alert( response.data.msg ); |
| 244 |
} |
| 245 |
} |
| 246 |
|
| 247 |
async getTableData() { |
| 248 |
this.setState({ isLoading: true }); |
| 249 |
|
| 250 |
const columns = document.querySelectorAll( '#visualizer-json-query-table input' ); |
| 251 |
const select = document.querySelectorAll( '#visualizer-json-query-table select' ); |
| 252 |
const header = []; |
| 253 |
const type = {}; |
| 254 |
|
| 255 |
columns.forEach( column => header.push( column.value ) ); |
| 256 |
select.forEach( el => type[el.name] = el.value ); |
| 257 |
|
| 258 |
let response = await apiRequest({ |
| 259 |
path: '/visualizer/v1/set-json-data', |
| 260 |
data: { |
| 261 |
url: this.props.chart['visualizer-json-url'], |
| 262 |
method: this.props.chart['visualizer-json-headers'] ? this.props.chart['visualizer-json-headers'].method : this.state.requestHeaders.method, |
| 263 |
username: this.props.chart['visualizer-json-headers'] ? |
| 264 |
( |
| 265 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 266 |
this.props.chart['visualizer-json-headers'].auth.username : |
| 267 |
this.state.requestHeaders.username |
| 268 |
) : |
| 269 |
this.state.requestHeaders.username, |
| 270 |
password: this.props.chart['visualizer-json-headers'] ? |
| 271 |
( |
| 272 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 273 |
this.props.chart['visualizer-json-headers'].auth.password : |
| 274 |
this.state.requestHeaders.password |
| 275 |
) : |
| 276 |
this.state.requestHeaders.password, |
| 277 |
auth: this.props.chart['visualizer-json-headers'] ? |
| 278 |
( |
| 279 |
'object' !== typeof this.props.chart['visualizer-json-headers'].auth ? |
| 280 |
this.props.chart['visualizer-json-headers'].auth : |
| 281 |
this.state.requestHeaders.auth |
| 282 |
) : |
| 283 |
this.state.requestHeaders.auth, |
| 284 |
root: this.props.chart['visualizer-json-root'] || this.state.endpointRoots[0].value, |
| 285 |
paging: this.props.chart['visualizer-json-paging'] || 0, |
| 286 |
header, |
| 287 |
...type |
| 288 |
}, |
| 289 |
method: 'GET' |
| 290 |
}); |
| 291 |
|
| 292 |
if ( response.success ) { |
| 293 |
this.props.JSONImportData( response.data.name, JSON.parse( response.data.series ), JSON.parse( response.data.data ) ); |
| 294 |
|
| 295 |
this.setState({ |
| 296 |
isOpen: false, |
| 297 |
isLoading: false |
| 298 |
}); |
| 299 |
} else { |
| 300 |
alert( response.data.msg ); |
| 301 |
|
| 302 |
this.setState({ isLoading: false }); |
| 303 |
} |
| 304 |
} |
| 305 |
|
| 306 |
render() { |
| 307 |
return ( |
| 308 |
( 'community' !== visualizerLocalize.isPro ) ? ( |
| 309 |
<PanelBody |
| 310 |
title={ __( 'Import from JSON' ) } |
| 311 |
className="visualizer-inner-sections" |
| 312 |
initialOpen={ false } |
| 313 |
> |
| 314 |
<p>{ __( 'You can choose here to import or synchronize your chart data with a remote JSON source.' ) }</p> |
| 315 |
|
| 316 |
<p> |
| 317 |
<ExternalLink href="https://docs.themeisle.com/article/1052-how-to-generate-charts-from-json-data-rest-endpoints"> |
| 318 |
{ __( 'For more info check this tutorial.' ) } |
| 319 |
</ExternalLink> |
| 320 |
</p> |
| 321 |
|
| 322 |
<SelectControl |
| 323 |
label={ __( 'How often do you want to check the url?' ) } |
| 324 |
value={ this.props.chart['visualizer-json-schedule'] ? this.props.chart['visualizer-json-schedule'] : 1 } |
| 325 |
options={ [ |
| 326 |
{ label: __( '10 minutes' ), value: '0.16' }, |
| 327 |
{ label: __( 'One-time' ), value: '-1' }, |
| 328 |
{ label: __( 'Each hour' ), value: '1' }, |
| 329 |
{ label: __( 'Each 12 hours' ), value: '12' }, |
| 330 |
{ label: __( 'Each day' ), value: '24' }, |
| 331 |
{ label: __( 'Each 3 days' ), value: '72' } |
| 332 |
] } |
| 333 |
onChange={ this.props.editSchedule } |
| 334 |
/> |
| 335 |
|
| 336 |
<Button |
| 337 |
isPrimary |
| 338 |
isLarge |
| 339 |
onClick={ this.openModal } |
| 340 |
> |
| 341 |
{ __( 'Modify Parameters' ) } |
| 342 |
</Button> |
| 343 |
|
| 344 |
{ this.state.isOpen && ( |
| 345 |
<Modal |
| 346 |
title={ __( 'Import from JSON' ) } |
| 347 |
className="visualizer-json-query-modal" |
| 348 |
shouldCloseOnClickOutside={ false } |
| 349 |
onRequestClose={ () => { |
| 350 |
this.setState({ |
| 351 |
isOpen: false, |
| 352 |
isTableRendered: false |
| 353 |
}); |
| 354 |
} } |
| 355 |
> |
| 356 |
<PanelBody |
| 357 |
title={ __( 'Step 1: Specify the JSON endpoint/URL' ) } |
| 358 |
opened={ this.state.isFirstStepOpen } |
| 359 |
onToggle={ () => this.onToggle( 'isFirstStepOpen' ) } |
| 360 |
> |
| 361 |
<p>{ __( 'If you want to add authentication, add headers to the endpoint or change the request in any way, please refer to our document here:' ) }</p> |
| 362 |
|
| 363 |
<p> |
| 364 |
<ExternalLink href="https://docs.themeisle.com/article/1043-visualizer-how-to-extend-rest-endpoints-with-json-response"> |
| 365 |
{ __( 'How to extend REST endpoints with JSON response' ) } |
| 366 |
</ExternalLink> |
| 367 |
</p> |
| 368 |
|
| 369 |
<TextControl |
| 370 |
placeholder={ __( 'Please enter the URL of your JSON file' ) } |
| 371 |
value={ this.props.chart['visualizer-json-url'] ? this.props.chart['visualizer-json-url'] : '' } |
| 372 |
onChange={ this.props.editJSONURL } |
| 373 |
/> |
| 374 |
|
| 375 |
<IconButton |
| 376 |
icon="arrow-right-alt2" |
| 377 |
label={ __( 'Add Headers' ) } |
| 378 |
onClick={ this.toggleHeaders } |
| 379 |
> |
| 380 |
{ __( 'Add Headers' ) } |
| 381 |
</IconButton> |
| 382 |
|
| 383 |
{ this.state.isHeaderPanelOpen && ( |
| 384 |
<div className="visualizer-json-query-modal-headers-panel"> |
| 385 |
<SelectControl |
| 386 |
label={ __( 'Request Type' ) } |
| 387 |
value={ this.props.chart['visualizer-json-headers'] ? this.props.chart['visualizer-json-headers'].method : this.state.requestHeaders.method } |
| 388 |
options={ [ |
| 389 |
{ |
| 390 |
value: 'GET', |
| 391 |
label: __( 'GET' ) |
| 392 |
}, |
| 393 |
{ |
| 394 |
value: 'POST', |
| 395 |
label: __( 'POST' ) |
| 396 |
} |
| 397 |
] } |
| 398 |
onChange={ e => { |
| 399 |
let headers = { ...this.state.requestHeaders }; |
| 400 |
let headersState = this.state.requestHeaders; |
| 401 |
headers.method = e; |
| 402 |
headersState = { |
| 403 |
...headersState, |
| 404 |
method: e |
| 405 |
}; |
| 406 |
this.setState({ requestHeaders: headersState }); |
| 407 |
this.props.editJSONHeaders( headers ); |
| 408 |
} } |
| 409 |
/> |
| 410 |
|
| 411 |
<p>{ __( 'Credentials' ) }</p> |
| 412 |
|
| 413 |
<TextControl |
| 414 |
label={ __( 'Username' ) } |
| 415 |
placeholder={ __( 'Username/Access Key' ) } |
| 416 |
value={ |
| 417 |
this.props.chart['visualizer-json-headers'] ? |
| 418 |
( |
| 419 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 420 |
this.props.chart['visualizer-json-headers'].auth.username : |
| 421 |
this.state.requestHeaders.username |
| 422 |
) : |
| 423 |
this.state.requestHeaders.username |
| 424 |
} |
| 425 |
onChange={ e => { |
| 426 |
let headers = { ...this.state.requestHeaders }; |
| 427 |
let headersState = this.state.requestHeaders; |
| 428 |
headers.auth = { |
| 429 |
username: e, |
| 430 |
password: this.props.chart['visualizer-json-headers'] ? |
| 431 |
( |
| 432 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 433 |
this.props.chart['visualizer-json-headers'].auth.password : |
| 434 |
this.state.requestHeaders.password |
| 435 |
) : |
| 436 |
this.state.requestHeaders.password |
| 437 |
}; |
| 438 |
headersState = { |
| 439 |
...headersState, |
| 440 |
username: e, |
| 441 |
password: headers.password |
| 442 |
}; |
| 443 |
this.setState({ requestHeaders: headersState }); |
| 444 |
this.props.editJSONHeaders( headers ); |
| 445 |
} } |
| 446 |
/> |
| 447 |
|
| 448 |
<span className="visualizer-json-query-modal-field-separator" >{ __( '&' ) }</span> |
| 449 |
|
| 450 |
<TextControl |
| 451 |
label={ __( 'Password' ) } |
| 452 |
placeholder={ __( 'Password/Secret Key' ) } |
| 453 |
type="password" |
| 454 |
value={ |
| 455 |
this.props.chart['visualizer-json-headers'] ? |
| 456 |
( |
| 457 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 458 |
this.props.chart['visualizer-json-headers'].auth.password : |
| 459 |
this.state.requestHeaders.password |
| 460 |
) : |
| 461 |
this.state.requestHeaders.password |
| 462 |
} |
| 463 |
onChange={ e => { |
| 464 |
let headers = { ...this.state.requestHeaders }; |
| 465 |
let headersState = this.state.requestHeaders; |
| 466 |
headers.auth = { |
| 467 |
username: this.props.chart['visualizer-json-headers'] ? |
| 468 |
( |
| 469 |
'object' === typeof this.props.chart['visualizer-json-headers'].auth ? |
| 470 |
this.props.chart['visualizer-json-headers'].auth.username : |
| 471 |
this.state.requestHeaders.username |
| 472 |
) : |
| 473 |
this.state.requestHeaders.username, |
| 474 |
password: e |
| 475 |
}; |
| 476 |
headersState = { |
| 477 |
...headersState, |
| 478 |
username: headers.username, |
| 479 |
password: e |
| 480 |
}; |
| 481 |
this.setState({ requestHeaders: headersState }); |
| 482 |
this.props.editJSONHeaders( headers ); |
| 483 |
} } |
| 484 |
/> |
| 485 |
|
| 486 |
<p>{ __( 'OR' ) }</p> |
| 487 |
|
| 488 |
<TextControl |
| 489 |
label={ __( 'Authorization' ) } |
| 490 |
placeholder={ __( 'e.g. SharedKey <AccountName>:<Signature>' ) } |
| 491 |
value={ |
| 492 |
this.props.chart['visualizer-json-headers'] ? |
| 493 |
( |
| 494 |
'object' !== typeof this.props.chart['visualizer-json-headers'].auth ? |
| 495 |
this.props.chart['visualizer-json-headers'].auth : |
| 496 |
this.state.requestHeaders.auth |
| 497 |
) : |
| 498 |
this.state.requestHeaders.auth |
| 499 |
} |
| 500 |
onChange={ e => { |
| 501 |
let headers = { ...this.state.requestHeaders }; |
| 502 |
let headersState = this.state.requestHeaders; |
| 503 |
headers.auth = e; |
| 504 |
headersState = { |
| 505 |
...headersState, |
| 506 |
auth: e |
| 507 |
}; |
| 508 |
this.setState({ requestHeaders: headersState }); |
| 509 |
this.props.editJSONHeaders( headers ); |
| 510 |
} } |
| 511 |
/> |
| 512 |
</div> |
| 513 |
) } |
| 514 |
|
| 515 |
<Button |
| 516 |
isPrimary |
| 517 |
isLarge |
| 518 |
isBusy={ this.state.isLoading } |
| 519 |
disabled={ this.state.isLoading } |
| 520 |
onClick={ this.getJSONRoot } |
| 521 |
> |
| 522 |
{ __( 'Fetch Endpoint' ) } |
| 523 |
</Button> |
| 524 |
</PanelBody> |
| 525 |
|
| 526 |
<PanelBody |
| 527 |
title={ __( 'Step 2: Choose the JSON root' ) } |
| 528 |
initialOpen={ false } |
| 529 |
opened={ this.state.isSecondStepOpen } |
| 530 |
onToggle={ () => this.onToggle( 'isSecondStepOpen' ) } |
| 531 |
> |
| 532 |
|
| 533 |
<p>{ __( 'If you see Invalid Data, you may have selected the wrong root to fetch data from. Please select an alternative.' ) }</p> |
| 534 |
|
| 535 |
<SelectControl |
| 536 |
value={ this.props.chart['visualizer-json-root'] } |
| 537 |
options={ this.state.endpointRoots } |
| 538 |
onChange={ this.props.editJSONRoot } |
| 539 |
/> |
| 540 |
|
| 541 |
<Button |
| 542 |
isPrimary |
| 543 |
isLarge |
| 544 |
isBusy={ this.state.isLoading } |
| 545 |
disabled={ this.state.isLoading } |
| 546 |
onClick={ this.getJSONData } |
| 547 |
> |
| 548 |
{ __( 'Parse Endpoint' ) } |
| 549 |
</Button> |
| 550 |
</PanelBody> |
| 551 |
|
| 552 |
<PanelBody |
| 553 |
title={ __( 'Step 3: Specify miscellaneous parameters' ) } |
| 554 |
initialOpen={ false } |
| 555 |
opened={ this.state.isThirdStepOpen } |
| 556 |
onToggle={ () => this.onToggle( 'isThirdStepOpen' ) } |
| 557 |
> |
| 558 |
{ ( 'community' !== visualizerLocalize.isPro ) ? ( |
| 559 |
<SelectControl |
| 560 |
value={ this.props.chart['visualizer-json-paging'] || 0 } |
| 561 |
options={ this.state.endpointPaging } |
| 562 |
onChange={ this.props.editJSONPaging } |
| 563 |
/> |
| 564 |
) : ( |
| 565 |
<p>{ __( 'Enable this feature in PRO version!' ) }</p> |
| 566 |
) } |
| 567 |
</PanelBody> |
| 568 |
|
| 569 |
<PanelBody |
| 570 |
title={ __( 'Step 4: Select the data to display in the chart' ) } |
| 571 |
initialOpen={ false } |
| 572 |
opened={ this.state.isFourthStepOpen } |
| 573 |
onToggle={ () => this.onToggle( 'isFourthStepOpen' ) } |
| 574 |
> |
| 575 |
<ul> |
| 576 |
<li>{ __( 'Select whether to include the data in the chart. Each column selected will form one series.' ) }</li> |
| 577 |
<li>{ __( 'If a column is selected to be included, specify its data type.' ) }</li> |
| 578 |
<li>{ __( 'You can use drag/drop to reorder the columns but this column position is not saved. So when you reload the table, you may have to reorder again.' ) }</li> |
| 579 |
<li>{ __( 'You can select any number of columns but the chart type selected will determine how many will display in the chart.' ) }</li> |
| 580 |
</ul> |
| 581 |
|
| 582 |
<div id="visualizer-json-query-table"></div> |
| 583 |
|
| 584 |
<Button |
| 585 |
isPrimary |
| 586 |
isLarge |
| 587 |
isBusy={ this.state.isLoading } |
| 588 |
disabled={ this.state.isLoading } |
| 589 |
onClick={ this.getTableData } |
| 590 |
> |
| 591 |
{ __( 'Save & Show Chart' ) } |
| 592 |
</Button> |
| 593 |
</PanelBody> |
| 594 |
</Modal> |
| 595 |
)} |
| 596 |
|
| 597 |
</PanelBody> |
| 598 |
) : ( |
| 599 |
<PanelBody |
| 600 |
title={ __( 'Import from JSON' ) } |
| 601 |
icon="lock" |
| 602 |
initialOpen={ false } |
| 603 |
> |
| 604 |
<p>{ __( 'Enable this feature in PRO version!' ) }</p> |
| 605 |
|
| 606 |
<Button |
| 607 |
isPrimary |
| 608 |
href={ visualizerLocalize.proTeaser } |
| 609 |
target="_blank" |
| 610 |
> |
| 611 |
{ __( 'Upgrade Now' ) } |
| 612 |
</Button> |
| 613 |
|
| 614 |
</PanelBody> |
| 615 |
) |
| 616 |
); |
| 617 |
} |
| 618 |
} |
| 619 |
|
| 620 |
export default JSONImport; |
| 621 |
|
