From 81e40e2c910f0be3f6031445a4d2c1714cdeb385 Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Sun, 21 Jun 2015 21:12:24 -0400 Subject: Replace dimplejs by c3js for chart drawing --- assets/js/src/analytic.js | 297 ++++++++++++++++++++++------------------------ assets/js/src/budget.js | 38 ------ 2 files changed, 139 insertions(+), 196 deletions(-) delete mode 100644 assets/js/src/budget.js (limited to 'assets/js/src') diff --git a/assets/js/src/analytic.js b/assets/js/src/analytic.js index 0912bbcb..8066165b 100644 --- a/assets/js/src/analytic.js +++ b/assets/js/src/analytic.js @@ -1,209 +1,190 @@ Kanboard.Analytic = (function() { - jQuery(document).ready(function() { - - if (Kanboard.Exists("analytic-task-repartition")) { - Kanboard.Analytic.TaskRepartition.Init(); - } - else if (Kanboard.Exists("analytic-user-repartition")) { - Kanboard.Analytic.UserRepartition.Init(); - } - else if (Kanboard.Exists("analytic-cfd")) { - Kanboard.Analytic.CFD.Init(); - } - else if (Kanboard.Exists("analytic-burndown")) { - Kanboard.Analytic.Burndown.Init(); - } - }); - - return {}; - -})(); - -Kanboard.Analytic.Burndown = (function() { - - function fetchData() + // CFD diagram + function drawCfd() { - jQuery.getJSON($("#chart").attr("data-url"), function(data) { - drawGraph(data.metrics, data.labels); - }); - } + var metrics = $("#chart").data("metrics"); + var columns = []; + var groups = []; - function drawGraph(metrics, labels) - { - var series = prepareSeries(metrics, labels); + for (var i = 0; i < metrics.length; i++) { - var svg = dimple.newSvg("#chart", "100%", 380); - var chart = new dimple.chart(svg, series); + for (var j = 0; j < metrics[i].length; j++) { - var x = chart.addCategoryAxis("x", labels['day']); - x.addOrderRule("Date"); + if (i == 0) { + columns.push([metrics[i][j]]); - chart.addMeasureAxis("y", labels['score']); - chart.addSeries(null, dimple.plot.line); + if (j > 0) { + groups.push(metrics[i][j]); + } + } + else { + columns[j].push(metrics[i][j]); + } + } + } - chart.draw(); + c3.generate({ + data: { + columns: columns, + x: metrics[0][0], + type: 'area-spline', + groups: [groups] + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: $("#chart").data("date-format") + } + } + } + }); } - function prepareSeries(metrics, labels) + // Burndown chart + function drawBurndown() { - var series = []; + var metrics = $("#chart").data("metrics"); + var columns = [[$("#chart").data("label-total")]]; 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); - } + for (var j = 0; j < metrics[i].length; j++) { - return series; - } + if (i == 0) { + columns.push([metrics[i][j]]); + } + else { + columns[j + 1].push(metrics[i][j]); - return { - Init: fetchData - }; + if (j > 0) { -})(); + if (columns[0][i] == undefined) { + columns[0].push(0); + } -Kanboard.Analytic.CFD = (function() { + columns[0][i] += metrics[i][j]; + } + } + } + } - function fetchData() - { - jQuery.getJSON($("#chart").attr("data-url"), function(data) { - drawGraph(data.metrics, data.labels, data.columns); + c3.generate({ + data: { + columns: columns, + x: metrics[0][0] + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: $("#chart").data("date-format") + } + } + } }); } - function drawGraph(metrics, labels, columns) + // Draw task repartition chart + function drawTaskRepartition() { - var series = prepareSeries(metrics, labels); - - var svg = dimple.newSvg("#chart", "100%", 380); - var chart = new dimple.chart(svg, series); + var metrics = $("#chart").data("metrics"); + var columns = []; - 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()); + for (var i = 0; i < metrics.length; i++) { + columns.push([metrics[i].column_title, metrics[i].nb_tasks]); + } - chart.addLegend(10, 10, 500, 30, "left"); - chart.draw(); + c3.generate({ + data: { + columns: columns, + type : 'donut' + } + }); } - function prepareSeries(metrics, labels) + // Draw user repartition chart + function drawUserRepartition() { - var series = []; + var metrics = $("#chart").data("metrics"); + var columns = []; 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); + columns.push([metrics[i].user, metrics[i].nb_tasks]); } - return series; - } - - return { - Init: fetchData - }; - -})(); - -Kanboard.Analytic.TaskRepartition = (function() { - - function fetchData() - { - jQuery.getJSON($("#chart").attr("data-url"), function(data) { - drawGraph(data.metrics, data.labels); + c3.generate({ + data: { + columns: columns, + type : 'donut' + } }); } - function drawGraph(metrics, labels) + // Draw budget chart + function drawBudget() { - var series = prepareSeries(metrics, labels); - - var svg = dimple.newSvg("#chart", "100%", 350); + var metrics = $("#chart").data("metrics"); + var labels = $("#chart").data("labels"); - 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(); - } + var columns = [ + [labels["date"]], + [labels["in"]], + [labels["left"]], + [labels["out"]] + ]; - function prepareSeries(metrics, labels) - { - var series = []; + var colors = {}; + colors[labels["in"]] = '#5858FA'; + colors[labels["left"]] = '#04B404'; + colors[labels["out"]] = '#DF3A01'; 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); + columns[0].push(metrics[i]["date"]); + columns[1].push(metrics[i]["in"]); + columns[2].push(metrics[i]["left"]); + columns[3].push(metrics[i]["out"]); } - return series; - } - - return { - Init: fetchData - }; - -})(); - -Kanboard.Analytic.UserRepartition = (function() { - - function fetchData() - { - jQuery.getJSON($("#chart").attr("data-url"), function(data) { - drawGraph(data.metrics, data.labels); + c3.generate({ + data: { + x: columns[0][0], + columns: columns, + colors: colors, + type : 'bar' + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: $("#chart").data("date-format") + } + } + } }); } - 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"]; + jQuery(document).ready(function() { - series.push(serie); + if (Kanboard.Exists("analytic-task-repartition")) { + drawTaskRepartition(); } + else if (Kanboard.Exists("analytic-user-repartition")) { + drawUserRepartition(); + } + else if (Kanboard.Exists("analytic-cfd")) { + drawCfd(); + } + else if (Kanboard.Exists("analytic-burndown")) { + drawBurndown(); + } + else if (Kanboard.Exists("budget-chart")) { + drawBudget(); + } + }); - return series; - } - - return { - Init: fetchData - }; + return {}; })(); diff --git a/assets/js/src/budget.js b/assets/js/src/budget.js deleted file mode 100644 index ee39c68c..00000000 --- a/assets/js/src/budget.js +++ /dev/null @@ -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(); - } - }); - -})(); \ No newline at end of file -- cgit v1.2.3