upstream/kallithea Commit - r6753:b44cc07c

statistics: only load the Flot library when we need it

Mads Kiilerich -

r6753:b44cc07c default

parent child

kallithea/templates/base/root.html

0 0 -1

             ## -*- coding: utf-8 -*-
             <!DOCTYPE html>
             <html xmlns="http://www.w3.org/1999/xhtml">
                 <head>
                     <title><%block name="title"/><%block name="branding_title"/></title>
                     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                     <meta name="robots" content="index, nofollow"/>
                     <link rel="icon" href="${h.url('/images/favicon.ico')}" type="image/x-icon" />
                     ## CSS ###
                     <link rel="stylesheet" type="text/css" href="${h.url('/css/jquery.dataTables.css', ver=c.kallithea_version)}"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/js/select2/select2.css', ver=c.kallithea_version)}"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/css/bootstrap.css', ver=c.kallithea_version)}"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/js/select2/select2-bootstrap.css', ver=c.kallithea_version)}"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/css/pygments.css', ver=c.kallithea_version)}"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/css/style.css', ver=c.kallithea_version)}" media="screen"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/css/contextbar.css', ver=c.kallithea_version)}" media="screen"/>
                     <link rel="stylesheet" type="text/css" href="${h.url('/fontello/css/kallithea.css', ver=c.kallithea_version)}">
                     <%block name="css_extra"/>
                     ## JAVASCRIPT ##
                     <script type="text/javascript">
                         ## JS translations map
                         var TRANSLATION_MAP = {
                             'Cancel': ${h.jshtml(_("Cancel"))},
                             'Retry': ${h.jshtml(_("Retry"))},
                             'Submitting ...': ${h.jshtml(_("Submitting ..."))},
                             'Unable to post': ${h.jshtml(_("Unable to post"))},
                             'Add Another Comment': ${h.jshtml(_("Add Another Comment"))},
                             'Stop following this repository': ${h.jshtml(_('Stop following this repository'))},
                             'Start following this repository': ${h.jshtml(_('Start following this repository'))},
                             'Group': ${h.jshtml(_('Group'))},
                             'members': ${h.jshtml(_('members'))},
                             'Loading ...': ${h.jshtml(_('Loading ...'))},
                             'loading ...': ${h.jshtml(_('loading ...'))},
                             'Search truncated': ${h.jshtml(_('Search truncated'))},
                             'No matching files': ${h.jshtml(_('No matching files'))},
                             'Open New Pull Request from {0}': ${h.jshtml(_('Open New Pull Request from {0}'))},
                             'Open New Pull Request for {0} &rarr; {1}': ${h.js(_('Open New Pull Request for {0} &rarr; {1}'))},
                             'Show Selected Changesets {0} &rarr; {1}': ${h.js(_('Show Selected Changesets {0} &rarr; {1}'))},
                             'Selection Link': ${h.jshtml(_('Selection Link'))},
                             'Collapse Diff': ${h.jshtml(_('Collapse Diff'))},
                             'Expand Diff': ${h.jshtml(_('Expand Diff'))},
                             'Type name of user or member to grant permission': ${h.jshtml(_('Type name of user or member to grant permission'))},
                             'Failed to revoke permission': ${h.jshtml(_('Failed to revoke permission'))},
                             'Confirm to revoke permission for {0}: {1} ?': ${h.jshtml(_('Confirm to revoke permission for {0}: {1} ?'))},
                             'Enabled': ${h.jshtml(_('Enabled'))},
                             'Disabled': ${h.jshtml(_('Disabled'))},
                             'Select changeset': ${h.jshtml(_('Select changeset'))},
                             'Specify changeset': ${h.jshtml(_('Specify changeset'))},
                             'MSG_SORTASC': ${h.jshtml(_('Click to sort ascending'))},
                             'MSG_SORTDESC': ${h.jshtml(_('Click to sort descending'))},
                             'MSG_EMPTY': ${h.jshtml(_('No records found.'))},
                             'MSG_ERROR': ${h.jshtml(_('Data error.'))},
                             'MSG_LOADING': ${h.jshtml(_('Loading...'))}
                         };
                         var _TM = TRANSLATION_MAP;
                         var TOGGLE_FOLLOW_URL  = ${h.js(h.url('toggle_following'))};
                         var REPO_NAME = "";
                         %if hasattr(c, 'repo_name'):
                             var REPO_NAME = ${h.js(c.repo_name)};
                         %endif
                         var _authentication_token = ${h.js(h.authentication_token())};
                     </script>
                     <script type="text/javascript" src="${h.url('/js/yui.2.9.js', ver=c.kallithea_version)}"></script>
                     <script type="text/javascript" src="${h.url('/js/jquery.min.js', ver=c.kallithea_version)}"></script>
                     <script type="text/javascript" src="${h.url('/js/jquery.dataTables.min.js', ver=c.kallithea_version)}"></script>
                     <script type="text/javascript" src="${h.url('/js/bootstrap.js', ver=c.kallithea_version)}"></script>
                     <script type="text/javascript" src="${h.url('/js/select2/select2.js', ver=c.kallithea_version)}"></script>
