Convert user distribution chart to Vue.js component
This commit is contained in:
parent
8c07a0d03e
commit
ef8ddb59c9
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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'])) ?>
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -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'
|
||||
}
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue