← All changes | classes/Visualizer/Gutenberg/src/Editor.js +193 -37 3.1.3 → 3.4.8 View file →

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