Mercurial > kallithea
changeset 6931:6dd14c834acf
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
| author | domruf <dominikruf@gmail.com> |
|---|---|
| date | Sun, 06 Aug 2017 12:46:03 +0200 |
| parents | 862e55888ff8 |
| children | 9f19d1fa1474 |
| files | kallithea/templates/summary/statistics.html |
| diffstat | 1 files changed, 51 insertions(+), 46 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/templates/summary/statistics.html Sun Aug 06 12:36:57 2017 +0200 +++ b/kallithea/templates/summary/statistics.html Sun Aug 06 12:46:03 2017 +0200 @@ -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 @@ </script> <script type="text/javascript"> -var YUD = YAHOO.util.Dom; -var YUE = YAHOO.util.Event; /** * Plots summary graph @@ -138,16 +138,27 @@ "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 @@ 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 @@ 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 @@ /** * 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 @@ } } - 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 @@ 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 @@ * @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 @@ } }); // 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 @@ } } else { - var tooltip = YUD.get("tooltip"); + var tooltip = $("#tooltip")[0]; if(tooltip) { tooltip.parentNode.removeChild(tooltip); } - previousPoint = null; + previousPoint = null; } } @@ -422,24 +428,23 @@ 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)});