Changeset - 6dd14c834acf
Parent rev.
Child rev.
[Not reviewed]
default
0 1 0
domruf - 8 years ago 2017-08-06 12:46:03
dominikruf@gmail.com
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
1 file changed with 50 insertions and 45 deletions:
kallithea/templates/summary/statistics.html
50
45
0 comments (0 inline, 0 general)
kallithea/templates/summary/statistics.html
➞
Show inline comments
 
@@ -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,7 +411,7 @@ function SummaryPlot(from,to,dataset,ove

			




	
	
	
		
 
            }

			




	
	
	
		
 
        }

			




	
	
	
		
 
        else {

			




	
	
	
		
 
              var tooltip = YUD.get("tooltip");

			




	
	
	
		
 
              var tooltip = $("#tooltip")[0];

			




	
	
	
		
 

			




	
	
	
		
 
              if(tooltip) {

			




	
	
	
		
 
                    tooltip.parentNode.removeChild(tooltip);

			




	
	
		
 
@@ -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)});

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2025 by various authors & licensed under GPLv3.