Add filter in preview and dashboard page Codeinwp/visualizer-pro#51

Author: girishpanchal30

classes/Visualizer/Render/Library.php

@@ -336,9 +336,16 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
 		}
 		$shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id );
 		echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
+		if ( Visualizer_Module::is_pro() ) {
+			echo '<div id="chart_wrapper_' . $placeholder_id . '">';
+			echo '<div id="control_wrapper_' . $placeholder_id . '" class="vz-library-chart-filter"></div>';
+		}
 		echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">';
 		echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
 		echo '</div>';
+		if ( Visualizer_Module::is_pro() ) {
+			echo '</div>';
+		}
 		echo '<div class="visualizer-chart-footer visualizer-clearfix">';
 		echo '<a class="visualizer-chart-action visualizer-chart-delete" href="', $delete_url, '" title="', esc_attr__( 'Delete', 'visualizer' ), '" onclick="return showNotice.warn();"></a>';
 		echo '<a class="visualizer-chart-action visualizer-chart-clone" href="', $clone_url, '" title="', esc_attr__( 'Clone', 'visualizer' ), '"></a>';

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 '<div id="chart_wrapper_canvas">';
+			echo '<div id="control_wrapper_canvas"></div>';
+		}
 		echo '<div id="canvas">';
 		echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
 		echo '</div>';
+		if ( Visualizer_Module::is_pro() ) {
+			echo '</div>';
+		}
 		echo $this->custom_css;
 	}
 

classes/Visualizer/Render/Sidebar.php

@@ -621,7 +621,8 @@ protected function _renderChartControlsSettings() {
 				'DateRangeFilter'   => esc_html__( 'Date Range Filter', 'visualizer' ),
 			),
 			'',
-			false
+			false,
+			array( 'vz-controls-opt' )
 		);
 
 		$column_index = [ 'false' => '' ];
@@ -638,10 +639,11 @@ protected function _renderChartControlsSettings() {
 		self::_renderSelectItem(
 			esc_html__( 'Filter By Column Index', 'visualizer' ),
 			'controls[filterColumnIndex]',
-			! empty( $this->controls['filterColumnIndex'] ) ? $this->controls['filterColumnIndex'] : '',
+			isset( $this->controls['filterColumnIndex'] ) ? $this->controls['filterColumnIndex'] : '',
 			$column_index,
 			'',
-			false
+			false,
+			array( 'vz-controls-opt' )
 		);
 
 		self::_renderSelectItem(
@@ -650,7 +652,8 @@ protected function _renderChartControlsSettings() {
 			! empty( $this->controls['filterColumnLabel'] ) ? $this->controls['filterColumnLabel'] : '',
 			$column_label,
 			'',
-			false
+			false,
+			array( 'vz-controls-opt' )
 		);
 
 		self::_renderSelectItem(

css/frame.css

@@ -17,7 +17,15 @@
 	bottom: 10px;
 	left: 10px;
 }
-
+#control_wrapper_canvas:not(:empty) {
+	margin: 15px 0 0 5px;
+}
+#control_wrapper_canvas:not(:empty) + #canvas {
+	top: 50px;
+}
+.goog-combobox input {
+	min-height: auto;
+}
 .loader {
 	position: absolute;
 	top: 50%;
@@ -1528,6 +1536,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;
 }

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-thumblabel {
+	padding: 0 !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;

js/preview.js

@@ -52,7 +52,7 @@
 				v.charts.canvas.settings = settings;
                 $('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
                 vizSettingsHaveChanged(true);
-			}, 1000);
+			}, 1500);
 		}
 
         function validateJSON() {
@@ -72,6 +72,19 @@
 		});
 		$('textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
 
+		$( document ).on( 'change', '.vz-controls-opt', 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('');
+			}
+		} );
 	});
 })(jQuery, visualizer);
 

js/render-google.js

@@ -78,6 +78,9 @@ var chartWrapperError = [];
             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({
@@ -92,6 +95,7 @@ var chartWrapperError = [];
                 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) {