-                    <script type="text/javascript" src="${h.url('/js/yui.flot.js', ver=c.kallithea_version)}"></script>
                     <script type="text/javascript" src="${h.url('/js/native.history.js', ver=c.kallithea_version)}"></script>
                     <script type="text/javascript" src="${h.url('/js/base.js', ver=c.kallithea_version)}"></script>
                     ## EXTRA FOR JS
                     <%block name="js_extra"/>
                     <script type="text/javascript">
                         (function(window,undefined){
                             var History = window.History; // Note: We are using a capital H instead of a lower h
                             if ( !History.enabled ) {
                                  // History.js is disabled for this browser.
                                  // This is because we can optionally choose to support HTML4 browsers or not.
                                 return false;
                             }
                         })(window);
                         $(document).ready(function(){
                           tooltip_activate();
                           show_more_event();
                           // routes registration
                           pyroutes.register('home', ${h.js(h.url('home'))}, []);
                           pyroutes.register('new_gist', ${h.js(h.url('new_gist'))}, []);
                           pyroutes.register('gists', ${h.js(h.url('gists'))}, []);
                           pyroutes.register('new_repo', ${h.js(h.url('new_repo'))}, []);
                           pyroutes.register('summary_home', ${h.js(h.url('summary_home', repo_name='%(repo_name)s'))}, ['repo_name']);
                           pyroutes.register('changelog_home', ${h.js(h.url('changelog_home', repo_name='%(repo_name)s'))}, ['repo_name']);
                           pyroutes.register('files_home', ${h.js(h.url('files_home', repo_name='%(repo_name)s',revision='%(revision)s',f_path='%(f_path)s'))}, ['repo_name', 'revision', 'f_path']);
                           pyroutes.register('edit_repo', ${h.js(h.url('edit_repo', repo_name='%(repo_name)s'))}, ['repo_name']);
                           pyroutes.register('edit_repo_perms', ${h.js(h.url('edit_repo_perms', repo_name='%(repo_name)s'))}, ['repo_name']);
                           pyroutes.register('pullrequest_home', ${h.js(h.url('pullrequest_home', repo_name='%(repo_name)s'))}, ['repo_name']);
                           pyroutes.register('toggle_following', ${h.js(h.url('toggle_following'))});
                           pyroutes.register('changeset_info', ${h.js(h.url('changeset_info', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
                           pyroutes.register('repo_size', ${h.js(h.url('repo_size', repo_name='%(repo_name)s'))}, ['repo_name']);
                           pyroutes.register('repo_refs_data', ${h.js(h.url('repo_refs_data', repo_name='%(repo_name)s'))}, ['repo_name']);
                          });
                     </script>
                     <%block name="head_extra"/>
                 </head>
                 <body>
                   <nav class="navbar navbar-inverse">
                       <div class="navbar-header" id="logo">
                         <a class="navbar-brand" href="${h.url('home')}">
                             <img class="pull-left" src="${h.url('/images/kallithea-logo.svg')}" alt="Kallithea"/>
                               %if c.site_name:
                                 <span class="branding">${c.site_name}</span>
                               %endif
                         </a>
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                         </button>
                       </div>
                       <div id="navbar" class="navbar-collapse collapse">
                         <%block name="header_menu"/>
                       </div>
                   </nav>
                   ${next.body()}
                   %if c.ga_code:
                   ${h.literal(c.ga_code)}
                   %endif
                 </body>
             </html>

kallithea/templates/summary/statistics.html

0 +1 0

             <%inherit file="/base/base.html"/>
             <%block name="title">
                 ${_('%s Statistics') % c.repo_name}
             </%block>
             <%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>
             </%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:
                        ${c.no_data_msg}
                        %if h.HasPermissionAny('hg.admin')('enable stats on from summary'):
                             ${h.link_to(_('Enable'),h.url('edit_repo',repo_name=c.repo_name),class_="btn btn-default btn-xs")}
                        %endif
                     %else:
                         ${_('Stats gathered: ')} ${c.stats_percentage}%
                     %endif
                     </div>
                     <div id="commit_history" class="pull-left"></div>
                     <div id="legend_data" class="pull-left">
                         <div id="legend_container"></div>
                         <div id="legend_choices">
                             <table class="table" id="legend_choices_tables"></table>
                         </div>
                     </div>
                     <div id="overview"></div>
                 </div>
             </div>
             <script type="text/javascript">
             var data = ${h.js(c.trending_languages)};
             var total = 0;
             var no_data = true;
             var tbl = document.createElement('table');
             tbl.setAttribute('class','trending_language_tbl');
             var cnt = 0;
             for (var i=0;i<data.length;i++){
                 total+= data[i][1].count;
             }
             for (var i=0;i<data.length;i++){
                 cnt += 1;
                 no_data = false;
                 var hide = cnt>2;
                 var tr = document.createElement('tr');
                 if (hide){
                     tr.setAttribute('style','display:none');
                     tr.setAttribute('class','stats_hidden');
                 }
                 var k = data[i][0];
                 var obj = data[i][1];
                 var percentage = Math.round((obj.count/total*100),2);
                 var td1 = document.createElement('td');
                 td1.width = 150;
                 var trending_language_label = document.createElement('div');
                 trending_language_label.innerHTML = obj.desc+" ("+k+")";
                 td1.appendChild(trending_language_label);
                 var td2 = document.createElement('td');
                 td2.setAttribute('style','padding-right:14px !important');
                 var trending_language = document.createElement('div');
                 var nr_files = obj.count + ' ' + ${h.jshtml(_('files'))};
                 trending_language.title = k+" "+nr_files;
                 if (percentage>22){
                     trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"% "+nr_files+ "</b>";
                 }
                 else{
                     trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"%</b>";
                 }
                 trending_language.setAttribute("class", 'trending_language top-right-rounded-corner bottom-right-rounded-corner');
                 trending_language.style.width=percentage+"%";
                 td2.appendChild(trending_language);
                 tr.appendChild(td1);
                 tr.appendChild(td2);
                 tbl.appendChild(tr);
                 if(cnt == 3){
                     var show_more = document.createElement('tr');
                     var td = document.createElement('td');
                     lnk = document.createElement('a');
                     lnk.href='#';
                     lnk.innerHTML = ${h.jshtml(_('Show more'))};
                     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
                     }
                 };
                 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 plot_options = {
                     bars: {show:true, align: 'center', lineWidth: 4},
                     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,
                         color: "#999"
                     },
                     //selection: {mode: "x"}
                 };
                 var overview_options = {
                     legend:{show:false},
                     bars: {show:true, barWidth: 2},
                     shadowSize: 0,
                     xaxis: {mode: "time", timeformat: "%d/%m/%y"},
                     yaxis: {ticks: 3, min: 0, tickDecimals:0},
                     grid: {color: "#999"},
                     selection: {mode: "x"}
                 };
                 /**
                 *get dummy data needed in few places
                 */
                 function getDummyData(label){
                     return {"label":label,
                      "data":[{"time":0,
                          "commits":0,
                              "added":0,
                              "changed":0,
                              "removed":0
                         }],
                         "schema":["commits"],
                         "color":'#ffffff'
                     }
                 }
                 /**
                  * generate checkboxes accordingly to data
                  * @param keys
                  * @returns
                  */
                 function generateCheckboxes(data) {
                     //append checkboxes
                     var i = 0;
                     choiceContainerTable.innerHTML = '';
                     for(var pos in data) {
                         data[pos].color = i;
                         i++;
                         if(data[pos].label != ''){
                             choiceContainerTable.innerHTML +=
                                 '<tr><td><label><input type="checkbox" id="id_user_{0}" name="{0}" checked="checked" /> \
                                  {0}</label></td></tr>'.format(data[pos].label);
                         }
                     }
                 }
                 /**
                  * ToolTip show
                  */
                 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.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();
                 }
                 /**
                  * 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.push(commit_data);
                             }
                         }
                         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){
                     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, {
                         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.subscribe("plotselected", plotselected);
                    //resubscribe plothover
                    plot.subscribe("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) {
                     //updates the data for new plot
                     var data = getDataAccordingToRanges(ranges);
                     generateCheckboxes(data);
                     var new_options = YAHOO.lang.merge(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.subscribe("plotselected", plotselected);
                     //resubscribe plothover
                     plot.subscribe("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]);
                 }
                 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);
                     if (item) {
                         if (previousPoint != item.datapoint) {
                             previousPoint = item.datapoint;
                             var tooltip = YUD.get("tooltip");
                             if(tooltip) {
                                   tooltip.parentNode.removeChild(tooltip);
                             }
                             var x = item.datapoint.x.toFixed(2);
                             var y = item.datapoint.y.toFixed(2);
                             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'))} + ' '; }
                             if(added == 1) { added_suffix=' ' + ${h.jshtml(_('file added'))} + ' '; }
                             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");
                           if(tooltip) {
                                 tooltip.parentNode.removeChild(tooltip);
                           }
                         previousPoint = null;
                     }
                 }
                 /**
                  * MAIN EXECUTION
                  */
                 var data = getDataAccordingToRanges(initial_ranges);
                 generateCheckboxes(data);
                 //main plot
                 var plot = YAHOO.widget.Flot(plotContainer,data,plot_options);
                 //overview
                 var overview = YAHOO.widget.Flot(overviewContainer,
                         overview_dataset, overview_options);
                 //show initial selection on overview
                 overview.setSelection(initial_ranges);
                 plot.subscribe("plotselected", plotselected);
                 plot.subscribe("plothover", plothover);
                 overview.subscribe("plotselected", function (ranges) {
                     plot.setSelection(ranges);
                 });
                 // user choices on overview
                 YUE.on(choiceContainer.getElementsByTagName("input"), "click", plotchoiced, [data, initial_ranges]);
             }
             SummaryPlot(${h.js(c.ts_min)}, ${h.js(c.ts_max)}, ${h.js(c.commit_data)}, ${h.js(c.overview_data)});
             </script>
             </%def>

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages