Issue #1189 : Add a compare mode on years and month in the statistic page.

* Number of years compared is a configuration variable (default 5) * Months compared are the actual, the last and the actual month the last year (you can also visualize the average last 12 months)
2026-07-21 09:03:38 +02:00 · 2020-06-08 15:03:03 +02:00
parent 8577239be5
commit 5d24541dca
5 changed files with 303 additions and 45 deletions
@@ -6,6 +6,8 @@ data["hours"] = $("#data").data("hours")[0];
 data["days"] = $("#data").data("days")[0];
 data["months"] = $("#data").data("months")[0];
 data["years"] = $("#data").data("years")[0];
+data["compare-years"] = $("#data").data("compare-years")[0];
+data["month-stats"] = $("#data").data("month-stats")[0];

 data_unit = {
  "hours":"day",
@@ -14,17 +16,21 @@ data_unit = {
  "years": "year"
 }

+compareMode = false;
+
 /*-------
 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,119,0,0)');
-gradient.addColorStop(1, 'rgba(255,119,0,1)');
+function gradient(r, g, b) {
+  let gradient = ctx.createLinearGradient(0,400, 0,0);
+  gradient.addColorStop(0, 'rgba('+r+','+g+','+b+',0)');
+  gradient.addColorStop(1, 'rgba('+r+','+g+','+b+',1)');
+  return gradient;
+}

 //Setup the graph
-Chart.defaults.global.legend.display = false; 
 Chart.defaults.global.elements.point.radius = 0.1;
 Chart.defaults.global.elements.point.hitRadius = 10
 Chart.defaults.global.defaultFontSize = 14;
@@ -32,45 +38,79 @@ Chart.defaults.global.defaultFontColor = '#888';
 Chart.defaults.global.tooltips.mode = 'index';
 Chart.defaults.global.tooltips.intersect = false;
 Chart.defaults.global.legend.onClick = null;
+
 var statGraph = new Chart(ctx, {
  type: 'line',
  maintainAspectRatio: false,
-  options: {
-    scales: {
-        xAxes: [{
-        type: 'time',
-        time: {
-        tooltipFormat: 'll'
-      },
-      gridLines: {
-      display: false
-      }
-      }],
-    }
-  }
 });

 //Line options
 var displayOptions = {
-  backgroundColor: gradient,
+  backgroundColor: gradient(255, 119, 0),
  borderColor: 'rgba(255,119,0,1)',
  lineTension : 0.2
 }

-function changeData(dataType, label, options = displayOptions) {
-  statGraph.data = {
-  datasets: [{
-  label: label,
-  data: getValues(data[dataType]),
-  ...options
-  }]
+function changeData(dataType, options = displayOptions) {
+  if (!compareMode) {
+    statGraph.data = {
+      datasets: [{
+      label: str_number_page_visited,
+      data: getValues(data[dataType]),
+      ...options
+      }]
+    }
+    statGraph.options = {
+      scales: {
+        xAxes: [{
+          type: 'time',
+          time: {
+            tooltipFormat: 'll'
+          },
+          gridLines: {
+            display: false
+          }
+        }],
+      },
+      legend: {
+        display:false
+      }
+    }
+    statGraph.options.scales.xAxes.forEach(axe => {
+      axe.time.tooltipFormat = str_tooltip_format[dataType];
+      axe.time.unit = data_unit[dataType];
+      axe.time.displayFormats = str_unit_format;
+    })
+    statGraph.update();
+  } else {
+    statGraph.options.legend.display = true;
+    if (dataType == "years") {
+      statGraph.data = {
+        datasets: getComparedYearDataset()
+      }
+      statGraph.options.scales = {
+        xAxes: [{
+          type: 'category',
+          labels: str_months
+        }]
+      }
+    } else if (dataType == "months") {
+      days = [];
+      for (let i = 1; i<=31; i++) {
+        days.push(i);
+      }
+      statGraph.data = {
+        datasets: getMonthStatsDataset()
+      }
+      statGraph.options.scales = {
+        xAxes: [{
+          type: 'category',
+          labels : days
+        }]
+      }
+    }
+    statGraph.update();
  }
-  statGraph.options.scales.xAxes.forEach(axe => {
-  axe.time.tooltipFormat = str_tooltip_format[dataType];
-  axe.time.unit = data_unit[dataType];
-  axe.time.displayFormats = str_unit_format;
-  })
-  statGraph.update();
 }

 //Make Data readable by Chart.js
@@ -78,24 +118,105 @@ 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 getComparedYearDataset() {
+  colors = ["#ffa744", "#ff5252", "#896af3", "#2883c3", "#6ece5e"]
+  values = {};
+  dataset = [];
+
+  Object.keys(data["compare-years"]).forEach(function(key) {
+    date = new Date(key)
+    if (values[date.getFullYear()] == undefined) {
+      values[date.getFullYear()] = [];
+    }
+    values[date.getFullYear()][parseInt(date.getMonth())] = data["compare-years"][key];
+  });
+
+  Object.keys(values).forEach(function(key) {
+    dataset.push({
+      label : str_number_page_visited_with_year.replace('%s', key),
+      data : values[key],
+      lineTension : 0.2,
+      borderColor : colors[parseInt(key) % colors.length],
+      backgroundColor: "rgba(0,0,0,0)"
+    })
+  });
+
+  return dataset;
+}
+
+function getMonthStatsDataset() {
+  colors = ["#ffa744", "#ff5252", "#896af3", "#2883c3", "#6ece5e"]
+  dataset = [];
+  colorIndice = 0;
+  let date;
+
+  data["month-stats"]["month"].forEach(values => {
+    let days_data = [];
+    Object.keys(values).forEach(function(key) {
+      date = new Date(key)
+      days_data[parseInt(date.getUTCDate()) - 1] = values[key];
+    });
+    console.log(days_data);
+    dataset.push({
+      label : str_number_page_visited_with_year.replace('%s', str_months[date.getMonth()]+" "+date.getFullYear()),
+      data : days_data,
+      lineTension : 0.2,
+      borderColor : colors[colorIndice % colors.length],
+      backgroundColor: "rgba(0,0,0,0)"
+    })
+    colorIndice++
+  });
+
+  averageTab = [];
+  for (let i = 0; i < 31; i++) {
+    averageTab[i] = data["month-stats"]["avg"];
+  }
+  dataset.push({
+    label : str_avg,
+    data : averageTab,
+    lineTension : 0.2,
+    borderColor : colors[4],
+    backgroundColor: "rgba(0,0,0,0)"
+  })
+
+  return dataset;
+}
+
 //Event listener
 $(".stat-data-selector label").on("click", function(){
-  let dataType = $(this).data("value");
-  changeData(dataType, str_number_page_visited)
+  dataType = $(this).data("value");
+  changeData(dataType);
+})
+
+$(".stat-compare-mode input").on("change", function(){
+  compareMode = $(this)[0].checked;
+
+  if (compareMode) {
+    $("#hours-selector + label, #days-selector + label").addClass('unavailable');
+    if ($("#hours-selector").prop('checked')||$("#days-selector").prop('checked')) {
+      $("#years-selector").prop('checked', true);
+      $("#hours-selector, #days-selector").prop('checked', false);
+      changeData("years");
+    } else {
+      changeData($(".stat-data-selector input:checked + label").data("value"))
+    }
+  } else {
+    $("#hours-selector + label, #days-selector + label").removeClass('unavailable');
+    changeData($(".stat-data-selector input:checked + label").data("value"));
+  }
 })

 /*-------
 Initialize the page
 -------*/
 $(function() {
-  let dataType = $(".stat-data-selector input:checked + label").data("value");
-  changeData(dataType, str_number_page_visited)
+  changeData($(".stat-data-selector input:checked + label").data("value"));
 })