Replace dimplejs by c3js for chart drawing
This commit is contained in:
Frederic Guillot
@@ -1,209 +1,190 @@
|
||||
|
||||
Kanboard.Analytic = (function() {
|
||||
|
||||
// CFD diagram
|
||||
function drawCfd()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [];
|
||||
var groups = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
|
||||
for (var j = 0; j < metrics[i].length; j++) {
|
||||
|
||||
if (i == 0) {
|
||||
columns.push([metrics[i][j]]);
|
||||
|
||||
if (j > 0) {
|
||||
groups.push(metrics[i][j]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
columns[j].push(metrics[i][j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
x: metrics[0][0],
|
||||
type: 'area-spline',
|
||||
groups: [groups]
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: $("#chart").data("date-format")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Burndown chart
|
||||
function drawBurndown()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [[$("#chart").data("label-total")]];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
|
||||
for (var j = 0; j < metrics[i].length; j++) {
|
||||
|
||||
if (i == 0) {
|
||||
columns.push([metrics[i][j]]);
|
||||
}
|
||||
else {
|
||||
columns[j + 1].push(metrics[i][j]);
|
||||
|
||||
if (j > 0) {
|
||||
|
||||
if (columns[0][i] == undefined) {
|
||||
columns[0].push(0);
|
||||
}
|
||||
|
||||
columns[0][i] += metrics[i][j];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
x: metrics[0][0]
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: $("#chart").data("date-format")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Draw task repartition chart
|
||||
function drawTaskRepartition()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
columns.push([metrics[i].column_title, metrics[i].nb_tasks]);
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
type : 'donut'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Draw user repartition chart
|
||||
function drawUserRepartition()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
columns.push([metrics[i].user, metrics[i].nb_tasks]);
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
type : 'donut'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Draw budget chart
|
||||
function drawBudget()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var labels = $("#chart").data("labels");
|
||||
|
||||
var columns = [
|
||||
[labels["date"]],
|
||||
[labels["in"]],
|
||||
[labels["left"]],
|
||||
[labels["out"]]
|
||||
];
|
||||
|
||||
var colors = {};
|
||||
colors[labels["in"]] = '#5858FA';
|
||||
colors[labels["left"]] = '#04B404';
|
||||
colors[labels["out"]] = '#DF3A01';
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
columns[0].push(metrics[i]["date"]);
|
||||
columns[1].push(metrics[i]["in"]);
|
||||
columns[2].push(metrics[i]["left"]);
|
||||
columns[3].push(metrics[i]["out"]);
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
x: columns[0][0],
|
||||
columns: columns,
|
||||
colors: colors,
|
||||
type : 'bar'
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: $("#chart").data("date-format")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
if (Kanboard.Exists("analytic-task-repartition")) {
|
||||
Kanboard.Analytic.TaskRepartition.Init();
|
||||
drawTaskRepartition();
|
||||
}
|
||||
else if (Kanboard.Exists("analytic-user-repartition")) {
|
||||
Kanboard.Analytic.UserRepartition.Init();
|
||||
drawUserRepartition();
|
||||
}
|
||||
else if (Kanboard.Exists("analytic-cfd")) {
|
||||
Kanboard.Analytic.CFD.Init();
|
||||
drawCfd();
|
||||
}
|
||||
else if (Kanboard.Exists("analytic-burndown")) {
|
||||
Kanboard.Analytic.Burndown.Init();
|
||||
drawBurndown();
|
||||
}
|
||||
else if (Kanboard.Exists("budget-chart")) {
|
||||
drawBudget();
|
||||
}
|
||||
});
|
||||
|
||||
return {};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.Burndown = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(metrics, labels)
|
||||
{
|
||||
var series = prepareSeries(metrics, labels);
|
||||
|
||||
var svg = dimple.newSvg("#chart", "100%", 380);
|
||||
var chart = new dimple.chart(svg, series);
|
||||
|
||||
var x = chart.addCategoryAxis("x", labels['day']);
|
||||
x.addOrderRule("Date");
|
||||
|
||||
chart.addMeasureAxis("y", labels['score']);
|
||||
chart.addSeries(null, dimple.plot.line);
|
||||
|
||||
chart.draw();
|
||||
}
|
||||
|
||||
function prepareSeries(metrics, labels)
|
||||
{
|
||||
var series = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
|
||||
var row = {};
|
||||
var score = parseInt(metrics[i]['score']);
|
||||
row[labels['day']] = metrics[i]['day'];
|
||||
row[labels['score']] = score;
|
||||
series.push(row);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.CFD = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels, data.columns);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(metrics, labels, columns)
|
||||
{
|
||||
var series = prepareSeries(metrics, labels);
|
||||
|
||||
var svg = dimple.newSvg("#chart", "100%", 380);
|
||||
var chart = new dimple.chart(svg, series);
|
||||
|
||||
var x = chart.addCategoryAxis("x", labels['day']);
|
||||
x.addOrderRule("Date");
|
||||
|
||||
chart.addMeasureAxis("y", labels['total']);
|
||||
|
||||
var s = chart.addSeries(labels['column'], dimple.plot.area);
|
||||
s.addOrderRule(columns.reverse());
|
||||
|
||||
chart.addLegend(10, 10, 500, 30, "left");
|
||||
chart.draw();
|
||||
}
|
||||
|
||||
function prepareSeries(metrics, labels)
|
||||
{
|
||||
var series = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
|
||||
var row = {};
|
||||
row[labels['column']] = metrics[i]['column_title'];
|
||||
row[labels['day']] = metrics[i]['day'];
|
||||
row[labels['total']] = metrics[i]['total'];
|
||||
series.push(row);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.TaskRepartition = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(metrics, labels)
|
||||
{
|
||||
var series = prepareSeries(metrics, labels);
|
||||
|
||||
var svg = dimple.newSvg("#chart", "100%", 350);
|
||||
|
||||
var chart = new dimple.chart(svg, series);
|
||||
chart.addMeasureAxis("p", labels["nb_tasks"]);
|
||||
var ring = chart.addSeries(labels["column_title"], dimple.plot.pie);
|
||||
ring.innerRadius = "50%";
|
||||
chart.addLegend(0, 0, 100, "100%", "left");
|
||||
chart.draw();
|
||||
}
|
||||
|
||||
function prepareSeries(metrics, labels)
|
||||
{
|
||||
var series = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
|
||||
var serie = {};
|
||||
serie[labels["nb_tasks"]] = metrics[i]["nb_tasks"];
|
||||
serie[labels["column_title"]] = metrics[i]["column_title"];
|
||||
|
||||
series.push(serie);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.UserRepartition = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(metrics, labels)
|
||||
{
|
||||
var series = prepareSeries(metrics, labels);
|
||||
|
||||
var svg = dimple.newSvg("#chart", "100%", 350);
|
||||
|
||||
var chart = new dimple.chart(svg, series);
|
||||
chart.addMeasureAxis("p", labels["nb_tasks"]);
|
||||
var ring = chart.addSeries(labels["user"], dimple.plot.pie);
|
||||
ring.innerRadius = "50%";
|
||||
chart.addLegend(0, 0, 100, "100%", "left");
|
||||
chart.draw();
|
||||
}
|
||||
|
||||
function prepareSeries(metrics, labels)
|
||||
{
|
||||
var series = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
|
||||
var serie = {};
|
||||
serie[labels["nb_tasks"]] = metrics[i]["nb_tasks"];
|
||||
serie[labels["user"]] = metrics[i]["user"];
|
||||
|
||||
series.push(serie);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
Kanboard.Budget = (function() {
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
if (Kanboard.Exists("budget-chart")) {
|
||||
|
||||
var labels =$("#chart").data("labels");
|
||||
var serie = $("#chart").data("serie");
|
||||
var types = ["in", "out", "left"];
|
||||
var data = [];
|
||||
|
||||
for (var i = 0; i < serie.length; i++) {
|
||||
|
||||
for (var j = 0; j < types.length; j++) {
|
||||
var row = {};
|
||||
row[labels["date"]] = serie[i]["date"];
|
||||
row[labels["value"]] = serie[i][types[j]];
|
||||
row[labels["type"]] = labels[types[j]];
|
||||
|
||||
data.push(row);
|
||||
}
|
||||
}
|
||||
|
||||
var svg = dimple.newSvg("#chart", 750, 600);
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
|
||||
var x = myChart.addCategoryAxis("x", [labels["date"], labels["type"]]);
|
||||
x.addOrderRule(labels["date"]);
|
||||
|
||||
myChart.addMeasureAxis("y", labels["value"]);
|
||||
|
||||
myChart.addSeries(labels["type"], dimple.plot.bar);
|
||||
myChart.addLegend(65, 10, 510, 20, "right");
|
||||
myChart.draw();
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user