# HG changeset patch
# User domruf <dominikruf@gmail.com>
# Date 2017-08-06 12:46:03
# Node ID 6dd14c834acfc5b392858c96f346520b9e50501a
# Parent  862e55888ff81f1beebd170090f37ac485dfd8ec

statistics: replace YUI flot with jQuery flot

- use jQuery instead of YUI in js code
- since the old library used seconds and the new library uses ms we have to
  make timestamps 1000 times bigger
- the new library uses a slightly different data format

diff --git a/kallithea/templates/summary/statistics.html b/kallithea/templates/summary/statistics.html
--- a/kallithea/templates/summary/statistics.html
+++ b/kallithea/templates/summary/statistics.html
@@ -15,7 +15,9 @@
 <%block name="head_extra">
   <link href="${h.url('atom_feed_home',repo_name=c.db_repo.repo_name,api_key=request.authuser.api_key)}" rel="alternate" title="${_('%s ATOM feed') % c.repo_name}" type="application/atom+xml" />
   <link href="${h.url('rss_feed_home',repo_name=c.db_repo.repo_name,api_key=request.authuser.api_key)}" rel="alternate" title="${_('%s RSS feed') % c.repo_name}" type="application/rss+xml" />
-  <script type="text/javascript" src="${h.url('/js/yui.flot.js', ver=c.kallithea_version)}"></script>
+  <script type="text/javascript" src="${h.url('/js/jquery.flot.js', ver=c.kallithea_version)}"></script>
+  <script type="text/javascript" src="${h.url('/js/jquery.flot.selection.js', ver=c.kallithea_version)}"></script>
+  <script type="text/javascript" src="${h.url('/js/jquery.flot.time.js', ver=c.kallithea_version)}"></script>
 </%block>
 
 <%def name="main()">
