release: new version

cristian-ungureanu · web-flow · commit 35894a7eb678 · 2021-12-20T11:58:51.000+02:00
- Add latest chartJS library support in the bar chart
- Fix horizontal axis showing date format in Bar chart 
- Fix orientation rotate issue in mobile
- CSS performance improvements
- Improve JS performance
diff --git a/classes/Visualizer/Module.php b/classes/Visualizer/Module.php
@@ -604,30 +604,29 @@ protected function load_chart_class_name( $chart_id ) {
 	protected function get_inline_custom_css( $id, $settings ) {
 		$css        = '';
 
-		$arguments  = array( '', $settings );
-		if ( ! isset( $settings['customcss'] ) ) {
-			return $arguments;
-		}
-
 		$classes    = array();
 		$css        = '<style type="text/css" name="visualizer-custom-css" id="customcss-' . $id . '">';
-		foreach ( $settings['customcss'] as $name => $element ) {
-			$attributes = array();
-			foreach ( $element as $property => $value ) {
-				$attributes[]   = $this->handle_css_property( $property, $value );
-			}
-			$class_name = $id . $name;
-			$properties = implode( ' !important; ', array_filter( $attributes ) );
-			if ( ! empty( $properties ) ) {
-				$css    .= '.' . $class_name . ' {' . $properties . ' !important;}';
-				$classes[ $name ] = $class_name;
+		if ( ! empty( $settings['customcss'] ) ) {
+			foreach ( $settings['customcss'] as $name => $element ) {
+				$attributes = array();
+				foreach ( $element as $property => $value ) {
+					$attributes[]   = $this->handle_css_property( $property, $value );
+				}
+				$class_name = $id . $name;
+				$properties = implode( ' !important; ', array_filter( $attributes ) );
+				if ( ! empty( $properties ) ) {
+					$css    .= '.' . $class_name . ' {' . $properties . ' !important;}';
+					$classes[ $name ] = $class_name;
+				}
 			}
+			$settings['cssClassNames']  = $classes;
 		}
-		$css        .= '</style>';
 
-		$settings['cssClassNames']  = $classes;
+		$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;}";
+		$css     .= '</style>';
 
-		$arguments  = array( $css, $settings );
+		$arguments = array( $css, $settings );
 		apply_filters_ref_array( 'visualizer_inline_css', array( &$arguments ) );
 
 		return $arguments;
diff --git a/classes/Visualizer/Module/Chart.php b/classes/Visualizer/Module/Chart.php
@@ -528,6 +528,7 @@ public function renderChartPages() {
 		}
 
 		$_POST['save_chart_image'] = isset( $_POST['save_chart_image'] ) && 'yes' === $_POST['save_chart_image'] ? true : false;
+		$_POST['lazy_load_chart']  = isset( $_POST['lazy_load_chart'] ) && 'yes' === $_POST['lazy_load_chart'] ? true : false;
 
 		if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {
 			$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id, $_POST['save_chart_image'] );
diff --git a/classes/Visualizer/Module/Frontend.php b/classes/Visualizer/Module/Frontend.php
@@ -41,6 +41,14 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
 	 */
 	private $_charts = array();
 
+	/**
+	 * Lazy render script.
+	 *
+	 * @access private
+	 * @var bool
+	 */
+	private $lazy_render_script = false;
+
 	/**
 	 * Constructor.
 	 *
@@ -53,6 +61,7 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
 	public function __construct( Visualizer_Plugin $plugin ) {
 		parent::__construct( $plugin );
 
+		$this->_addAction( 'wp_print_footer_scripts', 'printFooterScripts' );
 		$this->_addAction( 'wp_enqueue_scripts', 'enqueueScripts' );
 		$this->_addAction( 'load-index.php', 'enqueueScripts' );
 		$this->_addAction( 'visualizer_enqueue_scripts', 'enqueueScripts' );
@@ -81,14 +90,32 @@ function script_loader_tag( $tag, $handle, $src ) {
 		if ( is_admin() ) {
 			return $tag;
 		}
-
-		$scripts    = array( 'google-jsapi', 'visualizer-render-google-lib', 'visualizer-render-google' );
-
-		foreach ( $scripts as $async ) {
+		// Async scripts.
+		$async_scripts = array( 'google-jsapi', 'chartjs', 'visualizer-datatables' );
+		foreach ( $async_scripts as $async ) {
 			if ( $async === $handle ) {
-				$tag = str_replace( ' src', ' defer="defer" src', $tag );
+				$tag = str_replace( ' src', ' async src', $tag );
+				break;
+			}
+		};
+
+		// Async scripts.
+		$scripts = array( 'dom-to-image' );
+		foreach ( array( 'async', 'defer' ) as $attr ) {
+			if ( wp_scripts()->get_data( $handle, $attr ) ) {
+				break;
+			}
+			if ( in_array( $handle, $async_scripts, true ) || false === strpos( $handle, 'visualizer-' ) ) {
 				break;
 			}
+			if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
+				$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
+				if ( $this->lazy_render_script ) {
+					$tag = str_replace( ' src', ' data-visualizer-script', $tag );
+				}
+			}
+			// Only allow async or defer, not both.
+			break;
 		}
 		return $tag;
 	}
@@ -244,7 +271,6 @@ public function perform_action( WP_REST_Request $params ) {
 	 */
 	public function enqueueScripts() {
 		wp_register_script( 'visualizer-customization', $this->get_user_customization_js(), array(), null, true );
-		wp_register_style( 'visualizer-front', VISUALIZER_ABSURL . 'css/front.css', array(), Visualizer_Plugin::VERSION );
 		do_action( 'visualizer_pro_frontend_load_resources' );
 	}
 
@@ -329,6 +355,14 @@ public function renderChart( $atts ) {
 		// handle settings filter hooks
 		$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
 
+		$lazy_load = isset( $settings['lazy_load_chart'] ) ? $settings['lazy_load_chart'] : false;
+		$lazy_load = apply_filters( 'visualizer_lazy_load_chart', $lazy_load, $chart->ID );
+		$container_class = 'visualizer-front-container';
+		if ( $lazy_load ) {
+			$this->lazy_render_script = true;
+			$container_class .= ' visualizer-lazy-render';
+		}
+
 		// handle data filter hooks
 		$data   = self::get_chart_data( $chart, $type );
 
@@ -435,10 +469,9 @@ public function renderChart( $atts ) {
 				)
 			);
 		}
-		wp_enqueue_style( 'visualizer-front' );
 
 		// return placeholder div
-		return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
+		return '<div class="' . $container_class . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . '</div>';
 	}
 
 	/**
@@ -608,4 +641,42 @@ private function getChartData( $cache_key = '', $chart_id = 0 ) {
 
 		return false;
 	}
+
+	/**
+	 * Print footer script.
+	 */
+	public function printFooterScripts() {
+		if ( $this->lazy_render_script ) {
+			?>
+		<script type="text/javascript">
+			var visualizerUserInteractionEvents = [
+				"mouseover",
+				"keydown",
+				"touchmove",
+				"touchstart"
+			];
+
+			visualizerUserInteractionEvents.forEach(function(event) {
+				window.addEventListener(event, visualizerTriggerScriptLoader, { passive: true });
+			});
+
+			function visualizerTriggerScriptLoader() {
+				visualizerLoadScripts();
+				visualizerUserInteractionEvents.forEach(function(event) {
+					window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true });
+				});
+			}
+
+			function visualizerLoadScripts() {
+				document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
+					jQuery.getScript( elem.getAttribute("data-visualizer-script"), function() {
+						elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
+						elem.removeAttribute("data-visualizer-script");
+					} );
+				});
+			}
+		</script>
+			<?php
+		}
+	}
 }
