Convert user distribution chart to Vue.js component

This commit is contained in:
Frederic Guillot 2016-09-03 20:45:30 -04:00
parent 8c07a0d03e
commit ef8ddb59c9
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
7 changed files with 26 additions and 37 deletions

View File

@ -99,11 +99,11 @@ class AnalyticController extends BaseController
*
* @access public
*/
public function users()
public function userDistribution()
{
$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,
'metrics' => $this->userDistributionAnalytic->build($project['id']),
'title' => t('User repartition'),

View File

@ -110,7 +110,7 @@ class RouteProvider implements ServiceProviderInterface
// Analytics routes
$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/burndown/:project_id', 'AnalyticController', 'burndown');
$container['route']->addRoute('analytics/average-time-column/:project_id', 'AnalyticController', 'averageTimeByColumn');

View File

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

View File

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

File diff suppressed because one or more lines are too long

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'
}
});
}
});

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'
}
});
};