@@ -119,8 +121,6 @@ for (var i=0;i<data.length;i++){
 
 </script>
 <script type="text/javascript">
-var YUD = YAHOO.util.Dom;
-var YUE = YAHOO.util.Event;
 
 /**
  * Plots summary graph
@@ -138,16 +138,27 @@ function SummaryPlot(from,to,dataset,ove
             "to":to
         }
     };
+    for(var key in dataset){
+      var data = dataset[key].data;
+      for(var d in data){
+        data[d].time *= 1000;
+      }
+    }
+    for(var key in overview_dataset){
+      overview_dataset[key][0] *= 1000;
+    }
     var dataset = dataset;
     var overview_dataset = [overview_dataset];
-    var choiceContainer = YUD.get("legend_choices");
-    var choiceContainerTable = YUD.get("legend_choices_tables");
-    var plotContainer = YUD.get('commit_history');
-    var overviewContainer = YUD.get('overview');
+    var choiceContainer = $("#legend_choices")[0];
+    var choiceContainerTable = $("#legend_choices_tables")[0];
+    var $plotContainer = $('#commit_history');
+    var plotContainer = $('#commit_history')[0];
+    var $overviewContainer = $('#overview');
+    var overviewContainer = $('#overview')[0];
 
     var plot_options = {
         bars: {show:true, align: 'center', lineWidth: 4},
-        legend: {show:true, container: "legend_container"},
+        legend: {show:true, container: "#legend_container"},
         points: {show:true, radius: 0, fill: false},
         yaxis: {tickDecimals: 0},
         xaxis: {
@@ -225,13 +236,12 @@ function SummaryPlot(from,to,dataset,ove
             div.style.backgroundColor='#fee';
             document.body.appendChild(div);
         }
-        YUD.setStyle(div, 'opacity', 0);
+        $(div).css('opacity', 0)
         div.innerHTML = contents;
         div.style.top=(y + 5) + "px";
         div.style.left=(x + 5) + "px";
 
-        var anim = new YAHOO.util.Anim(div, {opacity: {to: 0.8}}, 0.2);
-        anim.animate();
+        $(div).animate({opacity: 0.8}, 200);
     }
 
     /**
@@ -250,11 +260,12 @@ function SummaryPlot(from,to,dataset,ove
             for(var ds in dataset[key].data){
                 commit_data = dataset[key].data[ds];
                 if (commit_data.time >= ranges.xaxis.from && commit_data.time <= ranges.xaxis.to){
-
                     if(new_dataset[key] === undefined){
-                        new_dataset[key] = {data:[],schema:["commits"],label:key};
+                        new_dataset[key] = {data:[],label:key};
                     }
-                    new_dataset[key].data.push(commit_data);
+                    new_dataset[key].data.push([
+                      commit_data.time,
+                      commit_data.commits]);
                 }
             }
             if (new_dataset[key] !== undefined){
@@ -274,7 +285,8 @@ function SummaryPlot(from,to,dataset,ove
     /**
     * redraw using new checkbox data
     */
-    function plotchoiced(e,args){
+    function plotchoiced(e){
+        args = e.data;
         var cur_data = args[0];
         var cur_ranges = args[1];
 
@@ -298,7 +310,7 @@ function SummaryPlot(from,to,dataset,ove
             }
         }
 
-        var new_options = YAHOO.lang.merge(plot_options, {
+        var new_options = $.extend(plot_options, {
             xaxis: {
                 min: cur_ranges.xaxis.from,
                 max: cur_ranges.xaxis.to,
@@ -310,12 +322,12 @@ function SummaryPlot(from,to,dataset,ove
             new_data = [[0,1]];
         }
         // do the zooming
-       plot = YAHOO.widget.Flot(plotContainer, new_data, new_options);
+       plot = $.plot(plotContainer, new_data, new_options);
 
-       plot.subscribe("plotselected", plotselected);
+       $plotContainer.on("plotselected", plotselected);
 
        //resubscribe plothover
-       plot.subscribe("plothover", plothover);
+       $plotContainer.on("plothover", plothover);
 
        // don't fire event on the overview to prevent eternal loop
        overview.setSelection(cur_ranges, true);
@@ -327,12 +339,12 @@ function SummaryPlot(from,to,dataset,ove
      * @param ranges
      * @returns
      */
-    function plotselected(ranges,cur_data) {
+    function plotselected(e, ranges) {
         //updates the data for new plot
         var data = getDataAccordingToRanges(ranges);
         generateCheckboxes(data);
 
-        var new_options = YAHOO.lang.merge(plot_options, {
+        var new_options = $.extend(plot_options, {
             xaxis: {
                 min: ranges.xaxis.from,
                 max: ranges.xaxis.to,
@@ -341,45 +353,39 @@ function SummaryPlot(from,to,dataset,ove
             }
         });
         // do the zooming
-        plot = YAHOO.widget.Flot(plotContainer, data, new_options);
+        plot = $.plot(plotContainer, data, new_options);
 
-        plot.subscribe("plotselected", plotselected);
+        $plotContainer.on("plotselected", plotselected);
 
         //resubscribe plothover
-        plot.subscribe("plothover", plothover);
+        $plotContainer.on("plothover", plothover);
 
         // don't fire event on the overview to prevent eternal loop
         overview.setSelection(ranges, true);
 
         //resubscribe choiced
-        YUE.on(choiceContainer.getElementsByTagName("input"), "click", plotchoiced, [data, ranges]);
+        $(choiceContainer.getElementsByTagName("input")).on("click", [data, ranges], plotchoiced);
     }
 
     var previousPoint = null;
 
-    function plothover(o) {
-        var pos = o.pos;
-        var item = o.item;
-
-        //YUD.get("x").innerHTML = pos.x.toFixed(2);
-        //YUD.get("y").innerHTML = pos.y.toFixed(2);
+    function plothover(e, pos, item) {
         if (item) {
             if (previousPoint != item.datapoint) {
                 previousPoint = item.datapoint;
 
-                var tooltip = YUD.get("tooltip");
+                var tooltip = $("#tooltip")[0];
                 if(tooltip) {
                       tooltip.parentNode.removeChild(tooltip);
                 }
-                var x = item.datapoint.x.toFixed(2);
-                var y = item.datapoint.y.toFixed(2);
+
+                var d = new Date(item.datapoint[0]);
+                var fd = d.toDateString();
+                var nr_commits = item.datapoint[1];
 
                 if (!item.series.label){
                     item.series.label = 'commits';
                 }
-                var d = new Date(x*1000);
-                var fd = d.toDateString();
-                var nr_commits = parseInt(y);
 
                 var cur_data = dataset[item.series.label].data[item.dataIndex];
                 var added = cur_data.added;
@@ -405,12 +411,12 @@ function SummaryPlot(from,to,dataset,ove
             }
         }
         else {
-              var tooltip = YUD.get("tooltip");
+              var tooltip = $("#tooltip")[0];
 
               if(tooltip) {
                     tooltip.parentNode.removeChild(tooltip);
               }
-            previousPoint = null;
+              previousPoint = null;
         }
     }
 
@@ -422,24 +428,23 @@ function SummaryPlot(from,to,dataset,ove
     generateCheckboxes(data);
 
     //main plot
-    var plot = YAHOO.widget.Flot(plotContainer,data,plot_options);
+    var plot = $.plot(plotContainer,data,plot_options);
 
     //overview
-    var overview = YAHOO.widget.Flot(overviewContainer,
-            overview_dataset, overview_options);
+    var overview = $.plot(overviewContainer, overview_dataset, overview_options);
 
     //show initial selection on overview
     overview.setSelection(initial_ranges);
 
-    plot.subscribe("plotselected", plotselected);
-    plot.subscribe("plothover", plothover);
+    $plotContainer.on("plotselected", plotselected);
+    $plotContainer.on("plothover", plothover);
 
-    overview.subscribe("plotselected", function (ranges) {
+    $overviewContainer.on("plotselected", function (e, ranges) {
         plot.setSelection(ranges);
     });
 
     // user choices on overview
-    YUE.on(choiceContainer.getElementsByTagName("input"), "click", plotchoiced, [data, initial_ranges]);
+    $(choiceContainer.getElementsByTagName("input")).on("click", [data, initial_ranges], plotchoiced);
 }
 
 SummaryPlot(${h.js(c.ts_min)}, ${h.js(c.ts_max)}, ${h.js(c.commit_data)}, ${h.js(c.overview_data)});