Use components to render charts
This commit is contained in:
@@ -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 = "";
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -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";
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user