PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.7
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.7
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 All 149 releases
← All changes | classes/Visualizer/Gutenberg/src/Components/Import/JSONImport.js +273 -254 3.10.13 → 3.11.7 View file →
@@ -304,130 +304,156 @@
304 304 }
305 305
306 306 render() {
307 307 return (
308 - <PanelBody
309 - title={ __( 'Import from JSON' ) }
310 - className="visualizer-inner-sections"
311 - initialOpen={ false }
312 - >
313 - <p>{ __( 'You can choose here to import or synchronize your chart data with a remote JSON source.' ) }</p>
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>
314 315
315 - <p>
316 - <ExternalLink href="https://docs.themeisle.com/article/1052-how-to-generate-charts-from-json-data-rest-endpoints">
317 - { __( 'For more info check this tutorial.' ) }
318 - </ExternalLink>
319 - </p>
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>
320 321
321 - <SelectControl
322 - label={ __( 'How often do you want to check the url?' ) }
323 - value={ this.props.chart['visualizer-json-schedule'] ? this.props.chart['visualizer-json-schedule'] : 1 }
324 - options={ [
325 - { label: __( 'One-time' ), value: '-1' },
326 - { label: __( 'Live' ), value: '0' },
327 - { label: __( 'Each hour' ), value: '1' },
328 - { label: __( 'Each 12 hours' ), value: '12' },
329 - { label: __( 'Each day' ), value: '24' },
330 - { label: __( 'Each 3 days' ), value: '72' }
331 - ] }
332 - onChange={ this.props.editSchedule }
333 - />
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 + />
334 335
335 - <Button
336 - isPrimary
337 - isLarge
338 - onClick={ this.openModal }
339 - >
340 - { __( 'Modify Parameters' ) }
341 - </Button>
336 + <Button
337 + isPrimary
338 + isLarge
339 + onClick={ this.openModal }
340 + >
341 + { __( 'Modify Parameters' ) }
342 + </Button>
342 343
343 - { this.state.isOpen && (
344 - <Modal
345 - title={ __( 'Import from JSON' ) }
346 - className="visualizer-json-query-modal"
347 - shouldCloseOnClickOutside={ false }
348 - onRequestClose={ () => {
349 - this.setState({
350 - isOpen: false,
351 - isTableRendered: false
352 - });
353 - } }
354 - >
355 - <PanelBody
356 - title={ __( 'Step 1: Specify the JSON endpoint/URL' ) }
357 - opened={ this.state.isFirstStepOpen }
358 - onToggle={ () => this.onToggle( 'isFirstStepOpen' ) }
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 + } }
359 355 >
360 - <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>
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>
361 362
362 - <p>
363 - <ExternalLink href="https://docs.themeisle.com/article/1043-visualizer-how-to-extend-rest-endpoints-with-json-response">
364 - { __( 'How to extend REST endpoints with JSON response' ) }
365 - </ExternalLink>
366 - </p>
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>
367 368
368 - <TextControl
369 - placeholder={ __( 'Please enter the URL of your JSON file' ) }
370 - value={ this.props.chart['visualizer-json-url'] ? this.props.chart['visualizer-json-url'] : '' }
371 - onChange={ this.props.editJSONURL }
372 - />
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 + />
373 374
374 - <IconButton
375 - icon="arrow-right-alt2"
376 - label={ __( 'Add Headers' ) }
377 - onClick={ this.toggleHeaders }
378 - >
379 - { __( 'Add Headers' ) }
380 - </IconButton>
375 + <IconButton
376 + icon="arrow-right-alt2"
377 + label={ __( 'Add Headers' ) }
378 + onClick={ this.toggleHeaders }
379 + >
380 + { __( 'Add Headers' ) }
381 + </IconButton>
381 382
382 - { this.state.isHeaderPanelOpen && (
383 - <div className="visualizer-json-query-modal-headers-panel">
384 - <SelectControl
385 - label={ __( 'Request Type' ) }
386 - value={ this.props.chart['visualizer-json-headers'] ? this.props.chart['visualizer-json-headers'].method : this.state.requestHeaders.method }
387 - options={ [
388 - {
389 - value: 'GET',
390 - label: __( 'GET' )
391 - },
392 - {
393 - value: 'POST',
394 - label: __( 'POST' )
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
395 424 }
396 - ] }
397 - onChange={ e => {
398 - let headers = { ...this.state.requestHeaders };
399 - let headersState = this.state.requestHeaders;
400 - headers.method = e;
401 - headersState = {
402 - ...headersState,
403 - method: e
404 - };
405 - this.setState({ requestHeaders: headersState });
406 - this.props.editJSONHeaders( headers );
407 - } }
408 - />
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 + />
409 447
410 - <p>{ __( 'Credentials' ) }</p>
448 + <span className="visualizer-json-query-modal-field-separator" >{ __( '&' ) }</span>
411 449
412 - <TextControl
413 - label={ __( 'Username' ) }
414 - placeholder={ __( 'Username/Access Key' ) }
415 - value={
416 - this.props.chart['visualizer-json-headers'] ?
417 - (
418 - 'object' === typeof this.props.chart['visualizer-json-headers'].auth ?
419 - this.props.chart['visualizer-json-headers'].auth.username :
420 - this.state.requestHeaders.username
421 - ) :
422 - this.state.requestHeaders.username
423 - }
424 - onChange={ e => {
425 - let headers = { ...this.state.requestHeaders };
426 - let headersState = this.state.requestHeaders;
427 - headers.auth = {
428 - username: e,
429 - password: this.props.chart['visualizer-json-headers'] ?
450 + <TextControl
451 + label={ __( 'Password' ) }
452 + placeholder={ __( 'Password/Secret Key' ) }
453 + type="password"
454 + value={
455 + this.props.chart['visualizer-json-headers'] ?
430 456 (
431 457 'object' === typeof this.props.chart['visualizer-json-headers'].auth ?
432 458 this.props.chart['visualizer-json-headers'].auth.password :
433 459 this.state.requestHeaders.password
@@ -432,169 +458,162 @@
432 458 this.props.chart['visualizer-json-headers'].auth.password :
433 459 this.state.requestHeaders.password
434 460 ) :
435 461 this.state.requestHeaders.password
436 - };
437 - headersState = {
438 - ...headersState,
439 - username: e,
440 - password: headers.password
441 - };
442 - this.setState({ requestHeaders: headersState });
443 - this.props.editJSONHeaders( headers );
444 - } }
445 - />
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 + />
446 485
447 - <span className="visualizer-json-query-modal-field-separator" >{ __( '&' ) }</span>
486 + <p>{ __( 'OR' ) }</p>
448 487
449 - <TextControl
450 - label={ __( 'Password' ) }
451 - placeholder={ __( 'Password/Secret Key' ) }
452 - type="password"
453 - value={
454 - this.props.chart['visualizer-json-headers'] ?
455 - (
456 - 'object' === typeof this.props.chart['visualizer-json-headers'].auth ?
457 - this.props.chart['visualizer-json-headers'].auth.password :
458 - this.state.requestHeaders.password
459 - ) :
460 - this.state.requestHeaders.password
461 - }
462 - onChange={ e => {
463 - let headers = { ...this.state.requestHeaders };
464 - let headersState = this.state.requestHeaders;
465 - headers.auth = {
466 - username: this.props.chart['visualizer-json-headers'] ?
488 + <TextControl
489 + label={ __( 'Authorization' ) }
490 + placeholder={ __( 'e.g. SharedKey <AccountName>:<Signature>' ) }
491 + value={
492 + this.props.chart['visualizer-json-headers'] ?
467 493 (
468 - 'object' === typeof this.props.chart['visualizer-json-headers'].auth ?
469 - this.props.chart['visualizer-json-headers'].auth.username :
470 - this.state.requestHeaders.username
494 + 'object' !== typeof this.props.chart['visualizer-json-headers'].auth ?
495 + this.props.chart['visualizer-json-headers'].auth :
496 + this.state.requestHeaders.auth
471 497 ) :
472 - this.state.requestHeaders.username,
473 - password: e
474 - };
475 - headersState = {
476 - ...headersState,
477 - username: headers.username,
478 - password: e
479 - };
480 - this.setState({ requestHeaders: headersState });
481 - this.props.editJSONHeaders( headers );
482 - } }
483 - />
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 + ) }
484 514
485 - <p>{ __( 'OR' ) }</p>
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>
486 525
487 - <TextControl
488 - label={ __( 'Authorization' ) }
489 - placeholder={ __( 'e.g. SharedKey <AccountName>:<Signature>' ) }
490 - value={
491 - this.props.chart['visualizer-json-headers'] ?
492 - (
493 - 'object' !== typeof this.props.chart['visualizer-json-headers'].auth ?
494 - this.props.chart['visualizer-json-headers'].auth :
495 - this.state.requestHeaders.auth
496 - ) :
497 - this.state.requestHeaders.auth
498 - }
499 - onChange={ e => {
500 - let headers = { ...this.state.requestHeaders };
501 - let headersState = this.state.requestHeaders;
502 - headers.auth = e;
503 - headersState = {
504 - ...headersState,
505 - auth: e
506 - };
507 - this.setState({ requestHeaders: headersState });
508 - this.props.editJSONHeaders( headers );
509 - } }
510 - />
511 - </div>
512 - ) }
526 + <PanelBody
527 + title={ __( 'Step 2: Choose the JSON root' ) }
528 + initialOpen={ false }
529 + opened={ this.state.isSecondStepOpen }
530 + onToggle={ () => this.onToggle( 'isSecondStepOpen' ) }
531 + >
513 532
514 - <Button
515 - isPrimary
516 - isLarge
517 - isBusy={ this.state.isLoading }
518 - disabled={ this.state.isLoading }
519 - onClick={ this.getJSONRoot }
520 - >
521 - { __( 'Fetch Endpoint' ) }
522 - </Button>
523 - </PanelBody>
533 + <p>{ __( 'If you see Invalid Data, you may have selected the wrong root to fetch data from. Please select an alternative.' ) }</p>
524 534
525 - <PanelBody
526 - title={ __( 'Step 2: Choose the JSON root' ) }
527 - initialOpen={ false }
528 - opened={ this.state.isSecondStepOpen }
529 - onToggle={ () => this.onToggle( 'isSecondStepOpen' ) }
530 - >
535 + <SelectControl
536 + value={ this.props.chart['visualizer-json-root'] }
537 + options={ this.state.endpointRoots }
538 + onChange={ this.props.editJSONRoot }
539 + />
531 540
532 - <p>{ __( 'If you see Invalid Data, you may have selected the wrong root to fetch data from. Please select an alternative.' ) }</p>
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>
533 551
534 - <SelectControl
535 - value={ this.props.chart['visualizer-json-root'] }
536 - options={ this.state.endpointRoots }
537 - onChange={ this.props.editJSONRoot }
538 - />
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>
539 568
540 - <Button
541 - isPrimary
542 - isLarge
543 - isBusy={ this.state.isLoading }
544 - disabled={ this.state.isLoading }
545 - onClick={ this.getJSONData }
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' ) }
546 574 >
547 - { __( 'Parse Endpoint' ) }
548 - </Button>
549 - </PanelBody>
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>
550 581
551 - <PanelBody
552 - title={ __( 'Step 3: Specify miscellaneous parameters' ) }
553 - initialOpen={ false }
554 - opened={ this.state.isThirdStepOpen }
555 - onToggle={ () => this.onToggle( 'isThirdStepOpen' ) }
556 - >
557 - { ( 'community' !== visualizerLocalize.isPro ) ? (
558 - <SelectControl
559 - value={ this.props.chart['visualizer-json-paging'] || 0 }
560 - options={ this.state.endpointPaging }
561 - onChange={ this.props.editJSONPaging }
562 - />
563 - ) : (
564 - <p>{ __( 'Enable this feature in PRO version!' ) }</p>
565 - ) }
566 - </PanelBody>
582 + <div id="visualizer-json-query-table"></div>
567 583
568 - <PanelBody
569 - title={ __( 'Step 4: Select the data to display in the chart' ) }
570 - initialOpen={ false }
571 - opened={ this.state.isFourthStepOpen }
572 - onToggle={ () => this.onToggle( 'isFourthStepOpen' ) }
573 - >
574 - <ul>
575 - <li>{ __( 'Select whether to include the data in the chart. Each column selected will form one series.' ) }</li>
576 - <li>{ __( 'If a column is selected to be included, specify its data type.' ) }</li>
577 - <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>
578 - <li>{ __( 'You can select any number of columns but the chart type selected will determine how many will display in the chart.' ) }</li>
579 - </ul>
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 + )}
580 596
581 - <div id="visualizer-json-query-table"></div>
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>
582 605
583 - <Button
584 - isPrimary
585 - isLarge
586 - isBusy={ this.state.isLoading }
587 - disabled={ this.state.isLoading }
588 - onClick={ this.getTableData }
589 - >
590 - { __( 'Save & Show Chart' ) }
591 - </Button>
592 - </PanelBody>
593 - </Modal>
594 - )}
606 + <Button
607 + isPrimary
608 + href={ visualizerLocalize.proTeaser }
609 + target="_blank"
610 + >
611 + { __( 'Upgrade Now' ) }
612 + </Button>
595 613
596 - </PanelBody>
614 + </PanelBody>
615 + )
597 616 );
598 617 }
599 618 }
600 619