← All changes
|
classes/Visualizer/Gutenberg/src/Components/ChartRender.js
+9
-46
3.10.0
→
3.3.4
View file →
| @@ -6,9 +6,9 @@ | ||
| 6 | 6 | import DataTable from './DataTable.js'; |
| 7 | 7 | |
| 8 | 8 | import merge from 'merge'; |
| 9 | 9 | |
| 10 | -import { compact, formatDate, isValidJSON, formatData } from '../utils.js'; | |
| 10 | +import { compact, formatDate, isValidJSON } from '../utils.js'; | |
| 11 | 11 | |
| 12 | 12 | /** |
| 13 | 13 | * WordPress dependencies |
| 14 | 14 | */ |
| @@ -27,9 +27,9 @@ | ||
| 27 | 27 | Toolbar, |
| 28 | 28 | Tooltip |
| 29 | 29 | } = wp.components; |
| 30 | 30 | |
| 31 | -const { BlockControls } = wp.blockEditor || wp.editor; | |
| 31 | +const { BlockControls } = wp.editor; | |
| 32 | 32 | |
| 33 | 33 | class ChartRender extends Component { |
| 34 | 34 | constructor() { |
| 35 | 35 | super( ...arguments ); |
| @@ -35,39 +35,22 @@ | ||
| 35 | 35 | super( ...arguments ); |
| 36 | 36 | } |
| 37 | 37 | |
| 38 | 38 | render() { |
| 39 | + let chart; | |
| 39 | 40 | |
| 40 | - let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current'; | |
| 41 | - | |
| 42 | - let chart, footer; | |
| 43 | - | |
| 44 | 41 | let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) ); |
| 45 | 42 | |
| 46 | - if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) { | |
| 47 | - if ( 'DataTable' === data['visualizer-chart-library']) { | |
| 43 | + if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) { | |
| 44 | + if ( 'dataTable' === data['visualizer-chart-type']) { | |
| 48 | 45 | chart = data['visualizer-chart-type']; |
| 49 | 46 | } else { |
| 50 | - chart = this.props.chart['visualizer-chart-type']; | |
| 51 | - if ( 'tabular' === chart ) { | |
| 52 | - chart = 'table'; | |
| 53 | - } | |
| 54 | - chart = startCase( chart ); | |
| 47 | + chart = startCase( this.props.chart['visualizer-chart-type']); | |
| 55 | 48 | } |
| 56 | 49 | } else { |
| 57 | 50 | chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`; |
| 58 | 51 | } |
| 59 | 52 | |
| 60 | - if ( data['visualizer-data-exploded']) { | |
| 61 | - footer = __( 'Annotations in this chart may not display here but they will display in the front end.' ); | |
| 62 | - } | |
| 63 | - | |
| 64 | - if ( this.props.chart['visualizer-series'] && 0 <= [ 'date', 'datetime', 'timeofday' ].indexOf( this.props.chart['visualizer-series'][0].type ) ) { | |
| 65 | - if ( this.props.chart['visualizer-settings'] && '' == this.props.chart['visualizer-settings'].hAxis.format ) { | |
| 66 | - this.props.chart['visualizer-settings'].hAxis.format = 'YYYY-MM-dd'; | |
| 67 | - } | |
| 68 | - } | |
| 69 | - | |
| 70 | 53 | return ( |
| 71 | 54 | <div className={ this.props.className }> |
| 72 | 55 | |
| 73 | 56 | { ( null !== this.props.chart ) && |
| @@ -87,9 +70,9 @@ | ||
| 87 | 70 | </Tooltip> |
| 88 | 71 | </Toolbar> |
| 89 | 72 | </BlockControls> |
| 90 | 73 | |
| 91 | - { ( 'DataTable' === data['visualizer-chart-library']) ? ( | |
| 74 | + { ( 'dataTable' === chart ) ? ( | |
| 92 | 75 | <DataTable |
| 93 | 76 | id={ this.props.id } |
| 94 | 77 | rows={ data['visualizer-data'] } |
| 95 | 78 | columns={ data['visualizer-series'] } |
| @@ -94,11 +77,10 @@ | ||
| 94 | 77 | rows={ data['visualizer-data'] } |
| 95 | 78 | columns={ data['visualizer-series'] } |
| 96 | 79 | options={ data['visualizer-settings'] } |
| 97 | 80 | /> |
| 98 | - ) : ( '' !== data['visualizer-data-exploded'] ? ( | |
| 81 | + ) : ( | |
| 99 | 82 | <Chart |
| 100 | - chartVersion={ chartVersion } | |
| 101 | 83 | chartType={ chart } |
| 102 | 84 | rows={ data['visualizer-data'] } |
| 103 | 85 | columns={ data['visualizer-series'] } |
| 104 | 86 | options={ |
| @@ -106,29 +88,10 @@ | ||
| 106 | 88 | merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) : |
| 107 | 89 | compact( this.props.chart['visualizer-settings']) |
| 108 | 90 | } |
| 109 | 91 | height="500px" |
| 110 | - formatters={ formatData( data ) } | |
| 111 | 92 | /> |
| 112 | - ) : ( | |
| 113 | - <Chart | |
| 114 | - chartVersion={ chartVersion } | |
| 115 | - chartType={ chart } | |
| 116 | - rows={ data['visualizer-data'] } | |
| 117 | - columns={ data['visualizer-series'] } | |
| 118 | - options={ | |
| 119 | - isValidJSON( this.props.chart['visualizer-settings'].manual ) ? | |
| 120 | - merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) : | |
| 121 | - compact( this.props.chart['visualizer-settings']) | |
| 122 | - } | |
| 123 | - height="500px" | |
| 124 | - formatters={ formatData( data ) } | |
| 125 | - /> | |
| 126 | - ) ) } | |
| 127 | - | |
| 128 | - <div className="visualizer-settings__charts-footer"><sub> | |
| 129 | - { footer } | |
| 130 | - </sub></div> | |
| 93 | + ) } | |
| 131 | 94 | |
| 132 | 95 | </Fragment> |
| 133 | 96 | } |
| 134 | 97 | |