← All changes | classes/Visualizer/Gutenberg/src/Editor.js +35 -113 3.10.15 → 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() {
		@@ -123,11 +111,8 @@
123	111	}
124	112
125	113	editSettings( settings ) {
126	114	let chart = { ...this.state.chart };
127		- if ( '1' !== settings.pagination ) {
128		- delete settings.pageSize;
129		- }
130	115	chart['visualizer-settings'] = settings;
131	116	this.setState({
132	117	chart,
133	118	isModified: true
		@@ -325,13 +310,12 @@
325	310	chart
326	311	});
327	312	}
328	313
329		- editChartData( chartData, source ) {
	314	+ editChartData( chartData, type ) {
330	315	let chart = { ...this.state.chart };
331	316	let series = [];
332	317	let settings = { ...chart['visualizer-settings'] };
333		- let type = chart['visualizer-chart-type'];
334	318	chartData[0].map( ( i, index ) => {
335	319	series[index] = {
336	320	label: i,
337	321	type: chartData[1][index]
		@@ -342,64 +326,32 @@
342	326
343	327	let map = series;
344	328	let fieldName = 'series';
345	329
346		- switch ( type ) {
347		- case 'pie':
348		- map = chartData;
349		- fieldName = 'slices';
	330	+ if ( 'pie' === chart['visualizer-chart-type']) {
	331	+ map = chartData;
	332	+ fieldName = 'slices';
	333	+ }
350	334
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	335	map.map( ( i, index ) => {
382		- if ( 'pie' !== type && 0 === index ) {
383		- return;
	336	+ if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
	337	+ return;
384	338	}
385	339
386		- const seriesIndex = 'pie' !== type ? index - 1 : index;
	340	+ const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
387	341
388		- if ( Array.isArray( settings[fieldName]) && settings[fieldName][seriesIndex] === undefined ) {
389		- settings[fieldName][seriesIndex] = {};
	342	+ if ( settings[fieldName][seriesIndex] === undefined ) {
	343	+ settings[fieldName][seriesIndex] = {};
390	344	settings[fieldName][seriesIndex].temp = 1;
391		- }
	345	+ }
392	346	});
393	347
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		- }
	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	+ });
400	352
401		- chart['visualizer-source'] = source;
	353	+ chart['visualizer-source'] = type;
402	354	chart['visualizer-default-data'] = 0;
403	355	chart['visualizer-data'] = chartData;
404	356	chart['visualizer-series'] = series;
405	357	chart['visualizer-settings'] = settings;
		@@ -426,20 +378,17 @@
426	378	if ( 'pie' === data['visualizer-chart-type']) {
427	379	fieldName = 'slices';
428	380	}
429	381
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		- }
	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	+ );
442	391
443	392	apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
444	393	( data ) => {
445	394
		@@ -456,32 +405,8 @@
456	405	);
457	406	}
458	407
459	408	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	409	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
485	410	return (
486	411	<ChartRender
487	412	id={ this.props.attributes.id }
		@@ -557,9 +482,8 @@
557	482
558	483	{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
559	484	<ChartSelect
560	485	id={ this.props.attributes.id }
561		- attributes={ this.props.attributes }
562	486	chart={ this.state.chart }
563	487	editSettings={ this.editSettings }
564	488	editPermissions={ this.editPermissions }
565	489	url={ this.state.url }
		@@ -586,9 +510,9 @@
586	510	{ ( 'showCharts' === this.state.route || 'chartSelect' === this.state.route ) &&
587	511	<ButtonGroup>
588	512
589	513	<Button
590		- variant="secondary"
	514	+ isDefault
591	515	isLarge
592	516	onClick={ () => {
593	517	let route;
594	518	if ( 'showCharts' === this.state.route ) {
		@@ -595,9 +519,9 @@
595	519	route = 'home';
596	520	} else if ( 'chartSelect' === this.state.route ) {
597	521	route = 'showCharts';
598	522	}
599		- this.setState({ route, isLoading: false });
	523	+ this.setState({ route });
600	524	this.props.setAttributes({ route });
601	525	} }
602	526	>
603	527	{ __( 'Back' ) }
		@@ -607,13 +531,12 @@
607	531	<Fragment>
608	532
609	533	{ false === this.state.isModified ?
610	534	<Button
611		- variant="secondary"
	535	+ isDefault
612	536	isLarge
613		- className="visualizer-bttn-done"
614	537	onClick={ () => {
615		- this.setState({ route: 'renderChart', isModified: true });
	538	+ this.setState({ route: 'renderChart' });
616	539	this.props.setAttributes({ route: 'renderChart' });
617	540	} }
618	541	>
619	542	{ __( 'Done' ) }
		@@ -620,9 +543,8 @@
620	543	</Button> :
621	544	<Button
622	545	isPrimary
623	546	isLarge
624		- className="visualizer-bttn-save"
625	547	isBusy={ 'updateChart' === this.state.isLoading }
626	548	disabled={ 'updateChart' === this.state.isLoading }
627	549	onClick={ this.updateChart }
628	550	>