← All changes | classes/Visualizer/Gutenberg/src/Editor.js +163 -30 3.1.3 → 3.4.4 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 ) {
		@@ -138,11 +156,83 @@
138	156
139	157	editSchedule( schedule ) {
140	158	let chart = { ...this.state.chart };
141	159	chart['visualizer-chart-schedule'] = schedule;
	160	+ this.setState({
	161	+ chart,
	162	+ isModified: true
	163	+ });
	164	+ }
	165	+
	166	+ editJSONSchedule( schedule ) {
	167	+ let chart = { ...this.state.chart };
	168	+ chart['visualizer-json-schedule'] = schedule;
	169	+ this.setState({
	170	+ chart,
	171	+ isModified: true
	172	+ });
	173	+ }
	174	+
	175	+ editJSONURL( url ) {
	176	+ let chart = { ...this.state.chart };
	177	+ chart['visualizer-json-url'] = url;
142	178	this.setState({ chart });
143	179	}
144	180
	181	+ editJSONHeaders( headers ) {
	182	+ let chart = { ...this.state.chart };
	183	+ delete headers.username;
	184	+ delete headers.password;
	185	+ chart['visualizer-json-headers'] = headers;
	186	+ this.setState({ chart });
	187	+ }
	188	+
	189	+ editJSONRoot( root ) {
	190	+ let chart = { ...this.state.chart };
	191	+ chart['visualizer-json-root'] = root;
	192	+ this.setState({ chart });
	193	+ }
	194	+
	195	+ editJSONPaging( root ) {
	196	+ let chart = { ...this.state.chart };
	197	+ chart['visualizer-json-paging'] = root;
	198	+ this.setState({ chart });
	199	+ }
	200	+
	201	+ JSONImportData( name, series, data ) {
	202	+ let chart = { ...this.state.chart };
	203	+ chart['visualizer-source'] = name;
	204	+ chart['visualizer-default-data'] = 0;
	205	+ chart['visualizer-series'] = series;
	206	+ chart['visualizer-data'] = data;
	207	+ this.setState({
	208	+ chart,
	209	+ isModified: true
	210	+ });
	211	+ }
	212	+
	213	+ editDatabaseSchedule( schedule ) {
	214	+ let chart = { ...this.state.chart };
	215	+ chart['visualizer-db-schedule'] = schedule;
	216	+ this.setState({
	217	+ chart,
	218	+ isModified: true
	219	+ });
	220	+ }
	221	+
	222	+ databaseImportData( query, name, series, data ) {
	223	+ let chart = { ...this.state.chart };
	224	+ chart['visualizer-source'] = name;
	225	+ chart['visualizer-default-data'] = 0;
	226	+ chart['visualizer-series'] = series;
	227	+ chart['visualizer-data'] = data;
	228	+ chart['visualizer-db-query'] = query;
	229	+ this.setState({
	230	+ chart,
	231	+ isModified: true
	232	+ });
	233	+ }
	234	+
145	235	uploadData( scheduled = false ) {
146	236	this.setState({
147	237	isLoading: 'uploadData',
148	238	isScheduled: scheduled
		@@ -230,13 +320,13 @@
230	320	chart
231	321	});
232	322	}
233	323
234		- editChartData( chartData, type ) {
	324	+ editChartData( chartData, source ) {
235	325	let chart = { ...this.state.chart };
236	326	let series = [];
237	327	let settings = { ...chart['visualizer-settings'] };
238		-
	328	+ let type = chart['visualizer-chart-type'];
239	329	chartData[0].map( ( i, index ) => {
240	330	series[index] = {
241	331	label: i,
242	332	type: chartData[1][index]
		@@ -247,32 +337,43 @@
247	337
248	338	let map = series;
249	339	let fieldName = 'series';
250	340
251		- if ( 'pie' === chart['visualizer-chart-type']) {
	341	+ if ( 'pie' === type ) {
252	342	map = chartData;
253	343	fieldName = 'slices';
254		- }
255	344
	345	+ // pie charts are finicky about a number being a number
	346	+ // and editing a number makes it a string
	347	+ // so let's convert it back into a number.
	348	+ chartData.map( ( i, index ) => {
	349	+ switch ( series[1].type ) {
	350	+ case 'number':
	351	+ i[1] = parseFloat( i[1]);
	352	+ break;
	353	+ }
	354	+ });
	355	+ }
	356	+
256	357	map.map( ( i, index ) => {
257		- if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
258		- return;
	358	+ if ( 'pie' !== type && 0 === index ) {
	359	+ return;
259	360	}
260	361
261		- const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
	362	+ const seriesIndex = 'pie' !== type ? index - 1 : index;
262	363
263	364	if ( settings[fieldName][seriesIndex] === undefined ) {
264		- settings[fieldName][seriesIndex] = {};
	365	+ settings[fieldName][seriesIndex] = {};
265	366	settings[fieldName][seriesIndex].temp = 1;
266		- }
	367	+ }
267	368	});
268	369
269	370	settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
270		- const length = 'pie' !== chart['visualizer-chart-type'] ? map.length - 1 : map.length;
	371	+ const length = -1 >= [ 'pie', 'tabular', 'dataTable' ].indexOf( type ) ? map.length - 1 : map.length;
271	372	return index < length;
272	373	});
273	374
274		- chart['visualizer-source'] = type;
	375	+ chart['visualizer-source'] = source;
275	376	chart['visualizer-default-data'] = 0;
276	377	chart['visualizer-data'] = chartData;
277	378	chart['visualizer-series'] = series;
278	379	chart['visualizer-settings'] = settings;
		@@ -299,19 +400,22 @@
299	400	if ( 'pie' === data['visualizer-chart-type']) {
300	401	fieldName = 'slices';
301	402	}
302	403
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		- );
	404	+ // no series for bubble and timeline charts.
	405	+ if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
	406	+ Object.keys( data['visualizer-settings'][fieldName])
	407	+ .map( i => {
	408	+ if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
	409	+ if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
	410	+ delete data['visualizer-settings'][fieldName][i].temp;
	411	+ }
	412	+ }
	413	+ }
	414	+ );
	415	+ }
