MatchLiveTv/backend/public/admin-analytics.js

(function () {
  var trend = window.adminAnalyticsTrend || [];
  var i18n = window.adminAnalyticsI18n || {};
  var canvas = document.getElementById("chart-analytics-trend");
  if (!canvas || !trend.length || typeof Chart === "undefined") return;

  function dayLabel(dayStr) {
    var parts = dayStr.split("-");
    if (parts.length < 3) return dayStr;
    var d = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
    return d.toLocaleDateString([], { day: "2-digit", month: "short" });
  }

  var labels = trend.map(function (row) {
    return dayLabel(row.day);
  });

  new Chart(canvas, {
    type: "line",
    data: {
      labels: labels,
      datasets: [
        {
          label: i18n.pageviews || "Pageviews",
          data: trend.map(function (r) { return r.pageviews || 0; }),
          borderColor: "rgba(229, 57, 53, 0.95)",
          backgroundColor: "rgba(229, 57, 53, 0.18)",
          fill: true,
          tension: 0.25,
          pointRadius: 3,
          pointHoverRadius: 5
        },
        {
          label: i18n.clicks || "Clicks",
          data: trend.map(function (r) { return r.clicks || 0; }),
          borderColor: "rgba(66, 165, 245, 0.95)",
          backgroundColor: "transparent",
          fill: false,
          tension: 0.25,
          pointRadius: 2,
          pointHoverRadius: 4
        },
        {
          label: i18n.moves || "Moves",
          data: trend.map(function (r) { return r.moves || 0; }),
          borderColor: "rgba(255, 193, 7, 0.85)",
          backgroundColor: "transparent",
          fill: false,
          tension: 0.25,
          pointRadius: 2,
          pointHoverRadius: 4,
          borderDash: [4, 3]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { mode: "index", intersect: false },
      animation: { duration: 280 },
      scales: {
        x: {
          ticks: { maxTicksLimit: 14, color: "#9a9aad", font: { size: 10 } },
          grid: { color: "rgba(255,255,255,0.06)" }
        },
        y: {
          beginAtZero: true,
          ticks: {
            color: "#9a9aad",
            font: { size: 10 },
            precision: 0
          },
          grid: { color: "rgba(255,255,255,0.06)" }
        }
      },
      plugins: {
        legend: { labels: { color: "#ccc", boxWidth: 12 } }
      }
    }
  });
})();