text: // Set new default font family and font color to mimic Bootstrap's default styling
  (Chart.defaults.global.defaultFontFamily = "Nunito"),
    '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
  Chart.defaults.global.defaultFontColor = "#858796";
  
  function number_format(number, decimals, dec_point, thousands_sep) {
    // *     example: number_format(1234.56, 2, ',', ' ');
    // *     return: '1 234,56'
    number = (number + "").replace(",", "").replace(" ", "");
    var n = !isFinite(+number) ? 0 : +number,
      prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
      sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
      dec = typeof dec_point === "undefined" ? "." : dec_point,
      s = "",
      toFixedFix = function (n, prec) {
        var k = Math.pow(10, prec);
        return "" + Math.round(n * k) / k;
      };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
    if (s[0].length > 3) {
      s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || "").length < prec) {
      s[1] = s[1] || "";
      s[1] += new Array(prec - s[1].length + 1).join("0");
    }
    return s.join(dec);
  }
  
  // Area Chart Example
  var ctxLineL = document.getElementById("myAreaChart-Left");
  var labelLineL = ["", "", "", "", "", "", "", "", "", "", "", ""];
  var dataLineL = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var run = 0;
  var myLineChartL;
  function UpdateChartL() {
    myLineChartL = new Chart(ctxLineL, {
      type: "line",
      data: {
        labels: labelLineL,
        datasets: [
          {
            label: "Requests",
            lineTension: 0.3,
            backgroundColor: "rgba(78, 115, 223, 0.05)",
            borderColor: "rgba(78, 115, 223, 1)",
            pointRadius: 3,
            pointBackgroundColor: "rgba(78, 115, 223, 1)",
            pointBorderColor: "rgba(78, 115, 223, 1)",
            pointHoverRadius: 3,
            pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
            pointHoverBorderColor: "rgba(78, 115, 223, 1)",
            pointHitRadius: 10,
            pointBorderWidth: 2,
            data: dataLineL,
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        layout: {
          padding: {
            left: 10,
            right: 25,
            top: 25,
            bottom: 0,
          },
        },
        scales: {
          xAxes: [
            {
              time: {
                unit: "date",
              },
              gridLines: {
                display: false,
                drawBorder: false,
              },
              ticks: {
                maxTicksLimit: 7,
              },
            },
          ],
          yAxes: [
            {
              ticks: {
                maxTicksLimit: 5,
                padding: 10,
                // Include a dollar sign in the ticks
                callback: function (value, index, values) {
                  return number_format(value);
                },
              },
              gridLines: {
                color: "rgb(234, 236, 244)",
                zeroLineColor: "rgb(234, 236, 244)",
                drawBorder: false,
                borderDash: [2],
                zeroLineBorderDash: [2],
              },
            },
          ],
        },
        legend: {
          display: false,
        },
        tooltips: {
          backgroundColor: "rgb(255,255,255)",
          bodyFontColor: "#858796",
          titleMarginBottom: 10,
          titleFontColor: "#6e707e",
          titleFontSize: 14,
          borderColor: "#dddfeb",
          borderWidth: 1,
          xPadding: 15,
          yPadding: 15,
          displayColors: false,
          intersect: false,
          mode: "index",
          caretPadding: 10,
          callbacks: {
            label: function (tooltipItem, chart) {
              var datasetLabel =
                chart.datasets[tooltipItem.datasetIndex].label || " ";
              return number_format(tooltipItem.yLabel) + " " + datasetLabel;
            },
          },
        },
      },
    });
  }
  //Loop
  getDataLineChartL();
  setInterval(function () {
    getDataLineChartL();
  }, 5000);
  
  function pushDataL(data, time) {
    for (var i = 0; i < dataLineL.length - 1; i++) {
      dataLineL[i] = dataLineL[i + 1];
      labelLineL[i] = labelLineL[i + 1];
    }
    dataLineL[dataLineL.length - 1] = data;
    labelLineL[labelLineL.length - 1] = time;
  }
  
  function getDataLineChartL() {
    var time = getTimeLineChartL();
    var currentUserCookie = document.cookie
      .split("; ")
      .find((row) => row.startsWith("currentUser="))
      .split("=")[1];
  
    var userType = JSON.parse(currentUserCookie).userType;
  
    var api = API_REQUEST + "/count";
    if (userType == "Owner") {
      api = API_REQUEST + "/count/" + JSON.parse(currentUserCookie)._id;
    }
    fetch(api)
      .then((response) => response.json())
      .then((data) => {
        pushDataL(data.total_request, time);
        // console.log("Data:" + data + " Time: " + time);
        UpdateChartL();
      });
  }
  
  function getTimeLineChartL() {
    let date_ob = new Date();
    // current date
    // adjust 0 before single digit date
    let date = ("0" + date_ob.getDate()).slice(-2);
  
    // current month
    let month = ("0" + (date_ob.getMonth() + 1)).slice(-2);
  
    // current year
    let year = date_ob.getFullYear();
  
    // current hours
    let hours = date_ob.getHours();
  
    // current minutes
    let minutes = date_ob.getMinutes();
  
    // current seconds
    let seconds = date_ob.getSeconds();
  
    let time = hours + ":" + minutes + ":" + seconds;
  
    return time;
  }
  