in the process of refactoring project to use Google Charts JS instead…

… of c3 which appears to be abandoned (or at least very rarely updated)
tpkemme · May 10, 2017 · dbc94b5 · dbc94b5
1 parent ba1b0ca
commit dbc94b5
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 100 deletions.
diff --git a/assets/css/wp-cloudflare-dashboard.min.css b/assets/css/wp-cloudflare-dashboard.min.css
diff --git a/assets/js/wp-cloudflare-dashboard.js b/assets/js/wp-cloudflare-dashboard.js
@@ -59,4 +59,13 @@ window.WPCloudflareDashboard = window.WPCloudflareDashboard || {};
 
 	$( plugin.init );
 
+
 }( window, document, jQuery, window.WPCloudflareDashboard ) );
+
+/* global google */
+// Set chart options
+var options = {'title':'How Much Pizza I Ate Last Night',
+			   'width':400,
+			   'height':300};
+google.charts.load( 'current', { 'packages': [ 'corechart' ] });
+google.charts.setOnLoadCallback( drawRequestsChart );
diff --git a/assets/js/wp-cloudflare-dashboard.min.js b/assets/js/wp-cloudflare-dashboard.min.js
diff --git a/assets/scripts/wp-cloudflare-dashboard.min.js b/assets/scripts/wp-cloudflare-dashboard.min.js
diff --git a/assets/scripts/wp-cloudflare-dashboard.min.min.js b/assets/scripts/wp-cloudflare-dashboard.min.min.js
diff --git a/includes/class-analytics.php b/includes/class-analytics.php
@@ -78,8 +78,8 @@ public function admin_init() {
 	 * @since  0.1.0
 	 * @return void
 	 */
-	public function analytics_page_display() {
-
+	public function analytics_page_display()
+{
 		$cloudclient = $this->plugin->cloudclient;
 		$charts = $this->plugin->charts;
 		$zones = $cloudclient->wpcd_get_zones();
@@ -153,7 +153,7 @@ public function analytics_page_display() {
 				 		<?php
 							$requests = $cloudclient->wpcd_get_requests(
 								isset( $_POST['zoneSelect'] ) ? $_POST['zoneSelect'] : $zones[0]['id'],
-						 		isset( $_POST['timeSelect'] ) ? $_POST['timeSelect'] : '1440'
+								isset( $_POST['timeSelect'] ) ? $_POST['timeSelect'] : '1440'
 							);
 							$charts->display_requests( $requests );
 						?>

diff --git a/includes/class-assets.php b/includes/class-assets.php
@@ -67,15 +67,13 @@ public function wpcd_admin_styles( $hook ) {
 
 			global $wp_scripts;
 
-			// Enqueue C3 styles
-			wp_enqueue_style( 'c3_css', plugins_url( 'assets/bower/c3/c3.min.css', dirname(__FILE__) ) );
+			// get the jquery ui object
+			$queryui = $wp_scripts->query('jquery-ui-core');
+
+			// load the jquery ui theme
+			$url = "http://ajax.googleapis.com/ajax/libs/jqueryui/".$queryui->ver."/themes/ui-lightness/jquery-ui.css";
+			wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
 
-			// tell WordPress to load the JQuery UI theme
-			wp_enqueue_style('wpcd-admin-ui-css',
-                'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-lightness/jquery-ui.css',
-                false,
-                $this->plugin->version,
-                false);
 
 			// Enqueue plugin CSS
 			wp_enqueue_style( 'wpcd_admin_css', plugins_url( 'assets/css/wp-cloudflare-dashboard.min.css', dirname(__FILE__) ) );
@@ -96,11 +94,19 @@ public function wpcd_admin_scripts( $hook ) {
 			wp_enqueue_script( 'wpcd_admin_js', plugins_url( 'assets/scripts/wp-cloudflare-dashboard.min.js', dirname(__FILE__) ) );
         }
         if( $hook === 'toplevel_page_wp_cloudflare_dashboard_analytics' ) {
+
 			wp_enqueue_script( 'jquery-ui-core' );			// enqueue jQuery UI Core
 		    wp_enqueue_script( 'jquery-ui-tabs' );			// enqueue jQuery UI Tabs
-			wp_enqueue_script( 'd3_js', plugins_url( 'assets/bower/d3/d3.min.js', dirname(__FILE__) ) );
-			wp_enqueue_script( 'c3_js', plugins_url( 'assets/bower/c3/c3.min.js', dirname(__FILE__) ) );
-			wp_enqueue_script( 'wpcd_admin_js', plugins_url( 'assets/scripts/wp-cloudflare-dashboard.min.js', dirname(__FILE__) ) );
+
+			wp_enqueue_script( 'google_charts_js',  'https://www.gstatic.com/charts/loader.js' );
+
+			wp_enqueue_script(
+				'wpcd_admin_js',
+				plugins_url( 'assets/scripts/wp-cloudflare-dashboard.min.js', dirname(__FILE__) ),
+				array( 'google_charts_js'),
+			   	false,
+				true
+			);
 		}
 	}
 }
diff --git a/includes/class-charts.php b/includes/class-charts.php
@@ -49,32 +49,22 @@ public static function display_requests( $requests ) {
 				<div class="cmb2-analytics-data" id="wpcd-requests"></div>
 			</div>
 			<script type="text/javascript">
-
-				var chart = c3.generate({
-					bindto: '#wpcd-requests',
-					data: {
-						x: 'x',
-						xFormat: '%Y-%m-%dT%H:%M:%SZ',
-						columns: [
-							<?php echo json_encode( $requests['times'] ) ?>,
-							<?php echo json_encode( $requests['crequests'] ) ?>,
-							<?php echo json_encode( $requests['ucrequests'] ) ?>
-						],
-						types: {
-							'Uncached': 'area-spline',
-							'Cached': 'area-spline'
-						}
+				function drawRequestsChart() {
+					var data = google.visualization.arrayToDataTable( <?php echo json_encode( $requests ); ?> ),
+					options = {
+						title: 'Requests',
+						hAxis: {title: 'x',  titleTextStyle: {color: '#333'}},
+						vAxis: {minValue: 0},
+						'width':600,
+						'height':400
 					},
-					axis: {
-						x: {
-							type: 'timeseries',
-							tick: {
-								format: '%_m/%-e, %_I%p'
-							}
-						}
-					}
-				});
-			</script>
+					chart = new google.visualization.AreaChart( document.getElementById( 'wpcd-requests' ) );
+
+					chart.draw( data, options );
+
+				}
+				</script>
+			</div>
 		</div>
 		<?php
 	}
@@ -86,44 +76,27 @@ public static function display_requests( $requests ) {
 	 * @return void
 	 */
 	public static function display_bandwidth( $requests ) {
-
 		?>
 		<div id = "bandwidth">
 			<div class="cmb2-analytics">
 				<div class="cmb2-analytics-data" id="wpcd-bandwidth"></div>
 			</div>
-			<script type="text/javascript">
-				var chart = c3.generate({
-					bindto: '#wpcd-bandwidth',
-					data: {
-						x: 'x',
-						xFormat: '%Y-%m-%dT%H:%M:%SZ',
-						columns: [
-							[<?php foreach( $requests['times'] as $time ): ?>
-								 '<?php echo $time ?>',
-							<?php endforeach; ?>],
-							[<?php foreach( $requests['crequests'] as $crequest ): ?>
-								 '<?php echo $crequest ?>',
-							<?php endforeach; ?>],
-							[<?php foreach( $requests['ucrequests'] as $ucrequest ): ?>
-								 '<?php echo $ucrequest ?>',
-							<?php endforeach; ?>]
-						],
-						types: {
-							'Uncached': 'area-spline',
-							'Cached': 'area-spline'
-						}
-					},
-					axis: {
-						x: {
-							type: 'timeseries',
-							tick: {
-								format: '%_m/%-e, %_I%p'
-							}
-						}
-					}
-				});
-			</script>
+			<!-- <script type="text/javascript">
+			function drawChart() {
+				var data = google.visualization.arrayToDataTable( <?php echo json_encode( $requests ); ?> ),
+				options = {
+					title: 'Requests',
+					hAxis: {title: 'x',  titleTextStyle: {color: '#333'}},
+					vAxis: {minValue: 0},
+					'width':600,
+					'height':400
+				},
+				chart = new google.visualization.AreaChart( document.getElementById( 'wpcd-bandwidth' ) );
+
+				chart.draw( data, options );
+
+			}
+			</script> -->
 		</div>
 		<?php
 	}
@@ -140,7 +113,7 @@ public static function display_visitors( $visitors ) {
 			<div class="cmb2-analytics">
 				<div class="cmb2-analytics-data" id="wpcd-visitors"></div>
 			</div>
-			<script type="text/javascript">
+			<!-- <script type="text/javascript">
 				var chart = c3.generate({
 					bindto: '#wpcd-visitors',
 					data: {
@@ -167,7 +140,7 @@ public static function display_visitors( $visitors ) {
 						}
 					}
 				});
-			</script>
+			</script> -->
 		</div>
 		<?php
 	}
@@ -184,7 +157,7 @@ public static function display_threats( $threats ) {
 			<div class="cmb2-analytics">
 				<div class="cmb2-analytics-data" id="wpcd-threats"></div>
 			</div>
-			<script type="text/javascript">
+			<!-- <script type="text/javascript">
 				var chart = c3.generate({
 					bindto: '#wpcd-threats',
 					data: {
@@ -211,7 +184,7 @@ public static function display_threats( $threats ) {
 						}
 					}
 				});
-			</script>
+			</script> -->
 		</div>
 		<?php
 	}
@@ -228,7 +201,7 @@ public static function display_ssl( $requests ) {
 			<div class="cmb2-analytics">
 				<div class="cmb2-analytics-data" id="wpcd-ssl"></div>
 			</div>
-			<script type="text/javascript">
+			<!-- <script type="text/javascript">
 				var chart = c3.generate({
 					bindto: '#wpcd-ssl',
 					data: {
@@ -259,7 +232,7 @@ public static function display_ssl( $requests ) {
 						}
 					}
 				});
-			</script>
+			</script> -->
 		</div>
 		<?php
 	}

diff --git a/includes/class-cloudclient.php b/includes/class-cloudclient.php
@@ -190,28 +190,16 @@ public function wpcd_get_requests( $zoneId, $period ) {
 			$timeJson = json_decode( $response['body'] )->result->timeseries;
 
 			// Array of cached requests
-			$crequests = array();
-
-			// Array of uncached requests
-			$ucrequests = array();
+			$requestsArray = array();
 
-			// Array of times
-			$times = array();
 
 			foreach( $timeJson as $tJ ){
-				array_push( $times, $tJ->since);
-				array_push( $crequests, $tJ->requests->cached );
-				array_push( $ucrequests, $tJ->requests->uncached );
+				array_push( $requestsArray, array( $tJ->since, $tJ->requests->cached, $tJ->requests->uncached ) );
 			}
-			array_unshift( $times, 'x' );
-			array_unshift( $crequests, 'Cached' );
-			array_unshift( $ucrequests, 'Uncached' );
 
-			return array(
-				'times' => $times,
-				'crequests' => $crequests,
-				'ucrequests' => $ucrequests
-			);
+			array_unshift( $requestsArray, array('x', 'Cached', 'Uncached' ) );
+
+			return $requestsArray;
 
 		}
 

diff --git a/languages/wp-cloudflare-dashboard.pot b/languages/wp-cloudflare-dashboard.pot
@@ -5,7 +5,7 @@ msgstr ""
 "Project-Id-Version: WP Cloudflare Dashboard 0.3.3\n"
 "Report-Msgid-Bugs-To: "
 "https://wordpress.org/support/plugin/wp-cloudflare-dashboard\n"
-"POT-Creation-Date: 2017-05-10 00:42:19+00:00\n"
+"POT-Creation-Date: 2017-05-10 07:12:03+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"