← All changes | classes/Visualizer/Gutenberg/src/Editor.js +166 -31 3.1.2 → 3.4.5 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,43 @@
247	338
248	339	let map = series;
249	340	let fieldName = 'series';
250	341
251		- if ( 'pie' === chart['visualizer-chart-type']) {
	342	+ if ( 'pie' === type ) {
252	343	map = chartData;
253	344	fieldName = 'slices';
254		- }
255	345
	346	+ // pie charts are finicky about a number being a number
	347	+ // and editing a number makes it a string
	348	+ // so let's convert it back into a number.
	349	+ chartData.map( ( i, index ) => {
	350	+ switch ( series[1].type ) {
	351	+ case 'number':
	352	+ i[1] = parseFloat( i[1]);
	353	+ break;
	354	+ }
	355	+ });
	356	+ }
	357	+
256	358	map.map( ( i, index ) => {
257		- if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
258		- return;
	359	+ if ( 'pie' !== type && 0 === index ) {
	360	+ return;
259	361	}
260	362
261		- const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
	363	+ const seriesIndex = 'pie' !== type ? index - 1 : index;
262	364
263	365	if ( settings[fieldName][seriesIndex] === undefined ) {
264		- settings[fieldName][seriesIndex] = {};
	366	+ settings[fieldName][seriesIndex] = {};
265	367	settings[fieldName][seriesIndex].temp = 1;
266		- }
	368	+ }
267	369	});
268	370
269	371	settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
270		- const length = 'pie' !== chart['visualizer-chart-type'] ? map.length - 1 : map.length;
	372	+ const length = -1 >= [ 'pie', 'tabular', 'dataTable' ].indexOf( type ) ? map.length - 1 : map.length;
271	373	return index < length;
272	374	});
273	375
274		- chart['visualizer-source'] = type;
	376	+ chart['visualizer-source'] = source;
275	377	chart['visualizer-default-data'] = 0;
276	378	chart['visualizer-data'] = chartData;
277	379	chart['visualizer-series'] = series;
278	380	chart['visualizer-settings'] = settings;
		@@ -299,19 +401,22 @@
299	401	if ( 'pie' === data['visualizer-chart-type']) {
300	402	fieldName = 'slices';
301	403	}
302	404
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		- );
	405	+ // no series for bubble and timeline charts.
	406	+ if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
	407	+ Object.keys( data['visualizer-settings'][fieldName])
	408	+ .map( i => {
	409	+ if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
	410	+ if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
	411	+ delete data['visualizer-settings'][fieldName][i].temp;
	412	+ }
	413	+ }
	414	+ }
	415	+ );
	416	+ }
312	417
313		- apiRequest({ path: `/visualizer/v1/update-chart?id=${this.props.attributes.id}`, method: 'POST', data: data }).then(
	418	+ apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
314	419	( data ) => {
315	420
316	421	this.setState({
317	422	isLoading: false,
		@@ -326,11 +431,24 @@
326	431	);
327	432	}
328	433
329	434	render() {
	435	+ if ( 'error' === this.state.route ) {
	436	+ return (
	437	+ <Notice
	438	+ status="error"
	439	+ isDismissible={ false }
	440	+ >
	441	+ <Dashicon icon="chart-pie" />
	442	+ { __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
	443	+ </Notice>
	444	+ );
	445	+ }
	446	+
330	447	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
331	448	return (
332	449	<ChartRender
	450	+ id={ this.props.attributes.id }
333	451	chart={ this.state.chart }
334	452	className={ this.props.className }
335	453	editChart={ this.editChart }
336	454	/>
		@@ -348,24 +466,29 @@
348	466	</div>
349	467
350	468	{ 'home' === this.state.route && (
351	469	<div className="visualizer-settings__content">
352		-
353	470	<div className="visualizer-settings__content-description">
354	471	{ __( 'Make a new chart or display an existing one?' ) }
355	472	</div>
356	473
357		- <div className="visualizer-settings__content-option locked">
	474	+ { /* You can apply "locked" class to lock any of the following list items. */ }
358	475
	476	+ <a
	477	+ href={ visualizerLocalize.adminPage }
	478	+ target="_blank"
	479	+ className="visualizer-settings__content-option"
	480	+ >
	481	+
359	482	<span className="visualizer-settings__content-option-title">
360		- { __( 'Create a new chart (coming soon)' ) }
	483	+ { __( 'Create a new chart' ) }
361	484	</span>
362	485
363	486	<div className="visualizer-settings__content-option-icon">
364		- <Dashicon icon="lock" />
	487	+ <Dashicon icon="arrow-right-alt2" />
365	488	</div>
366	489
367		- </div>
	490	+ </a>
368	491
369	492	<div
370	493	className="visualizer-settings__content-option"
371	494	onClick={ () => {
		@@ -396,8 +519,10 @@
396	519	{ ( 'showCharts' === this.state.route && false === this.state.isLoading ) && <Charts getChart={ this.getChart }/> }
397	520
398	521	{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
399	522	<ChartSelect
	523	+ id={ this.props.attributes.id }
	524	+ attributes={ this.props.attributes }
400	525	chart={ this.state.chart }
401	526	editSettings={ this.editSettings }
402	527	editPermissions={ this.editPermissions }
403	528	url={ this.state.url }
		@@ -403,8 +528,16 @@
403	528	url={ this.state.url }
404	529	readUploadedFile={ this.readUploadedFile }
405	530	editURL={ this.editURL }
406	531	editSchedule={ this.editSchedule }
	532	+ editJSONURL={ this.editJSONURL }
	533	+ editJSONHeaders={ this.editJSONHeaders }
	534	+ editJSONSchedule={ this.editJSONSchedule }
	535	+ editJSONRoot={ this.editJSONRoot }
	536	+ editJSONPaging={ this.editJSONPaging }
	537	+ JSONImportData={ this.JSONImportData }
	538	+ editDatabaseSchedule={ this.editDatabaseSchedule }
	539	+ databaseImportData={ this.databaseImportData }
407	540	uploadData={ this.uploadData }
408	541	getChartData={ this.getChartData }
409	542	editChartData={ this.editChartData }
410	543	isLoading={ this.state.isLoading }
		@@ -439,8 +572,9 @@
439	572	{ false === this.state.isModified ?
440	573	<Button
441	574	isDefault
442	575	isLarge
	576	+ className="visualizer-bttn-done"
443	577	onClick={ () => {
444	578	this.setState({ route: 'renderChart' });
445	579	this.props.setAttributes({ route: 'renderChart' });
446	580	} }
		@@ -449,8 +583,9 @@
449	583	</Button> :
450	584	<Button
451	585	isPrimary
452	586	isLarge
	587	+ className="visualizer-bttn-save"
453	588	isBusy={ 'updateChart' === this.state.isLoading }
454	589	disabled={ 'updateChart' === this.state.isLoading }
455	590	onClick={ this.updateChart }
456	591	>