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 %}

resources/templates/base.html

@@ -1,3 +1,5 @@
+{% set values = {} %}
+
 <!doctype html>
 <html>
   <head>
@@ -15,11 +17,17 @@
     <script src="/static/vendor/uikit-icons.min.js"></script>
     <script src="/static/vendor/htmx.org@1.8.5"></script>
     <script src="/static/embedded-json-enc.js"></script>
+    {% if script_chart_js %}
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
+    {% endif %}
+
   </head>
 
   <body>
 
-    <div hx-headers='{"myHeader": "My Value"}'>
+    <div>
       {% include "components/navbar.html" %}
 
     <div class="uk-grid">