← All changes | classes/Visualizer/Gutenberg/src/Components/ChartSelect.js +19 -81 3.10.0 → 3.2.0 View file →

		@@ -2,10 +2,8 @@
2	2	* External dependencies
3	3	*/
4	4	import { Chart } from 'react-google-charts';
5	5
6		-import DataTable from './DataTable.js';
7		-
8	6	import FileImport from './Import/FileImport.js';
9	7
10	8	import RemoteImport from './Import/RemoteImport.js';
11	9
		@@ -10,10 +8,8 @@
10	8	import RemoteImport from './Import/RemoteImport.js';
11	9
12	10	import ChartImport from './Import/ChartImport.js';
13	11
14		-import DataImport from './Import/DataImport.js';
15		-
16	12	import ManualData from './Import/ManualData.js';
17	13
18	14	import Sidebar from './Sidebar.js';
19	15
		@@ -22,9 +18,9 @@
22	18	import PanelButton from './PanelButton.js';
23	19
24	20	import merge from 'merge';
25	21
26		-import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
	22	+import { compact, formatDate, isValidJSON } from '../utils.js';
27	23
28	24	/**
29	25	* WordPress dependencies
30	26	*/
		@@ -36,9 +32,9 @@
36	32	Component,
37	33	Fragment
38	34	} = wp.element;
39	35
40		-const { InspectorControls } = wp.blockEditor || wp.editor;
	36	+const { InspectorControls } = wp.editor;
41	37
42	38	class ChartSelect extends Component {
43	39	constructor() {
44	40	super( ...arguments );
		@@ -56,32 +52,18 @@
56	52	}
57	53
58	54	render() {
59	55
60		- let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
	56	+ let chart;
61	57
62		- let chart, footer;
63		-
64	58	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
65	59
66		- if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
67		- if ( 'DataTable' === data['visualizer-chart-library']) {
68		- chart = data['visualizer-chart-type'];
69		- } else {
70		- chart = this.props.chart['visualizer-chart-type'];
71		- if ( 'tabular' === chart ) {
72		- chart = 'table';
73		- }
74		- chart = startCase( chart );
75		- }
	60	+ if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	61	+ chart = startCase( this.props.chart['visualizer-chart-type']);
76	62	} else {
77	63	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
78	64	}
79	65
80		- if ( data['visualizer-data-exploded']) {
81		- footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
82		- }
83		-
84	66	return (
85	67	<Fragment>
86	68	{ 'home' === this.state.route &&
87	69	<InspectorControls>
		@@ -91,35 +73,21 @@
91	73	readUploadedFile={ this.props.readUploadedFile }
92	74	/>
93	75
94	76	<RemoteImport
95		- id={ this.props.id }
96	77	chart={ this.props.chart }
97	78	editURL={ this.props.editURL }
98	79	isLoading={ this.props.isLoading }
99	80	uploadData={ this.props.uploadData }
100	81	editSchedule={ this.props.editSchedule }
101		- editJSONSchedule={ this.props.editJSONSchedule }
102		- editJSONURL={ this.props.editJSONURL }
103		- editJSONHeaders={ this.props.editJSONHeaders }
104		- editJSONRoot={ this.props.editJSONRoot }
105		- editJSONPaging={ this.props.editJSONPaging }
106		- JSONImportData={ this.props.JSONImportData }
107	82	/>
108	83
109	84	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
110	85
111		- <DataImport
112		- chart={ this.props.chart }
113		- editSchedule={ this.props.editDatabaseSchedule }
114		- databaseImportData={ this.props.databaseImportData }
115		- />
116		-
117	86	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
118	87
119	88	<PanelButton
120	89	label={ __( 'Advanced Options' ) }
121		- className="visualizer-advanced-options"
122	90	icon="admin-tools"
123	91	onClick={ () => this.setState({ route: 'showAdvanced' }) }
124	92	/>
125	93
		@@ -139,9 +107,9 @@
139	107	isBack={ true }
140	108	/>
141	109
142	110	{ 'showAdvanced' === this.state.route &&
143		- <Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
	111	+ <Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
144	112	}
145	113
146	114	{ 'showPermissions' === this.state.route &&
147	115	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
		@@ -148,53 +116,23 @@
148	116	}
149	117	</InspectorControls>
150	118	}
151	119
152		- <div className="visualizer-settings__chart" data-chart-type={ chart }>
	120	+ <div className="visualizer-settings__chart">
153	121
154	122	{ ( null !== this.props.chart ) &&
155		-
156		- ( 'DataTable' === data['visualizer-chart-library']) ? (
157		- <DataTable
158		- id={ this.props.id }
159		- rows={ data['visualizer-data'] }
160		- columns={ data['visualizer-series'] }
161		- options={ data['visualizer-settings'] }
162		- />
163		- ) : ( '' !== data['visualizer-data-exploded'] ? (
164		- <Chart
165		- chartVersion={ chartVersion }
166		- chartType={ chart }
167		- rows={ data['visualizer-data'] }
168		- columns={ data['visualizer-series'] }
169		- options={
170		- isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
171		- merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
172		- compact( this.props.chart['visualizer-settings'])
173		- }
174		- height="500px"
175		- formatters={ formatData( data ) }
176		- />
177		- ) : (
178		- <Chart
179		- chartVersion={ chartVersion }
180		- chartType={ chart }
181		- rows={ data['visualizer-data'] }
182		- columns={ data['visualizer-series'] }
183		- options={
184		- isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
185		- merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
186		- compact( this.props.chart['visualizer-settings'])
187		- }
188		- height="500px"
189		- formatters={ formatData( data ) }
190		- />
191		- )
192		- ) }
193		-
194		- <div className="visualizer-settings__charts-footer"><sub>
195		- { footer }
196		- </sub></div>
	123	+ <Chart
	124	+ chartType={ chart }
	125	+ rows={ data['visualizer-data'] }
	126	+ columns={ data['visualizer-series'] }
	127	+ options={
	128	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	129	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	130	+ compact( this.props.chart['visualizer-settings'])
	131	+ }
	132	+ height="500px"
	133	+ />
	134	+ }
197	135
198	136	</div>
199	137	</Fragment>
200	138	);