@(project: org.ossmeter.repository.model.Project)
@import org.ossmeter.repository.model.MetricProviderType
@import org.ossmeter.repository.model.eclipse.EclipseProject
@main("OSSMETER", true) {
<section class="row">
<div class="span6">
<h1>@project.getName()</h1>
<p>@project.getDescription()</p>
</div>
</section>
<section>
<div class="row well lplot">
<div class="plotdescriptionbox span3">
<h3 id="plotname"></h3>
<p id="plotdesc"></p> <!-- This needs changing.. it should really use auto-binding. ?? -->
</div>
<div id="mainPlot" class="span9" data-bind="largeplot: plot">
<img src="@routes.Assets.at("images/loading.gif")"/>
</div>
</div>
<h2>Metrics</h2>
<div class="row">
<ul class="sparklist" data-bind="template: {name: 'spark-template', foreach: sparks, as: 'spark'}"/>
</div>
</section>
<script type="text/html" id="spark-template">
<li data-bind="click: $parent.setMain">
<div style="float:left">
<span data-bind="sparkplot: $data" class="spark">
<img src="@routes.Assets.at("images/loading.gif")"/>
</span>
</div>
<div>
<span data-bind="text: abbreviateNumber(lastValue)" class="sparkValue"></span><br/>
<span data-bind="text: name" class="sparkName"></span>
</div>
</li>
</script>
<script src="@routes.Assets.at("javascripts/ossplots.js")"></script>
<script type="text/javascript">
function load() {
ko.bindingHandlers.largeplot = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
$(element).html("<img src=\"@routes.Assets.at("images/loading.gif")\"/>");
},
update: function(element, valueAccessor, allBindingsAccessor) {
// First get the latest data that we're bound to
var value = valueAccessor(), allBindings = allBindingsAccessor();
// Next, whether or not the supplied model property is observable, get its current value
var valueUnwrapped = ko.unwrap(value);
if (valueUnwrapped.type === "loading") return;
$("#plotname").text(valueUnwrapped.name);
$("#plotdesc").text(valueUnwrapped.description);
$(element).html(""); // Clear
var svg = dimple.newSvg(element, 700, 200);
var chart = new dimple.chart(svg, valueUnwrapped.datatable);
var x = chart.addCategoryAxis("x", valueUnwrapped.xtext);
if (valueUnwrapped.isTimeSeries) {
x.timeField = valueUnwrapped.xtext;
x.dateParseFormat = "%Y%m%d";
x.tickFormat = "%B %Y"
}
// x.timePeriod = d3.time.month;
// x.timeInterval = 1;
x.addOrderRule(valueUnwrapped.orderRule);
var y = chart.addMeasureAxis("y", valueUnwrapped.ytext);
var ser = chart.addSeries(null, dimple.plot[valueUnwrapped.type]);
chart.draw();
// Color the axes
x.shapes.selectAll("path, line").style("stroke", "#A0A0A0");
x.shapes.selectAll("text").style("fill", "#A0A0A0");
y.shapes.selectAll("path, line").style("stroke", "#A0A0A0");
y.shapes.selectAll("text").style("fill", "#A0A0A0");
y.titleShape.style("fill", "#A0A0A0");
x.titleShape.style("fill", "#A0A0A0");
}
};
ko.bindingHandlers.sparkplot = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
$(element).html("<img src=\"@routes.Assets.at("images/loading.gif")\"/>");
},
update: function(element, valueAccessor, allBindingsAccessor) {
// First get the latest data that we're bound to
var value = valueAccessor(), allBindings = allBindingsAccessor();
// Next, whether or not the supplied model property is observable, get its current value
var valueUnwrapped = ko.unwrap(value);
if (valueUnwrapped.type === "loading") return;
$(element).html(""); // clear
var svg = dimple.newSvg(element, 200, 30);
var chart = new dimple.chart(svg, valueUnwrapped.datatable);
var x = chart.addAxis("x", valueUnwrapped.xtext);
x.addOrderRule(valueUnwrapped.orderRule);
if (valueUnwrapped.type === "line") { // hide for line charts
x.hidden = true;
}
chart.addMeasureAxis("y", valueUnwrapped.ytext).hidden=true;
var ser = chart.addSeries(null, dimple.plot[valueUnwrapped.type]);
// dimple.plot.line.enterEventHandler = function(){}; // remove the interactivity (HACK - find a better way)
chart.draw();
if (valueUnwrapped.type === "bar") { // color for bars
x.shapes.selectAll("path, line").style("stroke", "#A0A0A0");
}
}
};
var ViewModel = function(plot) {
this.plot = ko.observable(plot);
this.sparks = ko.observableArray();
this.addSpark = function(spark) {
this.sparks.push(spark);
};
this.setMain = function(spark) {
vm.plot(spark);
}
}
var vm = new ViewModel({type:"loading"});
ko.applyBindings(vm);
// Initial main class
$.get("http://localhost:8182/projects/p/@project.getShortName()/m/totalloc", function(data) {
var metric = JSON.parse(data);
vm.setMain(metric);
});
// Sparklines
$.get("http://localhost:8182/projects/p/@project.getShortName()/m/commitsovertime", function(data) {
var metric = JSON.parse(data);
vm.addSpark(metric);
});
$.get("http://localhost:8182/projects/p/@project.getShortName()/m/dailycommits", function(data) {
var metric = JSON.parse(data);
vm.addSpark(metric);
});
$.get("http://localhost:8182/projects/p/@project.getShortName()/m/hourlycommits", function(data) {
var metric = JSON.parse(data);
vm.addSpark(metric);
});
$.get("http://localhost:8182/projects/p/@project.getShortName()/m/totalloc", function(data) {
var metric = JSON.parse(data);
vm.addSpark(metric);
});
// $.get("http://localhost:8000/projects/p/@project.getName()/m/all", function(data) {
// var metrics = JSON.parse(data);
// for (m in metrics) {
// $.get("http://localhost:8000/projects/p/@project.getName()/m/"+metrics[m]+".dimple", function(data) {
// var metric = JSON.parse(data);
// vm.addSpark(metric);
// });
// }
// });
}
load();
</script>
}