Skip to content

Commit 35894a7

Browse files
author
cristian-ungureanu
authored
release: new version
- 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
2 parents ee4a021 + bc79d1a commit 35894a7

File tree

9 files changed

+216
-54
lines changed

9 files changed

+216
-54
lines changed

‎classes/Visualizer/Module.php

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -604,30 +604,29 @@ protected function load_chart_class_name( $chart_id ) {
604604
protected function get_inline_custom_css( $id, $settings ) {
605605
$css = '';
606606

607-
$arguments = array( '', $settings );
608-
if ( ! isset( $settings['customcss'] ) ) {
609-
return $arguments;
610-
}
611-
612607
$classes = array();
613608
$css = '<style type="text/css" name="visualizer-custom-css" id="customcss-' . $id . '">';
614-
foreach ( $settings['customcss'] as $name => $element ) {
615-
$attributes = array();
616-
foreach ( $element as $property => $value ) {
617-
$attributes[] = $this->handle_css_property( $property, $value );
618-
}
619-
$class_name = $id . $name;
620-
$properties = implode( ' !important; ', array_filter( $attributes ) );
621-
if ( ! empty( $properties ) ) {
622-
$css .= '.' . $class_name . ' {' . $properties . ' !important;}';
623-
$classes[ $name ] = $class_name;
609+
if ( ! empty( $settings['customcss'] ) ) {
610+
foreach ( $settings['customcss'] as $name => $element ) {
611+
$attributes = array();
612+
foreach ( $element as $property => $value ) {
613+
$attributes[] = $this->handle_css_property( $property, $value );
614+
}
615+
$class_name = $id . $name;
616+
$properties = implode( ' !important; ', array_filter( $attributes ) );
617+
if ( ! empty( $properties ) ) {
618+
$css .= '.' . $class_name . ' {' . $properties . ' !important;}';
619+
$classes[ $name ] = $class_name;
620+
}
624621
}
622+
$settings['cssClassNames'] = $classes;
625623
}
626-
$css .= '</style>';
627624

628-
$settings['cssClassNames'] = $classes;
625+
$img_path = VISUALIZER_ABSURL . 'images';
626+
$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;}";
627+
$css .= '</style>';
629628

630-
$arguments = array( $css, $settings );
629+
$arguments = array( $css, $settings );
631630
apply_filters_ref_array( 'visualizer_inline_css', array( &$arguments ) );
632631

633632
return $arguments;

‎classes/Visualizer/Module/Chart.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,7 @@ public function renderChartPages() {
528528
}
529529

530530
$_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;
531532

532533
if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {
533534
$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id, $_POST['save_chart_image'] );

‎classes/Visualizer/Module/Frontend.php

Lines changed: 79 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
4141
*/
4242
private $_charts = array();
4343

44+
/**
45+
* Lazy render script.
46+
*
47+
* @access private
48+
* @var bool
49+
*/
50+
private $lazy_render_script = false;
51+
4452
/**
4553
* Constructor.
4654
*
@@ -53,6 +61,7 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
5361
public function __construct( Visualizer_Plugin $plugin ) {
5462
parent::__construct( $plugin );
5563

64+
$this->_addAction( 'wp_print_footer_scripts', 'printFooterScripts' );
5665
$this->_addAction( 'wp_enqueue_scripts', 'enqueueScripts' );
5766
$this->_addAction( 'load-index.php', 'enqueueScripts' );
5867
$this->_addAction( 'visualizer_enqueue_scripts', 'enqueueScripts' );
@@ -81,14 +90,32 @@ function script_loader_tag( $tag, $handle, $src ) {
8190
if ( is_admin() ) {
8291
return $tag;
8392
}
84-
85-
$scripts = array( 'google-jsapi', 'visualizer-render-google-lib', 'visualizer-render-google' );
86-
87-
foreach ( $scripts as $async ) {
93+
// Async scripts.
94+
$async_scripts = array( 'google-jsapi', 'chartjs', 'visualizer-datatables' );
95+
foreach ( $async_scripts as $async ) {
8896
if ( $async === $handle ) {
89-
$tag = str_replace( ' src', ' defer="defer" src', $tag );
97+
$tag = str_replace( ' src', ' async src', $tag );
98+
break;
99+
}
100+
};
101+
102+
// Async scripts.
103+
$scripts = array( 'dom-to-image' );
104+
foreach ( array( 'async', 'defer' ) as $attr ) {
105+
if ( wp_scripts()->get_data( $handle, $attr ) ) {
106+
break;
107+
}
108+
if ( in_array( $handle, $async_scripts, true ) || false === strpos( $handle, 'visualizer-' ) ) {
90109
break;
91110
}
111+
if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
112+
$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
113+
if ( $this->lazy_render_script ) {
114+
$tag = str_replace( ' src', ' data-visualizer-script', $tag );
115+
}
116+
}
117+
// Only allow async or defer, not both.
118+
break;
92119
}
93120
return $tag;
94121
}
@@ -244,7 +271,6 @@ public function perform_action( WP_REST_Request $params ) {
244271
*/
245272
public function enqueueScripts() {
246273
wp_register_script( 'visualizer-customization', $this->get_user_customization_js(), array(), null, true );
247-
wp_register_style( 'visualizer-front', VISUALIZER_ABSURL . 'css/front.css', array(), Visualizer_Plugin::VERSION );
248274
do_action( 'visualizer_pro_frontend_load_resources' );
249275
}
250276

@@ -329,6 +355,14 @@ public function renderChart( $atts ) {
329355
// handle settings filter hooks
330356
$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
331357

358+
$lazy_load = isset( $settings['lazy_load_chart'] ) ? $settings['lazy_load_chart'] : false;
359+
$lazy_load = apply_filters( 'visualizer_lazy_load_chart', $lazy_load, $chart->ID );
360+
$container_class = 'visualizer-front-container';
361+
if ( $lazy_load ) {
362+
$this->lazy_render_script = true;
363+
$container_class .= ' visualizer-lazy-render';
364+
}
365+
332366
// handle data filter hooks
333367
$data = self::get_chart_data( $chart, $type );
334368

@@ -435,10 +469,9 @@ public function renderChart( $atts ) {
435469
)
436470
);
437471
}
438-
wp_enqueue_style( 'visualizer-front' );
439472

440473
// return placeholder div
441-
return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
474+
return '<div class="' . $container_class . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . '</div>';
442475
}
443476

444477
/**
@@ -608,4 +641,42 @@ private function getChartData( $cache_key = '', $chart_id = 0 ) {
608641

609642
return false;
610643
}
644+
645+
/**
646+
* Print footer script.
647+
*/
648+
public function printFooterScripts() {
649+
if ( $this->lazy_render_script ) {
650+
?>
651+
<script type="text/javascript">
652+
var visualizerUserInteractionEvents = [
653+
"mouseover",
654+
"keydown",
655+
"touchmove",
656+
"touchstart"
657+
];
658+
659+
visualizerUserInteractionEvents.forEach(function(event) {
660+
window.addEventListener(event, visualizerTriggerScriptLoader, { passive: true });
661+
});
662+
663+
function visualizerTriggerScriptLoader() {
664+
visualizerLoadScripts();
665+
visualizerUserInteractionEvents.forEach(function(event) {
666+
window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true });
667+
});
668+
}
669+
670+
function visualizerLoadScripts() {
671+
document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
672+
jQuery.getScript( elem.getAttribute("data-visualizer-script"), function() {
673+
elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
674+
elem.removeAttribute("data-visualizer-script");
675+
} );
676+
});
677+
}
678+
</script>
679+
<?php
680+
}
681+
}
611682
}

