Convert task distribution chart to Vue.js component

This commit is contained in:
Frederic Guillot 2016-09-03 20:39:13 -04:00
parent 59fd3c366c
commit 8c07a0d03e
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
11 changed files with 35 additions and 42 deletions

View File

@ -83,11 +83,11 @@ class AnalyticController extends BaseController
*
* @access public
*/
public function tasks()
public function taskDistribution()
{
$project = $this->getProject();
$this->response->html($this->helper->layout->analytic('analytic/tasks', array(
$this->response->html($this->helper->layout->analytic('analytic/task_distribution', array(
'project' => $project,
'metrics' => $this->taskDistributionAnalytic->build($project['id']),
'title' => t('Task distribution'),

View File

@ -109,7 +109,7 @@ class RouteProvider implements ServiceProviderInterface
$container['route']->addRoute('export/summary/:project_id', 'ExportController', 'summary');
// Analytics routes
$container['route']->addRoute('analytics/tasks/:project_id', 'AnalyticController', 'tasks');
$container['route']->addRoute('analytics/tasks/:project_id', 'AnalyticController', 'taskDistribution');
$container['route']->addRoute('analytics/users/:project_id', 'AnalyticController', 'users');
$container['route']->addRoute('analytics/cfd/:project_id', 'AnalyticController', 'cfd');
$container['route']->addRoute('analytics/burndown/:project_id', 'AnalyticController', 'burndown');

View File

@ -1,7 +1,7 @@
<div class="sidebar">
<ul>
<li <?= $this->app->checkMenuSelection('AnalyticController', 'tasks') ?>>
<?= $this->url->link(t('Task distribution'), 'AnalyticController', 'tasks', array('project_id' => $project['id'])) ?>
<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'])) ?>

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-task-repartition">
<div id="chart" data-metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></div>
<chart-project-task-distribution :metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></chart-project-task-distribution>
<table class="table-striped">
<tr>
@ -29,6 +27,4 @@
</tr>
<?php endforeach ?>
</table>
</section>
<?php endif ?>

View File

@ -25,10 +25,10 @@
<?= $this->url->link(t('Activity'), 'ActivityController', 'project', array('project_id' => $project['id'])) ?>
</li>
<?php if ($this->user->hasProjectAccess('AnalyticController', 'tasks', $project['id'])): ?>
<?php if ($this->user->hasProjectAccess('AnalyticController', 'taskDistribution', $project['id'])): ?>
<li>
<i class="fa fa-line-chart fa-fw"></i>&nbsp;
<?= $this->url->link(t('Analytics'), 'AnalyticController', 'tasks', array('project_id' => $project['id'])) ?>
<?= $this->url->link(t('Analytics'), 'AnalyticController', 'taskDistribution', array('project_id' => $project['id'])) ?>
</li>
<?php endif ?>

View File

@ -50,10 +50,10 @@
<?= $this->hook->render('template:project:dropdown', array('project' => $project)) ?>
<?php if ($this->user->hasProjectAccess('AnalyticController', 'tasks', $project['id'])): ?>
<?php if ($this->user->hasProjectAccess('AnalyticController', 'taskDistribution', $project['id'])): ?>
<li>
<i class="fa fa-line-chart fa-fw"></i>
<?= $this->url->link(t('Analytics'), 'AnalyticController', 'tasks', array('project_id' => $project['id'])) ?>
<?= $this->url->link(t('Analytics'), 'AnalyticController', 'taskDistribution', array('project_id' => $project['id'])) ?>
</li>
<?php endif ?>

View File

@ -2,7 +2,7 @@
<h2><?= t('Move task to another position on the board') ?></h2>
</div>
<script type="x/templates" id="template-task-move-position">
<script type="x/template" id="template-task-move-position">
<?= $this->form->label(t('Swimlane'), 'swimlane') ?>
<select v-model="swimlaneId" @change="onChangeSwimlane()" id="form-swimlane">
<option v-for="swimlane in board" v-bind:value="swimlane.id">

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,18 @@
Vue.component('chart-project-task-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].column_title, this.metrics[i].nb_tasks]);
}
c3.generate({
data: {
columns: columns,
type : 'donut'
}
});
}
});

View File

@ -36,6 +36,10 @@ Kanboard.App.prototype.execute = function() {
this.datePicker();
this.autoComplete();
this.tagAutoComplete();
new Vue({
el: 'body'
});
};
Kanboard.App.prototype.keyboardShortcuts = function() {

View File

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