AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use components to render charts

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

41
assets/js/components/chart-avg-time-column.js Normal file
View File

@@ -0,0 +1,41 @@
KB.component('chart-avg-time-column', function (containerElement, options) {
this.render = function () {
var metrics = options.metrics;
var plots = [options.label];
var categories = [];
for (var column_id in metrics) {
plots.push(metrics[column_id].average);
categories.push(metrics[column_id].title);
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: [plots],
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
axis: {
x: {
type: 'category',
categories: categories
},
y: {
tick: {
format: KB.utils.formatDuration
}
}
},
legend: {
show: false
}
});
};
});

50
assets/js/components/chart-burndown.js Normal file
View File

@@ -0,0 +1,50 @@
KB.component('chart-burndown', function (containerElement, options) {
this.render = function () {
var metrics = options.metrics;
var columns = [[options.labelTotal]];
var categories = [];
var inputFormat = d3.time.format("%Y-%m-%d");
var outputFormat = d3.time.format(options.dateFormat);
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])));
}
}
}
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: columns
},
axis: {
x: {
type: 'category',
categories: categories
}
}
});
};
});

49
assets/js/components/chart-cumulative-flow.js Normal file
View File

@@ -0,0 +1,49 @@
KB.component('chart-cumulative-flow', function (containerElement, options) {
this.render = function () {
var metrics = options.metrics;
var columns = [];
var groups = [];
var categories = [];
var inputFormat = d3.time.format("%Y-%m-%d");
var outputFormat = d3.time.format(options.dateFormat);
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])));
}
}
}
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: columns,
type: 'area-spline',
groups: [groups]
},
axis: {
x: {
type: 'category',
categories: categories
}
}
});
};
});

47
assets/js/components/chart-lead-cycle-time.js Normal file
View File

@@ -0,0 +1,47 @@
KB.component('chart-lead-cycle-time', function (containerElement, options) {
this.render = function () {
var metrics = options.metrics;
var cycle = [options.labelCycle];
var lead = [options.labelLead];
var categories = [];
var types = {};
types[options.labelCycle] = 'area';
types[options.labelLead] = 'area-spline';
var colors = {};
colors[options.labelLead] = '#afb42b';
colors[options.labelCycle] = '#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);
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: [
lead,
cycle
],
types: types,
colors: colors
},
axis: {
x: {
type: 'category',
categories: categories
},
y: {
tick: {
format: KB.utils.formatDuration
}
}
}
});
};
});

15
assets/js/components/chart-project-task-distribution.js
View File

@@ -1,18 +1,19 @@
Vue.component('chart-project-task-distribution', {
props: ['metrics'],
template: '<div id="chart"></div>',
ready: function () {
KB.component('chart-project-task-distribution', function (containerElement, options) {
this.render = function () {
var columns = [];
for (var i = 0; i < this.metrics.length; i++) {
columns.push([this.metrics[i].column_title, this.metrics[i].nb_tasks]);
for (var i = 0; i < options.metrics.length; i++) {
columns.push([options.metrics[i].column_title, options.metrics[i].nb_tasks]);
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: columns,
type : 'donut'
}
});
}
};
});

23
assets/js/components/chart-project-time-comparison.js
View File

@@ -1,17 +1,18 @@
Vue.component('chart-project-time-comparison', {
props: ['metrics', 'labelSpent', 'labelEstimated', 'labelClosed', 'labelOpen'],
template: '<div id="chart"></div>',
ready: function () {
var spent = [this.labelSpent];
var estimated = [this.labelEstimated];
KB.component('chart-project-time-comparison', function (containerElement, options) {
this.render = function () {
var spent = [options.labelSpent];
var estimated = [options.labelEstimated];
var categories = [];
for (var status in this.metrics) {
spent.push(this.metrics[status].time_spent);
estimated.push(this.metrics[status].time_estimated);
categories.push(status === 'open' ? this.labelOpen : this.labelClosed);
for (var status in options.metrics) {
spent.push(options.metrics[status].time_spent);
estimated.push(options.metrics[status].time_estimated);
categories.push(status === 'open' ? options.labelOpen : options.labelClosed);
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: [spent, estimated],
@@ -32,5 +33,5 @@ Vue.component('chart-project-time-comparison', {
show: true
}
});
}
};
});

15
assets/js/components/chart-project-user-distribution.js
View File

@@ -1,18 +1,19 @@
Vue.component('chart-project-user-distribution', {
props: ['metrics'],
template: '<div id="chart"></div>',
ready: function () {
KB.component('chart-project-user-distribution', function (containerElement, options) {
this.render = function () {
var columns = [];
for (var i = 0; i < this.metrics.length; i++) {
columns.push([this.metrics[i].user, this.metrics[i].nb_tasks]);
for (var i = 0; i < options.metrics.length; i++) {
columns.push([options.metrics[i].user, options.metrics[i].nb_tasks]);
}
KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
c3.generate({
data: {
columns: columns,
type : 'donut'
}
});
}
};
});