{% extends base_template %}
{% load staticfiles %}
{% load my_filters %}

{% block title %}Timelines {{ block.super }}{% endblock title %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="{% static 'js/jquery-1.9.1.min.js' %}"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
    </script>

    <script>
        ex_raw_str = "{{ exercises|jsonify|addslashes }}";
        ex_raw_data = $.parseJSON(ex_raw_str);

        vid_raw_str = "{{ videos|jsonify|addslashes }}";
        vid_raw_data = $.parseJSON(vid_raw_str);

        reg_raw_str = "{{ registrations|jsonify|addslashes }}";
        reg_raw_data = $.parseJSON(reg_raw_str);
    </script>

    <script>
        google.setOnLoadCallback(drawVisualizations);
        function drawVisualizations() {
            drawLogVisualization(ex_raw_data, "visualization1", "exercise");
            drawLogVisualization(vid_raw_data, "visualization2", "video");
            drawRegVisualization(reg_raw_data, "visualization3");
        }
        function drawLogVisualization(raw_data, vis_div, dtype) {
          // Create and populate the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Date');
          data.addColumn('number', '# ' + dtype + ' completed');
          data.addColumn({type: 'string', role: 'tooltip'}); // name, zone name

          var data_idx = 1;
          var last_date = null;//new Date();
          var next_date = null;//last_date; next_date.setDate(next_date.getDate()+1);
          var cur_row = [];  // never will be used

          //
          for (var k in raw_data){
            var row = raw_data[k];
            if (!row["completion_timestamp"]) {
              continue;
            }
            var cur_date = new Date(row["completion_timestamp"].substr(0, 10));  // parse the date, forget the time

            // Date changed; store the last date info into the database
            if (!last_date || cur_date.toDateString() != last_date.toDateString()) {
                if (last_date != null) {
                    // We're going to save off old data, so make sure we're not at the start
                    //   (where there is no "old data")
                    var tooltip = cur_date.toLocaleDateString() + "\n" + dtype + " logs: " + cur_row[1];
                    var sorted_counts = sortWithIndeces(cur_counts);
                    for (key in cur_row[2]) {
                        tooltip += "\n(" + sorted_counts[key] + ") " + cur_row[2][sorted_counts.sortIndices[key]];
                    }
                    data.addRow([cur_row[0].toLocaleDateString(), cur_row[1], tooltip]);
                    while (next_date < cur_date) {
                        // Make sure to fill in empty rows for missing dates
                        data.addRow([next_date.toLocaleDateString(), 0, ""]);
                        next_date.setDate(next_date.getDate()+1);  // move on to the next day
                    }
                }
                cur_row = [cur_date, 0, []];
                cur_counts = [];
                last_date = new Date(cur_date);
                next_date = new Date(last_date); next_date.setDate(next_date.getDate()+1);
            }
            cur_row[1]++; // total # logs in this date
            var device_str = "Device = " + row["signed_by__name"] + "; Sharing Network = " + row["signed_by__devicezone__zone__name"];
            if (cur_row[2].indexOf(device_str) == -1) {
                cur_row[2] = cur_row[2].concat(device_str); // for a "story"--a list of device/zone
                cur_counts = cur_counts.concat(0);
            }
            cur_counts[cur_row[2].indexOf(device_str)]++;
          }
          if (cur_row.length != 0) {
            data.addRow([cur_row[0].toLocaleDateString(), cur_row[data_idx], cur_row[4]]);
          }
          // Create and draw the visualization.
          new google.visualization.ColumnChart(document.getElementById(vis_div)).
          draw(data,
               {title:"Total Completed " + dtype + " Logs, By Date",
                width:5000, height:1000,
                vAxis: {title: "# " + dtype + " Logs"},
                hAxis: {title: "Date"}}
              );
        }



        function drawRegVisualization(raw_data, vis_div) {
          // Create and populate the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Date');
          data.addColumn('number', '# devices registered');
          data.addColumn({type: 'string', role: 'tooltip'}); // name, zone name

          var data_idx = 1;
          var last_date = null;//new Date();
          var next_date = null;//last_date; next_date.setDate(next_date.getDate()+1);
          var cur_row = [];  // never will be used

          // Rows are sorted by time of first sync session
          // So we'll go through and group rows from the same date together.
          //
          // Data format:
          //   first_sess: date of the first sync session
          //   last_sess: date of the latest sync session
          //   name: device name
          //   devicezone__zone__name: zone name
          //   nsess: # of sync sessions for this device
          //   nmodels: # of models (data) this device created/uploaded
          //
          for (k in raw_data){
            var row = raw_data[k];
            var cur_date = new Date(row["first_sess"].substr(0, 10));  // parse the date, forget the time

            // Date changed; store the last date info into the database
            if (!last_date || cur_date.toDateString() != last_date.toDateString()) {
                if (last_date != null) {
                    // We're going to save off old data, so make sure we're not at the start
                    //   (where there is no "old data")
                    data.addRow([cur_row[0].toLocaleDateString(), cur_row[data_idx], cur_row[4]]);
                    while (next_date < cur_date) {
                        // Make sure to fill in empty rows for missing dates
                        data.addRow([next_date.toLocaleDateString(), 0, ""]);
                        next_date.setDate(next_date.getDate()+1);  // move on to the next day
                    }
                }
                cur_row = [cur_date, 0, 0, 0, cur_date.toLocaleDateString()];
                last_date = new Date(cur_date);
                next_date = new Date(last_date); next_date.setDate(next_date.getDate()+1);
            }
            cur_row[1]++; // total # devices in this date
            cur_row[2] += row["nmodels"]; // total # of models (over all time) for devices who first synced on this date
            cur_row[3] += row["nsess"]; // total # of sessions (like nmodels)
            cur_row[4] += ("\nDevice = " + row["name"] + "; Sharing Network = " + row["devicezone__zone__name"]); // for a "story"--a list of device/zone
          }
          if (cur_row.length != 0) {
            data.addRow([cur_row[0].toLocaleDateString(), cur_row[data_idx], cur_row[4]]);
          }
          // Create and draw the visualization.
          new google.visualization.ColumnChart(document.getElementById(vis_div)).
          draw(data,
               {title:"Devices registered (well.. kinda), per date",
                width:5000, height:500,
                vAxis: {title: "# Devices"},
                hAxis: {title: "# Date"}}
              );
        }

        function sortWithIndeces(toSort) {
          for (var i = 0; i < toSort.length; i++) {
            toSort[i] = [toSort[i], i];
          }
          toSort.sort(function(left, right) {
            return left[0] < right[0] ? 1 : -1;
          });
          toSort.sortIndices = [];
          for (var j = 0; j < toSort.length; j++) {
            toSort.sortIndices.push(toSort[j][1]);
            toSort[j] = toSort[j][0];
          }
          return toSort;
        }
    </script>
{% endblock headjs %}

{% block content %}
    <div>
        <h1>Exercise Log History (Completed)</h1>
        <div id="visualization1"></div>
    </div>
    <div>
        <h1>Video Log History (Completed)</h1>
        <div id="visualization2"></div>
    </div>
    <div>
        <h1>Device Registration History</h1>
        <div id="visualization3"></div>
    </div>
{% endblock content %}