Merge pull request #61 from x-team/issue-54

Added Chart Height Option.

includes/meta-boxes.php

@@ -37,11 +37,14 @@ public function __construct() {
 			'stream_reports_add_metabox'           => 'add_metabox',
 			'stream_reports_delete_metabox'        => 'delete_metabox',
 			'stream_report_save_metabox_config'    => 'save_metabox_config',
+			'stream_report_save_chart_height'      => 'save_chart_height',
 			'stream_report_update_metabox_display' => 'update_metabox_display',
 		);
 
 		// Register all ajax action and check referer for this class
 		WP_Stream_Reports::handle_ajax_request( $ajax_hooks, $this );
+
+		add_filter( 'screen_settings', array( $this, 'chart_height_display' ), 10, 2 );
 	}
 
 	/**
@@ -203,6 +206,7 @@ public function metabox_content( $object, $section ) {
 		}
 
 		$chart_options  = $this->get_chart_options( $args );
+		$chart_height   = WP_Stream_Reports_Settings::get_user_options( 'chart_height' , 300 );
 		$data_types     = $this->get_data_types();
 		$selector_types = $this->get_selector_types();
 
@@ -714,6 +718,41 @@ public function delete_metabox() {
 		WP_Stream_Reports_Settings::update_user_option_and_redirect( 'sections', self::$sections );
 	}
 
+	public function save_chart_height(){
+
+		$chart_height = wp_stream_filter_input( INPUT_GET, 'chart_height', FILTER_SANITIZE_NUMBER_INT );
+
+		if ( false === $chart_height ) {
+			wp_send_json_error();
+		}
+
+		// Update the database option
+		WP_Stream_Reports_Settings::ajax_update_user_option( 'chart_height', $chart_height );
+	}
+
+	public function chart_height_display( $status, $args ) {
+		$user_id = get_current_user_id();
+		$option  = WP_Stream_Reports_Settings::get_user_options( 'chart_height', 300 );
+		$nonce   = wp_create_nonce( 'stream_reports_chart_height_nonce' );
+		ob_start();
+		?>
+		<fieldset>
+			<h5><?php esc_html_e( 'Chart height', 'stream-repotrs' ); ?></h5>
+			<div><input type="hidden" name="update_chart_height_nonce" id="update_chart_height_nonce" value="<?php echo esc_attr( $nonce ); ?>"></div>
+			<div><input type="hidden" name="update_chart_height_user" id="update_chart_height_user" value="<?php echo esc_attr( $user_id ); ?>"></div>
+			<div class="metabox-prefs stream-reports-chart-height-option">
+				<label for="chart-height">
+					<input type="number" step="50" min="100" max="950" name="chart_height" id="chart_height" maxlength="3" value="<?php echo esc_attr( $option ); ?>">
+					<?php esc_html_e( 'px', 'stream-reports' ); ?>
+				</label>
+				<input type="submit" id="chart_height_apply" class="button" value="<?php esc_attr_e( 'Apply', 'stream-reports' ); ?>">
+				<span class="spinner"></span>
+			</div>
+		</fieldset>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Return active instance of WP_Stream_Reports_Metaboxes, create one if it doesn't exist
 	 *

ui/css/stream-reports.css

@@ -112,6 +112,10 @@
 	color: #000;
 }
 
+.stream_page_wp_stream_reports .stream-reports-chart-height-option{
+	width: 200px;
+}
+
 @media only screen and (max-width: 782px) {
 	.stream_page_wp_stream_reports .date-interval .field-predefined,
 	.stream_page_wp_stream_reports .date-interval .date-inputs {
@@ -163,7 +167,6 @@
 }
 
 .stream_page_wp_stream_reports .postbox .inside .chart {
-	height: 300px;
 	padding: 0;
 }
 

ui/js/stream-reports.js

@@ -136,6 +136,45 @@
 		}
 	};
 
+	/**
+	 * Screen options
+	 */
+	report.screen = {
+		init: function( chartHeightOption, applyBtn ) {
+			this.$chartHeightOption = chartHeightOption;
+			this.$applyBtn = applyBtn;
+
+			this.configureOptions();
+		},
+
+		configureOptions: function() {
+			var parent = this;
+
+			this.$applyBtn.click(function( e ) {
+				e.preventDefault();
+
+				var $spinner = $(this).siblings('.spinner');
+				$spinner.show();
+
+				$.ajax({
+					type: 'GET',
+					url: ajaxurl,
+					data: {
+						action: 'stream_report_save_chart_height',
+						stream_reports_nonce: $('#stream_report_nonce').val(),
+						chart_height: parent.$chartHeightOption.val(),
+					},
+					dataType: 'json',
+					success : function(data) {
+						location.reload(true);
+					}
+				});
+
+				return false;
+			});
+		}
+	};
+
 	/**
 	 * Metabox logic logic
 	 */
@@ -238,7 +277,7 @@
 				// Show the configure div
 				$curPostbox.find('.inside .configure').toggleClass('visible');
 			});
-			
+
 			this.$configureDiv.filter( '.stream-reports-expand' ).closest( '.postbox' ).find( '.postbox-title-action a.open-box').click();
 		},
 
@@ -303,7 +342,7 @@
 
 					}
 
-					
+
 				}
 			});
 		}
@@ -527,6 +566,10 @@
 		stream.report.intervals.init(
 			$('.date-interval')
 		);
+		stream.report.screen.init(
+			$('#chart_height'),
+			$('#chart_height_apply')
+		);
 		stream.report.chart.init(
 			$('.stream_page_wp_stream_reports .chart'),
 			$('.columns-prefs input[type="radio"]')

views/meta-box.php

@@ -43,6 +43,6 @@
 
 	</div>
 
-	<div class="chart" data-report='<?php echo json_encode( $chart_options ) ?>'><svg></svg></div>
+	<div class="chart" data-report='<?php echo json_encode( $chart_options ) ?>' style="height:<?php echo esc_attr( $chart_height ); ?>px;"><svg></svg></div>
 
 </div>