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

Convert time comparison chart to Vue.js component

This commit is contained in:
Frederic Guillot 2016-09-03 21:20:54 -04:00
parent ef8ddb59c9
commit daa076eea7
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
7 changed files with 53 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Analytic/EstimatedTimeComparisonAnalytic.php
View File

@ -41,8 +41,8 @@ class EstimatedTimeComparisonAnalytic extends Base
foreach ($rows as $row) {
$key = $row['is_active'] == TaskModel::STATUS_OPEN ? 'open' : 'closed';
$metrics[$key]['time_spent'] = $row['time_spent'];
$metrics[$key]['time_estimated'] = $row['time_estimated'];
$metrics[$key]['time_spent'] = (float) $row['time_spent'];
$metrics[$key]['time_estimated'] = (float) $row['time_estimated'];
}
return $metrics;

6
app/Controller/AnalyticController.php
View File

@ -40,12 +40,12 @@ class AnalyticController extends BaseController
*
* @access public
*/
public function compareHours()
public function timeComparison()
{
$project = $this->getProject();
$paginator = $this->paginator
->setUrl('AnalyticController', 'compareHours', array('project_id' => $project['id']))
->setUrl('AnalyticController', 'timeComparison', array('project_id' => $project['id']))
->setMax(30)
->setOrder(TaskModel::TABLE.'.id')
->setQuery($this->taskQuery
@ -54,7 +54,7 @@ class AnalyticController extends BaseController
)
->calculate();
$this->response->html($this->helper->layout->analytic('analytic/compare_hours', array(
$this->response->html($this->helper->layout->analytic('analytic/time_comparison', array(
'project' => $project,
'paginator' => $paginator,
'metrics' => $this->estimatedTimeComparisonAnalytic->build($project['id']),

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

@ -18,8 +18,8 @@
<li <?= $this->app->checkMenuSelection('AnalyticController', 'leadAndCycleTime') ?>>
<?= $this->url->link(t('Lead and cycle time'), 'AnalyticController', 'leadAndCycleTime', array('project_id' => $project['id'])) ?>
</li>
<li <?= $this->app->checkMenuSelection('AnalyticController', 'compareHours') ?>>
<?= $this->url->link(t('Estimated vs actual time'), 'AnalyticController', 'compareHours', array('project_id' => $project['id'])) ?>
<li <?= $this->app->checkMenuSelection('AnalyticController', 'timeComparison') ?>>
<?= $this->url->link(t('Estimated vs actual time'), 'AnalyticController', 'timeComparison', array('project_id' => $project['id'])) ?>
</li>
<?= $this->hook->render('template:analytic:sidebar', array('project' => $project)) ?>

17
app/Template/analytic/compare_hours.php → app/Template/analytic/time_comparison.php
View File

@ -12,17 +12,17 @@
<?php if (empty($metrics)): ?>
<p class="alert"><?= t('Not enough data to show the graph.') ?></p>
<?php else: ?>
<section id="analytic-compare-hours">
<div id="chart"
data-metrics='<?= json_encode($metrics, JSON_HEX_APOS)?>'
data-label-spent="<?= t('Hours Spent') ?>"
data-label-estimated="<?= t('Hours Estimated') ?>"
data-label-closed="<?= t('Closed') ?>"
data-label-open="<?= t('Open') ?>"></div>
<?php if ($paginator->isEmpty()): ?>
<p class="alert"><?= t('No tasks found.') ?></p>
<?php elseif (! $paginator->isEmpty()): ?>
<chart-project-time-comparison
:metrics='<?= json_encode($metrics, JSON_HEX_APOS)?>'
label-spent="<?= t('Hours Spent') ?>"
label-estimated="<?= t('Hours Estimated') ?>"
label-closed="<?= t('Closed') ?>"
label-open="<?= t('Open') ?>">
</chart-project-time-comparison>
<table class="table-fixed table-small table-scrolling">
<tr>
<th class="column-5"><?= $paginator->order(t('Id'), 'tasks.id') ?></th>
@ -58,5 +58,4 @@
<?= $paginator ?>
<?php endif ?>
</section>
<?php endif ?>

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

File diff suppressed because one or more lines are too long

36
assets/js/components/chart-project-time-comparison.js Normal file
View File

@ -0,0 +1,36 @@
Vue.component('chart-project-time-comparison', {
props: ['metrics', 'labelSpent', 'labelEstimated', 'labelClosed', 'labelOpen'],
template: '<div id="chart"></div>',
ready: function () {
var spent = [this.labelSpent];
var estimated = [this.labelEstimated];
var categories = [];
for (var status in this.metrics) {
spent.push(this.metrics[status].time_spent);
estimated.push(this.metrics[status].time_estimated);
categories.push(status === 'open' ? this.labelOpen : this.labelClosed);
}
c3.generate({
data: {
columns: [spent, estimated],
type: 'bar'
},
bar: {
width: {
ratio: 0.2
}
},
axis: {
x: {
type: 'category',
categories: categories
}
},
legend: {
show: true
}
});
}
});

46
assets/js/src/CompareHoursColumnChart.js
View File

@ -1,46 +0,0 @@
Kanboard.CompareHoursColumnChart = function(app) {
this.app = app;
};
Kanboard.CompareHoursColumnChart.prototype.execute = function() {
if (this.app.hasId("analytic-compare-hours")) {
this.show();
}
};
Kanboard.CompareHoursColumnChart.prototype.show = function() {
var chart = $("#chart");
var metrics = chart.data("metrics");
var labelOpen = chart.data("label-open");
var labelClosed = chart.data("label-closed");
var spent = [chart.data("label-spent")];
var estimated = [chart.data("label-estimated")];
var categories = [];
for (var status in metrics) {
spent.push(parseFloat(metrics[status].time_spent));
estimated.push(parseFloat(metrics[status].time_estimated));
categories.push(status == 'open' ? labelOpen : labelClosed);
}
c3.generate({
data: {
columns: [spent, estimated],
type: 'bar'
},
bar: {
width: {
ratio: 0.2
}
},
axis: {
x: {
type: 'category',
categories: categories
}
},
legend: {
show: true
}
});
};