', esc_html( $title ), '
';
+ if ( Visualizer_Module::is_pro() && $with_filter ) {
+ echo '';
+ echo '';
+ }
echo '
';
+ }
echo '';
echo '
';
echo '
';
+ if ( Visualizer_Module::is_pro() && $with_filter ) {
+ echo '';
echo '';
echo '';
echo '';
diff --git a/classes/Visualizer/Render/Page/Data.php b/classes/Visualizer/Render/Page/Data.php
index 9f4f2f9a3..e611eaf5d 100644
--- a/classes/Visualizer/Render/Page/Data.php
+++ b/classes/Visualizer/Render/Page/Data.php
@@ -57,9 +57,16 @@ protected function _renderContent() {
$this->add_additional_content();
// Added by Ash/Upwork
+ if ( Visualizer_Module::is_pro() ) {
+ echo '
';
+ echo '';
+ }
echo '
';
+ }
echo $this->custom_css;
}
diff --git a/classes/Visualizer/Render/Sidebar.php b/classes/Visualizer/Render/Sidebar.php
index ab96a2294..44a0d5fe9 100644
--- a/classes/Visualizer/Render/Sidebar.php
+++ b/classes/Visualizer/Render/Sidebar.php
@@ -158,6 +158,9 @@ protected function _renderManualConfigExample() {
* @access protected
*/
protected function _renderAdvancedSettings() {
+ // Chart control settings.
+ $this->_renderChartControlsGroup();
+
if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
self::_renderGroupStart( esc_html__( 'Frontend Actions', 'visualizer' ) );
} else {
@@ -345,14 +348,15 @@ protected static function _renderColorPickerItem( $title, $name, $value, $defaul
* @param string $type The type for the input (out of number, email, tel etc., default is text).
* @param array $custom_attributes The custom attributes.
*/
- protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '', $type = 'text', $custom_attributes = array() ) {
+ protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '', $type = 'text', $custom_attributes = array(), $extra_class = array() ) {
$attributes = '';
if ( $custom_attributes ) {
foreach ( $custom_attributes as $k => $v ) {
$attributes .= ' ' . $k . '="' . esc_attr( $v ) . '"';
}
}
- echo '';
echo '';
echo '
';
+ if ( Visualizer_Module::is_pro() ) {
+ echo '';
echo '';
+ $extra_class[] = 'viz-section-item';
+ echo '
';
echo '[?]';
echo '', $title, '';
echo '';
@@ -567,4 +571,236 @@ protected function _renderChartImageSettings() {
);
self::_renderSectionEnd();
}
+
+ /**
+ * Renders chart controls group.
+ *
+ * @access protected
+ */
+ protected function _renderChartControlsGroup() {
+ if ( 'google' !== $this->getLibrary() ) {
+ return;
+ }
+ if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
+ self::_renderGroupStart( esc_html__( 'Chart Data Filter Configuration', 'visualizer' ) );
+ } else {
+ self::_renderGroupStart( esc_html__( 'Chart Data Filter Configuration', 'visualizer' ) . '', '', apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'chart-filter-controls' ), 'vz-data-controls' );
+ echo '
';
+ }
+ self::_renderSectionStart();
+ self::_renderSectionDescription( '' . sprintf( __( 'Configure the data filter controls by providing configuration variables right from the %1$sChart Controls API%2$s. ', 'visualizer' ), '', '' ) . '' );
+ self::_renderSectionEnd();
+ $this->_renderChartControlsSettings();
+ if ( ! Visualizer_Module_Admin::proFeaturesLocked() ) {
+ echo apply_filters( 'visualizer_pro_upsell', '', 'chart-permissions' );
+ echo '
';
+ }
+ self::_renderGroupEnd();
+ }
+
+ /**
+ * Renders chart controls setting.
+ *
+ * @access protected
+ */
+ protected function _renderChartControlsSettings() {
+
+ self::_renderSectionStart( esc_html__( 'Options', 'visualizer' ), false );
+ $control_type = ! empty( $this->controls['controlType'] ) ? $this->controls['controlType'] : '';
+
+ self::_renderSelectItem(
+ esc_html__( 'Filter Type', 'visualizer' ),
+ 'controls[controlType]',
+ $control_type,
+ array(
+ '' => '',
+ 'StringFilter' => esc_html__( 'String Filter', 'visualizer' ),
+ 'NumberRangeFilter' => esc_html__( 'Number Range Filter', 'visualizer' ),
+ 'CategoryFilter' => esc_html__( 'Category Filter', 'visualizer' ),
+ 'ChartRangeFilter' => esc_html__( 'Chart Range Filter', 'visualizer' ),
+ 'DateRangeFilter' => esc_html__( 'Date Range Filter', 'visualizer' ),
+ ),
+ '',
+ false,
+ array( 'vz-controls-opt' )
+ );
+
+ $column_index = [ 'false' => '' ];
+ $column_label = [ 'false' => '' ];
+ if ( ! empty( $this->__series ) ) {
+ foreach ( $this->__series as $key => $column ) {
+ $column_type = isset( $column['type'] ) ? $column['type'] : '';
+ $label = isset( $column['label'] ) ? $column['label'] : '';
+ $column_label[ $label ] = $label;
+ $column_index[ $key ] = sprintf( __( '%1$d — Column Type: %2$s ', 'visualizer' ), $key, ucfirst( $column_type ) );
+ }
+ }
+
+ self::_renderSelectItem(
+ esc_html__( 'Filter By Column Index', 'visualizer' ),
+ 'controls[filterColumnIndex]',
+ isset( $this->controls['filterColumnIndex'] ) ? $this->controls['filterColumnIndex'] : '',
+ $column_index,
+ '',
+ false,
+ array( 'vz-controls-opt' )
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Filter By Column Label', 'visualizer' ),
+ 'controls[filterColumnLabel]',
+ ! empty( $this->controls['filterColumnLabel'] ) ? $this->controls['filterColumnLabel'] : '',
+ $column_label,
+ '',
+ false,
+ array( 'vz-controls-opt' )
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Use Formatted Value', 'visualizer' ),
+ 'controls[useFormattedValue]',
+ ! empty( $this->controls['useFormattedValue'] ) ? $this->controls['useFormattedValue'] : '',
+ array(
+ 'false' => esc_html__( 'False', 'visualizer' ),
+ 'true' => esc_html__( 'True', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderTextItem(
+ esc_html__( 'Min Value', 'visualizer' ),
+ 'controls[minValue]',
+ ! empty( $this->controls['minValue'] ) ? $this->controls['minValue'] : '',
+ esc_html__( 'Minimum allowed value for the range lower extent.', 'visualizer' ),
+ '',
+ 'text'
+ );
+
+ self::_renderTextItem(
+ esc_html__( 'Max Value', 'visualizer' ),
+ 'controls[maxValue]',
+ ! empty( $this->controls['maxValue'] ) ? $this->controls['maxValue'] : '',
+ esc_html__( 'Maximum allowed value for the range higher extent.', 'visualizer' ),
+ '',
+ 'text'
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Match Type', 'visualizer' ),
+ 'controls[matchType]',
+ ! empty( $this->controls['matchType'] ) ? $this->controls['matchType'] : '',
+ array(
+ 'prefix' => esc_html__( 'Prefix', 'visualizer' ),
+ 'exact' => esc_html__( 'Exact', 'visualizer' ),
+ 'any' => esc_html__( 'Any', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Case Sensitive', 'visualizer' ),
+ 'controls[caseSensitive]',
+ ! empty( $this->controls['caseSensitive'] ) ? $this->controls['caseSensitive'] : '',
+ array(
+ 'false' => esc_html__( 'False', 'visualizer' ),
+ 'true' => esc_html__( 'True', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderSectionEnd();
+
+ self::_renderSectionStart( esc_html__( 'UI Options', 'visualizer' ), false );
+
+ self::_renderTextItem(
+ esc_html__( 'Label', 'visualizer' ),
+ 'controls[ui][label]',
+ ! empty( $this->controls['ui']['label'] ) ? $this->controls['ui']['label'] : '',
+ '',
+ '',
+ 'text'
+ );
+
+ self::_renderTextItem(
+ esc_html__( 'Label Separator', 'visualizer' ),
+ 'controls[ui][labelSeparator]',
+ ! empty( $this->controls['ui']['labelSeparator'] ) ? $this->controls['ui']['labelSeparator'] : '',
+ '',
+ '',
+ 'text'
+ );
+
+ self::_renderTextItem(
+ esc_html__( 'Caption', 'visualizer' ),
+ 'controls[ui][caption]',
+ ! empty( $this->controls['ui']['caption'] ) ? $this->controls['ui']['caption'] : '',
+ '',
+ '',
+ 'text'
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Label Stacking', 'visualizer' ),
+ 'controls[ui][labelStacking]',
+ ! empty( $this->controls['ui']['labelStacking'] ) ? $this->controls['ui']['labelStacking'] : '',
+ array(
+ 'horizontal' => esc_html__( 'Horizontal', 'visualizer' ),
+ 'vertical' => esc_html__( 'Vertical', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Orientation', 'visualizer' ),
+ 'controls[ui][orientation]',
+ ! empty( $this->controls['ui']['orientation'] ) ? $this->controls['ui']['orientation'] : '',
+ array(
+ 'horizontal' => esc_html__( 'Horizontal', 'visualizer' ),
+ 'vertical' => esc_html__( 'Vertical', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Show Range Values', 'visualizer' ),
+ 'controls[showRangeValues]',
+ ! empty( $this->controls['showRangeValues'] ) ? $this->controls['showRangeValues'] : '',
+ array(
+ 'true' => esc_html__( 'True', 'visualizer' ),
+ 'false' => esc_html__( 'False', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Allow Multiple', 'visualizer' ),
+ 'controls[allowMultiple]',
+ ! empty( $this->controls['allowMultiple'] ) ? $this->controls['allowMultiple'] : '',
+ array(
+ 'true' => esc_html__( 'True', 'visualizer' ),
+ 'false' => esc_html__( 'False', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+
+ self::_renderSelectItem(
+ esc_html__( 'Allow Typing', 'visualizer' ),
+ 'controls[allowTyping]',
+ ! empty( $this->controls['allowTyping'] ) ? $this->controls['allowTyping'] : '',
+ array(
+ 'true' => esc_html__( 'True', 'visualizer' ),
+ 'false' => esc_html__( 'False', 'visualizer' ),
+ ),
+ '',
+ false
+ );
+ self::_renderSectionEnd();
+ }
}
diff --git a/css/frame.css b/css/frame.css
index 608db6c1d..d669701e3 100644
--- a/css/frame.css
+++ b/css/frame.css
@@ -17,7 +17,16 @@
bottom: 10px;
left: 10px;
}
-
+#control_wrapper_canvas:not(:empty) {
+ margin: 15px 0 0 5px;
+}
+#control_wrapper_canvas:not(:empty) + #canvas {
+ top: 55px;
+ left: 50px;
+}
+.goog-combobox input {
+ min-height: auto;
+}
.loader {
position: absolute;
top: 50%;
@@ -1528,6 +1537,6 @@ canvas.chartjs-render-monitor {
/******************************************************************************/
/******************************** Frontend Actions ***********************************/
/******************************************************************************/
-#vz-frontend-actions .only-pro-inner {
+#vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
text-align: center;
}
\ No newline at end of file
diff --git a/css/library.css b/css/library.css
index 34d68308a..9f6fdd882 100644
--- a/css/library.css
+++ b/css/library.css
@@ -424,6 +424,17 @@ div#visualizer-types ul, div#visualizer-types form p {
color: red;
cursor: pointer;
}
+.goog-combobox input {
+ min-height: auto;
+}
+.vz-library-chart-filter:not(:empty) {
+ background-color: #ffffff;
+ padding: 5px 0 5px 5px;
+ border: 1px solid #ddd;
+}
+.google-visualization-controls-rangefilter {
+ white-space: inherit !important;
+}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1000px) and (max-width: 1600px) {
#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
display: none;
diff --git a/css/media.css b/css/media.css
index 8ce265d2a..882ffef42 100644
--- a/css/media.css
+++ b/css/media.css
@@ -1,5 +1,5 @@
/*
- Version: 3.7.12
+ Version: 3.8.0
*/
#visualizer-library-view {
padding: 30px 10px 10px 30px;
diff --git a/cypress.json b/cypress.json
index 13712e056..e80eb48a6 100755
--- a/cypress.json
+++ b/cypress.json
@@ -12,7 +12,7 @@
"pro": 11
},
"features_locked": {
- "free": 7
+ "free": 8
},
"query": "SELECT post_type, count(*) from wp_posts GROUP by post_type",
"wait": 10000,
diff --git a/index.php b/index.php
index 8761eae2a..b9aae18d2 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.12
+ Version: 3.8.0
Author: Themeisle
Author URI: http://themeisle.com
Requires at least: 3.5
diff --git a/js/preview.js b/js/preview.js
index c713c1448..43a631f1b 100644
--- a/js/preview.js
+++ b/js/preview.js
@@ -25,6 +25,21 @@
vizSettingsHaveChanged(false);
};
+ // Update google chart filter control.
+ window.vizUpdateFilterControl = function() {
+ $( '#control_wrapper_canvas' ).removeClass( 'no-filter' );
+ var controlsOpt = $( '.vz-controls-opt' ).map(
+ function() {
+ var val = $(this).val();
+ return '' !== val && 'false' !== val ? val : false ;
+ }
+ ).get();
+ controlsOpt = controlsOpt.filter( function(el) { return el; } );
+ if ( controlsOpt.length === 0 ) {
+ $( '#control_wrapper_canvas' ).addClass( 'no-filter' ).html('');
+ }
+ }
+
$('#settings-button').click(function() {
$('#settings-form').submit();
});
@@ -42,6 +57,7 @@
// this portion captures if the settings have changed so that tabs can handle that information.
function updateChart() {
+ vizUpdateFilterControl();
clearTimeout(timeout);
timeout = setTimeout(function() {
var settings = $('#settings-form').serializeObject();
@@ -52,7 +68,7 @@
v.charts.canvas.settings = settings;
$('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
vizSettingsHaveChanged(true);
- }, 1000);
+ }, 1500);
}
function validateJSON() {
diff --git a/js/render-facade.js b/js/render-facade.js
index b506f9b60..3607a7f57 100644
--- a/js/render-facade.js
+++ b/js/render-facade.js
@@ -136,7 +136,7 @@ var vizClipboard1=null;
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.viz-facade-loaded:not(.visualizer-lazy):not(.visualizer-cw-error):empty' ).removeClass( 'viz-facade-loaded' );
$('div.visualizer-front:not(.visualizer-lazy):not(.viz-facade-loaded)').each(function(index, element){
if ( $(element).is(':visible') ) {
var id = $(element).addClass('viz-facade-loaded').attr('id');
diff --git a/js/render-google.js b/js/render-google.js
index aa977e753..dc8e419d8 100644
--- a/js/render-google.js
+++ b/js/render-google.js
@@ -4,6 +4,7 @@
// this will store the images for each chart rendered.
var __visualizer_chart_images = [];
+var chartWrapperError = [];
(function($) {
var gv;
@@ -74,7 +75,41 @@ var __visualizer_chart_images = [];
break;
}
- render = new gv[render](container);
+ var controlWrapperElement = document.getElementById( "control_wrapper_" + id ) || null;
+ var withControlMode = typeof settings.controls !== 'undefined' && controlWrapperElement ? true : false;
+
+ if ( $( controlWrapperElement ).hasClass( 'no-filter' ) ) {
+ withControlMode = false;
+ }
+ if ( withControlMode ) {
+ // Chart wrapper.
+ render = new gv.ChartWrapper({
+ 'chartType': render,
+ 'containerId': id,
+ });
+ // Chart dashboard wrapper.
+ var chartWrapperElement = document.getElementById( "chart_wrapper_" + id ) || null;
+ var chartWrapper = new gv.Dashboard( chartWrapperElement );
+
+ // Error Handler.
+ gv.events.addListener(chartWrapper, 'error', function ( err ) {
+ if ( chartWrapperError.length === 0 ) {
+ chartWrapperError.push( err );
+ gv.errors.removeError( err.id );
+ var chartContainer = $( chartWrapperElement ).find( '.visualizer-front' );
+ if ( chartContainer && chartContainer.is(':visible')) {
+ if (chartContainer.parents('div').next( '#sidebar' ).length === 0) {
+ chartContainer.addClass( 'visualizer-chart-loaded' ).addClass( 'visualizer-cw-error' );
+ $( chartWrapperElement ).addClass( 'visualizer-cw-error' );
+ }
+ }
+ } else {
+ gv.errors.removeError( err.id );
+ }
+ } );
+ } else {
+ render = new gv[render](container);
+ }
}
if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
@@ -329,6 +364,7 @@ var __visualizer_chart_images = [];
gv.events.addListener(render, 'ready', function () {
var arr = id.split('-');
+ render = typeof render.getChart !== 'undefined' ? render.getChart() : render;
__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
if (render.container && $(render.container).is(':visible')) {
@@ -362,8 +398,22 @@ var __visualizer_chart_images = [];
}
});
- $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
- render.draw(table, settings);
+ if ( withControlMode ) {
+ // Create a control wrapper, passing some options.
+ var controlWrapper = new gv.ControlWrapper( {
+ containerId: 'control_wrapper_' + id,
+ controlType: settings.controls.controlType,
+ 'options': settings.controls,
+ } );
+
+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
+ render.setOptions(settings);
+ chartWrapper.bind(controlWrapper, render);
+ chartWrapper.draw(table);
+ } else {
+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
+ render.draw(table, settings);
+ }
}
function format_data(id, table, type, format, index) {
@@ -509,6 +559,7 @@ var __visualizer_chart_images = [];
objects = {};
if ( 'object' === typeof google ) {
+ $chart_types.push( 'controls' );
google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
callback: function () {
gv = google.visualization;
diff --git a/package.json b/package.json
index 9f174103b..47aa3667d 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "visualizer",
- "version": "3.7.12",
+ "version": "3.8.0",
"description": "Visualizer Lite",
"repository": {
"type": "git",
diff --git a/readme.txt b/readme.txt
index ad0fb25fc..f75a46dbe 100755
--- a/readme.txt
+++ b/readme.txt
@@ -163,6 +163,13 @@ Pay attention that to turn your shortcodes into graphs, your theme has to have `
== Changelog ==
+#### [Version 3.8.0](https://github.com/Codeinwp/visualizer/compare/v3.7.12...v3.8.0) (2022-09-21)
+
+- Add data filter support for the charts
+
+
+
+
##### [Version 3.7.12](https://github.com/Codeinwp/visualizer/compare/v3.7.11...v3.7.12) (2022-09-07)
- Fixed compatibility issue with some themes and plugins [#933](https://github.com/Codeinwp/visualizer/issues/933)