← All changes | classes/Visualizer/Gutenberg/src/Components/ChartSelect.js +81 -19 3.1.0 → 3.6.1 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
		@@ -18,9 +22,9 @@
18	22	import PanelButton from './PanelButton.js';
19	23
20	24	import merge from 'merge';
21	25
22		-import { compact, formatDate, isValidJSON } from '../utils.js';
	26	+import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
23	27
24	28	/**
25	29	* WordPress dependencies
26	30	*/
		@@ -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,32 @@
52	56	}
53	57
54	58	render() {
55	59
56		- let chart;
	60	+ let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
57	61
	62	+ let chart, footer;
	63	+
58	64	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
59	65
60		- if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
61		- chart = startCase( this.props.chart['visualizer-chart-type']);
	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	+ }
62	76	} else {
63	77	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
64	78	}
65	79
	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	+
66	84	return (
67	85	<Fragment>
68	86	{ 'home' === this.state.route &&
69	87	<InspectorControls>
		@@ -73,21 +91,35 @@
73	91	readUploadedFile={ this.props.readUploadedFile }
74	92	/>
75	93
76	94	<RemoteImport
	95	+ id={ this.props.id }
77	96	chart={ this.props.chart }
78	97	editURL={ this.props.editURL }
79	98	isLoading={ this.props.isLoading }
80	99	uploadData={ this.props.uploadData }
81	100	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 }
82	107	/>
83	108
84	109	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
85	110
	111	+ <DataImport
	112	+ chart={ this.props.chart }
	113	+ editSchedule={ this.props.editDatabaseSchedule }
	114	+ databaseImportData={ this.props.databaseImportData }
	115	+ />
	116	+
86	117	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
87	118
88	119	<PanelButton
89	120	label={ __( 'Advanced Options' ) }
	121	+ className="visualizer-advanced-options"
90	122	icon="admin-tools"
91	123	onClick={ () => this.setState({ route: 'showAdvanced' }) }
92	124	/>
93	125
		@@ -107,9 +139,9 @@
107	139	isBack={ true }
108	140	/>
109	141
110	142	{ 'showAdvanced' === this.state.route &&
111		- <Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
	143	+ <Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
112	144	}
113	145
114	146	{ 'showPermissions' === this.state.route &&
115	147	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
		@@ -116,23 +148,53 @@
116	148	}
117	149	</InspectorControls>
118	150	}
119	151
120		- <div className="visualizer-settings__chart">
	152	+ <div className="visualizer-settings__chart" data-chart-type={ chart }>
121	153
122	154	{ ( 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		- }
	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>
135	197
136	198	</div>
137	199	</Fragment>
138	200	);