← All changes | classes/Visualizer/Gutenberg/src/Editor.js +40 -212 3.10.4 → 3.2.0 View file →

		@@ -28,9 +28,8 @@
28	28	Button,
29	29	ButtonGroup,
30	30	Dashicon,
31	31	Placeholder,
32		- Notice,
33	32	Spinner
34	33	} = wp.components;
35	34
36	35	class Editor extends Component {
		@@ -43,16 +42,8 @@
43	42	this.editPermissions = this.editPermissions.bind( this );
44	43	this.readUploadedFile = this.readUploadedFile.bind( this );
45	44	this.editURL = this.editURL.bind( this );
46	45	this.editSchedule = this.editSchedule.bind( this );
47		- this.editJSONSchedule = this.editJSONSchedule.bind( this );
48		- this.editJSONURL = this.editJSONURL.bind( this );
49		- this.editJSONHeaders = this.editJSONHeaders.bind( this );
50		- this.editJSONRoot = this.editJSONRoot.bind( this );
51		- this.editJSONPaging = this.editJSONPaging.bind( this );
52		- this.JSONImportData = this.JSONImportData.bind( this );
53		- this.editDatabaseSchedule = this.editDatabaseSchedule.bind( this );
54		- this.databaseImportData = this.databaseImportData.bind( this );
55	46	this.uploadData = this.uploadData.bind( this );
56	47	this.getChartData = this.getChartData.bind( this );
57	48	this.editChartData = this.editChartData.bind( this );
58	49	this.updateChart = this.updateChart.bind( this );
		@@ -78,22 +69,13 @@
78	69	async componentDidMount() {
79	70
80	71	// Fetch review again if block loaded after saving.
81	72	if ( this.props.attributes.id ) {
82		- let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` }).catch( function( error ) {
83		- });
	73	+ let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` });
84	74
85		- if ( result ) {
86		- this.setState({
87		- chart: result['chart_data']
88		- });
89		- } else {
90		-
91		- // if the chart is not found.
92		- this.setState({
93		- route: 'error'
94		- });
95		- }
	75	+ this.setState({
	76	+ chart: result['chart_data']
	77	+ });
96	78	}
97	79	}
98	80
99	81	async getChart( id ) {
		@@ -105,16 +87,14 @@
105	87
106	88	this.setState({
107	89	route: 'chartSelect',
108	90	chart: result['chart_data'],
109		- isLoading: true,
110		- isModified: true
	91	+ isLoading: false
111	92	});
112	93
113	94	this.props.setAttributes({
114	95	id,
115		- route: 'chartSelect',
116		- lazy: -1
	96	+ route: 'chartSelect'
117	97	});
118	98	}
119	99
120	100	editChart() {
		@@ -123,11 +103,8 @@
123	103	}
124	104
125	105	editSettings( settings ) {
126	106	let chart = { ...this.state.chart };
127		- if ( '1' !== settings.pagination ) {
128		- delete settings.pageSize;
129		- }
130	107	chart['visualizer-settings'] = settings;
131	108	this.setState({
132	109	chart,
133	110	isModified: true
		@@ -161,83 +138,11 @@
161	138
162	139	editSchedule( schedule ) {
163	140	let chart = { ...this.state.chart };
164	141	chart['visualizer-chart-schedule'] = schedule;
165		- this.setState({
166		- chart,
167		- isModified: true
168		- });
169		- }
170		-
171		- editJSONSchedule( schedule ) {
172		- let chart = { ...this.state.chart };
173		- chart['visualizer-json-schedule'] = schedule;
174		- this.setState({
175		- chart,
176		- isModified: true
177		- });
178		- }
179		-
180		- editJSONURL( url ) {
181		- let chart = { ...this.state.chart };
182		- chart['visualizer-json-url'] = url;
183	142	this.setState({ chart });
184	143	}
185	144
186		- editJSONHeaders( headers ) {
187		- let chart = { ...this.state.chart };
188		- delete headers.username;
189		- delete headers.password;
190		- chart['visualizer-json-headers'] = headers;
191		- this.setState({ chart });
192		- }
193		-
194		- editJSONRoot( root ) {
195		- let chart = { ...this.state.chart };
196		- chart['visualizer-json-root'] = root;
197		- this.setState({ chart });
198		- }
199		-
200		- editJSONPaging( root ) {
201		- let chart = { ...this.state.chart };
202		- chart['visualizer-json-paging'] = root;
203		- this.setState({ chart });
204		- }
205		-
206		- JSONImportData( name, series, data ) {
207		- let chart = { ...this.state.chart };
208		- chart['visualizer-source'] = name;
209		- chart['visualizer-default-data'] = 0;
210		- chart['visualizer-series'] = series;
211		- chart['visualizer-data'] = data;
212		- this.setState({
213		- chart,
214		- isModified: true
215		- });
216		- }
217		-
218		- editDatabaseSchedule( schedule ) {
219		- let chart = { ...this.state.chart };
220		- chart['visualizer-db-schedule'] = schedule;
221		- this.setState({
222		- chart,
223		- isModified: true
224		- });
225		- }
226		-
227		- databaseImportData( query, name, series, data ) {
228		- let chart = { ...this.state.chart };
229		- chart['visualizer-source'] = name;
230		- chart['visualizer-default-data'] = 0;
231		- chart['visualizer-series'] = series;
232		- chart['visualizer-data'] = data;
233		- chart['visualizer-db-query'] = query;
234		- this.setState({
235		- chart,
236		- isModified: true
237		- });
238		- }
239		-
240	145	uploadData( scheduled = false ) {
241	146	this.setState({
242	147	isLoading: 'uploadData',
243	148	isScheduled: scheduled
		@@ -325,13 +230,13 @@
325	230	chart
326	231	});
327	232	}
328	233
329		- editChartData( chartData, source ) {
	234	+ editChartData( chartData, type ) {
330	235	let chart = { ...this.state.chart };
331	236	let series = [];
332	237	let settings = { ...chart['visualizer-settings'] };
333		- let type = chart['visualizer-chart-type'];
	238	+
334	239	chartData[0].map( ( i, index ) => {
335	240	series[index] = {
336	241	label: i,
337	242	type: chartData[1][index]
		@@ -342,64 +247,32 @@
342	247
343	248	let map = series;
344	249	let fieldName = 'series';
345	250
346		- switch ( type ) {
347		- case 'pie':
348		- map = chartData;
349		- fieldName = 'slices';
	251	+ if ( 'pie' === chart['visualizer-chart-type']) {
	252	+ map = chartData;
	253	+ fieldName = 'slices';
	254	+ }
350	255
351		- // pie charts are finicky about a number being a number
352		- // and editing a number makes it a string
353		- // so let's convert it back into a number.
354		- chartData.map( ( i, index ) => {
355		- switch ( series[1].type ) {
356		- case 'number':
357		- i[1] = parseFloat( i[1]);
358		- break;
359		- }
360		- });
361		- break;
362		- case 'tabular':
363		-
364		- // table charts are finicky about a boolean being a boolean
365		- // and editing a boolean makes it a string
366		- // so let's convert it back into a boolean.
367		- chartData.map( ( i, index ) => {
368		- series.map( ( seriesObject, seriesIndex ) => {
369		- switch ( seriesObject.type ) {
370		- case 'boolean':
371		- if ( 'string' === typeof i[seriesIndex]) {
372		- i[seriesIndex] = 'true' === i[seriesIndex];
373		- }
374		- break;
375		- }
376		- });
377		- });
378		- break;
379		- }
380		-
381	256	map.map( ( i, index ) => {
382		- if ( 'pie' !== type && 0 === index ) {
383		- return;
	257	+ if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
	258	+ return;
384	259	}
385	260
386		- const seriesIndex = 'pie' !== type ? index - 1 : index;
	261	+ const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
387	262
388		- if ( Array.isArray( settings[fieldName]) && settings[fieldName][seriesIndex] === undefined ) {
389		- settings[fieldName][seriesIndex] = {};
	263	+ if ( settings[fieldName][seriesIndex] === undefined ) {
	264	+ settings[fieldName][seriesIndex] = {};
390	265	settings[fieldName][seriesIndex].temp = 1;
391		- }
	266	+ }
392	267	});
393	268
394		- if ( Array.isArray( settings[fieldName]) ) {
395		- settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
396		- const length = -1 >= [ 'pie', 'tabular', 'dataTable' ].indexOf( type ) ? map.length - 1 : map.length;
397		- return index < length;
398		- });
399		- }
	269	+ settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
	270	+ const length = 'pie' !== chart['visualizer-chart-type'] ? map.length - 1 : map.length;
	271	+ return index < length;
	272	+ });
400	273
401		- chart['visualizer-source'] = source;
	274	+ chart['visualizer-source'] = type;
402	275	chart['visualizer-default-data'] = 0;
403	276	chart['visualizer-data'] = chartData;
404	277	chart['visualizer-series'] = series;
405	278	chart['visualizer-settings'] = settings;
		@@ -426,22 +299,19 @@
426	299	if ( 'pie' === data['visualizer-chart-type']) {
427	300	fieldName = 'slices';
428	301	}
429	302
430		- // no series for bubble and timeline charts.
431		- if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
432		- Object.keys( data['visualizer-settings'][fieldName])
433		- .map( i => {
434		- if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
435		- if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
436		- delete data['visualizer-settings'][fieldName][i].temp;
437		- }
438		- }
439		- }
440		- );
441		- }
	303	+ Object.keys( data['visualizer-settings'][fieldName])
	304	+ .map( i => {
	305	+ if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
	306	+ if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
	307	+ delete data['visualizer-settings'][fieldName][i].temp;
	308	+ }
	309	+ }
	310	+ }
	311	+ );
