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

Convert user distribution chart to Vue.js component

Browse Source
This commit is contained in:
Frederic Guillot
2016-09-03 20:45:30 -04:00
parent 8c07a0d03e
commit ef8ddb59c9
7 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/Controller/AnalyticController.php
View File

@@ -99,11 +99,11 @@ class AnalyticController extends BaseController
* *
* @access public * @access public
*/ */
public function users() public function userDistribution()
{ {
$project = $this->getProject(); $project = $this->getProject();
$this->response->html($this->helper->layout->analytic('analytic/users', array( $this->response->html($this->helper->layout->analytic('analytic/user_distribution', array(
'project' => $project, 'project' => $project,
'metrics' => $this->userDistributionAnalytic->build($project['id']), 'metrics' => $this->userDistributionAnalytic->build($project['id']),
'title' => t('User repartition'), 'title' => t('User repartition'),

2
app/ServiceProvider/RouteProvider.php
View File

@@ -110,7 +110,7 @@ class RouteProvider implements ServiceProviderInterface
// Analytics routes // Analytics routes
$container['route']->addRoute('analytics/tasks/:project_id', 'AnalyticController', 'taskDistribution'); $container['route']->addRoute('analytics/tasks/:project_id', 'AnalyticController', 'taskDistribution');
$container['route']->addRoute('analytics/users/:project_id', 'AnalyticController', 'users'); $container['route']->addRoute('analytics/users/:project_id', 'AnalyticController', 'userDistribution');
$container['route']->addRoute('analytics/cfd/:project_id', 'AnalyticController', 'cfd'); $container['route']->addRoute('analytics/cfd/:project_id', 'AnalyticController', 'cfd');
$container['route']->addRoute('analytics/burndown/:project_id', 'AnalyticController', 'burndown'); $container['route']->addRoute('analytics/burndown/:project_id', 'AnalyticController', 'burndown');
$container['route']->addRoute('analytics/average-time-column/:project_id', 'AnalyticController', 'averageTimeByColumn'); $container['route']->addRoute('analytics/average-time-column/:project_id', 'AnalyticController', 'averageTimeByColumn');

4
app/Template/analytic/sidebar.php
View File

@@ -3,8 +3,8 @@
<li <?= $this->app->checkMenuSelection('AnalyticController', 'taskDistribution') ?>> <li <?= $this->app->checkMenuSelection('AnalyticController', 'taskDistribution') ?>>
<?= $this->url->link(t('Task distribution'), 'AnalyticController', 'taskDistribution', array('project_id' => $project['id'])) ?> <?= $this->url->link(t('Task distribution'), 'AnalyticController', 'taskDistribution', array('project_id' => $project['id'])) ?>
</li> </li>
<li <?= $this->app->checkMenuSelection('AnalyticController', 'users') ?>> <li <?= $this->app->checkMenuSelection('AnalyticController', 'userDistribution') ?>>
<?= $this->url->link(t('User repartition'), 'AnalyticController', 'users', array('project_id' => $project['id'])) ?> <?= $this->url->link(t('User repartition'), 'AnalyticController', 'userDistribution', array('project_id' => $project['id'])) ?>
</li> </li>
<li <?= $this->app->checkMenuSelection('AnalyticController', 'cfd') ?>> <li <?= $this->app->checkMenuSelection('AnalyticController', 'cfd') ?>>
<?= $this->url->link(t('Cumulative flow diagram'), 'AnalyticController', 'cfd', array('project_id' => $project['id'])) ?> <?= $this->url->link(t('Cumulative flow diagram'), 'AnalyticController', 'cfd', array('project_id' => $project['id'])) ?>

6
app/Template/analytic/users.php → app/Template/analytic/user_distribution.php
View File

@@ -5,9 +5,7 @@
<?php if (empty($metrics)): ?> <?php if (empty($metrics)): ?>
<p class="alert"><?= t('Not enough data to show the graph.') ?></p> <p class="alert"><?= t('Not enough data to show the graph.') ?></p>
<?php else: ?> <?php else: ?>
<section id="analytic-user-repartition"> <chart-project-user-distribution :metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></chart-project-user-distribution>
<div id="chart" data-metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></div>
<table class="table-striped"> <table class="table-striped">
<tr> <tr>
@@ -29,6 +27,4 @@
</tr> </tr>
<?php endforeach ?> <?php endforeach ?>
</table> </table>
</section>
<?php endif ?> <?php endif ?>

4
assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
assets/js/components/chart-project-user-distribution.js Normal file
View File

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

25
assets/js/src/UserRepartitionChart.js
View File

@@ -1,25 +0,0 @@
Kanboard.UserRepartitionChart = function(app) {
this.app = app;
};
Kanboard.UserRepartitionChart.prototype.execute = function() {
if (this.app.hasId("analytic-user-repartition")) {
this.show();
}
};
Kanboard.UserRepartitionChart.prototype.show = function() {
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'
}
});
};