← All changes | classes/Visualizer/Gutenberg/src/Components/ChartSelect.js +67 -16 3.1.3 → 3.4.2 View file →

		@@ -2,8 +2,10 @@
2	2	* External dependencies
3	3	*/
4	4	import { Chart } from 'react-google-charts';
5	5
	6	+import DataTable from './DataTable.js';
	7	+
6	8	import FileImport from './Import/FileImport.js';
7	9
8	10	import RemoteImport from './Import/RemoteImport.js';
9	11
		@@ -8,8 +10,10 @@
8	10	import RemoteImport from './Import/RemoteImport.js';
9	11
10	12	import ChartImport from './Import/ChartImport.js';
11	13
	14	+import DataImport from './Import/DataImport.js';
	15	+
12	16	import ManualData from './Import/ManualData.js';
13	17
14	18	import Sidebar from './Sidebar.js';
15	19
		@@ -32,9 +36,9 @@
32	36	Component,
33	37	Fragment
34	38	} = wp.element;
35	39
36		-const { InspectorControls } = wp.editor;
	40	+const { InspectorControls } = wp.blockEditor || wp.editor;
37	41
38	42	class ChartSelect extends Component {
39	43	constructor() {
40	44	super( ...arguments );
		@@ -52,18 +56,26 @@
52	56	}
53	57
54	58	render() {
55	59
56		- let chart;
	60	+ let chart, footer;
57	61
58	62	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
59	63
60		- if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
61		- chart = startCase( this.props.chart['visualizer-chart-type']);
	64	+ if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	65	+ if ( 'dataTable' === data['visualizer-chart-type']) {
	66	+ chart = data['visualizer-chart-type'];
	67	+ } else {
	68	+ chart = startCase( this.props.chart['visualizer-chart-type']);
	69	+ }
62	70	} else {
63	71	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
64	72	}
65	73
	74	+ if ( data['visualizer-data-exploded']) {
	75	+ footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
	76	+ }
	77	+
66	78	return (
67	79	<Fragment>
68	80	{ 'home' === this.state.route &&
69	81	<InspectorControls>
		@@ -73,17 +85,30 @@
73	85	readUploadedFile={ this.props.readUploadedFile }
74	86	/>
75	87
76	88	<RemoteImport
	89	+ id={ this.props.id }
77	90	chart={ this.props.chart }
78	91	editURL={ this.props.editURL }
79	92	isLoading={ this.props.isLoading }
80	93	uploadData={ this.props.uploadData }
81	94	editSchedule={ this.props.editSchedule }
	95	+ editJSONSchedule={ this.props.editJSONSchedule }
	96	+ editJSONURL={ this.props.editJSONURL }
	97	+ editJSONHeaders={ this.props.editJSONHeaders }
	98	+ editJSONRoot={ this.props.editJSONRoot }
	99	+ editJSONPaging={ this.props.editJSONPaging }
	100	+ JSONImportData={ this.props.JSONImportData }
82	101	/>
83	102
84	103	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
85	104
	105	+ <DataImport
	106	+ chart={ this.props.chart }
	107	+ editSchedule={ this.props.editDatabaseSchedule }
	108	+ databaseImportData={ this.props.databaseImportData }
	109	+ />
	110	+
86	111	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
87	112
88	113	<PanelButton
89	114	label={ __( 'Advanced Options' ) }
		@@ -119,20 +144,46 @@
119	144
120	145	<div className="visualizer-settings__chart">
121	146
122	147	{ ( null !== this.props.chart ) &&
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		- }
	148	+
	149	+ ( 'dataTable' === chart ) ? (
	150	+ <DataTable
	151	+ id={ this.props.id }
	152	+ rows={ data['visualizer-data'] }
	153	+ columns={ data['visualizer-series'] }
	154	+ options={ data['visualizer-settings'] }
	155	+ />
	156	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	157	+ <Chart
	158	+ chartType={ chart }
	159	+ rows={ data['visualizer-data'] }
	160	+ columns={ data['visualizer-series'] }
	161	+ options={
	162	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	163	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	164	+ compact( this.props.chart['visualizer-settings'])
	165	+ }
	166	+ height="500px"
	167	+ />
	168	+ ) : (
	169	+ <Chart
	170	+ chartType={ chart }
	171	+ rows={ data['visualizer-data'] }
	172	+ columns={ data['visualizer-series'] }
	173	+ options={
	174	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	175	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	176	+ compact( this.props.chart['visualizer-settings'])
	177	+ }
	178	+ height="500px"
	179	+ />
	180	+ )
	181	+ ) }
	182	+
	183	+ <div className="visualizer-settings__charts-footer"><sub>
	184	+ { footer }
	185	+ </sub></div>
135	186
136	187	</div>
137	188	</Fragment>
138	189	);