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

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

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

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

204 lines 5.9 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	let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
60
61	let chart, footer;
62
63	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
64
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	}
75	} else {
76	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
77	}
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
83	return (
84	<Fragment>
85	{ 'home' === this.state.route &&
86	<InspectorControls>
87
88	<FileImport
89	chart={ this.props.chart }
90	readUploadedFile={ this.props.readUploadedFile }
91	/>
92
93	<RemoteImport
94	id={ this.props.id }
95	chart={ this.props.chart }
96	editURL={ this.props.editURL }
97	isLoading={ this.props.isLoading }
98	uploadData={ this.props.uploadData }
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 }
106	/>
107
108	<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
109
110	<DataImport
111	chart={ this.props.chart }
112	editSchedule={ this.props.editDatabaseSchedule }
113	databaseImportData={ this.props.databaseImportData }
114	/>
115
116	<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
117
118	<PanelButton
119	label={ __( 'Advanced Options' ) }
120	className="visualizer-advanced-options"
121	icon="admin-tools"
122	onClick={ () => this.setState({ route: 'showAdvanced' }) }
123	/>
124
125	<PanelButton
126	label={ __( 'Chart Permissions' ) }
127	icon="admin-users"
128	onClick={ () => this.setState({ route: 'showPermissions' }) }
129	/>
130	</InspectorControls>
131	}
132
133	{ ( 'showAdvanced' === this.state.route \|\| 'showPermissions' === this.state.route ) &&
134	<InspectorControls>
135	<PanelButton
136	label={ __( 'Chart Settings' ) }
137	onClick={ () => this.setState({ route: 'home' }) }
138	isBack={ true }
139	/>
140
141	{ 'showAdvanced' === this.state.route &&
142	<Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
143	}
144
145	{ 'showPermissions' === this.state.route &&
146	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
147	}
148	</InspectorControls>
149	}
150
151	<div className="visualizer-settings__chart" data-chart-type={ chart }>
152
153	{ ( null !== this.props.chart ) &&
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	/>
176	) : (
177	<Chart
178	chartVersion={ chartVersion }
179	chartType={ chart }
180	rows={ data['visualizer-data'] }
181	columns={ data['visualizer-series'] }
182	options={
183	isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
184	merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
185	compact( this.props.chart['visualizer-settings'])
186	}
187	height="500px"
188	formatters={ formatData( data ) }
189	/>
190	)
191	) }
192
193	<div className="visualizer-settings__charts-footer"><sub>
194	{ footer }
195	</sub></div>
196
197	</div>
198	</Fragment>
199	);
200	}
201	}
202
203	export default ChartSelect;
204