diff --git a/classes/Visualizer/Render/Sidebar.php b/classes/Visualizer/Render/Sidebar.php
@@ -517,19 +517,38 @@ protected function load_dependent_assets( $libs ) {
 	 * @access protected
 	 */
 	protected function _renderChartImageSettings() {
-			// Default enable if amp is active.
-			$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
-			$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
-
-			self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
-				self::_renderCheckboxItem(
-					esc_html__( 'Save inside media library?', 'visualizer' ),
-					'save_chart_image',
-					$this->save_chart_image ? true : false,
-					'yes',
-					esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
-					false
-				);
-			self::_renderSectionEnd();
+		// Default enable if amp is active.
+		$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
+		$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
+
+		$is_create_chart = true;
+		if ( filter_input( INPUT_GET, 'library', FILTER_VALIDATE_BOOLEAN ) ) {
+			if ( filter_input( INPUT_GET, 'action' ) === Visualizer_Plugin::ACTION_EDIT_CHART ) {
+				$is_create_chart = false;
+			}
+		}
+		$this->lazy_load_chart = null === $this->lazy_load_chart && $is_create_chart ? true : $this->lazy_load_chart;
+
+		self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
+			self::_renderCheckboxItem(
+				esc_html__( 'Save inside media library?', 'visualizer' ),
+				'save_chart_image',
+				$this->save_chart_image ? true : false,
+				'yes',
+				esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
+				false
+			);
+		self::_renderSectionEnd();
+
+		self::_renderSectionStart( esc_html__( 'Lazy rendering of chart', 'visualizer' ), false );
+			self::_renderCheckboxItem(
+				esc_html__( 'Enable lazy rendering of chart?', 'visualizer' ),
+				'lazy_load_chart',
+				$this->lazy_load_chart ? true : false,
+				'yes',
+				esc_html__( 'To enable lazy chart rendering.', 'visualizer' ),
+				false
+			);
+		self::_renderSectionEnd();
 	}
 }
