Convert task distribution chart to Vue.js component

app/Template/analytic/task_distribution.php

@@ -0,0 +1,30 @@
+<div class="page-header">
+    <h2><?= t('Task distribution') ?></h2>
+</div>
+
+<?php if (empty($metrics)): ?>
+    <p class="alert"><?= t('Not enough data to show the graph.') ?></p>
+<?php else: ?>
+    <chart-project-task-distribution :metrics='<?= json_encode($metrics, JSON_HEX_APOS) ?>'></chart-project-task-distribution>
+
+    <table class="table-striped">
+        <tr>
+            <th><?= t('Column') ?></th>
+            <th><?= t('Number of tasks') ?></th>
+            <th><?= t('Percentage') ?></th>
+        </tr>
+        <?php foreach ($metrics as $metric): ?>
+        <tr>
+            <td>
+                <?= $this->text->e($metric['column_title']) ?>
+            </td>
+            <td>
+                <?= $metric['nb_tasks'] ?>
+            </td>
+            <td>
+                <?= n($metric['percentage']) ?>%
+            </td>
+        </tr>
+        <?php endforeach ?>
+    </table>
+<?php endif ?>