Added account history in the ui.

resources/templates/account.html

@@ -1,4 +1,5 @@
 {% set active_navbar_item = 'accounts' %}
+{% set script_chart_js = true %}
 
 {% extends "base.html" %}
 
@@ -7,7 +8,8 @@
 
 <table class="uk-table uk-table-divider uk-table-striped uk-table-hover uk-table-small">
   <caption>Summary</caption>
-  <tr><th>ID</th><td>{{ account.id | micro_id }}</td></tr>
+  <tr><th>Micro ID</th><td>{{ account.id | micro_id }}</td></tr>
+  <tr><th>Account ID</th><td>{{ account.id }}</td></tr>
   <tr><th>Label</th><td>{{ account.label }}</td></tr>
   <tr><th>Amount</th><td>{{ account.amount | thousand_separator }}</td></tr>
   <tr><th>Account Type</th><td>{{ account.account_type | replace("_", " ") | lower}}</td></tr>
@@ -15,7 +17,58 @@
   <tr><th>Security</th><td>{{ account.security.symbol }}</td></tr>
 </table>
 
+<canvas id="account-history-chart"></canvas>
 
-<pre> {{ "hello" | tojson }}</pre>
+<script>
+  const ctx = document.getElementById('account-history-chart');
+  const labels = {{account_history.timestamps | tojson }};
+  const datapoints = {{ account_history.amounts | tojson }};
+  const data = {
+    labels: labels.map(x => new Date(1000 * x)),
+    datasets: [
+      {
+        label: {{ account.id | micro_id | tojson }},
+        data: datapoints,
+        fill: false,
+        tension: 0.4
+      }
+    ]
+  };
+
+  const config = {
+    type: 'line',
+    data: data,
+    options: {
+      responsive: true,
+      plugins: {
+        title: {
+          display: true,
+          text: 'Account Amount History'
+        },
+      },
+      interaction: {
+        intersect: false,
+      },
+      scales: {
+        x: {
+          display: true,
+          type: 'time',
+          title: {
+            display: true
+          }
+        },
+        y: {
+          display: true,
+          title: {
+            display: true,
+            text: 'Value'
+          },
+          suggestedMin: 0,
+        }
+      }
+    },
+  };
+  new Chart(ctx, config);
+</script>
 
 {% endblock %}