← All changes | classes/Visualizer/Gutenberg/src/Components/ChartSelect.js +82 -19 3.1.2 → 3.10.8 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, googleChartPackages } 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 );
		@@ -51,19 +55,32 @@
51	55	};
52	56	}
53	57
54	58	render() {
	59	+ let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
55	60
56		- let chart;
	61	+ let chart, footer;
57	62
58	63	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
59	64
60		- if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
61		- chart = startCase( this.props.chart['visualizer-chart-type']);
	65	+ if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	66	+ if ( 'DataTable' === data['visualizer-chart-library']) {
	67	+ chart = data['visualizer-chart-type'];
	68	+ } else {
	69	+ chart = this.props.chart['visualizer-chart-type'];
	70	+ if ( 'tabular' === chart ) {
	71	+ chart = 'table';
	72	+ }
	73	+ chart = startCase( chart );
	74	+ }
62	75	} else {
63	76	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
64	77	}
65	78
	79	+ if ( data['visualizer-data-exploded']) {
	80	+ footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
	81	+ }
	82	+
66	83	return (
67	84	<Fragment>
68	85	{ 'home' === this.state.route &&
69	86	<InspectorControls>
		@@ -73,21 +90,35 @@
73	90	readUploadedFile={ this.props.readUploadedFile }
74	91	/>
75	92
76	93	<RemoteImport
	94	+ id={ this.props.id }
77	95	chart={ this.props.chart }
78	96	editURL={ this.props.editURL }
79	97	isLoading={ this.props.isLoading }
80	98	uploadData={ this.props.uploadData }
81	99	editSchedule={ this.props.editSchedule }
	100	+ editJSONSchedule={ this.props.editJSONSchedule }
	101	+ editJSONURL={ this.props.editJSONURL }
	102	+ editJSONHeaders={ this.props.editJSONHeaders }
	103	+ editJSONRoot={ this.props.editJSONRoot }
	104	+ editJSONPaging={ this.props.editJSONPaging }
	105	+ JSONImportData={ this.props.JSONImportData }
82	106	/>
83	107
84	108	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
85	109
	110	+ <DataImport
	111	+ chart={ this.props.chart }
	112	+ editSchedule={ this.props.editDatabaseSchedule }
	113	+ databaseImportData={ this.props.databaseImportData }
	114	+ />
	115	+
86	116	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
87	117
88	118	<PanelButton
89	119	label={ __( 'Advanced Options' ) }
	120	+ className="visualizer-advanced-options"
90	121	icon="admin-tools"
91	122	onClick={ () => this.setState({ route: 'showAdvanced' }) }
92	123	/>
93	124
		@@ -107,9 +138,9 @@
107	138	isBack={ true }
108	139	/>
109	140
110	141	{ 'showAdvanced' === this.state.route &&
111		- <Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
	142	+ <Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
112	143	}
113	144
114	145	{ 'showPermissions' === this.state.route &&
115	146	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
		@@ -116,23 +147,55 @@
116	147	}
117	148	</InspectorControls>
118	149	}
119	150
120		- <div className="visualizer-settings__chart">
	151	+ <div className="visualizer-settings__chart" data-chart-type={ chart }>
121	152
122	153	{ ( 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		- }
	154	+
	155	+ ( 'DataTable' === data['visualizer-chart-library']) ? (
	156	+ <DataTable
	157	+ id={ this.props.id }
	158	+ rows={ data['visualizer-data'] }
	159	+ columns={ data['visualizer-series'] }
	160	+ options={ data['visualizer-settings'] }
	161	+ />
	162	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	163	+ <Chart
	164	+ chartVersion={ chartVersion }
	165	+ chartType={ chart }
	166	+ rows={ data['visualizer-data'] }
	167	+ columns={ data['visualizer-series'] }
	168	+ options={
	169	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	170	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	171	+ compact( this.props.chart['visualizer-settings'])
	172	+ }
	173	+ height="500px"
	174	+ formatters={ formatData( data ) }
	175	+ chartPackages={ googleChartPackages }
	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	+ chartPackages={ googleChartPackages }
	191	+ />
	192	+ )
	193	+ ) }
	194	+
	195	+ <div className="visualizer-settings__charts-footer"><sub>
	196	+ { footer }
	197	+ </sub></div>
135	198
136	199	</div>
137	200	</Fragment>
138	201	);