arrowcounter/counter/static/js/weeklystats.js

'use strict';
// vim: set ts=2 sw=2 tw=80 et:

/**
 * Given an id of a `<script type="application/json">` node, returns the parsed
 * JSON inside as an object.
 *
 * @param {String} id the id of the node from which to parse
 * @return {Object} the object parsed
 */
function parseJSONData(id) {
  return JSON.parse(document.getElementById(id).innerHTML);
}

/**
 * Given two arrays, one for labels and one for data, to fill, fill the arrays
 * with weekly arrowcount records for the weekly activity chart.
 *
 * @param {Array} labels an empty array for labels
 * @param {Array} data an empty array for data
 */
function buildWeeklyDataset(labels, data) {
  parseJSONData('data-weekly').forEach(function(d) {
    labels.unshift(moment(d.weekStarts));
    data.unshift(d.sum_count);
  });
}

/**
 * Given two arrays, one for labels and one for data, to fill, fill the arrays
 * with cumulative total count records for the cumulative chart.
 *
 * @param {Array} labels an empty array for labels
 * @param {Array} data an empty array for data
 */
function buildCumulativeDataset(labels, data) {
  parseJSONData('data-cumulative').forEach(function(d) {
    labels.push(moment(d.date));
    data.push(d.count_inc);
  });
}

/**
 * Given a ChartJS object's parent node, sets up the width of the chart
 * according to the data given and scrolls to the end of the chart.
 *
 * @param {Node} wrapper the parent node of the chart.
 * @param {number} length how much bars/points are in the chart.
 */
function setUpWrapper(wrapper, length) {
  wrapper.css("width", 25 * length + 'px');

  // scroll to end of chart
  wrapper.parent().scrollLeft(wrapper.width());
}

$(document).ready(function() {
  var weeklyChart = $('#chart-weekly'),
    weeklyWrapper = weeklyChart.parent();
  var weeklyLabels = [], weeklyData = [];
  buildWeeklyDataset(weeklyLabels, weeklyData);

  var weekly = new Chart(weeklyChart, {
    type: 'bar',
    data: {
      labels: weeklyLabels,
      datasets: [{
        label: gettext('# of Arrows'),
        data: weeklyData,
        backgroundColor: '#ffc107', // amber
        borderWidth: 0
      }]
    },
    options: {
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
            stepSize: 100,
          }
        }],
        xAxes: [{
          type: 'time',
          distribution: 'linear',
          time: {
            stepSize: 1,
            max: new Date(),
            unit: 'month',
          }
        }],
      },
      legend: {
        display: false,
      },
    },
  });

  setUpWrapper(weeklyWrapper, weeklyData.length);

  var cumulativeChart = $('#chart-cumulative'),
    cumulativeWrapper = cumulativeChart.parent();
  var cumulativeLabels = [], cumulativeData = [];
  buildCumulativeDataset(cumulativeLabels, cumulativeData);

  var weekly = new Chart(cumulativeChart, {
    type: 'line',
    data: {
      labels: cumulativeLabels,
      datasets: [{
        label: gettext('Yearly arrow count up to the date'),
        data: cumulativeData,
        steppedLine: true,
        backgroundColor: '#009688', // teal
        borderWidth: 0
      }]
    },
    options: {
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
          }
        }],
        xAxes: [{
          type: 'time',
          distribution: 'linear',
          bounds: 'ticks',
          time: {
            stepSize: 1,
            min: new Date(new Date().getFullYear(), 0, 1),
            max: new Date(),
            unit: 'month',
          }
        }],
      },
      legend: {
        display: false,
      },
    },
  });
});