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