view pylons_app/templates/summary/summary.html @ 486:5c376ac2d4c9 celery

rewrote graph plotting, added zooming and json dump insted of stupid string formating.
author Marcin Kuzminski <marcin@python-works.com>
date Sat, 18 Sep 2010 17:03:29 +0200
parents aab23dae3899
children b12ea84fb906
line wrap: on
line source

<%inherit file="/base/base.html"/>

<%def name="title()">
    ${_('Mercurial Repository Overview')}
</%def>

<%def name="breadcrumbs_links()">
    ${h.link_to(u'Home',h.url('/'))}
    &raquo; 
    ${h.link_to(c.repo_name,h.url('summary_home',repo_name=c.repo_name))}
    &raquo;
    ${_('summary')}
</%def>

<%def name="page_nav()">
	${self.menu('summary')}    
</%def>

<%def name="main()">
<script type="text/javascript">
var E = YAHOO.util.Event;
var D = YAHOO.util.Dom;

E.onDOMReady(function(e){
    id = 'clone_url';
    E.addListener(id,'click',function(e){
        D.get('clone_url').select();
    })
})
</script>
<div class="box box-left">
    <!-- box / title -->
    <div class="title">
        ${self.breadcrumbs()}
    </div>
    <!-- end box / title -->
	<div class="form">
	  <div class="fields">
		 
			 <div class="field">
			  <div class="label">
			      <label>${_('Name')}:</label>
			  </div>
			  <div class="input-short">
			      <span style="font-size: 1.6em;font-weight: bold">${c.repo_info.name}</span>
			  </div>
			 </div>
			
			
			 <div class="field">
			  <div class="label">
			      <label>${_('Description')}:</label>
			  </div>
			  <div class="input-short">
			      ${c.repo_info.description}
			  </div>
			 </div>
			
			
			 <div class="field">
			  <div class="label">
			      <label>${_('Contact')}:</label>
			  </div>
			  <div class="input-short">
			  	<div class="gravatar">
			  		<img alt="gravatar" src="${h.gravatar_url(c.repo_info.dbrepo.user.email)}"/>
			  	</div>
			  		${_('Username')}: ${c.repo_info.dbrepo.user.username}<br/>
			  		${_('Name')}: ${c.repo_info.dbrepo.user.name} ${c.repo_info.dbrepo.user.lastname}<br/>
			  		${_('Email')}: <a href="mailto:${c.repo_info.dbrepo.user.email}">${c.repo_info.dbrepo.user.email}</a>
			  </div>
			 </div>
			
			 <div class="field">
			  <div class="label">
			      <label>${_('Last change')}:</label>
			  </div>
			  <div class="input-short">
			      ${h.age(c.repo_info.last_change)} - ${h.rfc822date(c.repo_info.last_change)}
			  </div>
			 </div>
			
			 <div class="field">
			  <div class="label">
			      <label>${_('Clone url')}:</label>
			  </div>
			  <div class="input-short">
			      <input type="text" id="clone_url" readonly="readonly" value="hg clone ${c.clone_repo_url}" size="70"/>
			  </div>
			 </div>
			
			 <div class="field">
			  <div class="label">
			      <label>${_('Download')}:</label>
			  </div>
			  <div class="input-short">
		        %for cnt,archive in enumerate(c.repo_info._get_archives()):
		             %if cnt >=1:
		             |
		             %endif
		             ${h.link_to(c.repo_info.name+'.'+archive['type'],
		                h.url('files_archive_home',repo_name=c.repo_info.name,
		                revision='tip',fileformat=archive['extension']),class_="archive_icon")}
		        %endfor
			  </div>
			 </div>
			 
			 <div class="field">
			  <div class="label">
			      <label>${_('Feeds')}:</label>
			  </div>
			  <div class="input-short">
	            ${h.link_to(_('RSS'),h.url('rss_feed_home',repo_name=c.repo_info.name),class_='rss_icon')}
	            ${h.link_to(_('Atom'),h.url('atom_feed_home',repo_name=c.repo_info.name),class_='atom_icon')}
			  </div>
			 </div>				 			 			 
	  </div>		 
	</div>				
</div>
        
