← All changes | classes/Visualizer/Gutenberg/src/Editor.js +33 -96 3.10.0 → 3.4.2 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 {
		@@ -78,22 +77,13 @@
78	77	async componentDidMount() {
79	78
80	79	// Fetch review again if block loaded after saving.
81	80	if ( this.props.attributes.id ) {
82		- let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` }).catch( function( error ) {
83		- });
	81	+ let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` });
84	82
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		- }
	83	+ this.setState({
	84	+ chart: result['chart_data']
	85	+ });
96	86	}
97	87	}
98	88
99	89	async getChart( id ) {
		@@ -105,16 +95,14 @@
105	95
106	96	this.setState({
107	97	route: 'chartSelect',
108	98	chart: result['chart_data'],
109		- isLoading: true,
110		- isModified: true
	99	+ isLoading: false
111	100	});
112	101
113	102	this.props.setAttributes({
114	103	id,
115		- route: 'chartSelect',
116		- lazy: -1
	104	+ route: 'chartSelect'
117	105	});
118	106	}
119	107
120	108	editChart() {
		@@ -322,13 +310,12 @@
322	310	chart
323	311	});
324	312	}
325	313
326		- editChartData( chartData, source ) {
	314	+ editChartData( chartData, type ) {
327	315	let chart = { ...this.state.chart };
328	316	let series = [];
329	317	let settings = { ...chart['visualizer-settings'] };
330		- let type = chart['visualizer-chart-type'];
331	318	chartData[0].map( ( i, index ) => {
332	319	series[index] = {
333	320	label: i,
334	321	type: chartData[1][index]
		@@ -339,64 +326,32 @@
339	326
340	327	let map = series;
341	328	let fieldName = 'series';
342	329
343		- switch ( type ) {
344		- case 'pie':
345		- map = chartData;
346		- fieldName = 'slices';
	330	+ if ( 'pie' === chart['visualizer-chart-type']) {
	331	+ map = chartData;
	332	+ fieldName = 'slices';
	333	+ }
347	334
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	335	map.map( ( i, index ) => {
379		- if ( 'pie' !== type && 0 === index ) {
380		- return;
	336	+ if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
	337	+ return;
381	338	}
382	339
383		- const seriesIndex = 'pie' !== type ? index - 1 : index;
	340	+ const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
384	341
385		- if ( Array.isArray( settings[fieldName]) && settings[fieldName][seriesIndex] === undefined ) {
386		- settings[fieldName][seriesIndex] = {};
	342	+ if ( settings[fieldName][seriesIndex] === undefined ) {
	343	+ settings[fieldName][seriesIndex] = {};
387	344	settings[fieldName][seriesIndex].temp = 1;
388		- }
	345	+ }
389	346	});
390	347
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		- }
	348	+ settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
	349	+ const length = 'pie' !== chart['visualizer-chart-type'] ? map.length - 1 : map.length;
	350	+ return index < length;
	351	+ });
397	352
398		- chart['visualizer-source'] = source;
	353	+ chart['visualizer-source'] = type;
399	354	chart['visualizer-default-data'] = 0;
400	355	chart['visualizer-data'] = chartData;
401	356	chart['visualizer-series'] = series;
402	357	chart['visualizer-settings'] = settings;
		@@ -423,20 +378,17 @@
423	378	if ( 'pie' === data['visualizer-chart-type']) {
424	379	fieldName = 'slices';
425	380	}
426	381
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		- }
	382	+ Object.keys( data['visualizer-settings'][fieldName])
	383	+ .map( i => {
	384	+ if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
	385	+ if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
	386	+ delete data['visualizer-settings'][fieldName][i].temp;
	387	+ }
	388	+ }
	389	+ }
	390	+ );
439	391
440	392	apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
441	393	( data ) => {
442	394
		@@ -453,20 +405,8 @@
453	405	);
454	406	}
455	407
456	408	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	409	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
470	410	return (
471	411	<ChartRender
472	412	id={ this.props.attributes.id }
		@@ -542,9 +482,8 @@
542	482
543	483	{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
544	484	<ChartSelect
545	485	id={ this.props.attributes.id }
546		- attributes={ this.props.attributes }
547	486	chart={ this.state.chart }
548	487	editSettings={ this.editSettings }
549	488	editPermissions={ this.editPermissions }
550	489	url={ this.state.url }
		@@ -580,9 +519,9 @@
580	519	route = 'home';
581	520	} else if ( 'chartSelect' === this.state.route ) {
582	521	route = 'showCharts';
583	522	}
584		- this.setState({ route, isLoading: false });
	523	+ this.setState({ route });
585	524	this.props.setAttributes({ route });
586	525	} }
587	526	>
588	527	{ __( 'Back' ) }
		@@ -594,11 +533,10 @@
594	533	{ false === this.state.isModified ?
595	534	<Button
596	535	isDefault
597	536	isLarge
598		- className="visualizer-bttn-done"
599	537	onClick={ () => {
600		- this.setState({ route: 'renderChart', isModified: true });
	538	+ this.setState({ route: 'renderChart' });
601	539	this.props.setAttributes({ route: 'renderChart' });
602	540	} }
603	541	>
604	542	{ __( 'Done' ) }
		@@ -605,9 +543,8 @@
605	543	</Button> :
606	544	<Button
607	545	isPrimary
608	546	isLarge
609		- className="visualizer-bttn-save"
610	547	isBusy={ 'updateChart' === this.state.isLoading }
611	548	disabled={ 'updateChart' === this.state.isLoading }
612	549	onClick={ this.updateChart }
613	550	>