Foodloop-Server/templates/admin/reports/transaction_data.html.ep

% layout 'admin';
% title 'Transaction Report';
% content_for javascript => begin
<script src="//www.gstatic.com/charts/loader.js"></script>
<script>
var raw_data = <%== $transaction_rs %>;
var mapped_data = $.map(raw_data, function( val, i ) {
  return [
    [
      new Date(val.quantised),
      val.count,
      val.average_value / 100000,
      val.sum_value / 100000,
      val.average_distance / 1000,
      val.sum_distance / 1000,
    ]
  ];
});

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(loadData);

function loadData() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Hours');
  data.addColumn('number', 'Count');
  data.addColumn('number', 'Average Value');
  data.addColumn('number', 'Sum Value');
  data.addColumn('number', 'Average Distance');
  data.addColumn('number', 'Sum Distance');

  data.addRows(mapped_data);

  drawCountChart(data);
  drawDistanceChart(data);
  drawValueChart(data);
}

function drawCountChart(data) {
  var options = {
    title: 'Transaction Count',
    height: 500,
    series: {
      0: {targetAxisIndex: 0},
    },
    vAxes: {
      0: { title: 'Count' },
    },
    explorer: { axis: 'horizontal' }
  };

  var chart_data = new google.visualization.DataView(data);
  chart_data.setColumns([0, 1]);

  var chart = new google.visualization.LineChart(document.getElementById('count_chart_div'));
  chart.draw(chart_data, options);
}

function drawDistanceChart(data) {
  var options = {
    title: 'Transaction Distance',
    height: 500,
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 0},
    },
    vAxes: {
      0: { title: 'Distance (km)' },
    },
    explorer: { axis: 'horizontal' }
  };

  var chart_data = new google.visualization.DataView(data);
  chart_data.setColumns([0, 4, 5]);

  var chart = new google.visualization.LineChart(document.getElementById('distance_chart_div'));
  chart.draw(chart_data, options);
}

function drawValueChart(data) {
  var options = {
    title: 'Transaction Value',
    height: 500,
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 0},
    },
    vAxes: {
      0: { title: 'Value (GBP)' },
    },
    explorer: { axis: 'horizontal' }
  };

  var chart_data = new google.visualization.DataView(data);
  chart_data.setColumns([0, 2, 3]);

  var chart = new google.visualization.LineChart(document.getElementById('value_chart_div'));
  chart.draw(chart_data, options);
}
</script>
% end
% if ( my $error = flash 'error' ) {
  <div class="alert alert-danger" role="alert">
    <strong>Error!</strong> <%= $error %>
  </div>
% } elsif ( my $success = flash 'success' ) {
  <div class="alert alert-success" role="alert">
    <strong>Success!</strong> <%= $success %>
  </div>
% }
<div class="card mb-3 text-center">
  <div class="card-header">
    Transaction Count
  </div>
  <div id="count_chart_div" class="card-body">
    <div class="card-text">
      <em>Loading...</em>
    </div>
  </div>
</div>
<div class="card mb-3 text-center">
  <div class="card-header">
    Transaction Distance
  </div>
  <div id="distance_chart_div" class="card-body">
    <div class="card-text">
      <em>Loading...</em>
    </div>
  </div>
</div>
<div class="card mb-3 text-center">
  <div class="card-header">
    Transaction Value
  </div>
  <div id="value_chart_div" class="card-body">
    <div class="card-text">
      <em>Loading...</em>
    </div>
  </div>
</div>