Added nice chart for account history.

resources/templates/account.html

@@ -15,60 +15,34 @@
   <tr><th>Account Type</th><td>{{ account.account_type | replace("_", " ") | lower}}</td></tr>
   <tr><th>Last Update</th><td>{{ account.last_update | utc_date }}</td></tr>
   <tr><th>Security</th><td>{{ account.security.symbol }}</td></tr>
+  <tr><th>Data</th><td>
+    <a href="/data/accounts/{{ account.id }}/amount-history.json">data</a>
+  </td></tr>
 </table>
 
-<canvas id="account-history-chart"></canvas>
+<div id="account-history-chart-2" style="width: 100%"></div>
 
 <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
-      }
-    ]
+  var vlSpec = {
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    title: "History of {{ account.id }}",
+    "width": "container",
+    "height": 250,
+    "data": {url: "/data/accounts/{{ account.id }}/amount-history.json",
+             format:{
+              type: "json",
+              property: "snapshots"
+             }
+            },
+    "mark": "line",
+    "encoding": {
+      "x": {"field": "timestamp", "type": "temporal", title: 'Time'},
+      "y": {"field": "amount", "type": "quantitative", title: 'Quantity'}
+    }
   };
 
-  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);
+  // Embed the visualization in the container with id `vis`
+  vegaEmbed('#account-history-chart-2', vlSpec);
 </script>
 
 {% endblock %}

resources/templates/base.html

@@ -18,9 +18,10 @@
     <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>
+    <script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.6.1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.21.2"></script>
+
     {% endif %}
 
   </head>

resources/templates/partials/actions/create_security.html

@@ -29,7 +29,6 @@
     </select>
   </label>
 </div>
-
 <input type="hidden" name="event.CreateNewSecurity.user_id" value="{{ user.id }}">
 
 {%include "partials/actions/submit_button.html"%}