← All changes | classes/Visualizer/Gutenberg/src/Components/ChartSelect.js +11 -58 3.10.12 → 3.3.4 View file →

		@@ -10,10 +10,8 @@
10	10	import RemoteImport from './Import/RemoteImport.js';
11	11
12	12	import ChartImport from './Import/ChartImport.js';
13	13
14		-import DataImport from './Import/DataImport.js';
15		-
16	14	import ManualData from './Import/ManualData.js';
17	15
18	16	import Sidebar from './Sidebar.js';
19	17
		@@ -22,9 +20,9 @@
22	20	import PanelButton from './PanelButton.js';
23	21
24	22	import merge from 'merge';
25	23
26		-import { compact, formatDate, isValidJSON, formatData, googleChartPackages } from '../utils.js';
	24	+import { compact, formatDate, isValidJSON } from '../utils.js';
27	25
28	26	/**
29	27	* WordPress dependencies
30	28	*/
		@@ -36,9 +34,9 @@
36	34	Component,
37	35	Fragment
38	36	} = wp.element;
39	37
40		-const { InspectorControls } = wp.blockEditor || wp.editor;
	38	+const { InspectorControls } = wp.editor;
41	39
42	40	class ChartSelect extends Component {
43	41	constructor() {
44	42	super( ...arguments );
		@@ -55,32 +53,23 @@
55	53	};
56	54	}
57	55
58	56	render() {
59		- let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
60	57
61		- let chart, footer;
	58	+ let chart;
62	59
63	60	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
64	61
65		- if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
66		- if ( 'DataTable' === data['visualizer-chart-library']) {
	62	+ if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	63	+ if ( 'dataTable' === data['visualizer-chart-type']) {
67	64	chart = data['visualizer-chart-type'];
68	65	} else {
69		- chart = this.props.chart['visualizer-chart-type'];
70		- if ( 'tabular' === chart ) {
71		- chart = 'table';
72		- }
73		- chart = startCase( chart );
	66	+ chart = startCase( this.props.chart['visualizer-chart-type']);
74	67	}
75	68	} else {
76	69	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
77	70	}
78	71
79		- if ( data['visualizer-data-exploded']) {
80		- footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
81		- }
82		-
83	72	return (
84	73	<Fragment>
85	74	{ 'home' === this.state.route &&
86	75	<InspectorControls>
		@@ -90,35 +79,21 @@
90	79	readUploadedFile={ this.props.readUploadedFile }
91	80	/>
92	81
93	82	<RemoteImport
94		- id={ this.props.id }
95	83	chart={ this.props.chart }
96	84	editURL={ this.props.editURL }
97	85	isLoading={ this.props.isLoading }
98	86	uploadData={ this.props.uploadData }
99	87	editSchedule={ this.props.editSchedule }
100		- editJSONSchedule={ this.props.editJSONSchedule }
101		- editJSONURL={ this.props.editJSONURL }
102		- editJSONHeaders={ this.props.editJSONHeaders }
103		- editJSONRoot={ this.props.editJSONRoot }
104		- editJSONPaging={ this.props.editJSONPaging }
105		- JSONImportData={ this.props.JSONImportData }
106	88	/>
107	89
108	90	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
109	91
110		- <DataImport
111		- chart={ this.props.chart }
112		- editSchedule={ this.props.editDatabaseSchedule }
113		- databaseImportData={ this.props.databaseImportData }
114		- />
115		-
116	92	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
117	93
118	94	<PanelButton
119	95	label={ __( 'Advanced Options' ) }
120		- className="visualizer-advanced-options"
121	96	icon="admin-tools"
122	97	onClick={ () => this.setState({ route: 'showAdvanced' }) }
123	98	/>
124	99
		@@ -138,9 +113,9 @@
138	113	isBack={ true }
139	114	/>
140	115
141	116	{ 'showAdvanced' === this.state.route &&
142		- <Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
	117	+ <Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
143	118	}
144	119
145	120	{ 'showPermissions' === this.state.route &&
146	121	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
		@@ -147,13 +122,13 @@
147	122	}
148	123	</InspectorControls>
149	124	}
150	125
151		- <div className="visualizer-settings__chart" data-chart-type={ chart }>
	126	+ <div className="visualizer-settings__chart">
152	127
153	128	{ ( null !== this.props.chart ) &&
154	129
155		- ( 'DataTable' === data['visualizer-chart-library']) ? (
	130	+ ( 'dataTable' === chart ) ? (
156	131	<DataTable
157	132	id={ this.props.id }
158	133	rows={ data['visualizer-data'] }
159	134	columns={ data['visualizer-series'] }
		@@ -158,11 +133,10 @@
158	133	rows={ data['visualizer-data'] }
159	134	columns={ data['visualizer-series'] }
160	135	options={ data['visualizer-settings'] }
161	136	/>
162		- ) : ( '' !== data['visualizer-data-exploded'] ? (
	137	+ ) : (
163	138	<Chart
164		- chartVersion={ chartVersion }
165	139	chartType={ chart }
166	140	rows={ data['visualizer-data'] }
167	141	columns={ data['visualizer-series'] }
168	142	options={
		@@ -170,32 +144,11 @@
170	144	merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
171	145	compact( this.props.chart['visualizer-settings'])
172	146	}
173	147	height="500px"
174		- formatters={ formatData( data ) }
175		- chartPackages={ googleChartPackages }
176	148	/>
177		- ) : (
178		- <Chart
179		- chartVersion={ chartVersion }
180		- chartType={ chart }
181		- rows={ data['visualizer-data'] }
182		- columns={ data['visualizer-series'] }
183		- options={
184		- isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
185		- merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
186		- compact( this.props.chart['visualizer-settings'])
187		- }
188		- height="500px"
189		- formatters={ formatData( data ) }
190		- chartPackages={ googleChartPackages }
191		- />
192	149	)
193		- ) }
194		-
195		- <div className="visualizer-settings__charts-footer"><sub>
196		- { footer }
197		- </sub></div>
	150	+ }
198	151
199	152	</div>
200	153	</Fragment>
201	154	);