Convert task distribution chart to Vue.js component
This commit is contained in:
parent
59fd3c366c
commit
8c07a0d03e
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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'])) ?>
|
||||
|
|
|
|||
|
|
@ -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 ?>
|
||||
|
|
@ -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>
|
||||
<?= $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 ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -36,6 +36,10 @@ Kanboard.App.prototype.execute = function() {
|
|||
this.datePicker();
|
||||
this.autoComplete();
|
||||
this.tagAutoComplete();
|
||||
|
||||
new Vue({
|
||||
el: 'body'
|
||||
});
|
||||
};
|
||||
|
||||
Kanboard.App.prototype.keyboardShortcuts = function() {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue