Issue #1189 : Dark mode fix and clean code

admin/stats.php

@@ -18,6 +18,7 @@ include_once(PHPWG_ROOT_PATH.'admin/include/functions_history.inc.php');
 // | Functions                                                             |
 // +-----------------------------------------------------------------------+
 
+//Get the last unit of time for years, months, days and hours
 function get_last($last_number=60, $type='year')
 {
   $query = '
@@ -117,15 +118,16 @@ $template->assign(
   );
 
 // +-----------------------------------------------------------------------+
-// | Set missing unit to 0                                                |
+// | Set missing rows to 0                                                  |
 // +-----------------------------------------------------------------------+
 
-function set_missing_value($unit, $data)
+function set_missing_values($unit, $data)
 {
   $limit = count($data);
   $result = array();
   $date = get_date_object($data[count($data) - 1]);
 
+  //Declare variable according the unit
   if ($unit == 'year') 
   {
     $date_format = 'Y';
@@ -147,12 +149,14 @@ function set_missing_value($unit, $data)
     $date_add = 'PT1H';
   }
 
+  //Fill an empty array with all the dates
   for ($i=0; $i < $limit; $i++) 
   { 
     $result[$date->format($date_format)] = 0;
     $date->add(new DateInterval($date_add));
   }
 
+  //Overload with database rows
   foreach ($data as $value) 
   {
     $str = get_date_object($value)->format($date_format);
@@ -165,8 +169,9 @@ function set_missing_value($unit, $data)
   return $result;
 }
 
-
-function get_date_object($row) {
+//Get a DateTime object for a database row
+function get_date_object($row) 
+{
   $date_string = $row['year'];
     if ($row['month'] != null) 
     {
@@ -189,18 +194,14 @@ function get_date_object($row) {
 }
 
 // +-----------------------------------------------------------------------+
-// | Display statistic rows                                                |
+// | Send data to template                                                 |
 // +-----------------------------------------------------------------------+
 
-$template->append('lastHours', set_missing_value('hour',get_last(72, 'hour')));
-$template->append('lastDays', set_missing_value('day',get_last(90, 'day')));
-$template->append('lastMonths', set_missing_value('month',get_last(24, 'month')));
-$template->append('lastYears', set_missing_value('year',get_last(60, 'year')));
-
-
-// +-----------------------------------------------------------------------+
-// | Sending html code                                                     |
-// +-----------------------------------------------------------------------+
+$template->append('lastHours', set_missing_values('hour',get_last(72, 'hour')));
+$template->append('lastDays', set_missing_values('day',get_last(90, 'day')));
+$template->append('lastMonths', set_missing_values('month',get_last(24, 'month')));
+$template->append('lastYears', set_missing_values('year',get_last(60, 'year')));
+$template->assign('langCode', strval($user['language']));
 
 $template->assign_var_from_handle('ADMIN_CONTENT', 'stats');
 ?>

admin/themes/default/js/stats.js

@@ -18,31 +18,36 @@ data_unit = {
 Creating graph
 -------*/
 var ctx = document.getElementById('stat-graph').getContext('2d');
-
+//Create the gradient under the curve
 var gradient = ctx.createLinearGradient(0,400, 0,0);
 gradient.addColorStop(0, 'rgba(255,166,70,0)');
 gradient.addColorStop(1, '#FFA646');
 
+//Setup the graph
 Chart.defaults.global.elements.point.radius = 0.1;
 Chart.defaults.global.elements.point.hitRadius = 10
+Chart.defaults.global.defaultFontSize = 14;
+Chart.defaults.global.defaultFontColor = '#888'
+Chart.defaults.global.legend.onClick = null;
 var statGraph = new Chart(ctx, {
   type: 'line',
   maintainAspectRatio: false,
   options: {
-  scales: {
-    xAxes: [{
-    type: 'time',
-    time: {
-      tooltipFormat: 'll'
-    },
-    gridLines: {
+    scales: {
+        xAxes: [{
+        type: 'time',
+        time: {
+        tooltipFormat: 'll'
+      },
+      gridLines: {
       display: false
+      }
+      }],
     }
-    }],
-  }
   }
 });
 
+//Line options
 var displayOptions = {
   backgroundColor: gradient,
   borderColor: '#FFA646',
@@ -52,9 +57,9 @@ var displayOptions = {
 function changeData(dataType, label, options = displayOptions) {
   statGraph.data = {
   datasets: [{
-    label: label,
-    data: getValues(data[dataType]),
-    ...options
+  label: label,
+  data: getValues(data[dataType]),
+  ...options
   }]
   }
   statGraph.options.scales.xAxes.forEach(axe => {
@@ -65,24 +70,20 @@ function changeData(dataType, label, options = displayOptions) {
   statGraph.update();
 }
 
+//Make Data readable by Chart.js
 function getValues(data) {
   values = [];
   Object.keys(data).forEach(function(key) {
   var newPoint = {
-    x:new Date(key),
-    y:data[key]
+  x:new Date(key),
+  y:data[key]
   }
   values.push(newPoint)
   });
   return values;
 }
 
-function addAZero(number) {
-  if (number < 10)
-  return "0"+number;
-  return number;
-}
-
+//Event listener
 $(".stat-data-selector label").on("click", function(){
   let dataType = $(this).data("value");
   changeData(dataType, str_number_page_visited)

admin/themes/default/template/stats.tpl

@@ -1,17 +1,16 @@
 {footer_script}
-var str_months_names = ["{'January'|@translate}","{'February'|@translate}","{'March'|@translate}","{'April'|@translate}","{'May'|@translate}","{'June'|@translate}","{'July'|@translate}","{'August'|@translate}","{'September'|@translate}","{'October'|@translate}","{'November'|@translate}","{'December'|@translate}"];
 var str_number_page_visited = "{'Number of visited pages'|@translate}";
 var str_tooltip_format = {
   "years":"YYYY",
   "months":"MMMM YYYY",
   "days":"DD MMM",
-  "hours":"H[h] - dddd"
+  "hours":"LT"
 };
 var str_unit_format = {
   "day":"dddd",
   "month":"MMM YYYY"
 }
-moment.locale({'en'|@translate});
+moment.locale("{$langCode}");
 {/footer_script}
 
 {combine_script id='chart.js' load='footer' path='themes/default/js/plugins/Chart.min.js'}
@@ -26,12 +25,11 @@ moment.locale({'en'|@translate});
 </div>
 
 <div id="data" data-hours='{json_encode($lastHours)}' data-days='{json_encode($lastDays)}' data-months='{json_encode($lastMonths)}' data-years='{json_encode($lastYears)}'></div>
-
 <div class="stat-legend-container">
   <div class="stat-data-selector">
-    <input type="radio" id="hours-selector" name="stat-data-type" checked>
-    <label for="hours-selector" data-value="hours">{"Hours"|@translate}</label>
-    <input type="radio" id="days-selector" name="stat-data-type">
+    <input type="radio" id="hours-selector" name="stat-data-type">
+    <label for="hours-selector" data-value="hours">{"Hour"|@translate}</label>
+    <input type="radio" id="days-selector" name="stat-data-type" checked>
     <label for="days-selector" data-value="days">{"Day"|@translate}</label>
     <input type="radio" id="months-selector" name="stat-data-type">
     <label for="months-selector" data-value="months">{"Month"|@translate}</label>

admin/themes/roma/theme.css

@@ -221,6 +221,17 @@ a.stat-box:hover {
   color:#aeaeae;
 }
 
+.stat-data-selector label {
+  color: #777;
+  padding: 10px;
+  background-color: #333;
+  transition: 0.2s ease;
+}
+
+.stat-data-selector label:hover {
+  background-color: #555
+}
+
 /* hacks */
 * html[lang="en"] body .content h2 , *+html[lang="en"] body .content h2 { text-transform:capitalize; } /* IE */
 *+html  .bigtext { left: 70px; }