Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.7.3

Visualizer – Tables & Charts Manager with Built-in AI Generator v3.7.3

visualizer / classes / Visualizer / Gutenberg / src / Components / ChartSelect.js

ChartSelect.js in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.7.3, at classes/Visualizer/Gutenberg/src/Components/ChartSelect.js

205 lines 5.8 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import { Chart } from 'react-google-charts';
5
6	import DataTable from './DataTable.js';
7
8	import FileImport from './Import/FileImport.js';
9
10	import RemoteImport from './Import/RemoteImport.js';
11
12	import ChartImport from './Import/ChartImport.js';
13
14	import DataImport from './Import/DataImport.js';
15
16	import ManualData from './Import/ManualData.js';
17
18	import Sidebar from './Sidebar.js';
19
20	import ChartPermissions from './ChartPermissions.js';
21
22	import PanelButton from './PanelButton.js';
23
24	import merge from 'merge';
25
26	import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
27
28	/**
29	* WordPress dependencies
30	*/
31	const { startCase } = lodash;
32
33	const { __ } = wp.i18n;
34
35	const {
36	Component,
37	Fragment
38	} = wp.element;
39
40	const { InspectorControls } = wp.blockEditor \|\| wp.editor;
41
42	class ChartSelect extends Component {
43	constructor() {
44	super( ...arguments );
45
46	this.state = {
47
48	/**
49	* Sidebar Route Status
50	*
51	* home - Initial screen.
52	* showAdvanced - Show Advanced Options.
53	*/
54	route: 'home'
55	};
56	}
57
58	render() {
59
60	let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
61
62	let chart, footer;
63
64	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
65
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	}
76	} else {
77	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
78	}
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
84	return (
85	<Fragment>
86	{ 'home' === this.state.route &&
87	<InspectorControls>
88
89	<FileImport
90	chart={ this.props.chart }
91	readUploadedFile={ this.props.readUploadedFile }
92	/>
93
94	<RemoteImport
95	id={ this.props.id }
96	chart={ this.props.chart }
97	editURL={ this.props.editURL }
98	isLoading={ this.props.isLoading }
99	uploadData={ this.props.uploadData }
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 }
107	/>
108
109	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
110
111	<DataImport
112	chart={ this.props.chart }
113	editSchedule={ this.props.editDatabaseSchedule }
114	databaseImportData={ this.props.databaseImportData }
115	/>
116
117	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
118
119	<PanelButton
120	label={ __( 'Advanced Options' ) }
121	className="visualizer-advanced-options"
122	icon="admin-tools"
123	onClick={ () => this.setState({ route: 'showAdvanced' }) }
124	/>
125
126	<PanelButton
127	label={ __( 'Chart Permissions' ) }
128	icon="admin-users"
129	onClick={ () => this.setState({ route: 'showPermissions' }) }
130	/>
131	</InspectorControls>
132	}
133
134	{ ( 'showAdvanced' === this.state.route \|\| 'showPermissions' === this.state.route ) &&
135	<InspectorControls>
136	<PanelButton
137	label={ __( 'Chart Settings' ) }
138	onClick={ () => this.setState({ route: 'home' }) }
139	isBack={ true }
140	/>
141
142	{ 'showAdvanced' === this.state.route &&
143	<Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
144	}
145
146	{ 'showPermissions' === this.state.route &&
147	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
148	}
149	</InspectorControls>
150	}
151
152	<div className="visualizer-settings__chart" data-chart-type={ chart }>
153
154	{ ( 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>
197
198	</div>
199	</Fragment>
200	);
201	}
202	}
203
204	export default ChartSelect;
205