← All changes | classes/Visualizer/Gutenberg/src/Editor.js +67 -13 3.10.0 → 3.11.10 View file →

		@@ -6,9 +6,9 @@
6	6	import ChartSelect from './Components/ChartSelect.js';
7	7
8	8	import ChartRender from './Components/ChartRender.js';
9	9
10		-import { CSVToArray } from './utils.js';
	10	+import { CSVToArray, buildChartPopup, tryGetPublishedChartData } from './utils.js';
11	11
12	12	/**
13	13	* WordPress dependencies
14	14	*/
		@@ -55,8 +55,9 @@
55	55	this.uploadData = this.uploadData.bind( this );
56	56	this.getChartData = this.getChartData.bind( this );
57	57	this.editChartData = this.editChartData.bind( this );
58	58	this.updateChart = this.updateChart.bind( this );
	59	+ this.createChart = this.createChart.bind( this );
59	60
60	61	this.state = {
61	62
62	63	/**
		@@ -100,13 +101,19 @@
100	101	await this.setState({
101	102	isLoading: 'getChart'
102	103	});
103	104
104		- let result = await apiFetch({ path: `wp/v2/visualizer/${id}` });
	105	+ const chartDataRequest = await tryGetPublishedChartData( id );
105	106
	107	+ if ( 'publish' !== chartDataRequest.chartStatus ) {
	108	+ this.setState({ route: 'showCharts', isLoading: false });
	109	+ this.props.setAttributes({ route: 'showCharts' });
	110	+ return;
	111	+ }
	112	+
106	113	this.setState({
107	114	route: 'chartSelect',
108		- chart: result['chart_data'],
	115	+ chart: chartDataRequest.result['chart_data'],
109	116	isLoading: true,
110	117	isModified: true
111	118	});
112	119
		@@ -123,8 +130,11 @@
123	130	}
124	131
125	132	editSettings( settings ) {
126	133	let chart = { ...this.state.chart };
	134	+ if ( '1' !== settings.pagination ) {
	135	+ delete settings.pageSize;
	136	+ }
127	137	chart['visualizer-settings'] = settings;
128	138	this.setState({
129	139	chart,
130	140	isModified: true
		@@ -417,21 +427,24 @@
417	427	if ( false === this.state.isScheduled ) {
418	428	data['visualizer-chart-schedule'] = '';
419	429	}
420	430
421		- let fieldName = 'series';
	431	+ let dataChartStylingOption = 'series';
422	432
423	433	if ( 'pie' === data['visualizer-chart-type']) {
424		- fieldName = 'slices';
	434	+ dataChartStylingOption = 'slices';
425	435	}
426	436
427	437	// no series for bubble and timeline charts.
428		- if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
429		- Object.keys( data['visualizer-settings'][fieldName])
	438	+ if (
	439	+ undefined !== data['visualizer-settings'][dataChartStylingOption] &&
	440	+ -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type'])
	441	+ ) {
	442	+ Object.keys( data['visualizer-settings'][dataChartStylingOption])
430	443	.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;
	444	+ if ( data['visualizer-settings'][dataChartStylingOption][i] !== undefined ) {
	445	+ if ( data['visualizer-settings'][dataChartStylingOption][i].temp !== undefined ) {
	446	+ delete data['visualizer-settings'][dataChartStylingOption][i].temp;
434	447	}
435	448	}
436	449	}
437	450	);
		@@ -452,8 +465,37 @@
452	465	}
453	466	);
454	467	}
455	468
	469	+ /**
	470	+ * Create a new chart via popup.
	471	+ *
	472	+ * @returns {void}
	473	+ */
	474	+ async createChart() {
	475	+
	476	+ // Use the same popup like in Chart Library.
	477	+ const createChartPopup = new ( buildChartPopup() )({
	478	+ action: visualizerLocalize.createChart
	479	+ });
	480	+
	481	+ // eslint-disable-next-line camelcase
	482	+ window.send_to_editor = () => {
	483	+ createChartPopup.close();
	484	+ };
	485	+
	486	+ window.parent.addEventListener( 'message', ( event ) => {
	487	+ if ( 'visualizer:mediaframe:close' === event.data ) {
	488	+ createChartPopup.close();
	489	+ } else if ( event.data.chartID && null === this.state.chart ) {
	490	+ const chartID = parseInt( event.data.chartID, 10 );
	491	+ this.getChart( chartID );
	492	+ }
	493	+ }, false );
	494	+
	495	+ createChartPopup.open();
	496	+ }
	497	+
456	498	render() {
457	499	if ( 'error' === this.state.route ) {
458	500	return (
459	501	<Notice
		@@ -465,8 +507,20 @@
465	507	</Notice>
466	508	);
467	509	}
468	510
	511	+ if ( '1' === visualizerLocalize.isFullSiteEditor ) {
	512	+ return (
	513	+ <Notice
	514	+ status="error"
	515	+ isDismissible={ false }
	516	+ >
	517	+ <Dashicon icon="chart-pie" />
	518	+ { __( '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.' ) }
	519	+ </Notice>
	520	+ );
	521	+ }
	522	+
469	523	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
470	524	return (
471	525	<ChartRender
472	526	id={ this.props.attributes.id }
		@@ -495,9 +549,9 @@
495	549
496	550	{ /* You can apply "locked" class to lock any of the following list items. */ }
497	551
498	552	<a
499		- href={ visualizerLocalize.adminPage }
	553	+ onClick={ this.createChart }
500	554	target="_blank"
501	555	className="visualizer-settings__content-option"
502	556	>
503	557
		@@ -571,9 +625,9 @@
571	625	{ ( 'showCharts' === this.state.route || 'chartSelect' === this.state.route ) &&
572	626	<ButtonGroup>
573	627
574	628	<Button
575		- isDefault
	629	+ variant="secondary"
576	630	isLarge
577	631	onClick={ () => {
578	632	let route;
579	633	if ( 'showCharts' === this.state.route ) {
		@@ -592,9 +646,9 @@
592	646	<Fragment>
593	647
594	648	{ false === this.state.isModified ?
595	649	<Button
596		- isDefault
	650	+ variant="secondary"
597	651	isLarge
598	652	className="visualizer-bttn-done"
599	653	onClick={ () => {
600	654	this.setState({ route: 'renderChart', isModified: true });