stuff

######################################
########## CALL THE BACKEND ##########
######################################
function successHandler(payload, textStatus, jqXHR) {
    // Create 'labels' and 'values' arrays here, prepping for handoff to chart renderer
}

function errorHandler(jqXHR, textStatus, errorThrown) {
    // Appropriate error-handling measures go here
    console.error(errorThrown);
}

function getData() {
    $.ajax({
        method: 'GET',
        url: '/dashboard/data'
    })
        .done(successHandler)
        .fail(errorHandler);
}

######################################
########## EXPECTED PAYLOAD ##########
######################################
var payload = {
    data: [
        {label: 'Mon', value: 200},
        {label: 'Tue', value: 120},
        {label: 'Wed', value: 311},
        {label: 'Thu', value: 245},
        {label: 'Fri', value: 299},
        {label: 'Sat', value: 330},
        {label: 'Sun', value: 312},
    ]
};

######################################
########## DASHBOARD SCRIPT ##########
######################################

function renderChart(data, labels, title, xAxesLabel, yAxesLabel, elemID) {
    var config = {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    data: data
                }
            ]
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                xAxes: [
                    {
                        scaleLabel: {
                            display: !!xAxesLabel,
                            labelString: xAxesLabel
                        }
                    }
                ],
                yAxes: [
                    {
                        scaleLabel: {
                            display: !!yAxesLabel,
                            labelString: yAxesLabel
                        }
                    }
                ]
            },
            title: {
                display: false,
                text: title
            }
        }
    };

    if (!!title) {
        var titleElemID = elemID + '-title';
        document.getElementById(titleElemID).textContent = title;
    }

    var ctx = document.getElementById(elemID).getContext('2d');
    new Chart(ctx, config);
}











######################################
########### DASHBOARD PUG ############
######################################

block content
  main
    .main-content
      .container-fluid
        .row
          .col-sm-4.column-top-padding
            .title-left.title-padding
              <p id="dashboard-chart-page-load-time-title"></p>
            .detail
              .detail-content
                <canvas id="dashboard-chart-page-load-time"></canvas>
          .col-sm-4.column-top-padding
            .title-left.title-padding
              <p id="dashboard-chart-new-users-title"></p>
            .detail
              .detail-content
                <canvas id="dashboard-chart-new-users"></canvas>
          .col-sm-4.column-top-padding
            .title-left.title-padding
            .detail
              .detail-content
  footer
  
  
  
  
######################################
### GA DATA PAYLOAD (FROM GOOGLE) ####
######################################
  {
    "kind": "analytics#gaData",
    "id": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:17632476&dimensions=ga:month&metrics=ga:avgPageLoadTime&start-date=2018-01-01&end-date=yesterday",
    "query": {
        "start-date": "2018-01-01",
        "end-date": "yesterday",
        "ids": "ga:17632476",
        "dimensions": "ga:month",
        "metrics": [
            "ga:avgPageLoadTime"
        ],
        "start-index": 1,
        "max-results": 1000
    },
    "itemsPerPage": 1000,
    "totalResults": 9,
    "selfLink": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:17632476&dimensions=ga:month&metrics=ga:avgPageLoadTime&start-date=2018-01-01&end-date=yesterday",
    "profileInfo": {
        "profileId": "17632476",
        "accountId": "8757025",
        "webPropertyId": "UA-8757025-1",
        "internalWebPropertyId": "16617639",
        "profileName": "www.unfinishedfurnitureofwilmington.com",
        "tableId": "ga:17632476"
    },
    "containsSampledData": false,
    "columnHeaders": [
        {
            "name": "ga:month",
            "columnType": "DIMENSION",
            "dataType": "STRING"
        },
        {
            "name": "ga:avgPageLoadTime",
            "columnType": "METRIC",
            "dataType": "FLOAT"
        }
    ],
    "totalsForAllResults": {
        "ga:avgPageLoadTime": "2.947182019486271"
    },
    "rows": [
        [
            "01",
            "1.603426406926407"
        ],
        [
            "02",
            "1.4928668730650154"
        ],
        [
            "03",
            "2.3523529411764708"
        ],
        [
            "04",
            "4.546192307692308"
        ],
        [
            "05",
            "7.836638095238095"
        ],
        [
            "06",
            "8.599680000000001"
        ],
        [
            "07",
            "7.075429752066116"
        ],
        [
            "08",
            "3.243526315789474"
        ],
        [
            "09",
            "4.185892857142857"
        ]
    ]
}