diff --git a/classes/Visualizer/Source/Query.php b/classes/Visualizer/Source/Query.php
@@ -115,7 +115,6 @@ public function fetch( $as_html = false, $results_as_numeric_array = false, $raw
 			$wpdb->hide_errors();
 			// @codingStandardsIgnoreStart
 			$rows       = $wpdb->get_results( $this->_query, $results_as_numeric_array ? ARRAY_N : ARRAY_A );
-			do_action( 'themeisle_log_event', Visualizer_Plugin::NAME, sprintf( 'Firing query %s to get results %s with error %s', $this->_query, print_r( $rows, true ), print_r( $wpdb->last_error, true ) ), 'debug', __FILE__, __LINE__ );
 			// @codingStandardsIgnoreEnd
 			$wpdb->show_errors();
 
@@ -145,6 +144,9 @@ public function fetch( $as_html = false, $results_as_numeric_array = false, $raw
 				$this->_error = $wpdb->last_error;
 			}
 		}
+		// Query log.
+		do_action( 'themeisle_log_event', Visualizer_Plugin::NAME, sprintf( 'Firing query %s to get results %s with error %s', $this->_query, print_r( $rows, true ), print_r( $wpdb->last_error, true ) ), 'debug', __FILE__, __LINE__ );
+
 		if ( $as_html ) {
 			$results = $this->html( $headers, $results );
 		} else {
diff --git a/css/front.css b/css/front.css
@@ -24,4 +24,8 @@
 /* datatables */
 .dt-button {
 	display: none !important;
-}
+}
+
+.visualizer-front-container.visualizer-lazy-render {
+  content-visibility: auto;
+}
diff --git a/js/render-chartjs.js b/js/render-chartjs.js
@@ -47,7 +47,8 @@
                 type = 'bar';
                 break;
             case 'bar':
-                type = 'horizontalBar';
+                type = 'bar';
+                settings.indexAxis = 'y';
                 break;
             case 'pie':
                 // donut is not a setting but a separate chart type.
@@ -200,10 +201,24 @@
         if(typeof settings['yAxes'] !== 'undefined' && typeof settings['xAxes'] !== 'undefined'){
             // stacking has to be defined on both axes.
             if(typeof settings['yAxes']['stacked_bool'] !== 'undefined'){
-                settings['xAxes']['stacked_bool'] = 'true';
+                settings['yAxes']['stacked_bool'] = 'true';
             }
             if(typeof settings['xAxes']['stacked_bool'] !== 'undefined'){
-                settings['yAxes']['stacked_bool'] = 'true';
+                settings['xAxes']['stacked_bool'] = 'true';
+            }
+            // Bar percentage.
+            if (typeof settings['yAxes']['barPercentage_int'] !=='undefined' && ''!== settings['yAxes']['barPercentage_int']){
+                settings['barPercentage'] = settings['yAxes']['barPercentage_int'];
+            }
+            if (typeof settings['xAxes']['barPercentage_int'] !=='undefined' && ''!== settings['xAxes']['barPercentage_int']){
+                settings['barPercentage'] = settings['xAxes']['barPercentage_int'];
+            }
+            // Bar thickness.
+            if (typeof settings['yAxes']['barThickness'] !=='undefined' && ''!== settings['yAxes']['barThickness']){
+                settings['barThickness'] = settings['yAxes']['barThickness'];
+            }
+            if (typeof settings['xAxes']['barThickness'] !=='undefined' && ''!== settings['xAxes']['barThickness']){
+                settings['barThickness'] = settings['xAxes']['barThickness'];
             }
         }
         configureAxes(settings, 'yAxes', chart);
