Use components to render charts

This commit is contained in:
Frederic Guillot
2016-11-21 22:50:57 -05:00
parent a3bb27109d
commit 8976f4d15c
22 changed files with 306 additions and 306 deletions

View File

@@ -180,20 +180,6 @@ Kanboard.App.prototype.hideLoadingIcon = function() {
$("#app-loading-icon").remove();
};
Kanboard.App.prototype.formatDuration = function(d) {
if (d >= 86400) {
return Math.round(d/86400) + "d";
}
else if (d >= 3600) {
return Math.round(d/3600) + "h";
}
else if (d >= 60) {
return Math.round(d/60) + "m";
}
return d + "s";
};
Kanboard.App.prototype.isVisible = function() {
var property = "";

View File

@@ -1,47 +0,0 @@
Kanboard.AvgTimeColumnChart = function(app) {
this.app = app;
};
Kanboard.AvgTimeColumnChart.prototype.execute = function() {
if (this.app.hasId("analytic-avg-time-column")) {
this.show();
}
};
Kanboard.AvgTimeColumnChart.prototype.show = function() {
var chart = $("#chart");
var metrics = chart.data("metrics");
var plots = [chart.data("label")];
var categories = [];
for (var column_id in metrics) {
plots.push(metrics[column_id].average);
categories.push(metrics[column_id].title);
}
c3.generate({
data: {
columns: [plots],
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
axis: {
x: {
type: 'category',
categories: categories
},
y: {
tick: {
format: this.app.formatDuration
}
}
},
legend: {
show: false
}
});
};

View File

@@ -1,56 +0,0 @@
Kanboard.BurndownChart = function(app) {
this.app = app;
};
Kanboard.BurndownChart.prototype.execute = function() {
if (this.app.hasId("analytic-burndown")) {
this.show();
}
};
Kanboard.BurndownChart.prototype.show = function() {
var chart = $("#chart");
var metrics = chart.data("metrics");
var columns = [[chart.data("label-total")]];
var categories = [];
var inputFormat = d3.time.format("%Y-%m-%d");
var outputFormat = d3.time.format(chart.data("date-format"));
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];
}
if (j == 0) {
categories.push(outputFormat(inputFormat.parse(metrics[i][j])));
}
}
}
}
c3.generate({
data: {
columns: columns
},
axis: {
x: {
type: 'category',
categories: categories
}
}
});
};

View File

@@ -1,55 +0,0 @@
Kanboard.CumulativeFlowDiagram = function(app) {
this.app = app;
};
Kanboard.CumulativeFlowDiagram.prototype.execute = function() {
if (this.app.hasId("analytic-cfd")) {
this.show();
}
};
Kanboard.CumulativeFlowDiagram.prototype.show = function() {
var chart = $("#chart");
var metrics = chart.data("metrics");
var columns = [];
var groups = [];
var categories = [];
var inputFormat = d3.time.format("%Y-%m-%d");
var outputFormat = d3.time.format(chart.data("date-format"));
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]);
if (j == 0) {
categories.push(outputFormat(inputFormat.parse(metrics[i][j])));
}
}
}
}
c3.generate({
data: {
columns: columns,
type: 'area-spline',
groups: [groups]
},
axis: {
x: {
type: 'category',
categories: categories
}
}
});
};

View File

@@ -1,53 +0,0 @@
Kanboard.LeadCycleTimeChart = function(app) {
this.app = app;
};
Kanboard.LeadCycleTimeChart.prototype.execute = function() {
if (this.app.hasId("analytic-lead-cycle-time")) {
this.show();
}
};
Kanboard.LeadCycleTimeChart.prototype.show = function() {
var chart = $("#chart");
var metrics = chart.data("metrics");
var cycle = [chart.data("label-cycle")];
var lead = [chart.data("label-lead")];
var categories = [];
var types = {};
types[chart.data("label-cycle")] = 'area';
types[chart.data("label-lead")] = 'area-spline';
var colors = {};
colors[chart.data("label-lead")] = '#afb42b';
colors[chart.data("label-cycle")] = '#4e342e';
for (var i = 0; i < metrics.length; i++) {
cycle.push(parseInt(metrics[i].avg_cycle_time));
lead.push(parseInt(metrics[i].avg_lead_time));
categories.push(metrics[i].day);
}
c3.generate({
data: {
columns: [
lead,
cycle
],
types: types,
colors: colors
},
axis: {
x: {
type: 'category',
categories: categories
},
y: {
tick: {
format: this.app.formatDuration
}
}
}
});
};

View File

@@ -3,7 +3,8 @@
var Kanboard = {};
var KB = {
components: {}
components: {},
utils: {}
};
KB.component = function (name, object) {
@@ -109,3 +110,17 @@ KB.el = function (tag) {
return new DOMBuilder(tag);
};
KB.utils.formatDuration = function(d) {
if (d >= 86400) {
return Math.round(d/86400) + "d";
}
else if (d >= 3600) {
return Math.round(d/3600) + "h";
}
else if (d >= 60) {
return Math.round(d/60) + "m";
}
return d + "s";
};