diff options
Diffstat (limited to 'assets/js/components')
| -rw-r--r-- | assets/js/components/chart-avg-time-column.js | 41 | ||||
| -rw-r--r-- | assets/js/components/chart-burndown.js | 50 | ||||
| -rw-r--r-- | assets/js/components/chart-cumulative-flow.js | 49 | ||||
| -rw-r--r-- | assets/js/components/chart-lead-cycle-time.js | 47 | ||||
| -rw-r--r-- | assets/js/components/chart-project-task-distribution.js | 15 | ||||
| -rw-r--r-- | assets/js/components/chart-project-time-comparison.js | 23 | ||||
| -rw-r--r-- | assets/js/components/chart-project-user-distribution.js | 15 |
7 files changed, 215 insertions, 25 deletions
diff --git a/assets/js/components/chart-avg-time-column.js b/assets/js/components/chart-avg-time-column.js new file mode 100644 index 00000000..0fc85f71 --- /dev/null +++ b/assets/js/components/chart-avg-time-column.js @@ -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 + } + }); + }; +});
\ No newline at end of file diff --git a/assets/js/components/chart-burndown.js b/assets/js/components/chart-burndown.js new file mode 100644 index 00000000..0bb96742 --- /dev/null +++ b/assets/js/components/chart-burndown.js @@ -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 + } + } + }); + }; +}); diff --git a/assets/js/components/chart-cumulative-flow.js b/assets/js/components/chart-cumulative-flow.js new file mode 100644 index 00000000..d1e05590 --- /dev/null +++ b/assets/js/components/chart-cumulative-flow.js @@ -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 + } + } + }); + }; +}); diff --git a/assets/js/components/chart-lead-cycle-time.js b/assets/js/components/chart-lead-cycle-time.js new file mode 100644 index 00000000..db7767d2 --- /dev/null +++ b/assets/js/components/chart-lead-cycle-time.js @@ -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 + } + } + } + }); + }; +}); diff --git a/assets/js/components/chart-project-task-distribution.js b/assets/js/components/chart-project-task-distribution.js index b5d712ce..982aaf7f 100644 --- a/assets/js/components/chart-project-task-distribution.js +++ b/assets/js/components/chart-project-task-distribution.js @@ -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' } }); - } + }; }); diff --git a/assets/js/components/chart-project-time-comparison.js b/assets/js/components/chart-project-time-comparison.js index 6fbdb919..a110e6b4 100644 --- a/assets/js/components/chart-project-time-comparison.js +++ b/assets/js/components/chart-project-time-comparison.js @@ -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 } }); - } + }; }); diff --git a/assets/js/components/chart-project-user-distribution.js b/assets/js/components/chart-project-user-distribution.js index a569e0be..8ab61799 100644 --- a/assets/js/components/chart-project-user-distribution.js +++ b/assets/js/components/chart-project-user-distribution.js @@ -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' } }); - } + }; }); |