diff --git a/CHANGELOG.md b/CHANGELOG.md index 263775ebb..d94fed3d2 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +##### [Version 3.7.2](https://github.com/Codeinwp/visualizer/compare/v3.7.1...v3.7.2) (2021-12-20) + +- 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 + ##### [Version 3.7.1](https://github.com/Codeinwp/visualizer/compare/v3.7.0...v3.7.1) (2021-11-17) - [Feat] Allow charts to render in dashboard areas via 3rd party plugins like Dashboard Widgets Suite diff --git a/classes/Visualizer/Module.php b/classes/Visualizer/Module.php index 3acc35f46..deb88c963 100644 --- 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 = ''; - $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 .= ''; - $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 index 01cd8181e..54220c557 100644 --- 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 index bc6e51898..f72434bd1 100644 --- 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( ':(?=>):', " $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 . '
getHtmlAttributes( $attributes ) . '>
' . $this->addSchema( $chart->ID ); + return '
' . $actions_div . '
getHtmlAttributes( $attributes ) . '>
' . $this->addSchema( $chart->ID ) . '
'; } /** @@ -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 ) { + ?> + + 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 index ceb9ef5b5..b4efbbe9a 100644 --- 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 index 1f902594d..926db8c03 100644 --- a/css/front.css +++ b/css/front.css @@ -24,4 +24,8 @@ /* datatables */ .dt-button { display: none !important; -} \ No newline at end of file +} + +.visualizer-front-container.visualizer-lazy-render { + content-visibility: auto; +} diff --git a/css/media.css b/css/media.css index 7b6a41116..183ff81fb 100644 --- a/css/media.css +++ b/css/media.css @@ -1,5 +1,5 @@ /* - Version: 3.7.1 + Version: 3.7.2 */ #visualizer-library-view { padding: 30px 10px 10px 30px; diff --git a/index.php b/index.php index 7f98eb27a..6f629ab39 100644 --- a/index.php +++ b/index.php @@ -3,7 +3,7 @@ Plugin Name: Visualizer: Tables and Charts for WordPress Plugin URI: https://themeisle.com/plugins/visualizer-charts-and-graphs-lite/ Description: A simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages. The plugin uses Google Visualization API to render charts, which supports cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. - Version: 3.7.1 + Version: 3.7.2 Author: Themeisle Author URI: http://themeisle.com Requires at least: 3.5 diff --git a/js/render-chartjs.js b/js/render-chartjs.js index 67cd3102a..d5eb1d97a 100644 --- 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 index 84d83b8db..ec7a836e8 100644 --- a/js/render-facade.js +++ b/js/render-facade.js @@ -119,7 +119,7 @@ */ function showChart(id) { // clone the visualizer object so that the original object is not affected. - var viz = Object.assign({}, visualizer); + var viz = Object.assign(visualizer, window.visualizer || {}); if(id){ viz.id = id; } @@ -128,6 +128,7 @@ function displayChartsOnFrontEnd() { // display all charts that are NOT to be lazy-loaded. + $( 'div.viz-facade-loaded:not(.visualizer-lazy):empty' ).removeClass( 'viz-facade-loaded' ); $('div.visualizer-front:not(.visualizer-lazy):not(.viz-facade-loaded)').each(function(index, element){ var id = $(element).addClass('viz-facade-loaded').attr('id'); showChart(id); diff --git a/js/render-google.js b/js/render-google.js index 48fe59023..d795aa751 100644 --- a/js/render-google.js +++ b/js/render-google.js @@ -227,6 +227,10 @@ var __visualizer_chart_images = []; delete axis.viewWindow[property]; } } + + if(settings.hAxis && settings.hAxis.format == ''){ + settings.hAxis.format = 'YYYY-MM-dd'; + } } if(settings.hAxis){ @@ -235,9 +239,6 @@ var __visualizer_chart_images = []; settings.hAxis.textStyle = {color: settings.hAxis.textStyle}; } } - if(settings.hAxis.format == ''){ - settings.hAxis.format = 'YYYY-MM-dd'; - } } if(settings.vAxis){ @@ -428,12 +429,13 @@ var __visualizer_chart_images = []; }, 500 ); } - $( window ).on( 'orientationchange', function( event ) { - $( '.visualizer-chart-loaded' ).removeClass( 'visualizer-chart-loaded' ); - } ); + window.addEventListener( 'orientationchange', function() { + $( '.visualizer-chart-loaded' ).removeClass( 'visualizer-chart-loaded' ).resize(); + }, false); }); $(window).on('load', function(){ + $( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize(); resizeHiddenContainers(true); }); diff --git a/package.json b/package.json index 76c1eadb2..79b79c84b 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "visualizer", - "version": "3.7.1", + "version": "3.7.2", "description": "Visualizer Lite", "repository": { "type": "git", diff --git a/readme.txt b/readme.txt index a50daab97..f72e30d0c 100755 --- a/readme.txt +++ b/readme.txt @@ -163,6 +163,17 @@ Pay attention that to turn your shortcodes into graphs, your theme has to have ` == Changelog == +##### [Version 3.7.2](https://github.com/Codeinwp/visualizer/compare/v3.7.1...v3.7.2) (2021-12-20) + +- 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 + + + + ##### [Version 3.7.1](https://github.com/Codeinwp/visualizer/compare/v3.7.0...v3.7.1) (2021-11-17) - [Feat] Allow charts to render in dashboard areas via 3rd party plugins like Dashboard Widgets Suite