‎classes/Visualizer/Render/Sidebar.php

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -517,19 +517,38 @@ protected function load_dependent_assets( $libs ) {
517517
* @access protected
518518
*/
519519
protected function _renderChartImageSettings() {
520-
// Default enable if amp is active.
521-
$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
522-
$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
523-
524-
self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
525-
self::_renderCheckboxItem(
526-
esc_html__( 'Save inside media library?', 'visualizer' ),
527-
'save_chart_image',
528-
$this->save_chart_image ? true : false,
529-
'yes',
530-
esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
531-
false
532-
);
533-
self::_renderSectionEnd();
520+
// Default enable if amp is active.
521+
$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
522+
$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
523+
524+
$is_create_chart = true;
525+
if ( filter_input( INPUT_GET, 'library', FILTER_VALIDATE_BOOLEAN ) ) {
526+
if ( filter_input( INPUT_GET, 'action' ) === Visualizer_Plugin::ACTION_EDIT_CHART ) {
527+
$is_create_chart = false;
528+
}
529+
}
530+
$this->lazy_load_chart = null === $this->lazy_load_chart && $is_create_chart ? true : $this->lazy_load_chart;
531+
532+
self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
533+
self::_renderCheckboxItem(
534+
esc_html__( 'Save inside media library?', 'visualizer' ),
535+
'save_chart_image',
536+
$this->save_chart_image ? true : false,
537+
'yes',
538+
esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
539+
false
540+
);
541+
self::_renderSectionEnd();
542+
543+
self::_renderSectionStart( esc_html__( 'Lazy rendering of chart', 'visualizer' ), false );
544+
self::_renderCheckboxItem(
545+
esc_html__( 'Enable lazy rendering of chart?', 'visualizer' ),
546+
'lazy_load_chart',
547+
$this->lazy_load_chart ? true : false,
548+
'yes',
549+
esc_html__( 'To enable lazy chart rendering.', 'visualizer' ),
550+
false
551+
);
552+
self::_renderSectionEnd();
534553
}
535554
}