442	312
443		- apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
	313	+ apiRequest({ path: `/visualizer/v1/update-chart?id=${this.props.attributes.id}`, method: 'POST', data: data }).then(
444	314	( data ) => {
445	315
446	316	this.setState({
447	317	isLoading: false,
		@@ -456,36 +326,11 @@
456	326	);
457	327	}
458	328
459	329	render() {
460		- if ( 'error' === this.state.route ) {
461		- return (
462		- <Notice
463		- status="error"
464		- isDismissible={ false }
465		- >
466		- <Dashicon icon="chart-pie" />
467		- { __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
468		- </Notice>
469		- );
470		- }
471		-
472		- if ( '1' === visualizerLocalize.isFullSiteEditor ) {
473		- return (
474		- <Notice
475		- status="error"
476		- isDismissible={ false }
477		- >
478		- <Dashicon icon="chart-pie" />
479		- { __( 'Visualizer block charts are currently not available for selection here, you must visit the library, get the shortcode, and add the chart here in a shortcode tag.' ) }
480		- </Notice>
481		- );
482		- }
483		-
484	330	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
485	331	return (
486	332	<ChartRender
487		- id={ this.props.attributes.id }
488	333	chart={ this.state.chart }
489	334	className={ this.props.className }
490	335	editChart={ this.editChart }
491	336	/>
		@@ -503,29 +348,24 @@
503	348	</div>
504	349
505	350	{ 'home' === this.state.route && (
506	351	<div className="visualizer-settings__content">
	352	+
507	353	<div className="visualizer-settings__content-description">
508	354	{ __( 'Make a new chart or display an existing one?' ) }
509	355	</div>
510	356
511		- { /* You can apply "locked" class to lock any of the following list items. */ }
	357	+ <div className="visualizer-settings__content-option locked">
512	358
513		- <a
514		- href={ visualizerLocalize.adminPage }
515		- target="_blank"
516		- className="visualizer-settings__content-option"
517		- >
518		-
519	359	<span className="visualizer-settings__content-option-title">
520		- { __( 'Create a new chart' ) }
	360	+ { __( 'Create a new chart (coming soon)' ) }
521	361	</span>
522	362
523	363	<div className="visualizer-settings__content-option-icon">
524		- <Dashicon icon="arrow-right-alt2" />
	364	+ <Dashicon icon="lock" />
525	365	</div>
526	366
527		- </a>
	367	+ </div>
528	368
529	369	<div
530	370	className="visualizer-settings__content-option"
531	371	onClick={ () => {
		@@ -556,10 +396,8 @@
556	396	{ ( 'showCharts' === this.state.route && false === this.state.isLoading ) && <Charts getChart={ this.getChart }/> }
557	397
558	398	{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
559	399	<ChartSelect
560		- id={ this.props.attributes.id }
561		- attributes={ this.props.attributes }
562	400	chart={ this.state.chart }
563	401	editSettings={ this.editSettings }
564	402	editPermissions={ this.editPermissions }
565	403	url={ this.state.url }
		@@ -565,16 +403,8 @@
565	403	url={ this.state.url }
566	404	readUploadedFile={ this.readUploadedFile }
567	405	editURL={ this.editURL }
568	406	editSchedule={ this.editSchedule }
569		- editJSONURL={ this.editJSONURL }
570		- editJSONHeaders={ this.editJSONHeaders }
571		- editJSONSchedule={ this.editJSONSchedule }
572		- editJSONRoot={ this.editJSONRoot }
573		- editJSONPaging={ this.editJSONPaging }
574		- JSONImportData={ this.JSONImportData }
575		- editDatabaseSchedule={ this.editDatabaseSchedule }
576		- databaseImportData={ this.databaseImportData }
577	407	uploadData={ this.uploadData }
578	408	getChartData={ this.getChartData }
579	409	editChartData={ this.editChartData }
580	410	isLoading={ this.state.isLoading }
		@@ -595,9 +425,9 @@
595	425	route = 'home';
596	426	} else if ( 'chartSelect' === this.state.route ) {
597	427	route = 'showCharts';
598	428	}
599		- this.setState({ route, isLoading: false });
	429	+ this.setState({ route });
600	430	this.props.setAttributes({ route });
601	431	} }
602	432	>
603	433	{ __( 'Back' ) }
		@@ -609,11 +439,10 @@
609	439	{ false === this.state.isModified ?
610	440	<Button
611	441	isDefault
612	442	isLarge
613		- className="visualizer-bttn-done"
614	443	onClick={ () => {
615		- this.setState({ route: 'renderChart', isModified: true });
	444	+ this.setState({ route: 'renderChart' });
616	445	this.props.setAttributes({ route: 'renderChart' });
617	446	} }
618	447	>
619	448	{ __( 'Done' ) }
		@@ -620,9 +449,8 @@
620	449	</Button> :
621	450	<Button
622	451	isPrimary
623	452	isLarge
624		- className="visualizer-bttn-save"
625	453	isBusy={ 'updateChart' === this.state.isLoading }
626	454	disabled={ 'updateChart' === this.state.isLoading }
627	455	onClick={ this.updateChart }
628	456	>