← All changes
|
classes/Visualizer/Gutenberg/src/Components/Charts.js
+7
-19
3.10.14
→
3.4.2
View file →
| @@ -4,9 +4,9 @@ | ||
| 4 | 4 | import { Chart } from 'react-google-charts'; |
| 5 | 5 | |
| 6 | 6 | import DataTable from './DataTable.js'; |
| 7 | 7 | |
| 8 | -import { formatDate, filterCharts, formatData, googleChartPackages } from '../utils.js'; | |
| 8 | +import { formatDate, filterCharts } from '../utils.js'; | |
| 9 | 9 | |
| 10 | 10 | /** |
| 11 | 11 | * WordPress dependencies |
| 12 | 12 | */ |
| @@ -73,10 +73,8 @@ | ||
| 73 | 73 | } |
| 74 | 74 | |
| 75 | 75 | render() { |
| 76 | 76 | |
| 77 | - let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current'; | |
| 78 | - | |
| 79 | 77 | const { charts, isBusy, chartsLoaded, perPage } = this.state; |
| 80 | 78 | |
| 81 | 79 | return ( |
| 82 | 80 | <div className="visualizer-settings__charts"> |
| @@ -108,17 +106,13 @@ | ||
| 108 | 106 | } else { |
| 109 | 107 | title = `#${charts[i].id}`; |
| 110 | 108 | } |
| 111 | 109 | |
| 112 | - if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) { | |
| 113 | - if ( 'DataTable' === data['visualizer-chart-library']) { | |
| 110 | + if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( data['visualizer-chart-type']) ) { | |
| 111 | + if ( 'dataTable' === data['visualizer-chart-type']) { | |
| 114 | 112 | chart = data['visualizer-chart-type']; |
| 115 | 113 | } else { |
| 116 | - chart = data['visualizer-chart-type']; | |
| 117 | - if ( 'tabular' === chart ) { | |
| 118 | - chart = 'table'; | |
| 119 | - } | |
| 120 | - chart = startCase( chart ); | |
| 114 | + chart = startCase( data['visualizer-chart-type']); | |
| 121 | 115 | } |
| 122 | 116 | } else { |
| 123 | 117 | chart = `${ startCase( data['visualizer-chart-type']) }Chart`; |
| 124 | 118 | } |
| @@ -133,41 +127,35 @@ | ||
| 133 | 127 | footer = __( 'Annotations in this chart may not display here but they will display in the front end.' ); |
| 134 | 128 | } |
| 135 | 129 | |
| 136 | 130 | return ( |
| 137 | - <div className="visualizer-settings__charts-single" data-chart-type={ chart } key={ `chart-${ charts[i].id }` }> | |
| 131 | + <div className="visualizer-settings__charts-single" key={ `chart-${ charts[i].id }` }> | |
| 138 | 132 | |
| 139 | 133 | <div className="visualizer-settings__charts-title"> |
| 140 | 134 | { title } |
| 141 | 135 | </div> |
| 142 | 136 | |
| 143 | - { ( 'DataTable' === data['visualizer-chart-library']) ? ( | |
| 137 | + { ( 'dataTable' === chart ) ? ( | |
| 144 | 138 | <DataTable |
| 145 | 139 | id={ charts[i].id } |
| 146 | 140 | rows={ data['visualizer-data'] } |
| 147 | 141 | columns={ data['visualizer-series'] } |
| 148 | 142 | chartsScreen={ true } |
| 149 | - options={ data['visualizer-settings'] } | |
| 143 | + options={ filterCharts( data['visualizer-settings']) } | |
| 150 | 144 | /> |
| 151 | 145 | ) : ( '' !== data['visualizer-data-exploded'] ? ( |
| 152 | 146 | <Chart |
| 153 | - chartVersion={ chartVersion } | |
| 154 | 147 | chartType={ chart } |
| 155 | 148 | rows={ data['visualizer-data'] } |
| 156 | 149 | columns={ data['visualizer-series'] } |
| 157 | 150 | options={ filterCharts( data['visualizer-settings']) } |
| 158 | - formatters={ formatData( data ) } | |
| 159 | - chartPackages={ googleChartPackages } | |
| 160 | 151 | /> |
| 161 | 152 | ) : ( |
| 162 | 153 | <Chart |
| 163 | - chartVersion={ chartVersion } | |
| 164 | 154 | chartType={ chart } |
| 165 | 155 | rows={ data['visualizer-data'] } |
| 166 | 156 | columns={ data['visualizer-series'] } |
| 167 | 157 | options={ filterCharts( data['visualizer-settings']) } |
| 168 | - formatters={ formatData( data ) } | |
| 169 | - chartPackages={ googleChartPackages } | |
| 170 | 158 | /> |
| 171 | 159 | ) ) } |
| 172 | 160 | |
| 173 | 161 | <div className="visualizer-settings__charts-footer"><sub> |