← All changes | classes/Visualizer/Gutenberg/src/Editor.js +40 -197 3.10.0 → 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() {
		@@ -158,83 +138,11 @@
158	138
159	139	editSchedule( schedule ) {
160	140	let chart = { ...this.state.chart };
161	141	chart['visualizer-chart-schedule'] = schedule;
162		- this.setState({
163		- chart,
164		- isModified: true
165		- });
166		- }
167		-
168		- editJSONSchedule( schedule ) {
169		- let chart = { ...this.state.chart };
170		- chart['visualizer-json-schedule'] = schedule;
171		- this.setState({
172		- chart,
173		- isModified: true
174		- });
175		- }
176		-
177		- editJSONURL( url ) {
178		- let chart = { ...this.state.chart };
179		- chart['visualizer-json-url'] = url;
180	142	this.setState({ chart });
181	143	}
182	144
183		- editJSONHeaders( headers ) {
184		- let chart = { ...this.state.chart };
185		- delete headers.username;
186		- delete headers.password;
187		- chart['visualizer-json-headers'] = headers;
188		- this.setState({ chart });
189		- }
190		-
191		- editJSONRoot( root ) {
192		- let chart = { ...this.state.chart };
193		- chart['visualizer-json-root'] = root;
194		- this.setState({ chart });
195		- }
196		-
197		- editJSONPaging( root ) {
198		- let chart = { ...this.state.chart };
199		- chart['visualizer-json-paging'] = root;
200		- this.setState({ chart });
201		- }
202		-
203		- JSONImportData( name, series, data ) {
204		- let chart = { ...this.state.chart };
205		- chart['visualizer-source'] = name;
206		- chart['visualizer-default-data'] = 0;
207		- chart['visualizer-series'] = series;
208		- chart['visualizer-data'] = data;
209		- this.setState({
210		- chart,
211		- isModified: true
212		- });
213		- }
214		-
215		- editDatabaseSchedule( schedule ) {
216		- let chart = { ...this.state.chart };
217		- chart['visualizer-db-schedule'] = schedule;
218		- this.setState({
219		- chart,
220		- isModified: true
221		- });
222		- }
223		-
224		- databaseImportData( query, name, series, data ) {
225		- let chart = { ...this.state.chart };
226		- chart['visualizer-source'] = name;
227		- chart['visualizer-default-data'] = 0;
228		- chart['visualizer-series'] = series;
229		- chart['visualizer-data'] = data;
230		- chart['visualizer-db-query'] = query;
231		- this.setState({
232		- chart,
233		- isModified: true
234		- });
235		- }
236		-
237	145	uploadData( scheduled = false ) {
238	146	this.setState({
239	147	isLoading: 'uploadData',
240	148	isScheduled: scheduled
		@@ -322,13 +230,13 @@
322	230	chart
323	231	});
324	232	}
325	233
326		- editChartData( chartData, source ) {
	234	+ editChartData( chartData, type ) {
327	235	let chart = { ...this.state.chart };
328	236	let series = [];
329	237	let settings = { ...chart['visualizer-settings'] };
330		- let type = chart['visualizer-chart-type'];
	238	+
331	239	chartData[0].map( ( i, index ) => {
332	240	series[index] = {
333	241	label: i,
334	242	type: chartData[1][index]
		@@ -339,64 +247,32 @@
339	247
340	248	let map = series;
341	249	let fieldName = 'series';
342	250
343		- switch ( type ) {
344		- case 'pie':
345		- map = chartData;
346		- fieldName = 'slices';
	251	+ if ( 'pie' === chart['visualizer-chart-type']) {
	252	+ map = chartData;
	253	+ fieldName = 'slices';
	254	+ }
347	255
348		- // pie charts are finicky about a number being a number
349		- // and editing a number makes it a string
350		- // so let's convert it back into a number.
351		- chartData.map( ( i, index ) => {
352		- switch ( series[1].type ) {
353		- case 'number':
354		- i[1] = parseFloat( i[1]);
355		- break;
356		- }
357		- });
358		- break;
359		- case 'tabular':
360		-
361		- // table charts are finicky about a boolean being a boolean
362		- // and editing a boolean makes it a string
363		- // so let's convert it back into a boolean.
364		- chartData.map( ( i, index ) => {
365		- series.map( ( seriesObject, seriesIndex ) => {
366		- switch ( seriesObject.type ) {
367		- case 'boolean':
368		- if ( 'string' === typeof i[seriesIndex]) {
369		- i[seriesIndex] = 'true' === i[seriesIndex];
370		- }
371		- break;
372		- }
373		- });
374		- });
375		- break;
376		- }
377		-
378	256	map.map( ( i, index ) => {
379		- if ( 'pie' !== type && 0 === index ) {
380		- return;
	257	+ if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
	258	+ return;
381	259	}
382	260
383		- const seriesIndex = 'pie' !== type ? index - 1 : index;
	261	+ const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
384	262
385		- if ( Array.isArray( settings[fieldName]) && settings[fieldName][seriesIndex] === undefined ) {
386		- settings[fieldName][seriesIndex] = {};
	263	+ if ( settings[fieldName][seriesIndex] === undefined ) {
	264	+ settings[fieldName][seriesIndex] = {};
387	265	settings[fieldName][seriesIndex].temp = 1;
388		- }
	266	+ }
389	267	});
390	268
391		- if ( Array.isArray( settings[fieldName]) ) {
392		- settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
393		- const length = -1 >= [ 'pie', 'tabular', 'dataTable' ].indexOf( type ) ? map.length - 1 : map.length;
394		- return index < length;
395		- });
396		- }
	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	+ });
397	273
398		- chart['visualizer-source'] = source;
	274	+ chart['visualizer-source'] = type;
399	275	chart['visualizer-default-data'] = 0;
400	276	chart['visualizer-data'] = chartData;
401	277	chart['visualizer-series'] = series;
402	278	chart['visualizer-settings'] = settings;
		@@ -423,22 +299,19 @@
423	299	if ( 'pie' === data['visualizer-chart-type']) {
424	300	fieldName = 'slices';
425	301	}
426	302
427		- // no series for bubble and timeline charts.
428		- if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
429		- Object.keys( data['visualizer-settings'][fieldName])
430		- .map( i => {
431		- if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
432		- if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
433		- delete data['visualizer-settings'][fieldName][i].temp;
434		- }
435		- }
436		- }
437		- );
438		- }
	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	+ );
