Move chart task time column to components

app/Template/analytic/avg_time_columns.php

@@ -5,7 +5,7 @@
 <?php if (empty($metrics)): ?>
     <p class="alert"><?= t('Not enough data to show the graph.') ?></p>
 <?php else: ?>
-    <?= $this->app->component('chart-avg-time-column', array(
+    <?= $this->app->component('chart-project-avg-time-column', array(
         'metrics' => $metrics,
         'label' => t('Average time spent'),
     )) ?>

app/Template/analytic/burndown.php

@@ -5,7 +5,7 @@
 <?php if (! $display_graph): ?>
     <p class="alert"><?= t('You need at least 2 days of data to show the chart.') ?></p>
 <?php else: ?>
-    <?= $this->app->component('chart-burndown', array(
+    <?= $this->app->component('chart-project-burndown', array(
         'metrics' => $metrics,
         'labelTotal' => t('Total for all columns'),
         'dateFormat' => e('%%Y-%%m-%%d'),

app/Template/analytic/cfd.php

@@ -5,7 +5,7 @@
 <?php if (! $display_graph): ?>
     <p class="alert"><?= t('You need at least 2 days of data to show the chart.') ?></p>
 <?php else: ?>
-    <?= $this->app->component('chart-cumulative-flow', array(
+    <?= $this->app->component('chart-project-cumulative-flow', array(
         'metrics' => $metrics,
         'dateFormat' => e('%%Y-%%m-%%d'),
     )) ?>

app/Template/analytic/lead_cycle_time.php

@@ -12,10 +12,10 @@
 <?php if (empty($metrics)): ?>
     <p class="alert"><?= t('Not enough data to show the graph.') ?></p>
 <?php else: ?>
-    <?= $this->app->component('chart-lead-cycle-time', array(
+    <?= $this->app->component('chart-project-lead-cycle-time', array(
         'metrics' => $metrics,
         'labelCycle' => t('Cycle Time'),
-        'labelTime' => t('Lead Time'),
+        'labelLead' => t('Lead Time'),
     )) ?>
 
     <form method="post" class="form-inline" action="<?= $this->url->href('AnalyticController', 'leadAndCycleTime', array('project_id' => $project['id'])) ?>" autocomplete="off">

app/Template/task/analytics.php

@@ -16,8 +16,13 @@
     </ul>
 </div>
 
-<h3 id="analytic-task-time-column"><?= t('Time spent into each column') ?></h3>
-<div id="chart" data-metrics='<?= json_encode($time_spent_columns, JSON_HEX_APOS) ?>' data-label="<?= t('Time spent') ?>"></div>
+<h3><?= t('Time spent into each column') ?></h3>
+
+<?= $this->app->component('chart-task-time-column', array(
+    'metrics' => $time_spent_columns,
+    'label' => t('Time spent'),
+)) ?>
+
 <table class="table-striped">
     <tr>
         <th><?= t('Column') ?></th>

assets/js/components/chart-project-avg-time-column.js

@@ -1,4 +1,4 @@
-KB.component('chart-avg-time-column', function (containerElement, options) {
+KB.component('chart-project-avg-time-column', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-project-burndown.js

@@ -1,4 +1,4 @@
-KB.component('chart-burndown', function (containerElement, options) {
+KB.component('chart-project-burndown', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-project-cumulative-flow.js

@@ -1,4 +1,4 @@
-KB.component('chart-cumulative-flow', function (containerElement, options) {
+KB.component('chart-project-cumulative-flow', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-project-lead-cycle-time.js

@@ -1,4 +1,4 @@
-KB.component('chart-lead-cycle-time', function (containerElement, options) {
+KB.component('chart-project-lead-cycle-time', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-task-time-column.js

@@ -0,0 +1,41 @@
+KB.component('chart-task-time-column', function (containerElement, options) {
+
+    this.render = function () {
+        var metrics = options.metrics;
+        var plots = [options.label];
+        var categories = [];
+
+        for (var i = 0; i < metrics.length; i++) {
+            plots.push(metrics[i].time_spent);
+            categories.push(metrics[i].title);
+        }
+
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
+        c3.generate({
+            data: {
+                columns: [plots],
+                type: 'bar'
+            },
+            bar: {
+                width: {
+                    ratio: 0.5
+                }
+            },
+            axis: {
+                x: {
+                    type: 'category',
+                    categories: categories
+                },
+                y: {
+                    tick: {
+                        format: KB.utils.formatDuration
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+    };
+});

assets/js/src/TaskTimeColumnChart.js

@@ -1,47 +0,0 @@
-Kanboard.TaskTimeColumnChart = function(app) {
-    this.app = app;
-};
-
-Kanboard.TaskTimeColumnChart.prototype.execute = function() {
-    if (this.app.hasId("analytic-task-time-column")) {
-        this.show();
-    }
-};
-
-Kanboard.TaskTimeColumnChart.prototype.show = function() {
-    var chart = $("#chart");
-    var metrics = chart.data("metrics");
-    var plots = [chart.data("label")];
-    var categories = [];
-
-    for (var i = 0; i < metrics.length; i++) {
-        plots.push(metrics[i].time_spent);
-        categories.push(metrics[i].title);
-    }
-
-    c3.generate({
-        data: {
-            columns: [plots],
-            type: 'bar'
-        },
-        bar: {
-            width: {
-                ratio: 0.5
-            }
-        },
-        axis: {
-            x: {
-                type: 'category',
-                categories: categories
-            },
-            y: {
-                tick: {
-                    format: this.app.formatDuration
-                }
-            }
-        },
-        legend: {
-           show: false
-        }
-    });
-};