‎classes/Visualizer/Source/Query.php

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@ public function fetch( $as_html = false, $results_as_numeric_array = false, $raw
115115
$wpdb->hide_errors();
116116
// @codingStandardsIgnoreStart
117117
$rows = $wpdb->get_results( $this->_query, $results_as_numeric_array ? ARRAY_N : ARRAY_A );
118-
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__ );
119118
// @codingStandardsIgnoreEnd
120119
$wpdb->show_errors();
121120

@@ -145,6 +144,9 @@ public function fetch( $as_html = false, $results_as_numeric_array = false, $raw
145144
$this->_error = $wpdb->last_error;
146145
}
147146
}
147+
// Query log.
148+
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__ );
149+
148150
if ( $as_html ) {
149151
$results = $this->html( $headers, $results );
150152
} else {

‎css/front.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@
2424
/* datatables */
2525
.dt-button {
2626
display: none !important;
27-
}
27+
}
28+
29+
.visualizer-front-container.visualizer-lazy-render {
30+
content-visibility: auto;
31+
}

‎js/render-chartjs.js

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
type = 'bar';
4848
break;
4949
case 'bar':
50-
type = 'horizontalBar';
50+
type = 'bar';
51+
settings.indexAxis = 'y';
5152
break;
5253
case 'pie':
5354
// donut is not a setting but a separate chart type.
@@ -200,10 +201,24 @@
200201
if(typeof settings['yAxes'] !== 'undefined' && typeof settings['xAxes'] !== 'undefined'){
201202
// stacking has to be defined on both axes.
202203
if(typeof settings['yAxes']['stacked_bool'] !== 'undefined'){
203-
settings['xAxes']['stacked_bool'] = 'true';
204+
settings['yAxes']['stacked_bool'] = 'true';
204205
}
205206
if(typeof settings['xAxes']['stacked_bool'] !== 'undefined'){
206-
settings['yAxes']['stacked_bool'] = 'true';
207+
settings['xAxes']['stacked_bool'] = 'true';
208+
}
209+
// Bar percentage.
210+
if (typeof settings['yAxes']['barPercentage_int'] !=='undefined' && ''!== settings['yAxes']['barPercentage_int']){
211+
settings['barPercentage'] = settings['yAxes']['barPercentage_int'];
212+
}
213+
if (typeof settings['xAxes']['barPercentage_int'] !=='undefined' && ''!== settings['xAxes']['barPercentage_int']){
214+
settings['barPercentage'] = settings['xAxes']['barPercentage_int'];
215+
}
216+
// Bar thickness.
217+
if (typeof settings['yAxes']['barThickness'] !=='undefined' && ''!== settings['yAxes']['barThickness']){
218+
settings['barThickness'] = settings['yAxes']['barThickness'];
219+
}
220+
if (typeof settings['xAxes']['barThickness'] !=='undefined' && ''!== settings['xAxes']['barThickness']){
221+
settings['barThickness'] = settings['xAxes']['barThickness'];
207222
}
208223
}
209224
configureAxes(settings, 'yAxes', chart);
@@ -275,6 +290,54 @@
275290
var $axis = $scales['scales'][axis];
276291

