← All changes | classes/Visualizer/Gutenberg/src/Components/ChartSelect.js +199 -33 3.1.3 → 3.11.7 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, googleChartPackages } from '../utils.js';
23	27
24	28	/**
25	29	* WordPress dependencies
26	30	*/
		@@ -27,15 +31,74 @@
27	31	const { startCase } = lodash;
28	32
29	33	const { __ } = wp.i18n;
30	34
	35	+const { apiFetch } = wp;
	36	+
31	37	const {
	38	+ Button
	39	+} = wp.components;
	40	+
	41	+const {
32	42	Component,
33	43	Fragment
34	44	} = wp.element;
35	45
36		-const { InspectorControls } = wp.editor;
	46	+const { InspectorControls } = wp.blockEditor || wp.editor;
37	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	+
38	101	class ChartSelect extends Component {
39	102	constructor() {
40	103	super( ...arguments );
41	104
		@@ -51,52 +114,123 @@
51	114	};
52	115	}
53	116
54	117	render() {
	118	+ const { legacyBlockEdit, blockEditDoc } = window.visualizerLocalize;
	119	+ let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
55	120
56		- let chart;
	121	+ let chart, footer;
57	122
58	123	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
59	124
60		- if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
61		- chart = startCase( this.props.chart['visualizer-chart-type']);
	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	+ }
62	135	} else {
63	136	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
64	137	}
65	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	+
66	171	return (
67	172	<Fragment>
68	173	{ 'home' === this.state.route &&
69	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	+ ) }
70	185
	186	+ { legacyBlockEdit && (
	187	+ <>
	188	+
	189	+ <ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
	190	+
71	191	<FileImport
72	192	chart={ this.props.chart }
73	193	readUploadedFile={ this.props.readUploadedFile }
74	194	/>
75	195
76		- <RemoteImport
77		- chart={ this.props.chart }
78		- editURL={ this.props.editURL }
79		- isLoading={ this.props.isLoading }
80		- uploadData={ this.props.uploadData }
81		- editSchedule={ this.props.editSchedule }
82		- />
	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	+ />
83	210
84		- <ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
	211	+ <ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
85	212
86		- <ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
	213	+ <DataImport
	214	+ chart={ this.props.chart }
	215	+ editSchedule={ this.props.editDatabaseSchedule }
	216	+ databaseImportData={ this.props.databaseImportData }
	217	+ />
87	218
88	219	<PanelButton
89	220	label={ __( 'Advanced Options' ) }
	221	+ className="visualizer-advanced-options"
90	222	icon="admin-tools"
91	223	onClick={ () => this.setState({ route: 'showAdvanced' }) }
92	224	/>
93	225
94		- <PanelButton
95		- label={ __( 'Chart Permissions' ) }
96		- icon="admin-users"
97		- onClick={ () => this.setState({ route: 'showPermissions' }) }
98		- />
	226	+ <PanelButton
	227	+ label={ __( 'Chart Permissions' ) }
	228	+ icon="admin-users"
	229	+ onClick={ () => this.setState({ route: 'showPermissions' }) }
	230	+ />
	231	+ </>
	232	+ ) }
99	233	</InspectorControls>
100	234	}
101	235
102	236	{ ( 'showAdvanced' === this.state.route || 'showPermissions' === this.state.route ) &&
		@@ -107,9 +241,9 @@
107	241	isBack={ true }
108	242	/>
109	243
110	244	{ 'showAdvanced' === this.state.route &&
111		- <Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
	245	+ <Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
112	246	}
113	247
114	248	{ 'showPermissions' === this.state.route &&
115	249	<ChartPermissions chart={ this.props.chart } edit={ this.props.editPermissions } />
		@@ -116,23 +250,55 @@
116	250	}
117	251	</InspectorControls>
118	252	}
119	253
120		- <div className="visualizer-settings__chart">
	254	+ <div className="visualizer-settings__chart" data-chart-type={ chart }>
121	255
122	256	{ ( 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		- }
	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>
135	301
136	302	</div>
137	303	</Fragment>
138	304	);