312	416
313		- apiRequest({ path: `/visualizer/v1/update-chart?id=${this.props.attributes.id}`, method: 'POST', data: data }).then(
	417	+ apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
314	418	( data ) => {
315	419
316	420	this.setState({
317	421	isLoading: false,
		@@ -326,11 +430,24 @@
326	430	);
327	431	}
328	432
329	433	render() {
	434	+ if ( 'error' === this.state.route ) {
	435	+ return (
	436	+ <Notice
	437	+ status="error"
	438	+ isDismissible={ false }
	439	+ >
	440	+ <Dashicon icon="chart-pie" />
	441	+ { __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
	442	+ </Notice>
	443	+ );
	444	+ }
	445	+
330	446	if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
331	447	return (
332	448	<ChartRender
	449	+ id={ this.props.attributes.id }
333	450	chart={ this.state.chart }
334	451	className={ this.props.className }
335	452	editChart={ this.editChart }
336	453	/>
		@@ -348,24 +465,29 @@
348	465	</div>
349	466
350	467	{ 'home' === this.state.route && (
351	468	<div className="visualizer-settings__content">
352		-
353	469	<div className="visualizer-settings__content-description">
354	470	{ __( 'Make a new chart or display an existing one?' ) }
355	471	</div>
356	472
357		- <div className="visualizer-settings__content-option locked">
	473	+ { /* You can apply "locked" class to lock any of the following list items. */ }
358	474
	475	+ <a
	476	+ href={ visualizerLocalize.adminPage }
	477	+ target="_blank"
	478	+ className="visualizer-settings__content-option"
	479	+ >
	480	+
359	481	<span className="visualizer-settings__content-option-title">
360		- { __( 'Create a new chart (coming soon)' ) }
	482	+ { __( 'Create a new chart' ) }
361	483	</span>
362	484
363	485	<div className="visualizer-settings__content-option-icon">
364		- <Dashicon icon="lock" />
	486	+ <Dashicon icon="arrow-right-alt2" />
365	487	</div>
366	488
367		- </div>
	489	+ </a>
368	490
369	491	<div
370	492	className="visualizer-settings__content-option"
371	493	onClick={ () => {
		@@ -396,8 +518,9 @@
396	518	{ ( 'showCharts' === this.state.route && false === this.state.isLoading ) && <Charts getChart={ this.getChart }/> }
397	519
398	520	{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
399	521	<ChartSelect
	522	+ id={ this.props.attributes.id }
400	523	chart={ this.state.chart }
401	524	editSettings={ this.editSettings }
402	525	editPermissions={ this.editPermissions }
403	526	url={ this.state.url }
		@@ -403,8 +526,16 @@
403	526	url={ this.state.url }
404	527	readUploadedFile={ this.readUploadedFile }
405	528	editURL={ this.editURL }
406	529	editSchedule={ this.editSchedule }
	530	+ editJSONURL={ this.editJSONURL }
	531	+ editJSONHeaders={ this.editJSONHeaders }
	532	+ editJSONSchedule={ this.editJSONSchedule }
	533	+ editJSONRoot={ this.editJSONRoot }
	534	+ editJSONPaging={ this.editJSONPaging }
	535	+ JSONImportData={ this.JSONImportData }
	536	+ editDatabaseSchedule={ this.editDatabaseSchedule }
	537	+ databaseImportData={ this.databaseImportData }
407	538	uploadData={ this.uploadData }
408	539	getChartData={ this.getChartData }
409	540	editChartData={ this.editChartData }
410	541	isLoading={ this.state.isLoading }
		@@ -439,8 +570,9 @@
439	570	{ false === this.state.isModified ?
440	571	<Button
441	572	isDefault
442	573	isLarge
	574	+ className="visualizer-bttn-done"
443	575	onClick={ () => {
444	576	this.setState({ route: 'renderChart' });
445	577	this.props.setAttributes({ route: 'renderChart' });
446	578	} }
		@@ -449,8 +581,9 @@
449	581	</Button> :
450	582	<Button
451	583	isPrimary
452	584	isLarge
	585	+ className="visualizer-bttn-save"
453	586	isBusy={ 'updateChart' === this.state.isLoading }
454	587	disabled={ 'updateChart' === this.state.isLoading }
455	588	onClick={ this.updateChart }
456	589	>