277292
$axis.push($features);
293+
// Migrate xAxes settings to v3.0+
294+
if ( $scales.scales && $scales.scales.xAxes ) {
295+
for (var x in $scales.scales.xAxes) {
296+
$scales.scales.x = {
297+
display: $scales.scales.xAxes[x].scaleLabel.display,
298+
title: {
299+
display:true,
300+
text: $scales.scales.xAxes[x].scaleLabel.labelString,
301+
color: $scales.scales.xAxes[x].scaleLabel.fontColor,
302+
font: {
303+
family: $scales.scales.xAxes[x].scaleLabel.fontFamily,
304+
size: $scales.scales.xAxes[x].scaleLabel.fontSize
305+
}
306+
},
307+
suggestedMax: $scales.scales.xAxes[x].ticks.suggestedMax || '',
308+
suggestedMin: $scales.scales.xAxes[x].ticks.suggestedMin || '',
309+
ticks: {
310+
maxTicksLimit: $scales.scales.xAxes[x].ticks.maxTicksLimit
311+
},
312+
stacked: $scales.scales.xAxes[x].stacked || false
313+
}
314+
}
315+
delete $scales.scales.xAxes;
316+
}
317+
// Migrate yAxes settings to v3.0+
318+
if ( $scales.scales && $scales.scales.yAxes ) {
319+
for (var y in $scales.scales.yAxes) {
320+
$scales.scales.y = {
321+
display: $scales.scales.yAxes[y].scaleLabel.display,
322+
title: {
323+
display:true,
324+
text: $scales.scales.yAxes[y].scaleLabel.labelString,
325+
color: $scales.scales.yAxes[y].scaleLabel.fontColor,
326+
font: {
327+
family: $scales.scales.yAxes[y].scaleLabel.fontFamily,
328+
size: $scales.scales.yAxes[y].scaleLabel.fontSize
329+
}
330+
},
331+
suggestedMax: $scales.scales.yAxes[y].ticks.suggestedMax || '',
332+
suggestedMin: $scales.scales.yAxes[y].ticks.suggestedMin || '',
333+
ticks: {
334+
maxTicksLimit: $scales.scales.yAxes[y].ticks.maxTicksLimit
335+
},
336+
stacked: $scales.scales.yAxes[y].stacked || false
337+
}
338+
}
339+
delete $scales.scales.yAxes;
340+
}
278341
$.extend(settings, $scales);
279342

280343
// to prevent duplication, indicates that the axis has been set.
@@ -288,12 +351,12 @@
288351
var format = settings[axis + '_format'];
289352
switch(axis){
290353
case 'xAxes':
291-
settings.scales.xAxes[0].ticks.callback = function(value, index, values){
354+
settings.scales.x.ticks.callback = function(value, index, values){
292355
return format_datum(value, format);
293356
};
294357
break;
295358
case 'yAxes':
296-
settings.scales.yAxes[0].ticks.callback = function(value, index, values){
359+
settings.scales.y.ticks.callback = function(value, index, values){
297360
return format_datum(value, format);
298361
};
299362
break;

0 commit comments

Comments
 (0)