@@ -275,6 +290,54 @@
             var $axis = $scales['scales'][axis];
 
             $axis.push($features);
+            // Migrate xAxes settings to v3.0+
+            if ( $scales.scales && $scales.scales.xAxes ) {
+                for (var x in $scales.scales.xAxes) {
+                    $scales.scales.x = {
+                        display: $scales.scales.xAxes[x].scaleLabel.display,
+                        title: {
+                            display:true,
+                            text: $scales.scales.xAxes[x].scaleLabel.labelString,
+                            color: $scales.scales.xAxes[x].scaleLabel.fontColor,
+                            font: {
+                                family: $scales.scales.xAxes[x].scaleLabel.fontFamily,
+                                size: $scales.scales.xAxes[x].scaleLabel.fontSize
+                            }
+                        },
+                        suggestedMax: $scales.scales.xAxes[x].ticks.suggestedMax || '',
+                        suggestedMin: $scales.scales.xAxes[x].ticks.suggestedMin || '',
+                        ticks: {
+                            maxTicksLimit: $scales.scales.xAxes[x].ticks.maxTicksLimit
+                        },
+                        stacked: $scales.scales.xAxes[x].stacked || false
+                    }
+                }
+                delete $scales.scales.xAxes;
+            }
+            // Migrate yAxes settings to v3.0+
+            if ( $scales.scales && $scales.scales.yAxes ) {
+                for (var y in $scales.scales.yAxes) {
+                    $scales.scales.y = {
+                        display: $scales.scales.yAxes[y].scaleLabel.display,
+                        title: {
+                            display:true,
+                            text: $scales.scales.yAxes[y].scaleLabel.labelString,
+                            color: $scales.scales.yAxes[y].scaleLabel.fontColor,
+                            font: {
+                                family: $scales.scales.yAxes[y].scaleLabel.fontFamily,
+                                size: $scales.scales.yAxes[y].scaleLabel.fontSize
+                            }
+                        },
+                        suggestedMax: $scales.scales.yAxes[y].ticks.suggestedMax || '',
+                        suggestedMin: $scales.scales.yAxes[y].ticks.suggestedMin || '',
+                        ticks: {
+                            maxTicksLimit: $scales.scales.yAxes[y].ticks.maxTicksLimit
+                        },
+                        stacked: $scales.scales.yAxes[y].stacked || false
+                    }
+                }
+                delete $scales.scales.yAxes;
+            }
             $.extend(settings, $scales);
 
             // to prevent duplication, indicates that the axis has been set.
@@ -288,12 +351,12 @@
             var format = settings[axis + '_format'];
             switch(axis){
                 case 'xAxes':
-                    settings.scales.xAxes[0].ticks.callback = function(value, index, values){
+                    settings.scales.x.ticks.callback = function(value, index, values){
                         return format_datum(value, format);
                     };
                     break;
                 case 'yAxes':
-                    settings.scales.yAxes[0].ticks.callback = function(value, index, values){
+                    settings.scales.y.ticks.callback = function(value, index, values){
                         return format_datum(value, format);
                     };
                     break;
diff --git a/js/render-facade.js b/js/render-facade.js
diff --git a/js/render-google.js b/js/render-google.js

Original file line number	Diff line number	Diff line change
`@@ -528,6 +528,7 @@ public function renderChartPages() {`
`528`	`528`	`}`
`529`	`529`
`530`	`530`	`$_POST['save_chart_image'] = isset( $_POST['save_chart_image'] ) && 'yes' === $_POST['save_chart_image'] ? true : false;`
	`531`	`+ $_POST['lazy_load_chart'] = isset( $_POST['lazy_load_chart'] ) && 'yes' === $_POST['lazy_load_chart'] ? true : false;`
`531`	`532`
`532`	`533`	`if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {`
`533`	`534`	`$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id, $_POST['save_chart_image'] );`