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 51 insertions and 46 deletions:
kallithea/templates/summary/statistics.html
51
46
0 comments (0 inline, 0 general)
kallithea/templates/summary/statistics.html
➞
Show inline comments
 
@@ -6,25 +6,27 @@
 

			




	
	
	
		
 
<%def name="breadcrumbs_links()">

			




	
	
	
		
 
    ${_('Statistics')}

			




	
	
	
		
 
</%def>

			




	
	
	
		
 

			




	
	
	
		
 
<%block name="header_menu">

			




	
	
	
		
 
    ${self.menu('repositories')}

			




	
	
	
		
 
</%block>

			




	
	
	
		
 

			




	
	
	
		
 
<%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()">

			




	
	
	
		
 
${self.repo_context_bar('summary')}

			




	
	
	
		
 
    <div class="panel panel-primary">

			




	
	
	
		
 
    <div class="panel-heading clearfix">

			




	
	
	
		
 
        ${self.breadcrumbs()}

			




	
	
	
		
 
    </div>

			




	
	
	
		
 

			




	
	
	
		
 
    <div class="graph panel-body">

			




	
	
	
		
 
         <div>

			




	
	
	
		
 
         %if c.no_data:

			




	
	
		
 
@@ -110,53 +112,62 @@ for (var i=0;i<data.length;i++){

			




	
	
	
		
 
        lnk.id='code_stats_show_more';

			




	
	
	
		
 
        td.appendChild(lnk);

			




	
	
	
		
 

			




	
	
	
		
 
        show_more.appendChild(td);

			




	
	
	
		
 
        show_more.appendChild(document.createElement('td'));

			




	
	
	
		
 
        tbl.appendChild(show_more);

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
</script>

			




	
	
	
		
 
<script type="text/javascript">

			




	
	
	
		
 
var YUD = YAHOO.util.Dom;

			




	
	
	
		
 
var YUE = YAHOO.util.Event;

			




	
	
	
		
 

			




	
	
	
		
 
/**

			




	
	
	
		
 
 * Plots summary graph

			




	
	
	
		
 
 *

			




	
	
	
		
 
 * @class SummaryPlot

			




	
	
	
		
 
 * @param {from} initial from for detailed graph

			




	
	
	
		
 
 * @param {to} initial to for detailed graph

			




	
	
	
		
 
 * @param {dataset}

			




	
	
	
		
 
 * @param {overview_dataset}

			




	
	
	
		
 
 */

			




	
	
	
		
 
function SummaryPlot(from,to,dataset,overview_dataset) {

			




	
	
	
		
 
    var initial_ranges = {

			




	
	
	
		
 
        "xaxis":{

			




	
	
	
		
 
            "from":from,

			




	
	
	
		
 
            "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: {

			




	
	
	
		
 
            mode: "time",

			




	
	
	
		
 
            timeformat: "%d/%m",

			




	
	
	
		
 
            min: from,

			




	
	
	
		
 
            max: to

			




	
	
	
		
 
        },

			




	
	
	
		
 
        grid: {

			




	
	
	
		
 
            hoverable: true,

			




	
	
	
		
 
            clickable: true,

			




	
	
	
		
 
            autoHighlight: true,

			




	
	
		
 
@@ -216,179 +227,174 @@ function SummaryPlot(from,to,dataset,ove

			




	
	
	
		
 
     */

			




	
	
	
		
 
    function showTooltip(x, y, contents) {

			




	
	
	
		
 
        var div=document.getElementById('tooltip');

			




	
	
	
		
 
        if(!div) {

			




	
	
	
		
 
            div = document.createElement('div');

			




	
	
	
		
 
            div.id="tooltip";

			




	
	
	
		
 
            div.style.position="absolute";

			




	
	
	
		
 
            div.style.border='1px solid #fdd';

			




	
	
	
		
 
            div.style.padding='2px';

			




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

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    /**

			




	
	
	
		
 
     * This function will detect if selected period has some changesets

			




	
	
	
		
 
       for this user if it does this data is then pushed for displaying

			




	
	
	
		
 
       Additionally it will only display users that are selected by the checkbox

			




	
	
	
		
 
    */

			




	
	
	
		
 
    function getDataAccordingToRanges(ranges) {

			




	
	
	
		
 

			




	
	
	
		
 
        var data = [];

			




	
	
	
		
 
        var new_dataset = {};

			




	
	
	
		
 
        var keys = [];

			




	
	
	
		
 
        var max_commits = 0;

			




	
	
	
		
 
        for(var key in dataset){

			




	
	
	
		
 

			




	
	
	
		
 
            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){

			




	
	
	
		
 
                data.push(new_dataset[key]);

			




	
	
	
		
 
            }

			




	
	
	
		
 
        }

			




	
	
	
		
 

			




	
	
	
		
 
        if (data.length > 0){

			




	
	
	
		
 
            return data;

			




	
	
	
		
 
        }

			




	
	
	
		
 
        else{

			




	
	
	
		
 
            //just return dummy data for graph to plot itself

			




	
	
	
		
 
            return [getDummyData('')];

			




	
	
	
		
 
        }

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    /**

			




	
	
	
		
 
    * 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];

			




	
	
	
		
 

			




	
	
	
		
 
        var new_data = [];

			




	
	
	
		
 
        var inputs = choiceContainer.getElementsByTagName("input");

			




	
	
	
		
 

			




	
	
	
		
 
        //show only checked labels

			




	
	
	
		
 
        for(var i=0; i<inputs.length; i++) {

			




	
	
	
		
 
            var checkbox_key = inputs[i].name;

			




	
	
	
		
 

			




	
	
	
		
 
            if(inputs[i].checked){

			




	
	
	
		
 
                for(var d in cur_data){

			




	
	
	
		
 
                    if(cur_data[d].label == checkbox_key){

			




	
	
	
		
 
                        new_data.push(cur_data[d]);

			




	
	
	
		
 
                    }

			




	
	
	
		
 
                }

			




	
	
	
		
 
            }

			




	
	
	
		
 
            else{

			




	
	
	
		
 
                //push dummy data to not hide the label

			




	
	
	
		
 
                new_data.push(getDummyData(checkbox_key));

			




	
	
	
		
 
            }

			




	
	
	
		
 
        }

			




	
	
	
		
 

			




	
	
	
		
 
        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,

			




	
	
	
		
 
                mode: "time",

			




	
	
	
		
 
                timeformat: "%d/%m"

			




	
	
	
		
 
            }

			




	
	
	
		
 
        });

			




	
	
	
		
 
        if (!new_data){

			




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

			




	
	
	
		
 

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    /**

			




	
	
	
		
 
     * plot only selected items from overview

			




	
	
	
		
 
     * @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,

			




	
	
	
		
 
                mode:"time",

			




	
	
	
		
 
                timeformat: "%d/%m"

			




	
	
	
		
 
            }

			




	
	
	
		
 
        });

			




	
	
	
		
 
        // 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;

			




	
	
	
		
 
                var changed = cur_data.changed;

			




	
	
	
		
 
                var removed = cur_data.removed;

			




	
	
	
		
 

			




	
	
	
		
 
                var nr_commits_suffix = ' ' + ${h.jshtml(_('commits'))} + ' ';

			




	
	
	
		
 
                var added_suffix = ' ' + ${h.jshtml(_('files added'))} + ' ';

			




	
	
	
		
 
                var changed_suffix = ' ' + ${h.jshtml(_('files changed'))} + ' ';

			




	
	
	
		
 
                var removed_suffix = ' ' + ${h.jshtml(_('files removed'))} + ' ';

			




	
	
	
		
 

			




	
	
	
		
 
                if(nr_commits == 1){ nr_commits_suffix = ' ' + ${h.jshtml(_('commit'))} + ' '; }

			




	
	
		
 
@@ -396,53 +402,52 @@ function SummaryPlot(from,to,dataset,ove

			




	
	
	
		
 
                if(changed == 1) { changed_suffix=' ' + ${h.jshtml(_('file changed'))} + ' '; }

			




	
	
	
		
 
                if(removed == 1) { removed_suffix=' ' + ${h.jshtml(_('file removed'))} + ' '; }

			




	
	
	
		
 

			




	
	
	
		
 
                showTooltip(item.pageX, item.pageY, item.series.label + " on " + fd

			




	
	
	
		
 
                         +'<br/>'+

			




	
	
	
		
 
                         nr_commits + nr_commits_suffix+'<br/>'+

			




	
	
	
		
 
                         added + added_suffix +'<br/>'+

			




	
	
	
		
 
                         changed + changed_suffix + '<br/>'+

			




	
	
	
		
 
                         removed + removed_suffix + '<br/>');

			




	
	
	
		
 
            }

			




	
	
	
		
 
        }

			




	
	
	
		
 
        else {

			




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

			




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

			




	
	
	
		
 

			




	
	
	
		
 
              if(tooltip) {

			




	
	
	
		
 
                    tooltip.parentNode.removeChild(tooltip);

			




	
	
	
		
 
              }

			




	
	
	
		
 
            previousPoint = null;

			




	
	
	
		
 
              previousPoint = null;

			




	
	
	
		
 
        }

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    /**

			




	
	
	
		
 
     * MAIN EXECUTION

			




	
	
	
		
 
     */

			




	
	
	
		
 

			




	
	
	
		
 
    var data = getDataAccordingToRanges(initial_ranges);

			




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

			




	
	
	
		
 
</script>

			




	
	
	
		
 

			




	
	
	
		
 
</%def>

			




        

    



    


    



    



      

      





    
    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.