release: fixes

- Fixed data tables horizontal scrolling issue - Added legend position default label text - Added tooltip default label text - Fixed Gutenberg block error - Fixed table chart rendering issue in Gutenberg block - Fixed compatibility issue with the FSE editor - Fixed compatibility issue with WP 5.6 - Fixed console error when importing charts from others - Fixed pagination enable/disable issue - Fixed editor rows limitation issue
Codeinwp · May 24, 2023 · abf88ef · abf88ef
2 parents b76319f + 2dc1f56
commit abf88ef
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 43 deletions.
diff --git a/classes/Visualizer/Gutenberg/Block.php b/classes/Visualizer/Gutenberg/Block.php
@@ -67,7 +67,7 @@ private function __construct() {
 	 * Enqueue front end and editor JavaScript and CSS
 	 */
 	public function enqueue_gutenberg_scripts() {
-		global $wp_version;
+		global $wp_version, $pagenow;
 
 		$blockPath = VISUALIZER_ABSURL . 'classes/Visualizer/Gutenberg/build/block.js';
 		$handsontableJS = VISUALIZER_ABSURL . 'classes/Visualizer/Gutenberg/build/handsontable.js';
@@ -112,6 +112,7 @@ public function enqueue_gutenberg_scripts() {
 			'sqlTable'  => $table_col_mapping,
 			'chartsPerPage' => defined( 'TI_CYPRESS_TESTING' ) ? 20 : 6,
 			'proFeaturesLocked' => Visualizer_Module_Admin::proFeaturesLocked(),
+			'isFullSiteEditor'  => 'site-editor.php' === $pagenow,
 		);
 		wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
 
@@ -351,7 +352,9 @@ public function get_visualizer_data( $post ) {
 
 		// faetch and update settings
 		$data['visualizer-settings'] = get_post_meta( $post_id, Visualizer_Plugin::CF_SETTINGS, true );
-
+		if ( empty( $data['visualizer-settings']['pagination'] ) ) {
+			$data['visualizer-settings']['pageSize'] = '';
+		}
 		// handle series filter hooks
 		$data['visualizer-series'] = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SERIES, get_post_meta( $post_id, Visualizer_Plugin::CF_SERIES, true ), $post_id, $data['visualizer-chart-type'] );
 
@@ -367,6 +370,10 @@ public function get_visualizer_data( $post ) {
 			$data['visualizer-data'] = $this->format_chart_data( $data['visualizer-data'], $data['visualizer-series'] );
 		}
 
+		if ( ! isset( $data['visualizer-settings']['hAxis']['format'] ) ) {
+			$data['visualizer-settings']['hAxis']['format'] = '';
+		}
+
 		$data['visualizer-data-exploded'] = '';
 		// handle annotations for google charts
 		if ( 'GoogleCharts' === $library ) {

diff --git a/classes/Visualizer/Gutenberg/build/block.js b/classes/Visualizer/Gutenberg/build/block.js
diff --git a/classes/Visualizer/Gutenberg/build/handsontable.css b/classes/Visualizer/Gutenberg/build/handsontable.css
diff --git a/classes/Visualizer/Gutenberg/src/Components/ChartEditor.js b/classes/Visualizer/Gutenberg/src/Components/ChartEditor.js
@@ -57,6 +57,7 @@ class ChartEditor extends Component {
 					colHeaders={ true }
 					allowInvalid={ false }
 					className="htEditor"
+					height="auto"
 					cells={ ( row, col, prop ) => {
 						let cellProperties;
 						if ( 1 === row ) {

diff --git a/classes/Visualizer/Gutenberg/src/Components/ChartRender.js b/classes/Visualizer/Gutenberg/src/Components/ChartRender.js
@@ -62,7 +62,7 @@ class ChartRender extends Component {
         }
 
 		if ( this.props.chart['visualizer-series'] && 0 <= [ 'date', 'datetime', 'timeofday' ].indexOf( this.props.chart['visualizer-series'][0].type ) ) {
-			if ( this.props.chart['visualizer-settings'] && '' == this.props.chart['visualizer-settings'].hAxis.format ) {
+			if ( this.props.chart['visualizer-settings'] && ( this.props.chart['visualizer-settings'].hAxis && '' == this.props.chart['visualizer-settings'].hAxis.format ) ) {
 				this.props.chart['visualizer-settings'].hAxis.format = 'YYYY-MM-dd';
 			}
 		}

diff --git a/classes/Visualizer/Gutenberg/src/Components/Import/ChartImport.js b/classes/Visualizer/Gutenberg/src/Components/Import/ChartImport.js
@@ -34,7 +34,9 @@ class ChartImport extends Component {
 
 		charts = charts.map( ( i, index ) => {
 			let label = i['chart_data']['visualizer-settings'].title ? i['chart_data']['visualizer-settings'].title : `#${i.id}`;
-
+			if ( 'object' === typeof label ) {
+				label = `#${i.id}`;
+			}
 			if ( 0 === index ) {
 				id = i.id;
 			}

diff --git a/classes/Visualizer/Gutenberg/src/Components/Sidebar/SeriesSettings.js b/classes/Visualizer/Gutenberg/src/Components/Sidebar/SeriesSettings.js
@@ -60,6 +60,7 @@ class SeriesSettings extends Component {
 
 				{ Object.keys( settings.series )
 					.map( ( i, index ) => {
+						i = parseInt( i ) + 1;
                         let indexToFormat = parseInt( i );
                         let label = series[i].label || '';
                         let type = series[i].type || '';

diff --git a/classes/Visualizer/Gutenberg/src/Components/Sidebar/TableSettings.js b/classes/Visualizer/Gutenberg/src/Components/Sidebar/TableSettings.js
@@ -150,27 +150,29 @@ class TableSettings extends Component {
 						<SelectControl
 							label={ __( 'Enable Pagination' ) }
 							help={ __( 'To enable paging through the data.' ) }
-							value={ settings.page ? settings.page : 'disable' }
+							value={ settings.pagination ? settings.pagination : 0 }
 							options={ [
-								{ label: __( 'Enable' ), value: 'enable' },
-								{ label: __( 'Disable' ), value: 'disable' }
+								{ label: __( 'Enable' ), value: 1 },
+								{ label: __( 'Disable' ), value: 0 }
 							] }
 							onChange={ e => {
-								settings.page = e;
+								settings.pagination = e;
 								this.props.edit( settings );
 							} }
 						/>
 
-						<TextControl
-							label={ __( 'Number of rows per page' ) }
-							help={ __( 'The number of rows in each page, when paging is enabled.' ) }
-							type="number"
-							value={ settings.pageSize }
-							onChange={ e => {
-								settings.pageSize = e;
-								this.props.edit( settings );
-							} }
-						/>
+						{ '1' === settings.pagination && (
+							<TextControl
+								label={ __( 'Number of rows per page' ) }
+								help={ __( 'The number of rows in each page, when paging is enabled.' ) }
+								type="number"
+								value={ settings.pageSize }
+								onChange={ e => {
+									settings.pageSize = e;
+									this.props.edit( settings );
+								} }
+							/>
+						) }
 
 						<SelectControl
 							label={ __( 'Disable Sort' ) }

diff --git a/classes/Visualizer/Gutenberg/src/Editor.js b/classes/Visualizer/Gutenberg/src/Editor.js
@@ -124,6 +124,9 @@ class Editor extends Component {
 
 	editSettings( settings ) {
 		let chart = { ...this.state.chart };
+		if ( '1' !== settings.pagination ) {
+			delete settings.pageSize;
+		}
 		chart['visualizer-settings'] = settings;
 		this.setState({
 			chart,
@@ -466,6 +469,18 @@ class Editor extends Component {
 			);
 		}
 
+		if ( '1' === visualizerLocalize.isFullSiteEditor ) {
+			return (
+				<Notice
+					status="error"
+					isDismissible={ false }
+				>
+                        <Dashicon icon="chart-pie" />
+                        { __( 'Visualizer block charts are currently not available for selection here, you must visit the library, get the shortcode, and add the chart here in a shortcode tag.' ) }
+				</Notice>
+			);
+		}
+
 		if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
 			return (
 				<ChartRender

diff --git a/classes/Visualizer/Module.php b/classes/Visualizer/Module.php
@@ -272,6 +272,9 @@ private function _getCSV( $rows, $filename, $enclose ) {
 		// phpcs:ignore WordPress.PHP.NoSilencedErrors.Discouraged
 		$fp = function_exists( 'tmpfile' ) ? @tmpfile() : null;
 		if ( null === $fp ) {
+			if ( ! function_exists( 'wp_tempnam' ) ) {
+				require_once ABSPATH . 'wp-admin/includes/file.php';
+			}
 			$fp = fopen( wp_tempnam(), 'w+' );
 		}
 		if ( ! apply_filters( 'vizualizer_export_include_series_type', true ) ) {
@@ -628,7 +631,7 @@ protected function get_inline_custom_css( $id, $settings ) {
 		}
 
 		$img_path = VISUALIZER_ABSURL . 'images';
-		$css     .= ".locker,.locker-loader{position:absolute;top:0;left:0;width:100%;height:100%}.locker{z-index:1000;opacity:.8;background-color:#fff;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.locker-loader{z-index:1001;background:url($img_path/ajax-loader.gif) no-repeat center center}.dt-button{display:none!important}.visualizer-front-container.visualizer-lazy-render{content-visibility: auto;}.google-visualization-controls-categoryfilter label.google-visualization-controls-label {vertical-align: middle;}.google-visualization-controls-categoryfilter li.goog-inline-block {margin: 0 0.2em;}.google-visualization-controls-categoryfilter li {padding: 0 0.2em;}";
+		$css     .= ".locker,.locker-loader{position:absolute;top:0;left:0;width:100%;height:100%}.locker{z-index:1000;opacity:.8;background-color:#fff;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.locker-loader{z-index:1001;background:url($img_path/ajax-loader.gif) no-repeat center center}.dt-button{display:none!important}.visualizer-front-container.visualizer-lazy-render{content-visibility: auto;}.google-visualization-controls-categoryfilter label.google-visualization-controls-label {vertical-align: middle;}.google-visualization-controls-categoryfilter li.goog-inline-block {margin: 0 0.2em;}.google-visualization-controls-categoryfilter li {padding: 0 0.2em;}.visualizer-front-container .dataTables_scrollHeadInner{margin: 0 auto;}";
 		$css     .= '</style>';
 
 		$arguments = array( $css, $settings );

diff --git a/classes/Visualizer/Module/Wizard.php b/classes/Visualizer/Module/Wizard.php
@@ -206,6 +206,7 @@ private function setup_wizard_import_chart() {
 
 		$source = new Visualizer_Source_Csv( VISUALIZER_ABSPATH . DIRECTORY_SEPARATOR . 'samples' . DIRECTORY_SEPARATOR . $chart_type . '.csv' );
 		$source->fetch();
+		$series   = $source->getSeries();
 		$response = array(
 			'success' => 2,
 			'message' => __( 'Something went wrong while importing the chart', 'visualizer' ),
@@ -228,13 +229,111 @@ private function setup_wizard_import_chart() {
 			update_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_TYPE, $chart_type );
 			update_post_meta( $chart_id, Visualizer_Plugin::CF_DEFAULT_DATA, 1 );
 			update_post_meta( $chart_id, Visualizer_Plugin::CF_SOURCE, $source->getSourceName() );
-			update_post_meta( $chart_id, Visualizer_Plugin::CF_SERIES, $source->getSeries() );
+			update_post_meta( $chart_id, Visualizer_Plugin::CF_SERIES, $series );
 			update_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_LIBRARY, '' );
+
+			$setting_series = array();
+			foreach ( $series as $s ) {
+				$setting_series[] = array(
+					'visibleInLegend' => '',
+					'lineWidth'       => '',
+					'pointSize'       => '',
+					'format'          => '',
+					'curveType'       => '',
+					'color'           => '',
+					'role'            => '',
+				);
+			}
 			update_post_meta(
 				$chart_id,
 				Visualizer_Plugin::CF_SETTINGS,
 				array(
-					'focusTarget' => 'datum',
+					'title'           => '',
+					'titlePosition'   => '',
+					'titleTextStyle'  => array(
+						'color' => '#000',
+					),
+					'legend'          => array(
+						'position'  => 'right',
+						'alignment' => 15,
+						'textStyle' => array(
+							'color' => '#000',
+							'text'  => 'both',
+						),
+					),
+					'tooltip'         => array(
+						'trigger'       => 'focus',
+						'showColorCode' => 0,
+						'showColorCode' => 0,
+					),
+					'animation'       => array(
+						'startup'  => 0,
+						'duration' => '',
+						'easing'   => 'linear',
+					),
+					'width'           => '',
+					'height'          => '',
+					'keepAspectRatio' => false,
+					'isStacked'       => false,
+					'lazy_load_chart' => true,
+					'backgroundColor' => array(
+						'strokeWidth' => '',
+						'stroke'      => '',
+						'fill'        => '',
+					),
+					'chartArea'       => array(
+						'left'   => '',
+						'top'    => '',
+						'width'  => '',
+						'height' => '',
+					),
+					'focusTarget'     => 'datum',
+					'series'          => $setting_series,
+					'slices'          => array(),
+					'vAxis'           => array(
+						'title'          => '',
+						'textPosition'   => '',
+						'direction'      => 1,
+						'baselineColor'  => '#000',
+						'textStyle'      => array(
+							'color' => '#000',
+						),
+						'format'         => '',
+						'gridlines'      => array(
+							'count' => '',
+							'color' => '#ccc',
+						),
+						'minorGridlines' => array(
+							'count' => '',
+							'color' => '',
+						),
+						'viewWindow'     => array(
+							'max' => '',
+							'min' => '',
+						),
+					),
+					'hAxis'           => array(
+						'title'          => '',
+						'textPosition'   => '',
+						'direction'      => 1,
+						'baselineColor'  => '#000',
+						'textStyle'      => array(
+							'color' => '#000',
+						),
+						'format'         => '',
+						'gridlines'      => array(
+							'count' => '',
+							'color' => '#ccc',
+						),
+						'minorGridlines' => array(
+							'count' => '',
+							'color' => '',
+						),
+						'viewWindow'     => array(
+							'max' => '',
+							'min' => '',
+						),
+					),
 				)
 			);
 			$wizard_data = array(

diff --git a/classes/Visualizer/Render/Sidebar/Google.php b/classes/Visualizer/Render/Sidebar/Google.php
@@ -59,7 +59,7 @@ public function __construct( $data = array() ) {
 		parent::__construct( $data );
 
 		$this->_legendPositions = array(
-			''       => '',
+			''       => esc_html__( 'Default', 'visualizer' ),
 			'left'  => esc_html__( 'Left of the chart', 'visualizer' ),
 			'right'  => esc_html__( 'Right of the chart', 'visualizer' ),
 			'top'    => esc_html__( 'Above the chart', 'visualizer' ),
@@ -318,7 +318,7 @@ protected function _renderTooltipSettigns() {
 			'tooltip[trigger]',
 			isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
 			array(
-				''          => '',
+				''          => esc_html__( 'Default', 'visualizer' ),
 				'focus'     => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
 				'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', 'visualizer' ),
 				'none'      => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),

diff --git a/classes/Visualizer/Render/Sidebar/Type/GoogleCharts/Geo.php b/classes/Visualizer/Render/Sidebar/Type/GoogleCharts/Geo.php
@@ -205,7 +205,7 @@ protected function _renderTooltipSettigns() {
 			'tooltip[trigger]',
 			isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
 			array(
-				''          => '',
+				''          => esc_html__( 'Default', 'visualizer' ),
 				'focus'     => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
 				'none'      => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
 			),

diff --git a/composer.lock b/composer.lock