<div class="box box-right"  style="min-height:455px">
    <!-- box / title -->
    <div class="title">
        <h5>${_('Last month commit activity')}</h5>
    </div>
    
    <div class="table">
        <div id="commit_history" style="width:560px;height:300px;float:left"></div>
        <div style="clear: both;height: 10px"></div>
        <div id="overview" style="width:560px;height:100px;float:left"></div>
        
    	<div id="legend_data" style="clear:both;margin-top:10px;">
	    	<div id="legend_container"></div>
	    	<div id="legend_choices">
				<table id="legend_choices_tables" style="font-size:smaller;color:#545454"></table>
	    	</div>
    	</div>
		<script type="text/javascript">
		
		(function () {
			var datasets = ${c.commit_data|n};
			var overview_data = ${c.overview_data|n};
						
			var i = 0;
		    var choiceContainer = YAHOO.util.Dom.get("legend_choices");
		    var choiceContainerTable = YAHOO.util.Dom.get("legend_choices_tables");
		    for(var key in datasets) {
		        datasets[key].color = i;
		        i++;
		        choiceContainerTable.innerHTML += '<tr><td>'+
		        '<input type="checkbox" name="' + key +'" checked="checked" />'
		        +datasets[key].label+
		        '</td></tr>';
		    };
			
		    function plotAccordingToChoices() {
		        var data = [];

		        var inputs = choiceContainer.getElementsByTagName("input");
		        for(var i=0; i<inputs.length; i++) {
		            var key = inputs[i].name;
		            if (key && datasets[key]){
			            if(!inputs[i].checked){
				            data.push({label:key,data:[[0,1],]});	
				        }
			            else{
			            	data.push(datasets[key]);
			            }
		            }
		        };

		        if (data.length > 0){
		            var 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:${c.ts_min},
					            	max:${c.ts_max},
					            	
					        }, 
				            grid: {hoverable: true, 
					               clickable: true,
					               autoHighlight:true,
					               color: "#999"},
				            selection: {mode: "x"}
					};

					//main plot
				    var plot = YAHOO.widget.Flot("commit_history",data,options);

					//overview
				    var overview = YAHOO.widget.Flot("overview", [overview_data], {
				    	legend:{show:false},
				        bars: {show:true,
					           barWidth: 2,
					    },
				        shadowSize: 0,
			            xaxis: {mode: "time", 
			            		timeformat: "%d/%m/%y",
			            },
				        yaxis: {ticks: 3, min: 0,},
				        grid: {color: "#999",},
				        selection: {mode: "x"}
				    });

					var ranges = {"xaxis":{"from":${c.ts_min},
										   "to":${c.ts_max},},}
					overview.setSelection(ranges);
					
				    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);
				        }
				        YAHOO.util.Dom.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();
				    }
				    
			        var previousPoint = null;

					function plothover(o) {
				        var pos = o.pos;
				        var item = o.item;
				        
				        //YAHOO.util.Dom.get("x").innerHTML = pos.x.toFixed(2);
				        //YAHOO.util.Dom.get("y").innerHTML = pos.y.toFixed(2);
		                if (item) {
		                    if (previousPoint != item.datapoint) {
		                        previousPoint = item.datapoint;
		                        
		                        var tooltip = YAHOO.util.Dom.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 = datasets[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 = " ${_('commits')} ";
		                        var added_suffix = " ${_('files added')} ";
			                    var changed_suffix = " ${_('files changed')} ";
				                var removed_suffix = " ${_('files removed')} ";

				                
		                        if(nr_commits == 1){nr_commits_suffix = " ${_('commit')} ";}
								if(added==1){added_suffix=" ${_('file added')} ";}
								if(changed==1){changed_suffix=" ${_('file changed')} ";}
								if(removed==1){removed_suffix=" ${_('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 = YAHOO.util.Dom.get("tooltip");
		                	  
					          if(tooltip) {
					                tooltip.parentNode.removeChild(tooltip);
					          }
		                    previousPoint = null;
		                }
			        }
			        
			        plot.subscribe("plothover", plothover);
			        
				    function plotselected(ranges) {
				        // do the zooming
				        plot = YAHOO.widget.Flot("commit_history", data,
				                      YAHOO.lang.merge(options, {
				                          xaxis: { min: ranges.xaxis.from, 
				                          		   max: ranges.xaxis.to,
				                          		   mode:"time",
				                          		   timeformat: "%d/%m",
				                          		 }
				                      }));
				        plot.subscribe("plotselected", plotselected);
				        plot.subscribe("plothover", plothover);

				        // don't fire event on the overview to prevent eternal loop
				        overview.setSelection(ranges, true);
				    }
				    plot.subscribe("plotselected", plotselected);
				    
				    overview.subscribe("plotselected", function (ranges) {
				        plot.setSelection(ranges);
				    });
			    }
		    }

		    YAHOO.util.Event.on(choiceContainer.getElementsByTagName("input"), "click", plotAccordingToChoices);

		    plotAccordingToChoices();
		    })();
         </script>

    </div>
</div>    

<div class="box">    
    <div class="title">
        <div class="breadcrumbs">${h.link_to(_('Last ten changes'),h.url('changelog_home',repo_name=c.repo_name))}</div>
    </div>    
    <div class="table">
        <%include file='../shortlog/shortlog_data.html'/>
        ${h.link_to(_('show more'),h.url('changelog_home',repo_name=c.repo_name))}
    </div>
</div>
<div class="box">    
    <div class="title">
        <div class="breadcrumbs">${h.link_to(_('Last ten tags'),h.url('tags_home',repo_name=c.repo_name))}</div>
    </div>    
    <div class="table">
        <%include file='../tags/tags_data.html'/>
        ${h.link_to(_('show more'),h.url('tags_home',repo_name=c.repo_name))}
    </div>
</div>
<div class="box">
    <div class="title">
        <div class="breadcrumbs">${h.link_to(_('Last ten branches'),h.url('branches_home',repo_name=c.repo_name))}</div>
    </div>    
    <div class="table">
        <%include file='../branches/branches_data.html'/>
        ${h.link_to(_('show more'),h.url('branches_home',repo_name=c.repo_name))}
    </div>      
</div> 

</%def>