Convert time comparison chart to Vue.js component

app/Analytic/EstimatedTimeComparisonAnalytic.php

@@ -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;

app/Controller/AnalyticController.php

@@ -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']),

app/Template/analytic/sidebar.php

@@ -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)) ?>

app/Template/analytic/time_comparison.php

@@ -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 ?>