Admin dashboard changes

* New filter `tptn_admin_dashboard_tabs` to add/remove tabs
* Passing 'hide' will hide a tab on first load
* Smart chart visualization: Automatically switches to an area chart for datasets with more than 100 data points.

Author: ajaydsouza

includes/admin/class-admin.php

@@ -194,28 +194,28 @@ public function admin_enqueue_scripts() {
 			'top-ten-chart-js',
 			TOP_TEN_PLUGIN_URL . 'includes/admin/js/chart.min.js',
 			array(),
-			TOP_TEN_VERSION,
+			'4.4.8',
 			true
 		);
 		wp_register_script(
 			'top-ten-chart-datalabels-js',
 			TOP_TEN_PLUGIN_URL . 'includes/admin/js/chartjs-plugin-datalabels.min.js',
 			array( 'top-ten-chart-js' ),
-			TOP_TEN_VERSION,
+			'2.2.0',
 			true
 		);
 		wp_register_script(
 			'top-ten-luxon',
 			TOP_TEN_PLUGIN_URL . 'includes/admin/js/luxon.min.js',
 			array(),
-			TOP_TEN_VERSION,
+			'3.5.0',
 			true
 		);
 		wp_register_script(
 			'top-ten-chartjs-adapter-luxon-js',
 			TOP_TEN_PLUGIN_URL . 'includes/admin/js/chartjs-adapter-luxon.min.js',
 			array( 'top-ten-luxon', 'top-ten-chart-js' ),
-			TOP_TEN_VERSION,
+			'1.3.1',
 			true
 		);
 		wp_register_script(

includes/admin/class-dashboard.php

@@ -5,7 +5,7 @@
  * @link https://webberzone.com
  * @since 3.0.0
  *
- * @package Top 10
+ * @package Top_Ten
  * @subpackage Admin/Dashboard
  */
 
@@ -99,8 +99,20 @@ public function render_page() {
 				<ul class="nav-tab-wrapper" style="padding:0; border-bottom: 1px solid #ccc;">
 					<?php
 					foreach ( $this->get_tabs() as $tab_id => $tab_name ) {
+						$tab_class = 'nav-tab';
+						$tab_style = '';
 
-						echo '<li style="padding:0; border:0; margin:0;"><a href="#' . esc_attr( $tab_id ) . '" title="' . esc_attr( $tab_name['title'] ) . '" class="nav-tab">';
+						// Check if this tab should be hidden initially.
+						if ( isset( $tab_name['hide'] ) && $tab_name['hide'] ) {
+							$tab_style = 'display:none;';
+						}
+
+						// Add custom class if specified.
+						if ( isset( $tab_name['class'] ) ) {
+							$tab_class .= ' ' . $tab_name['class'];
+						}
+
+						echo '<li style="padding:0; border:0; margin:0;"><a href="#' . esc_attr( $tab_id ) . '" title="' . esc_attr( $tab_name['title'] ) . '" class="' . esc_attr( $tab_class ) . '" style="' . esc_attr( $tab_style ) . '">';
 							echo esc_html( $tab_name['title'] );
 						echo '</a></li>';
 
@@ -321,6 +333,15 @@ public function get_tabs() {
 			),
 		);
 
+		/**
+		 * Filters the tabs for the admin dashboard.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param array $tabs Array of tabs.
+		 */
+		$tabs = apply_filters( 'tptn_admin_dashboard_tabs', $tabs );
+
 		return $tabs;
 	}
 

includes/admin/js/admin-scripts.js

@@ -56,6 +56,28 @@ jQuery(document).ready(function ($) {
 				$(ui.newTab.find("a")).addClass("nav-tab-active");
 			}
 		});
+		
+		// Wait for the tabs to be fully initialized
+		setTimeout(function() {
+			// Select Today tab (second tab) by default and add the nav-tab-active class
+			var $tabs = $("#post-body-content").tabs();
+			
+			// First find the Today tab index (usually 1)
+			var tabIndex = 0;
+			$(".nav-tab-wrapper li a").each(function(index) {
+				if ($(this).text().indexOf('Today') >= 0) {
+					tabIndex = index;
+					return false; // Break the loop
+				}
+			});
+			
+			// Set the active tab
+			$tabs.tabs("option", "active", tabIndex);
+			
+			// Manually add the active class to the Today tab
+			$(".nav-tab-wrapper li a").removeClass("nav-tab-active");
+			$(".nav-tab-wrapper li").eq(tabIndex).find("a").addClass("nav-tab-active");
+		}, 200);
 	});
 
 	// Datepicker.

includes/admin/js/admin-scripts.min.js

