render/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>uLogMe - Single-day View</title>
    <meta content="uLogMe Single-day View page - See https://github.com/Naereen/uLogMe/" name="description" />

    <link rel="stylesheet" type="text/css" href="css/index_style.css" />
    <link rel="stylesheet" media="screen and (min-width: 280px)" type="text/css" href="css/nprogress.css" />
    <link rel="stylesheet" type="text/css" href="css/headerlink.css" />
    <link rel="icon" href="favicon.png" type="image/png" />

    <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/spin.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/render_utils.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/render_settings.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/d3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/d3utils.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/underscore.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/ulogme_common.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/highcharts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/nprogress.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/mousetrap.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/all-easter-eggs.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/FileSaver.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/canvasToBlob.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/saveSVGUtils.js" charset="utf-8"></script>
    <script type="text/javascript">
    // GLOBALS
    var color_hash = {}; // mapped titles -> hsl color to draw with
    var t00; // initial time for a day (time first event began)
    var ft; // final time for a day (time last event ended)
    var ecounts = {};
    var etypes = [];
    var hacking_stats = {};

    function setTitle (msg) {
      window.document.title = "uLogMe - " + msg;
      console.log( "setTitle(): setting title to '" + "uLogMe - Single-day View - " + msg + "' ..." );
    }

    // renders pie chart showing distribution of time spent into #piechart
    function createPieChart(es, etypes) {

      // count up the total amount of time spent in all windows
      var dtall = 0;
      var counts = {};
      _.each(es, function(e){
        counts[e.m] = (counts[e.m] || 0) + e.dt;
        dtall += e.dt;
      });
      var stats = _.map(etypes, function(m) {
        return {val: counts[m],
                name: m + " (" + (100*counts[m]/dtall).toFixed(1) + "%)",
                col: color_hash[m]
               };
      });

      // create a pie chart with d3
      var chart_data = {};
      chart_data.width = $(window).width();
      chart_data.height = 600;
      chart_data.title = "Total Time: " + strTimeDelta(dtall);
      chart_data.data = stats;
      d3utils.drawPieChart(d3.select("#piechart"), chart_data);
    }

    // renders pie chart showing distribution of time spent into #piechart
    function createHighPieChart(es, etypes, animate=true) {
      // count up the total amount of time spent in all windows
      var dtall = 0;
      var counts = {};
      _.each(es, function(e){
        counts[e.m] = (counts[e.m] || 0) + e.dt;
        dtall += e.dt;
      });
      var stats = _.map(etypes, function(m) {
        return {val: counts[m],
          name: m + " (" + (100*counts[m]/dtall).toFixed(1) + "%)",
          col: color_hash[m]
        };
      });
      var colors = Highcharts.getOptions().colors,
        groupsData = [],
        activitiesData = [],
        i,
        j,
        brightness;
      // create color hash table, maps from window titles -> HSL color
      var activity_group_color_hash = colorHashStrings(_.uniq(_.pluck(activity_groups, "name")));
      // Build the data array
      var title_to_group = {}
      for (var gi = 0; gi < activity_groups.length; gi += 1) {
        var ag = activity_groups[gi]
        for (var ti = 0; ti < ag.titles.length; ti += 1) {
          title_to_group[ag.titles[ti]] = ag.name
        }
      }
      var activity_totals = {},
        activity_group_totals = {},
        data_tree = {},
        ev,
        ag,
        d;
      for (i = 0; i < es.length; i += 1) {
        ev = es[i]
        ag = title_to_group[ev.m]
        if (ag in data_tree) {
          data_tree[ag].total = data_tree[ag].total + ev.dt
          data_tree[ag].activities[ev.m] = (data_tree[ag].activities[ev.m] || 0) + ev.dt
        } else {
          data_tree[ag] = {
            name: ag,
            total: ev.dt,
            activities: {}
          }
          data_tree[ag].activities[ev.m] = ev.dt
        }
      }
      var activity_color_hash = colorHashStrings(_.uniq(Object.keys(activity_totals)));
      for (var group_name in data_tree) {
        var grp = data_tree[group_name]
        groupsData.push({
          name: grp.name,
          y: grp.total,
          color: activity_group_color_hash[grp.name],
          dataLabels: {
            rotation:0,
          },
        });
        var activity_names = Object.keys(grp.activities).sort(function(a,b){
          var cmp = a.toLowerCase().localeCompare(b.toLowerCase())
          return cmp != 0 ? cmp : a.localeCompare(b);
        });
        for (i = 0; i < activity_names.length; i += 1) {
          var total = grp.activities[activity_names[i]]
          activitiesData.push({
            name: activity_names[i],
            y: total,
            color: activity_color_hash[activity_names[i]]
          });
        }
      }

      var date0 = new Date(t00*1000);
      var titletext = "Activity breakdown, " + ppDay(date0);
      // Experimentally change the page title
      setTitle(ppDay(date0));

      // Create the chart
        var main_chart_options = {
            credits: {
                  enabled: false
            },
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                type: "pie"
            },
            title: {
                text: titletext,
                style: {
                    "padding-bottom": "15px",
                    fontWeight: "bold",
                    fontSize: "35px",
                }
            },
            subtitle: {
                text: "Total time: " + strTimeDelta(dtall, false),
                style: {
                    fontWeight: "bold",
                    fontSize: "35px",
                }
            },
            yAxis: {
                title: {
                    text: "Total percent market share"
                }
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ["50%", "45%"],
                    allowPointSelect: true,
                    showInLegend: true,
                },
            },
            tooltip: {
                valueSuffix: "%",
                formatter: function () {
                    return strTimeDelta(this.y, false) + " (" + this.percentage.toFixed(1) + "%)";
                }
            },
            series: [{
                name: "Work balance",
                data: groupsData,
                size: "45%",
                innerSize: "70%",
                dataLabels: {
                    formatter: function () {
                        return this.y >= 0 ? this.point.name.toUpperCase() + "<br>" + strTimeDelta(this.y, false)
                        + ( this.percentage.toFixed(0) >= 2 ? "<br>(<i>" + this.percentage.toFixed(0) + "%</i>)" : "" )
                        : null;
                    },
                    color: "#000000",
                    style: {
                        fontSize: "11pt",
                    },
                    distance: -35,
                    rotation: 0,
                },
                allowPointSelect: false,
                showInLegend: false,
                animation: animate ? {
                    duration: 400,
                } : false,
            }, {
                name: "Activities",
                data: activitiesData,
                size: "78%",
                innerSize: "70%",
                dataLabels: {
                    formatter: function () {
                        // display only if larger than 1
                        return this.y > 1 ? "<b>" + this.point.name + "</b>: " +  strTimeDelta(this.y, false)
                          + ( this.percentage.toFixed(0) >= 2 ? "<br>(<i>" + this.percentage.toFixed(0) + "%</i>)" : "" )
                          : null;
                    },
                    style: {
                        fontSize: "12pt",
                    },
                },
                animation: animate ? {
                    duration: 600,
                } : false,
            }]
        };

        var allY, angle1, angle2, angle3;
        var rotate = function () {
            var p = main_chart_options.series[0];
            angle1 = 0;
            angle2 = 0;
            angle3 = 0;
            allY = 0;
            $.each(p.data, function (i, p) {
                allY += p.y;
            });

            $.each(p.data, function (i, p) {
                angle2 = angle1 + p.y * 360 / (allY);
                angle3 = angle2 - p.y * 360 / (2 * allY);
                if(angle3 >= 180){
                p.dataLabels.rotation = angle3;
                } else {
                p.dataLabels.rotation = angle3;
                }
                angle1 = angle2;
            });
        };
        //rotate();
        $("#highpiechart").highcharts(main_chart_options);

        // Set-up the export button, cf. http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177
        d3.select('#saveButton_highpiechart').on('click', function(){
          var saveAs = Make_saveAs(window);
          var svgNode = $(".highcharts-container")[0].children[0];
          var svgString = getSVGString(svgNode);
          svgString2Image( svgString, svgNode.width.baseVal.value, svgNode.height.baseVal.value, 'png', save ); // passes Blob and filesize String to the callback
          function save( dataBlob, filesize ){
            saveAs( dataBlob, "uLogMe activity breakdown" + ppDay(date0) + ".png" ); // FileSaver.js function
          }
        });
    }

    // creates the main barcode time visualization for all mapped window titles
    function visualizeEvents(es) {
      $("#eventvis").empty();
      _.each(display_groups, function(x) { visualizeEvent(es, x); })
    }

    // uses global variable hacking_events as input. Must be set
    // and global total_hacking_time as well.
    function visualizeHackingTimes(hacking_stats) {
      $("#hackingvis").empty();
      if(!draw_hacking) return; // global set in render_settings.js

      var c = "rgb(190,0,0)"; // red color

      var div = d3.select("#hackingvis").append("div");
      // hacking_title can be customized in the render_settings.js file
      div.append("p").attr("class", "tt").attr("style", "color:"+c).text(hacking_title)
         .append("a").attr("class", "headerlink").attr("href", "#hackingvis").attr("title", "Anchor for this « Continuous typing » chart").text("¶");

      var txt = strTimeDelta(hacking_stats.total_hacking_time);
      txt += " (total keys = " + hacking_stats.total_hacking_keys + ")";
      div.append("p").attr("class", "td").text(txt);

      var W = $(window).width() - 40;
      var svg = div.append("svg")
        .attr("width", W)
        .attr("height", 30);

      var sx = (ft-t00) / W;
      var g = svg.selectAll(".h")
        .data(hacking_stats.events)
        .enter().append("g")
        .attr("class", "h")
        .on("mouseover", function(d){return tooltip.style("visibility", "visible").text(strTimeDelta(d.dt));})
        .on("mousemove", function(){ return tooltip.style("top", (d3.event.pageY-30)+"px").style("left",(d3.event.pageX+10)+"px"); })
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

      g.append("rect")
        .attr("x", function(d) { return (d.t0-t00)/sx; } )
        .attr("width", function(d) { return d.dt/sx; } )
        .attr("y", function(d) {return 30-10*d.intensity} )
        .attr("height", function(d) {return 10*d.intensity; })
        .attr("fill", function(d) { return c; });
    }

    // just print number of window switches
    function visualizeWinSwitches(nb_events) {
      console.log("nb_events =", nb_events);
      $("#nbevents_data").empty();
      $("#nbevents_data").text(nb_events);
    }

    // number of keys pressed in every window type visualization
    function visualizeKeyStats(key_stats, etypes) {
      $("#keystats").empty();

      // format input for d3
      var stats = _.map(etypes, function(m) {
        return {
          name: m,
          val: key_stats.hasOwnProperty(m) ? key_stats[m].f : 0,
          col: color_hash[m],
        };
      });
      stats = _.filter(stats, function(d) { return d.val > 60 }); // cutoff at 1 minute
      _.each(stats, function(d) {
        var fn = (d.val / (key_stats[d.name].n * 9.0)).toFixed(2);
        d.text = d.val + " (" + fn + "/s) " + d.name;
      });
      stats = _.sortBy(stats, "val").reverse();

      // visualize as horizontal bars with d3
      var chart_data = {};
      chart_data.width = 700;
      chart_data.barheight = 30;
      chart_data.textpad = 300;
      chart_data.textmargin = 20;
      chart_data.title = "Total number of key strokes";
      chart_data.data = stats;
      d3utils.drawHorizontalBarChart(d3.select("#keystats"), chart_data);
      d3.select("#keystats p")
         .append("button").attr("id", "saveButton_keystats").text("Save to PNG")
         .append("a").attr("class", "headerlink").attr("href", "#keystats").attr("title", "Anchor for this #keystats").text("¶");

      // Set-up the export button, cf. http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177
      d3.select('#saveButton_keystats').on('click', function(){
        console.log("#saveButton_keystats on click...");
        var saveAs = Make_saveAs(window);
        var svgNode = $("#keystats svg")[0];
        var svgString = getSVGString(svgNode);
        svgString2Image( svgString, svgNode.width.baseVal.value, svgNode.height.baseVal.value, 'png', save ); // passes Blob and filesize String to the callback
        function save( dataBlob, filesize ){
          saveAs( dataBlob, "uLogMe Total number of key strokes.png" ); // FileSaver.js function
        }
      });
    }

    // simple plot of key frequencies over time
    function visualizeKeyFreq(es) {
      $("#keygraph").empty();

      var W = $(window).width() - 40;

      var div = d3.select("#keygraph").append("div");
      var svg = div.append("svg")
      .attr("width", "100%")
      .attr("height", 100);

      var sx = (ft-t00) / W;
      var line = d3.svg.line()
        .x(function(d) { return (d.t -t00) / sx; })
        .y(function(d) { return 100 - d.s; });

      svg.append("path")
        .datum(es)
        .attr("class", "line")
        .attr("d", line);

      div.append("p").attr("class", "al").text("Keystroke frequency")
         .append("button").attr("id", "saveButton_keygraph").text("Save to PNG")
         .append("a").attr("class", "headerlink").attr("href", "#keygraph").attr("title", "Anchor for this #keygraph").text("¶");

        // Set-up the export button, cf. http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177
        d3.select('#saveButton_keygraph').on('click', function(){
          console.log("#saveButton_keygraph on click...");
          var saveAs = Make_saveAs(window);
          var svgNode = $("#keygraph svg")[0];
          var svgString = getSVGString(svgNode);
          function save( dataBlob, filesize ){
            saveAs( dataBlob, "uLogMe Keystroke frequency.png" ); // FileSaver.js function
          }
          svgString2Image( svgString, Math.floor(svgNode.width.baseVal.value), Math.floor(svgNode.height.baseVal.value), 'png', save ); // passes Blob and filesize String to the callback
        });
    }

    function visualizeNotes(es) {
      console.log("uLogMe (index.html): number of notes:" + es.length);
      $("#notesvis").empty();
      if(!draw_notes) return; // draw_notes is set in render_settings.js
      if(es.length === 0) return; // nothing to do here...

      var coffees = [];
      var dts= [];
      for(var i=0,N=es.length;i<N;i++) {
        var e = es[i];
        var d = {};
        d.x = e.t-t00;
        d.s = e.s;
        if(e.s.indexOf("coffee")>-1) {
          // we had coffee
          coffees.push(e.t-t00);
        }
        dts.push(d);
      }

      console.log("uLogMe (index.html): drawing " + dts.length + " notes.");
      var div = d3.select("#notesvis").append("div");
      div.append("p").attr("class", "tt").attr("style", "color: #964B00").text("Notes")
         .append("a").attr("class", "headerlink").attr("href", "#notesvis").attr("title", "Anchor for this #notesvis").text("¶");
      var W = $(window).width() - 40;
      var svg = div.append("svg")
      .attr("width", W)
      .attr("height", 70);

      var sx = (ft-t00) / W;

      // Draw coffee. Overlay
      // draw_coffee is set in render_settings.js
      if(draw_coffee) {
        var coffex = [];
        var nc = coffees.length;
        var alpha = Math.log(2)/20520; // 20,520 is half life of coffee, in seconds. Roughly 6 hours
        for(var i=0;i<100;i++) {
          there = i*(ft-t00)/100.0;
          // coffee is assumed to add linearly in the body
          var amount = 0;
          for(var j=0;j<nc;j++) {
            if(there > coffees[j]) {
              amount += Math.exp(-alpha*(there - coffees[j]));
            }
          }
          coffex.push({t:there, a:30*amount}); // scale is roughly 30px = 150mg coffee, for now
        }
        var cdx = (ft - t00)/100.0;
        var g = svg.selectAll(".c")
          .data(coffex)
          .enter()
          .append("rect")
          .attr("width", cdx/sx)
          .attr("x", function(d){ return d.t/sx; })
          .attr("y", function(d){ return 50-d.a; })
          .attr("height", function(d){ return d.a; })
          .attr("fill", "#E4CFBA");
      }

      // draw notes
      var g = svg.selectAll(".n")
        .data(dts)
        .enter().append("g")
        .attr("class", "n");

      g.append("rect")
        .attr("x", function(d) { return d.x/sx; } )
        .attr("width", 2)
        .attr("y", 0)
        .attr("height", 50)
        .attr("fill", "#964B00");

      g.append("text")
        .attr("transform", function(d,i) { return "translate(" + (d.x/sx+5) + "," + (10+15*(i%5)) + ")"; })
        .attr("font-family", "'Lato', sans-serif")
        .attr("font-size", 14)
        .attr("fill", "#333")
        .text(function(d) { return d.s; } );
    }

    var clicktime;
    function visualizeEvent(es, filter) {

      var dts = [];
      var ttot = 0;
      var ttoti = [];
      var filter_colors = [];
      for(var q=0;q<filter.length;q++) {
        filter_colors[q] = color_hash[filter[q]];
        ttoti.push(0);
      }
      for(var i=0,N=es.length;i<N;i++) {
        var e = es[i];
        var fix = filter.indexOf(e.m);
        if( fix === -1) { continue; }
        ttot += e.dt;
        ttoti[fix] += e.dt;
        if(e.dt < 10) continue; // less than few second event? skip drawing. Not a concentrated activity
        var d = {};
        d.x = e.t - t00;
        d.w = e.dt;
        d.s = e.s + " (" + strTimeDelta(e.dt) + ")";
        d.fix = fix;
        dts.push(d);
      }
      if(ttot < 60) return; // less than a minute of activity? skip

      console.log("uLogMe (index.html): drawing filter " + filter + " with " + dts.length + " events.");

      var div = d3.select("#eventvis").append("div");

      var filters_div = div.append("div").attr("class", "fsdiv");
      for(var q=0;q<filter.length;q++) {
        if(ttoti[q] === 0) continue; // this filter wasnt found

        var filter_div = filters_div.append("div").attr("class", "fdiv");
        var c = filter_colors[q];
        // FIXME cleanify the text filter[q] to make a valid enchor
        var anchortext = filter[q].replace(" ", "-")
        filter_div.append("p").attr("class", "tt").attr("style", "color:"+c).text(filter[q])
         .append("a").attr("class", "headerlink").attr("id", anchortext).attr("href", "#" + anchortext).attr("title", "Anchor for this « " + anchortext + " » activity chart").text("¶");
        var txt = strTimeDelta(ttoti[q]);
        filter_div.append("p").attr("class", "td").text(txt);
      }

      var W = $(window).width() - 40;
      var svg = div.append("svg")
      .attr("width", W)
      .attr("height", 70);

      var sx = (ft-t00) / W;
      var g = svg.selectAll(".e")
        .data(dts)
        .enter().append("g")
        .attr("class", "e")
        .on("mouseover", function(d){ return tooltip.style("visibility", "visible").text(d.s); })
        .on("mousemove", function(){ return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); })
        .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); })
        .on("click", function(d){
          $("#notesinfo").show();
          $("#notesmsg").html("You clicked on the event <b>" + d.s + "</b><br> Add a note at time of this event:");
          $("#notetext").focus()
          clicktime = d.x+t00;
          return 0;
        });

      g.append("rect")
        .attr("x", function(d) { return d.x/sx; } )
        .attr("width", function(d) { return d.w/sx; } )
        .attr("y", 0)
        .attr("height", 50)
        .attr("fill", function(d) { return filter_colors[d.fix]; });

      // produce little axis numbers along the timeline
      var d0 = new Date(t00 * 1000);
      d0.setMinutes(0);
      d0.setSeconds(0);
      d0.setMilliseconds(0);
      var t = d0.getTime() / 1000; // cropped hour
      while(t < ft) {
        svg.append("text")
          .attr("transform", "translate(" + [(t-t00)/sx, 70] + ")")
          .attr("font-family", "'Lato', sans-serif")
          .attr("font-size", 14)
          .attr("fill", "#AAA")
          .text(new Date(t * 1000).getHours() + "h");
        t += 3600;  // Next hour!
      }
    }

    // count up how much every event took
    function statEvents(es) {
      if(es.length === 0) return;

      var t0 = es[0].t;
      var ixprev = 0;
      for(var i=1,N=es.length;i<N;i++) {
        var e = es[i];
        var dt = es[i].t - es[ixprev].t; // length of time for last event
        es[ixprev].dt = dt;
        var tmap = es[ixprev].m; // mapped title of previous events
        if(ecounts.hasOwnProperty(tmap)) {
          ecounts[tmap] += dt;
        } else {
          ecounts[tmap] = 0;
          etypes.push(tmap); // catalogue these in a list
        }
        ixprev = i;
      }
      es[N-1].dt = 1; // last event we dont know how long lasted. assume 1 second?
    }

    function writeHeader() {
      var date0 = new Date(t00*1000);
      // I want to display in the title the same timestamp as the one used for the file
      if (date0.getHours() >= 7) {
        var date0_7am = new Date(date0.getFullYear(), date0.getMonth(), date0.getDate(), 7, 0, 0);
      } else {
        var date0_7am = new Date(date0.getFullYear(), date0.getMonth(), date0.getDate() - 1, 7, 0, 0);
      }
      var t00_7am = date0_7am.getTime() / 1000;
      var date1 = new Date(ft*1000);
      $("#header").html("<h2 title='" + date0 + " (Timestamp: " + (t00_7am) + ")' >" + ppDate(date0) + " - " + ppHour(date1) + "</h2>");
    }

    function startSpinner() {
      NProgress.start();
      // create a spinner
      var target = document.getElementById("spinnerdiv");
      opts = {left:"30px", top:"40px", radius: 10, color: "#FFF" };
      var spinner = new Spinner(opts).spin(target);
      NProgress.inc();
    }
    function renderBlogEntry(blog) {
        if (blog === "") {
            $("#blogpre").attr("class", "empty").text("Click to enter the note for this day");
            $("#blogstash").text("");
        } else {
            $("#blogpre").attr("class", "notempty").text(blog);
            $("#blogstash").text(blog);
        }
    }
    function stopSpinner() {
      $("#spinnerdiv").empty();
      NProgress.done();
    }

    function fetchAndLoadEvents(daylog) {
      loaded = false;
      // we do this random thing to defeat caching. Very annoying
      var json_path = daylog.fname + "?sigh=" + Math.floor(10000*Math.random());

      // fill in blog area with blog for this day
      $.getJSON(json_path, function(data){
        loaded = true;

        // save these as globals for later access
        events = data["window_events"];
        // nb_events = data["nb_window_events"]
        key_events = data["keyfreq_events"];
        notes_events = data["notes_events"];

        // map all window titles through the (customizable) mapwin function
        _.each(events, function(e) { e.m = mapwin(e.s); });

        // compute various statistics
        statEvents(events);

        // create color hash table, maps from window titles -> HSL color
        color_hash = colorHashStrings(_.uniq(_.pluck(events, "m")));

        // find the time extent: min and max time for this day
        if(events.length > 0) {
          t00 = _.min(_.pluck(events, "t"));
          ft = _.max(_.map(events, function(e) { return e.t + e.dt; }))
        } else {
          t00 = daylog.t0;
          ft = daylog.t1;
        }

        // render blog entry
        renderBlogEntry('blog' in data ? data['blog'] : '');

        visualizeEvents(events);
        writeHeader();
        // createPieChart(events, etypes);
        createHighPieChart(events, etypes);
        computeKeyStats(events, key_events);
        hacking_stats = computeHackingStats(events, key_events, hacking_titles);
        visualizeHackingTimes(hacking_stats);
        visualizeWinSwitches(events.length);
        key_stats = computeKeyStats(events, key_events);
        visualizeKeyStats(key_stats, etypes);
        visualizeKeyFreq(key_events);
        visualizeNotes(notes_events);
      });
    }

    var events;
    // var nb_events;
    var key_events;
    var notes_events;
    var blog;
    var tooltip;
    var event_list = [];
    var loaded = false;
    var cur_event_id = -1;
    var clicktime = 0;
    function start() {
      NProgress.start();

      // create tooltip div
      tooltip = d3.select("body")
      .append("div")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("");

      // we do this random thing to defeat caching. Very annoying
      $.getJSON("json/export_list.json?sigh=" + Math.floor(10000*Math.random()), function(data){
        event_list = data; // assign to global variable

        cur_event_id = event_list.length - 1;
        if("gotoday" in QueryString) { cur_event_id = parseInt(QueryString.gotoday); }

        fetchAndLoadEvents(event_list[cur_event_id]); // display latest
      });
      NProgress.inc();

      // setup notes hide key
      $("#notesinfohide").click(function(){ $("#notesinfo").hide(); });

      // setup refresh handler to create a post request to /reload
      $("#reloadbutton").click(reload);

      // set up notes add handler
      $("#notesadd").click(function() {

        startSpinner();
        $.post("/addnote",
          {"note": $("#notetext").val(), "time": clicktime},
          function(data,status){
            console.log("uLogMe (index.html): Data: " + data + "\nStatus: " + status);
            if(data === "OK") {
              // everything went well, refresh current view
              $("#notetext").val("") // erase
              $("#notesinfo").hide(); // take away
              fetchAndLoadEvents(event_list[cur_event_id]);
            }
            stopSpinner();
        });
        aRandomEasterEgg();
      });
      NProgress.inc();

      // register enter key in notes as submitting
      $("#notetext").keyup(function(event){
        if(event.keyCode == 13){
          $("#notesadd").click();
        }
      });

      // setup arrow events
      $("#leftarrow").click(function() {
        cur_event_id--;
        if(cur_event_id < 0) {
          cur_event_id = 0;
        } else {
          fetchAndLoadEvents(event_list[cur_event_id]); // display latest
          $("#notesinfo").hide();
          $("#blogenter").hide();
          $("#blogpre").show();
        }
      });
      $("#rightarrow").click(function() {
        cur_event_id++;
        if(cur_event_id >= event_list.length) {
          cur_event_id = event_list.length - 1;
        } else {
          fetchAndLoadEvents(event_list[cur_event_id]); // display latest
          $("#notesinfo").hide();
          $("#blogenter").hide();
          $("#blogpre").show();
        }
      });
      NProgress.inc();

      // setup blog text click event
      $("#blogenter").hide();
      $("#blogpre").click(function(event){
        console.log("uLogMe (index.html): clicking the blog textarea ...");
        var txt = $("#blogpre").text();
        $("#blogpre").hide();
        $("#blogenter").show();
        $("#blogentertxt").val(txt)
        $("#blogentertxt").focus();
        event.stopPropagation();
        aRandomEasterEgg();
      });

      // setup the submit blog entry button
      $("#blogentersubmit").click(function(){
        var txt = $("#blogentertxt").val();
        $("#blogpre").text(txt);
        $("#blogpre").show();
        $("#blogenter").hide();

        // submit to server with POST request
        $.post("/blog",
          {"time" : event_list[cur_event_id].t0, "post": txt},
           function(data,status){
            console.log("uLogMe (index.html): Data: " + data + "\nStatus: " + status);
            stopSpinner();
            if(data === "OK") {
              // everything went well
            }
          });
        aRandomEasterEgg();
      });

      $(document).click(function(event) {
        if(!$(event.target).closest('#blogenter').length) {
              if ($('#blogenter').is(":visible")) {
                  var txt = $("#blogentertxt").val();
                  $("#blogpre").text(txt);
                  $("#blogpre").show();
                  $("#blogenter").hide();
              }
          }
      });

      setInterval(redraw, 1000); // in case of window resize, we can redraw
      // Automatic reload, can be configurer in the render_settings.js file
      // Idea and code from https://github.com/blackdaemon/ulogme/commit/b356854
      if (auto_reload_interval > 0) {
        setInterval(auto_reload, auto_reload_interval*60*1000);
      }

      NProgress.done();
    }

    // setup refresh handler to create a post request to /reload
    // reload, with or without animation
    function reload(animate=true) {
      startSpinner();
      // Get the current time XXX is it correct?
      var r_time = 0;
      if (cur_event_id >= 0 && event_list) {
          r_time = event_list[cur_event_id].t0;
      }
      $.post("/refresh",
        {"time" : r_time},
        function(data,status){
          console.log("uLogMe (index.html): Data: " + data + "\nStatus: " + status);
          if(data === 'OK') {
            // everything went well, refresh current view
            fetchAndLoadEvents(event_list[cur_event_id], animate);
          }
          stopSpinner();
      });
      aRandomEasterEgg();
    }

    // auto-reload every XXX minutes, cf. render_settings.js, without animation
    function auto_reload() {
        reload(false);
    }

    // redraw if dirty (due to window resize event)
    function redraw() {
      if(!dirty) return;
      if(!loaded) return;
      visualizeEvents(events);
      visualizeKeyFreq(key_events);
      visualizeNotes(notes_events);
      visualizeHackingTimes(hacking_stats);
      dirty = false;
    }

    var dirty = false;
    $(window).resize(function() {
      dirty = true;
    });

    // MouseTrap keyboard shortcuts (cf. http://craig.is/killing/mice)
    Mousetrap.bind(["h", "?"], function() {
      console.log("uLogMe (index.html): Help alert window ...");
      window.alert(
        "This « uLogMe Single-day view » page has the following keyboard shortcuts:"
        + "\n - h or ? : for this help window."
        + "\n - left or p : load the data of the previous day."
        + "\n - right or n : load the data of the next day."
        + "\n - r : for refreshing the view by reloading the data (you can also refresh the page),"
        + "\n - o : goes to the Overview page for uLogMe."
        + "\n - i or s : goes to the more recent day of the Single-day view page for uLogMe."
        + "\n - b : edit the blog post of today."
        + "\n\nuLogMe is a free and open-source software, see https://github.com/Naereen/uLogMe/ for more details and the latest version."
        + "\nBuilt with ♥ by Lilian Besson (Naereen), and other contributors on GitHub."
        );
        aRandomEasterEgg();
    });
    Mousetrap.bind(["r"], function() {
      console.log("uLogMe (index.html): Refreshing data ...");
      reload();
      aRandomEasterEgg();
    });
    Mousetrap.bind(["o"], function() {
      console.log("uLogMe (index.html): Going to overview page ...");
      location.href = "overview.html";
      aRandomEasterEgg();
    });
    Mousetrap.bind(["i", "s"], function() {
      console.log("uLogMe (overview.html): Going to daily-vew page ...");
      location.href = "index.html";
      aRandomEasterEgg();
    });
    Mousetrap.bind(["left", "p"], function() {
      console.log("uLogMe (index.html): Previous day ...");
      $("#leftarrow").click();
      aRandomEasterEgg();
    });
    Mousetrap.bind(["right", "n"], function() {
      console.log("uLogMe (index.html): Next day ...");
      $("#rightarrow").click();
      aRandomEasterEgg();
    });
    Mousetrap.bind(["b"], function() {
      console.log("uLogMe (index.html): edit the blog post of the day ...");
      $("#blogpre").click();
      aRandomEasterEgg();
    });

    </script>
  </head>
  <body onload="start()">
    <div id="reloadspinner" class="spinner"></div>
    <div id="spinnerdiv" title="Wait for the data to be loaded..."></div>
    <div id="reloadbutton" title="Reload the data (override cache)">&#10226;</div>
    <div id="overviewlink"><a href="overview.html" title="Switch to the overview page">Overview</a></div>
    <h1><a title="Check-out my version of uLogMe on GitHub" href="https://github.com/Naereen/uLogMe/">uLogMe</a> by <a href="https://github.com/Naereen/">Naereen</a></h1>
    <div>
      <div id="leftarrow" class="arrow" title="Load data for the previous day">&lt;</div>
      <div id="rightarrow" class="arrow" title="Load data for the next day">&gt;</div>
      <div id="header"></div>
    </div>
    <div id="wrap">
      <div id="blogwrap">
        <pre id="blogpre" class="empty"></pre>
        <div id="blogenter">
          <textarea id="blogentertxt"></textarea>
          <button id="blogentersubmit">Submit</button>
        </div>
      </div>
      <div id="piecharts">
          <h3>Activity breakdown: <a class="headerlink" href="#highpiechart" title="Anchor for this « Activity breakdown » pie chart">¶</a> <button id="saveButton_highpiechart">Save to PNG</button></h3>
          <div id="highpiechart"></div>
      </div>
      <div id="keygraph">
          <h3>Keystroke frequency: <a class="headerlink" href="#keygraph" title="Anchor for this « Keystroke frequency » chart">¶</a> <button id="saveButton_keygraph">Save to PNG</button></h3>
      </div>
      <div id="hackingvis">
          <h3>Continuous typing: <a class="headerlink" href="#hackingvis" title="Anchor for this « Continuous typing » chart">¶</a></h3>
      </div>
      <div id="nbevents">
          <h3>Total number of window switches <a class="headerlink" href="#nbevents" title="Anchor for this « Total number of window switches » value">¶</a></h3>
          <p>
            <span id="nbevents_data">0</span> window switches (Alt+Tab).
          </p>
      </div>
      <div id="keystats">
          <h3>Total number of key strokes: <a class="headerlink" href="#keystats" title="Anchor for this « Total number of key strokes » chart">¶</a> <button id="saveButton_keystats">Save to PNG</button></h3>
      </div>
      <div id="notesinfo">
        <div id="notesinfohide">×</div>
        <div>
          <div id="notesmsg"></div>
          <input type="text" id="notetext">
          <div id="notesadd">Add</div>
        </div>
      </div>
      <div id="notesvis">
          <h3>Notes: <a class="headerlink" href="#notesvis" title="Anchor for the « Notes »">¶</a></h3>
      </div>
      <div id="eventvis">
          <h3>Detail of every activity: <a class="headerlink" href="#eventvis" title="Anchor for the « Detail of every activity »">¶</a></h3>
      </div>
      <!-- <div id="piechart"></div> -->
    </div>
    <footer>
      <br><br><br>
      <div class="linksfooter">
          <h3 id="about">About <a class="headerlink" href="#about" title="Anchor for the about section">¶</a></h3>
          <a href="https://github.com/Naereen/uLogMe/">Full documentation can be found on GitHub.</a>
          <a href="https://lbesson.mit-license.org/"><img src="svg/license.svg" alt="GitHub license"></a>
          <br>
          Thanks to <a href="https://github.com/karpathy/">@karpathy</a> and <a href="https://github.com/karpathy/ulogme/graphs/contributors">contributors</a> for the <a href="https://github.com/karpathy/ulogme">initial project</a>.
          <br>
          Hacked and tweaked with <span class="love">&hearts;</span> by <a href="https://github.com/Naereen/">Lilian Besson (Naereen)</a>, © 2016-2018.
          <br>
          <a href="https://github.com/Naereen/"><img src="svg/built-with-love.svg" alt="ForTheBadge built-with-love"></a>
      </div>
      <!-- Google Analytics code -->
      <script type="text/javascript" src="js/ga.js"></script>
      <noscript>
        <img style="visibility: hidden; display: none;" src="https://ga-beacon.appspot.com/UA-38514290-1/uLogMe/overview.html?pixel"/>
      </noscript>
    </footer>
  </body>
</html>