← All changes
|
classes/Visualizer/Gutenberg/src/Components/ChartRender.js
+5
-22
3.10.4
→
3.4.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 | */ |
| @@ -35,24 +35,17 @@ | ||
| 35 | 35 | super( ...arguments ); |
| 36 | 36 | } |
| 37 | 37 | |
| 38 | 38 | render() { |
| 39 | - | |
| 40 | - let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current'; | |
| 41 | - | |
| 42 | 39 | let chart, footer; |
| 43 | 40 | |
| 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 | } |
| @@ -60,14 +53,8 @@ | ||
| 60 | 53 | if ( data['visualizer-data-exploded']) { |
| 61 | 54 | footer = __( 'Annotations in this chart may not display here but they will display in the front end.' ); |
| 62 | 55 | } |
| 63 | 56 | |
| 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 && '' == this.props.chart['visualizer-settings'].hAxis.format ) ) { | |
| 66 | - this.props.chart['visualizer-settings'].hAxis.format = 'YYYY-MM-dd'; | |
| 67 | - } | |
| 68 | - } | |
| 69 | - | |
| 70 | 57 | return ( |
| 71 | 58 | <div className={ this.props.className }> |
| 72 | 59 | |
| 73 | 60 | { ( null !== this.props.chart ) && |
| @@ -87,9 +74,9 @@ | ||
| 87 | 74 | </Tooltip> |
| 88 | 75 | </Toolbar> |
| 89 | 76 | </BlockControls> |
| 90 | 77 | |
| 91 | - { ( 'DataTable' === data['visualizer-chart-library']) ? ( | |
| 78 | + { ( 'dataTable' === chart ) ? ( | |
| 92 | 79 | <DataTable |
| 93 | 80 | id={ this.props.id } |
| 94 | 81 | rows={ data['visualizer-data'] } |
| 95 | 82 | columns={ data['visualizer-series'] } |
| @@ -96,9 +83,8 @@ | ||
| 96 | 83 | options={ data['visualizer-settings'] } |
| 97 | 84 | /> |
| 98 | 85 | ) : ( '' !== data['visualizer-data-exploded'] ? ( |
| 99 | 86 | <Chart |
| 100 | - chartVersion={ chartVersion } | |
| 101 | 87 | chartType={ chart } |
| 102 | 88 | rows={ data['visualizer-data'] } |
| 103 | 89 | columns={ data['visualizer-series'] } |
| 104 | 90 | options={ |
| @@ -106,13 +92,11 @@ | ||
| 106 | 92 | merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) : |
| 107 | 93 | compact( this.props.chart['visualizer-settings']) |
| 108 | 94 | } |
| 109 | 95 | height="500px" |
| 110 | - formatters={ formatData( data ) } | |
| 111 | 96 | /> |
| 112 | 97 | ) : ( |
| 113 | 98 | <Chart |
| 114 | - chartVersion={ chartVersion } | |
| 115 | 99 | chartType={ chart } |
| 116 | 100 | rows={ data['visualizer-data'] } |
| 117 | 101 | columns={ data['visualizer-series'] } |
| 118 | 102 | options={ |
| @@ -120,9 +104,8 @@ | ||
| 120 | 104 | merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) : |
| 121 | 105 | compact( this.props.chart['visualizer-settings']) |
| 122 | 106 | } |
| 123 | 107 | height="500px" |
| 124 | - formatters={ formatData( data ) } | |
| 125 | 108 | /> |
| 126 | 109 | ) ) } |
| 127 | 110 | |
| 128 | 111 | <div className="visualizer-settings__charts-footer"><sub> |