release(minor): fixes

#### Enhancements - Added a manual data edit feature to the free version of the plugin - Improved the flow of chart creation - Added a chart information panel: backend chart title & quick shortcode access - Line and Pie charts from the ChartJS library are now available for free users, along with library selection and relative images - Improved wording in onboarding - Improved workflow for creating charts via the Visualizer Gutenberg block - Moved chart library selection to the top of the page and showing charts from the available library only - Unified chart edition (removed duplicated chart settings in block editor) - Added optional feature usage data - Enhanced security - Improved the UI of the database query option (visible database prefix, sample query, autocompleting table names) [PRO]
Codeinwp · May 13, 2024 · 1aa3aed · 1aa3aed
2 parents 0c98dc7 + 769cda9
commit 1aa3aed
Show file tree

Hide file tree

Showing 45 changed files with 2,357 additions and 917 deletions.
diff --git a/classes/Visualizer/Gutenberg/Block.php b/classes/Visualizer/Gutenberg/Block.php
@@ -109,10 +109,15 @@ public function enqueue_gutenberg_scripts() {
 			'absurl'    => VISUALIZER_ABSURL,
 			'charts'    => Visualizer_Module_Admin::_getChartTypesLocalized(),
 			'adminPage' => menu_page_url( 'visualizer', false ),
+			'createChart' => add_query_arg( array( 'action' => 'visualizer-create-chart', 'library' => 'yes', 'type' => '', 'chart-library' => '', 'tab' => 'visualizer' ), admin_url( 'admin-ajax.php' ) ),
 			'sqlTable'  => $table_col_mapping,
 			'chartsPerPage' => defined( 'TI_CYPRESS_TESTING' ) ? 20 : 6,
 			'proFeaturesLocked' => Visualizer_Module_Admin::proFeaturesLocked(),
 			'isFullSiteEditor'  => 'site-editor.php' === $pagenow,
+			'legacyBlockEdit'   => apply_filters( 'visualizer_legacy_block_edit', false ),
+			/* translators: %1$s: opening tag, %2$s: closing tag */
+			'blockEditDoc'      => sprintf( __( 'The editor for managing chart settings has been removed from the block editor. You can find more information in this %1$sdocumentation%2$s', 'visualizer' ), '<a href="https://docs.themeisle.com/article/1705-how-can-i-display-a-chart#using-visualizer-block" target="_blank">', '</a>' ),
+			'chartEditUrl'      => admin_url( 'admin-ajax.php' ),
 		);
 		wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
 
@@ -131,7 +136,7 @@ public function enqueue_gutenberg_scripts() {
 						'dragDrop'          => false,
 						'matchBrackets'     => true,
 						'autoCloseBrackets' => true,
-						'extraKeys'         => array( 'Ctrl-Space' => 'autocomplete' ),
+						'extraKeys'         => array( 'Shift-Space' => 'autocomplete' ),
 						'hintOptions'       => array( 'tables' => $table_col_mapping ),
 					),
 				)

diff --git a/classes/Visualizer/Gutenberg/build/block.css b/classes/Visualizer/Gutenberg/build/block.css
diff --git a/classes/Visualizer/Gutenberg/build/block.js b/classes/Visualizer/Gutenberg/build/block.js
diff --git a/classes/Visualizer/Gutenberg/src/Components/ChartSelect.js b/classes/Visualizer/Gutenberg/src/Components/ChartSelect.js
@@ -32,13 +32,72 @@ const { startCase } = lodash;
 
 const { __ } = wp.i18n;
 
+const { apiFetch } = wp;
+
+const {
+	Button
+} = wp.components;
+
 const {
 	Component,
 	Fragment
 } = wp.element;
 
 const { InspectorControls } = wp.blockEditor || wp.editor;
 