439	312
440		- 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(
441	314	( data ) => {
442	315
443	316	this.setState({
444	317	isLoading: false,
		@@ -453,24 +326,11 @@
453	326	);
454	327	}
455	328
456	329	render() {
457		- if ( 'error' === this.state.route ) {
458		- return (
459		- <Notice
460		- status="error"
461		- isDismissible={ false }
462		- >
463		- <Dashicon icon="chart-pie" />
464		- { __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
465		- </Notice>
466		- );
467		- }
468		-
469	330	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
470	331	return (
471	332	<ChartRender
472		- id={ this.props.attributes.id }
473	333	chart={ this.state.chart }
474	334	className={ this.props.className }
475	335	editChart={ this.editChart }
476	336	/>
		@@ -488,29 +348,24 @@
488	348	</div>
489	349
490	350	{ 'home' === this.state.route && (
491	351	<div className="visualizer-settings__content">
	352	+
492	353	<div className="visualizer-settings__content-description">
493	354	{ __( 'Make a new chart or display an existing one?' ) }
494	355	</div>
495	356
496		- { /* You can apply "locked" class to lock any of the following list items. */ }
	357	+ <div className="visualizer-settings__content-option locked">
497	358
498		- <a
499		- href={ visualizerLocalize.adminPage }
500		- target="_blank"
501		- className="visualizer-settings__content-option"
502		- >
503		-
504	359	<span className="visualizer-settings__content-option-title">
505		- { __( 'Create a new chart' ) }
	360	+ { __( 'Create a new chart (coming soon)' ) }
506	361	</span>
507	362
508	363	<div className="visualizer-settings__content-option-icon">
509		- <Dashicon icon="arrow-right-alt2" />
	364	+ <Dashicon icon="lock" />
510	365	</div>
511	366
512		- </a>
	367	+ </div>
513	368
514	369	<div
515	370	className="visualizer-settings__content-option"
516	371	onClick={ () => {
		@@ -541,10 +396,8 @@
541	396	{ ( 'showCharts' === this.state.route && false === this.state.isLoading ) && <Charts getChart={ this.getChart }/> }
542	397
543	398	{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
544	399	<ChartSelect
545		- id={ this.props.attributes.id }
546		- attributes={ this.props.attributes }
547	400	chart={ this.state.chart }
548	401	editSettings={ this.editSettings }
549	402	editPermissions={ this.editPermissions }
550	403	url={ this.state.url }
		@@ -550,16 +403,8 @@
550	403	url={ this.state.url }
551	404	readUploadedFile={ this.readUploadedFile }
552	405	editURL={ this.editURL }
553	406	editSchedule={ this.editSchedule }
554		- editJSONURL={ this.editJSONURL }
555		- editJSONHeaders={ this.editJSONHeaders }
556		- editJSONSchedule={ this.editJSONSchedule }
557		- editJSONRoot={ this.editJSONRoot }
558		- editJSONPaging={ this.editJSONPaging }
559		- JSONImportData={ this.JSONImportData }
560		- editDatabaseSchedule={ this.editDatabaseSchedule }
561		- databaseImportData={ this.databaseImportData }
562	407	uploadData={ this.uploadData }
563	408	getChartData={ this.getChartData }
564	409	editChartData={ this.editChartData }
565	410	isLoading={ this.state.isLoading }
		@@ -580,9 +425,9 @@
580	425	route = 'home';
581	426	} else if ( 'chartSelect' === this.state.route ) {
582	427	route = 'showCharts';
583	428	}
584		- this.setState({ route, isLoading: false });
	429	+ this.setState({ route });
585	430	this.props.setAttributes({ route });
586	431	} }
587	432	>
588	433	{ __( 'Back' ) }
		@@ -594,11 +439,10 @@
594	439	{ false === this.state.isModified ?
595	440	<Button
596	441	isDefault
597	442	isLarge
598		- className="visualizer-bttn-done"
599	443	onClick={ () => {
600		- this.setState({ route: 'renderChart', isModified: true });
	444	+ this.setState({ route: 'renderChart' });
601	445	this.props.setAttributes({ route: 'renderChart' });
602	446	} }
603	447	>
604	448	{ __( 'Done' ) }
		@@ -605,9 +449,8 @@
605	449	</Button> :
606	450	<Button
607	451	isPrimary
608	452	isLarge
609		- className="visualizer-bttn-save"
610	453	isBusy={ 'updateChart' === this.state.isLoading }
611	454	disabled={ 'updateChart' === this.state.isLoading }
612	455	onClick={ this.updateChart }
613	456	>