PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.1
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.1
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / classes / Visualizer / Gutenberg / src / Components / ChartSelect.js

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

309 lines 8.5 KB
No matching file
Up and down to move Enter to open Esc to close
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, googleChartPackages } from '../utils.js';
27
28 /**
29 * WordPress dependencies
30 */
31 const { startCase } = lodash;
32
33 const { __ } = wp.i18n;
34
35 const { apiFetch } = wp;
36
37 const {
38 Button
39 } = wp.components;
40
41 const {
42 Component,
43 Fragment
44 } = wp.element;
45
46 const { InspectorControls } = wp.blockEditor || wp.editor;
47
48 let visualizerMedia, visualizerMediaView;
49 visualizerMedia = visualizer.media = {};
50 visualizerMediaView = visualizerMedia.view = {};
51
52 visualizerMediaView.Chart = wp.media.view.MediaFrame.extend(
53 {
54 initialize: function() {
55 const self = this;
56
57 _.defaults(
58 self.options, {
59 action: '',
60 id: 'visualizer',
61 state: 'iframe:visualizer',
62 title: 'Visualizer'
63 }
64 );
65
66 wp.media.view.MediaFrame.prototype.initialize.apply( self, arguments );
67
68 wp.media.view.settings.tab = 'Visualizer';
69 wp.media.view.settings.tabUrl = self.options.action;
70 self.createIframeStates();
71 },
72
73 createIframeStates: function( passedOptions ) {
74 const self = this;
75 wp.media.view.MediaFrame.prototype.createIframeStates.apply( self, arguments );
76
77 self.state( self.options.state ).set(
78 _.defaults(
79 {
80 tab: self.options.id,
81 src: self.options.action + '&tab=' + self.options.id,
82 title: self.options.title,
83 content: 'iframe',
84 menu: 'default'
85 }, passedOptions
86 )
87 );
88
89 },
90
91 open: function() {
92 try {
93 wp.media.view.MediaFrame.prototype.open.apply( this, arguments );
94 } catch ( error ) {
95 console.error( error );
96 }
97 }
98 }
99 );
100
101 class ChartSelect extends Component {
102 constructor() {
103 super( ...arguments );
104
105 this.state = {
106
107 /**
108 * Sidebar Route Status
109 *
110 * home - Initial screen.
111 * showAdvanced - Show Advanced Options.
112 */
113 route: 'home'
114 };
115 }
116
117 render() {
118 const { legacyBlockEdit, blockEditDoc } = window.visualizerLocalize;
119 let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
120
121 let chart, footer;
122
123 let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
124
125 if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
126 if ( 'DataTable' === data['visualizer-chart-library']) {
127 chart = data['visualizer-chart-type'];
128 } else {
129 chart = this.props.chart['visualizer-chart-type'];
130 if ( 'tabular' === chart ) {
131 chart = 'table';
132 }
133 chart = startCase( chart );
134 }
135 } else {
136 chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
137 }
138
139 if ( data['visualizer-data-exploded']) {
140 footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
141 }
142
143 const openEditChart = ( chartId ) => {
144 const baseURL = ( window.visualizerLocalize.chartEditUrl ) ? window.visualizerLocalize.chartEditUrl : '';
145 let view = new visualizerMediaView.Chart(
146 {
147 action: `${baseURL}?action=visualizer-edit-chart&library=yes&chart=` + chartId
148 }
149 );
150 const updateChartState = async() => {
151 await this.setState({
152 isLoading: 'getChart'
153 });
154
155 let result = await apiFetch({ path: `wp/v2/visualizer/${chartId}` });
156 await this.props.editSettings( result['chart_data']['visualizer-settings']);
157 await this.props.getChartData( chartId );
158
159 await this.setState({ route: 'home', chart: result['chart_data'], isModified: true, isLoading: true });
160 };
161 // eslint-disable-next-line camelcase
162 window.send_to_editor = function() {
163 updateChartState().then( () => {
164 view.close();
165 });
166 };
167
168 view.open();
169 };
170
171 return (
172 <Fragment>
173 { 'home' === this.state.route &&
174 <InspectorControls>
175 { ! legacyBlockEdit && (
176 <div className="viz-edit-chart-new">
177 <Button
178 isPrimary={true}
179 onClick={ () => {
180 openEditChart( this.props.id );
181 } }> Edit Chart </ Button>
182 <p dangerouslySetInnerHTML={{__html: blockEditDoc}}></p>
183 </div>
184 ) }
185
186 { legacyBlockEdit && (
187 <>
188
189 <ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
190
191 <FileImport
192 chart={ this.props.chart }
193 readUploadedFile={ this.props.readUploadedFile }
194 />
195
196 <RemoteImport
197 id={ this.props.id }
198 chart={ this.props.chart }
199 editURL={ this.props.editURL }
200 isLoading={ this.props.isLoading }
201 uploadData={ this.props.uploadData }
202 editSchedule={ this.props.editSchedule }
203 editJSONSchedule={ this.props.editJSONSchedule }
204 editJSONURL={ this.props.editJSONURL }
205 editJSONHeaders={ this.props.editJSONHeaders }
206 editJSONRoot={ this.props.editJSONRoot }
207 editJSONPaging={ this.props.editJSONPaging }
208 JSONImportData={ this.props.JSONImportData }
209 />
210
211 <ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
212
213 <DataImport
214 chart={ this.props.chart }
215 editSchedule={ this.props.editDatabaseSchedule }
216 databaseImportData={ this.props.databaseImportData }
217 />
218
219 <PanelButton
220 label={ __( 'Advanced Options' ) }
221 className="visualizer-advanced-options"
222 icon="admin-tools"
223 onClick={ () => this.setState({ route: 'showAdvanced' }) }
224 />
225
226 <PanelButton
227 label={ __( 'Chart Permissions' ) }
228 icon="admin-users"
229 onClick={ () => this.setState({ route: 'showPermissions' }) }
230 />
231 </>
232 ) }
233 </InspectorControls>
234 }
235
236 { ( 'showAdvanced' === this.state.route || 'showPermissions' === this.state.route ) &&
237 <InspectorControls>
238 <PanelButton
239 label={ __( 'Chart Settings' ) }
240 onClick={ () => this.setState({ route: 'home' }) }
241 isBack={ true }
242 />
243
244 { 'showAdvanced' === this.state.route &&
245 <Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
246 }
247
248 { 'showPermissions' === this.state.route &&
249 <ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
250 }
251 </InspectorControls>
252 }
253
254 <div className="visualizer-settings__chart" data-chart-type={ chart }>
255
256 { ( null !== this.props.chart ) &&
257
258 ( 'DataTable' === data['visualizer-chart-library']) ? (
259 <DataTable
260 id={ this.props.id }
261 rows={ data['visualizer-data'] }
262 columns={ data['visualizer-series'] }
263 options={ data['visualizer-settings'] }
264 />
265 ) : ( '' !== data['visualizer-data-exploded'] ? (
266 <Chart
267 chartVersion={ chartVersion }
268 chartType={ chart }
269 rows={ data['visualizer-data'] }
270 columns={ data['visualizer-series'] }
271 options={
272 isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
273 merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
274 compact( this.props.chart['visualizer-settings'])
275 }
276 height="500px"
277 formatters={ formatData( data ) }
278 chartPackages={ googleChartPackages }
279 />
280 ) : (
281 <Chart
282 chartVersion={ chartVersion }
283 chartType={ chart }
284 rows={ data['visualizer-data'] }
285 columns={ data['visualizer-series'] }
286 options={
287 isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
288 merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
289 compact( this.props.chart['visualizer-settings'])
290 }
291 height="500px"
292 formatters={ formatData( data ) }
293 chartPackages={ googleChartPackages }
294 />
295 )
296 ) }
297
298 <div className="visualizer-settings__charts-footer"><sub>
299 { footer }
300 </sub></div>
301
302 </div>
303 </Fragment>
304 );
305 }
306 }
307
308 export default ChartSelect;
309