+let visualizerMedia, visualizerMediaView;
+visualizerMedia = visualizer.media = {};
+visualizerMediaView = visualizerMedia.view = {};
+
+visualizerMediaView.Chart = wp.media.view.MediaFrame.extend(
+	{
+		initialize: function() {
+			const self = this;
+
+			_.defaults(
+				self.options, {
+					action: '',
+					id: 'visualizer',
+					state: 'iframe:visualizer',
+					title: 'Visualizer'
+				}
+			);
+
+			wp.media.view.MediaFrame.prototype.initialize.apply( self, arguments );
+
+			wp.media.view.settings.tab = 'Visualizer';
+			wp.media.view.settings.tabUrl = self.options.action;
+			self.createIframeStates();
+		},
+
+		createIframeStates: function( passedOptions ) {
+			const self = this;
+			wp.media.view.MediaFrame.prototype.createIframeStates.apply( self, arguments );
+
+			self.state( self.options.state ).set(
+				_.defaults(
+					{
+						tab: self.options.id,
+						src: self.options.action + '&tab=' + self.options.id,
+						title: self.options.title,
+						content: 'iframe',
+						menu: 'default'
+					}, passedOptions
+				)
+			);
+
+		},
+
+		open: function() {
+			try {
+				wp.media.view.MediaFrame.prototype.open.apply( this, arguments );
+			} catch ( error ) {
+				console.error( error );
+			}
+		}
+	}
+);
+
 class ChartSelect extends Component {
 	constructor() {
 		super( ...arguments );
@@ -56,6 +115,7 @@ class ChartSelect extends Component {
 	}
 
 	render() {
+		const { legacyBlockEdit, blockEditDoc } = window.visualizerLocalize;
 		let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
 
 		let chart, footer;
@@ -80,40 +140,81 @@ class ChartSelect extends Component {
             footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
         }
 
+		const openEditChart = ( chartId ) => {
+			const baseURL = ( window.visualizerLocalize.chartEditUrl ) ? window.visualizerLocalize.chartEditUrl : '';
+			let view = new visualizerMediaView.Chart(
+				{
+					action: `${baseURL}?action=visualizer-edit-chart&library=yes&chart=` + chartId
+				}
+			);
+			const updateChartState = async() => {
+				await this.setState({
+					isLoading: 'getChart'
+				});
+
+				let result = await apiFetch({ path: `wp/v2/visualizer/${chartId}` });
+				await this.props.editSettings( result['chart_data']['visualizer-settings']);
+				await this.props.getChartData( chartId );
+
+				await this.setState({ route: 'home', chart: result['chart_data'], isModified: true, isLoading: true });
+			};
+			// eslint-disable-next-line camelcase
+			window.send_to_editor = function() {
+				updateChartState().then( () => {
+					view.close();
+				});
+			};
+
+			view.open();
+		};
+
 		return (
 			<Fragment>
 				{ 'home' === this.state.route &&
 					<InspectorControls>
+						{ ! legacyBlockEdit && (
+							<div className="viz-edit-chart-new">
+								<Button
+									isPrimary={true}
+									onClick={ () => {
+ openEditChart( this.props.id );
+} }> Edit Chart </ Button>
+								<p dangerouslySetInnerHTML={{__html: blockEditDoc}}></p>
+							</div>
+						) }
+
+						{ legacyBlockEdit && (
+							<>
+
+						<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
 
 						<FileImport
 							chart={ this.props.chart }
 							readUploadedFile={ this.props.readUploadedFile }
 						/>
 
-						<RemoteImport
-							id={ this.props.id }
-							chart={ this.props.chart }
-							editURL={ this.props.editURL }
-							isLoading={ this.props.isLoading }
-							uploadData={ this.props.uploadData }
-							editSchedule={ this.props.editSchedule }
-							editJSONSchedule={ this.props.editJSONSchedule }
-							editJSONURL={ this.props.editJSONURL }
-							editJSONHeaders={ this.props.editJSONHeaders }
-							editJSONRoot={ this.props.editJSONRoot }
-							editJSONPaging={ this.props.editJSONPaging }
-							JSONImportData={ this.props.JSONImportData }
-						/>
-
-						<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
-
-						<DataImport
-							chart={ this.props.chart }
-							editSchedule={ this.props.editDatabaseSchedule }
-							databaseImportData={ this.props.databaseImportData }
-						/>
-
-						<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
+								<RemoteImport
+									id={ this.props.id }
+									chart={ this.props.chart }
+									editURL={ this.props.editURL }
+									isLoading={ this.props.isLoading }
+									uploadData={ this.props.uploadData }
+									editSchedule={ this.props.editSchedule }
+									editJSONSchedule={ this.props.editJSONSchedule }
+									editJSONURL={ this.props.editJSONURL }
+									editJSONHeaders={ this.props.editJSONHeaders }
+									editJSONRoot={ this.props.editJSONRoot }
+									editJSONPaging={ this.props.editJSONPaging }
+									JSONImportData={ this.props.JSONImportData }
+								/>
+
+								<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
+
+								<DataImport
+									chart={ this.props.chart }
+									editSchedule={ this.props.editDatabaseSchedule }
+									databaseImportData={ this.props.databaseImportData }
+								/>
 
 						<PanelButton
 							label={ __( 'Advanced Options' ) }
@@ -122,11 +223,13 @@ class ChartSelect extends Component {
 							onClick={ () => this.setState({ route: 'showAdvanced' }) }
 						/>
 
-						<PanelButton
-							label={ __( 'Chart Permissions' ) }
-							icon="admin-users"
-							onClick={ () => this.setState({ route: 'showPermissions' }) }
-						/>
+								<PanelButton
+									label={ __( 'Chart Permissions' ) }
+									icon="admin-users"
+									onClick={ () => this.setState({ route: 'showPermissions' }) }
+								/>
+							</>
+						) }
 					</InspectorControls>
 				}
 

diff --git a/classes/Visualizer/Gutenberg/src/Components/Import/DataImport.js b/classes/Visualizer/Gutenberg/src/Components/Import/DataImport.js
@@ -69,7 +69,7 @@ class DataImport extends Component {
 					label={ __( 'How often do you want to check the url?' ) }
 					value={ this.props.chart['visualizer-db-schedule'] ? this.props.chart['visualizer-db-schedule'] : 0 }
 					options={ [
-						{ label: __( 'Live' ), value: '0' },
+						{ label: __( '10 minutes' ), value: '0.16' },
 						{ label: __( 'Each hour' ), value: '1' },
 						{ label: __( 'Each 12 hours' ), value: '12' },
 						{ label: __( 'Each day' ), value: '24' },

diff --git a/classes/Visualizer/Gutenberg/src/Components/Import/FileImport.js b/classes/Visualizer/Gutenberg/src/Components/Import/FileImport.js
@@ -37,34 +37,53 @@ class FileImport extends Component {
 
 	render() {
 		return (
-			<PanelBody
-				title={ __( 'Import data from file' ) }
-				initialOpen={ false }
-			>
+			( 'community' !== visualizerLocalize.isPro ) ? (
+				<PanelBody
+					title={ __( 'Import data from file' ) }
+					initialOpen={ false }
+				>
+
+					<p>{ __( 'Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).' ) }</p>
+					<p>
+						{ __( 'If you are unsure about how to format your data CSV then please take a look at this sample: ' ) }
+						<ExternalLink href={ `${visualizerLocalize.absurl}samples/${this.props.chart['visualizer-chart-type']}.csv` }>
+							{ `${this.props.chart['visualizer-chart-type']}.csv` }
+						</ExternalLink>
+					</p>
 
-				<p>{ __( 'Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).' ) }</p>
-				<p>
-					{ __( 'If you are unsure about how to format your data CSV then please take a look at this sample: ' ) }
-					<ExternalLink href={ `${visualizerLocalize.absurl}samples/${this.props.chart['visualizer-chart-type']}.csv` }>
-						{ `${this.props.chart['visualizer-chart-type']}.csv` }
-					</ExternalLink>
-				</p>
+					<input
+						type="file"
+						accept="text/csv"
+						ref={ this.uploadInput }
+						onChange={ this.fileUploaded }
+					/>
 
-				<input
-					type="file"
-					accept="text/csv"
-					ref={ this.uploadInput }
-					onChange={ this.fileUploaded }
-				/>
+					<Button
+						isPrimary
+						onClick={ this.uploadImport }
+					>
+						{ this.state.uploadLabel }
+					</Button>
 
-				<Button
-					isPrimary
-					onClick={ this.uploadImport }
+				</PanelBody>
+			) : (
+				<PanelBody
+					title={ __( 'Import data from file' ) }
+					icon="lock"
+					initialOpen={ false }
 				>
-					{ this.state.uploadLabel }
-				</Button>
+					<p>{ __( 'Enable this feature in PRO version!' ) }</p>
+
+					<Button
+						isPrimary
+						href={ visualizerLocalize.proTeaser }
+						target="_blank"
+					>
+						{ __( 'Upgrade Now' ) }
+					</Button>
 
-			</PanelBody>
+				</PanelBody>
+			)
 		);
 	}
 }