@@ -16,6 +16,47 @@ function updateChart() {
 				date.push(data[i].date);
 				visits.push(data[i].visits);
 			}
+
+			// Determine chart type based on number of datapoints
+			var chartType = "bar";
+			var chartFill = false;
+			var backgroundColor = "#70c4e1";
+			var pointBackgroundColor = "#70c4e1";
+			var borderWidth = 0;
+			var pointBorderColor = "#70c4e1";
+			var pointRadius = 0;
+			var showDataLabels = true;
+
+			// If we have more than 50 datapoints, switch to area chart for better visualization
+			if (date.length > 100) {
+				chartType = "line";
+				chartFill = true;
+				backgroundColor = "rgba(112, 196, 225, 0.8)"; // Transparent blue
+				pointBackgroundColor = "#70c4e1"; // Solid blue dots
+				borderWidth = 2;
+				pointBorderColor = "#ffffff"; // White border around dots
+				pointRadius = 3;
+				showDataLabels = false; // Hide data labels for area chart to avoid clutter
+			}
+
+			// Update chart configuration if type needs to change
+			if (window.top10chart.config.type !== chartType) {
+				window.top10chart.config.type = chartType;
+				window.top10chart.data.datasets.forEach((dataset) => {
+					dataset.fill = chartFill;
+					dataset.backgroundColor = backgroundColor;
+					dataset.pointBackgroundColor = pointBackgroundColor;
+					dataset.borderWidth = borderWidth;
+					dataset.pointBorderColor = pointBorderColor;
+					dataset.pointRadius = pointRadius;
+				});
+
+				// Update data labels plugin display setting
+				if (window.top10chart.options && window.top10chart.options.plugins && window.top10chart.options.plugins.datalabels) {
+					window.top10chart.options.plugins.datalabels.display = showDataLabels;
+				}
+			}
+
 			window.top10chart.data.labels = date;
 			window.top10chart.data.datasets.forEach((dataset) => {
 				dataset.data = visits;
@@ -46,19 +87,46 @@ jQuery(document).ready(function ($) {
 				visits.push(data[i].visits);
 			}
 
+			// Determine chart type based on number of datapoints
+			var chartType = "bar";
+			var chartFill = false;
+			var backgroundColor = "#70c4e1";
+			var pointBackgroundColor = "#70c4e1";
+			var borderWidth = 0;
+			var pointBorderColor = "#70c4e1";
+			var pointRadius = 0;
+			var showDataLabels = true;
+
+			// If we have more than 50 datapoints, switch to area chart for better visualization
+			if (date.length > 50) {
+				chartType = "line";
+				chartFill = true;
+				backgroundColor = "rgba(112, 196, 225, 0.2)"; // Transparent blue
+				pointBackgroundColor = "#70c4e1"; // Solid blue dots
+				borderWidth = 2;
+				pointBorderColor = "#ffffff"; // White border around dots
+				pointRadius = 3;
+				showDataLabels = false; // Hide data labels for area chart to avoid clutter
+			}
+
 			var ctx = $("#visits");
 			var config = {
-				type: "bar",
+				type: chartType,
 				data: {
 					labels: date,
 					datasets: [
 						{
 							label: tptn_chart_data.datasetlabel,
-							backgroundColor: "#70c4e1",
+							backgroundColor: backgroundColor,
 							borderColor: "#70c4e1",
 							hoverBackgroundColor: "#ffbf00",
 							hoverBorderColor: "#ffbf00",
 							data: visits,
+							fill: chartFill,
+							pointBackgroundColor: pointBackgroundColor,
+							pointBorderColor: pointBorderColor,
+							pointRadius: pointRadius,
+							borderWidth: borderWidth,
 						},
 					],
 				},
@@ -77,6 +145,7 @@ jQuery(document).ready(function ($) {
 							color: "#000000",
 							anchor: "end",
 							align: "top",
+							display: showDataLabels,
 						},
 					},
 					scales: {

includes/admin/js/chart-data.js

@@ -151,6 +151,12 @@ When you enabled the scheduled maintenance, Top 10 will create a cron job that w
 
 = 4.1.0 =
 
+* Features:
+	* Import data from WordPress Popular Posts plugin.
+	* Admin Dashboard:
+		* Smart chart visualization: Automatically switches to an area chart for datasets with more than 100 data points.
+		* [Pro] Clicking on a column in the Popular Posts chart will display the most popular posts for the selected day.
+
 * Modifications:
 	* Updated ChartJS and replaced Moment adapter with Luxon.
 	* An admin notice is now displayed when any Top 10 table is missing. The plugin will also automatically recreate the missing tables.