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

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

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

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

194 lines 5.2 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 } 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 chart, footer;
61
62	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
63
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	}
70	} else {
71	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
72	}
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
78	return (
79	<Fragment>
80	{ 'home' === this.state.route &&
81	<InspectorControls>
82
83	<FileImport
84	chart={ this.props.chart }
85	readUploadedFile={ this.props.readUploadedFile }
86	/>
87
88	<RemoteImport
89	id={ this.props.id }
90	chart={ this.props.chart }
91	editURL={ this.props.editURL }
92	isLoading={ this.props.isLoading }
93	uploadData={ this.props.uploadData }
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 }
101	/>
102
103	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
104
105	<DataImport
106	chart={ this.props.chart }
107	editSchedule={ this.props.editDatabaseSchedule }
108	databaseImportData={ this.props.databaseImportData }
109	/>
110
111	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
112
113	<PanelButton
114	label={ __( 'Advanced Options' ) }
115	icon="admin-tools"
116	onClick={ () => this.setState({ route: 'showAdvanced' }) }
117	/>
118
119	<PanelButton
120	label={ __( 'Chart Permissions' ) }
121	icon="admin-users"
122	onClick={ () => this.setState({ route: 'showPermissions' }) }
123	/>
124	</InspectorControls>
125	}
126
127	{ ( 'showAdvanced' === this.state.route \|\| 'showPermissions' === this.state.route ) &&
128	<InspectorControls>
129	<PanelButton
130	label={ __( 'Chart Settings' ) }
131	onClick={ () => this.setState({ route: 'home' }) }
132	isBack={ true }
133	/>
134
135	{ 'showAdvanced' === this.state.route &&
136	<Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
137	}
138
139	{ 'showPermissions' === this.state.route &&
140	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
141	}
142	</InspectorControls>
143	}
144
145	<div className="visualizer-settings__chart">
146
147	{ ( null !== this.props.chart ) &&
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>
186
187	</div>
188	</Fragment>
189	);
190	}
191	}
192
193	export default ChartSelect;
194