Replace dimplejs by c3js for chart drawing
This commit is contained in:
Frederic Guillot
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
assets/css/vendor/c3.min.css
vendored
Normal file
1
assets/css/vendor/c3.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,209 +1,190 @@
|
||||
|
||||
Kanboard.Analytic = (function() {
|
||||
|
||||
// CFD diagram
|
||||
function drawCfd()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [];
|
||||
var groups = [];
|
||||
|
||||
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]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
x: metrics[0][0],
|
||||
type: 'area-spline',
|
||||
groups: [groups]
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: $("#chart").data("date-format")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Burndown chart
|
||||
function drawBurndown()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [[$("#chart").data("label-total")]];
|
||||
|
||||
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];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
x: metrics[0][0]
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: $("#chart").data("date-format")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Draw task repartition chart
|
||||
function drawTaskRepartition()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
columns.push([metrics[i].column_title, metrics[i].nb_tasks]);
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
type : 'donut'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Draw user repartition chart
|
||||
function drawUserRepartition()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var columns = [];
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
columns.push([metrics[i].user, metrics[i].nb_tasks]);
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
columns: columns,
|
||||
type : 'donut'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Draw budget chart
|
||||
function drawBudget()
|
||||
{
|
||||
var metrics = $("#chart").data("metrics");
|
||||
var labels = $("#chart").data("labels");
|
||||
|
||||
var columns = [
|
||||
[labels["date"]],
|
||||
[labels["in"]],
|
||||
[labels["left"]],
|
||||
[labels["out"]]
|
||||
];
|
||||
|
||||
var colors = {};
|
||||
colors[labels["in"]] = '#5858FA';
|
||||
colors[labels["left"]] = '#04B404';
|
||||
colors[labels["out"]] = '#DF3A01';
|
||||
|
||||
for (var i = 0; i < metrics.length; i++) {
|
||||
columns[0].push(metrics[i]["date"]);
|
||||
columns[1].push(metrics[i]["in"]);
|
||||
columns[2].push(metrics[i]["left"]);
|
||||
columns[3].push(metrics[i]["out"]);
|
||||
}
|
||||
|
||||
c3.generate({
|
||||
data: {
|
||||
x: columns[0][0],
|
||||
columns: columns,
|
||||
colors: colors,
|
||||
type : 'bar'
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: $("#chart").data("date-format")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
if (Kanboard.Exists("analytic-task-repartition")) {
|
||||
Kanboard.Analytic.TaskRepartition.Init();
|
||||
drawTaskRepartition();
|
||||
}
|
||||
else if (Kanboard.Exists("analytic-user-repartition")) {
|
||||
Kanboard.Analytic.UserRepartition.Init();
|
||||
drawUserRepartition();
|
||||
}
|
||||
else if (Kanboard.Exists("analytic-cfd")) {
|
||||
Kanboard.Analytic.CFD.Init();
|
||||
drawCfd();
|
||||
}
|
||||
else if (Kanboard.Exists("analytic-burndown")) {
|
||||
Kanboard.Analytic.Burndown.Init();
|
||||
drawBurndown();
|
||||
}
|
||||
else if (Kanboard.Exists("budget-chart")) {
|
||||
drawBudget();
|
||||
}
|
||||
});
|
||||
|
||||
return {};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.Burndown = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(metrics, labels)
|
||||
{
|
||||
var series = prepareSeries(metrics, labels);
|
||||
|
||||
var svg = dimple.newSvg("#chart", "100%", 380);
|
||||
var chart = new dimple.chart(svg, series);
|
||||
|
||||
var x = chart.addCategoryAxis("x", labels['day']);
|
||||
x.addOrderRule("Date");
|
||||
|
||||
chart.addMeasureAxis("y", labels['score']);
|
||||
chart.addSeries(null, dimple.plot.line);
|
||||
|
||||
chart.draw();
|
||||
}
|
||||
|
||||
function prepareSeries(metrics, labels)
|
||||
{
|
||||
var series = [];
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.CFD = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels, data.columns);
|
||||
});
|
||||
}
|
||||
|
||||
function drawGraph(metrics, labels, columns)
|
||||
{
|
||||
var series = prepareSeries(metrics, labels);
|
||||
|
||||
var svg = dimple.newSvg("#chart", "100%", 380);
|
||||
var chart = new dimple.chart(svg, series);
|
||||
|
||||
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());
|
||||
|
||||
chart.addLegend(10, 10, 500, 30, "left");
|
||||
chart.draw();
|
||||
}
|
||||
|
||||
function prepareSeries(metrics, labels)
|
||||
{
|
||||
var series = [];
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.TaskRepartition = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels);
|
||||
});
|
||||
}
|
||||
|
||||
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["column_title"], 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["column_title"]] = metrics[i]["column_title"];
|
||||
|
||||
series.push(serie);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Kanboard.Analytic.UserRepartition = (function() {
|
||||
|
||||
function fetchData()
|
||||
{
|
||||
jQuery.getJSON($("#chart").attr("data-url"), function(data) {
|
||||
drawGraph(data.metrics, data.labels);
|
||||
});
|
||||
}
|
||||
|
||||
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"];
|
||||
|
||||
series.push(serie);
|
||||
}
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
return {
|
||||
Init: fetchData
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
5
assets/js/vendor/c3.min.js
vendored
Normal file
5
assets/js/vendor/c3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
assets/js/vendor/d3.v3.4.8.min.js
vendored
5
assets/js/vendor/d3.v3.4.8.min.js
vendored
File diff suppressed because one or more lines are too long
5
assets/js/vendor/d3.v3.min.js
vendored
Normal file
5
assets/js/vendor/d3.v3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
assets/js/vendor/dimple.v2.1.2.min.js
vendored
3
assets/js/vendor/dimple.v2.1.2.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user