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">

src/db/_account_history.rs

@@ -24,7 +24,7 @@ impl AccountHistory {
 
 pub fn get_account_history(tx: &Connection, account_id: &AccountId) -> CustomResult<AccountHistory> {
     let q = "
-        SELECT amount, CAST(timestamp AS INT) AS timestamp
+        SELECT amount, UNIXEPOCH(timestamp) AS timestamp
         FROM accounts_history
         WHERE account_id = ?1
         ORDER BY account_version ASC

src/services/_accounts.rs

@@ -22,9 +22,10 @@ pub struct AccountDTO {
     pub label: String,
 }
 
-#[derive(Deserialize, Serialize, Debug)]
+#[derive(Serialize, Debug)]
 pub struct AccountHistoryDTO {
-
+    amounts: Vec<i64>,
+    timestamps: Vec<i64>,
 }
 
 impl AccountDTO {
@@ -72,9 +73,14 @@ impl AccountService<'_> {
         Ok(AccountDTO::from_entity(ret))
     }
 
-    pub fn get_account_history_by_id(&self, account_id: &AccountId, user_id: &UserId) -> CustomResult<()> {
+    pub fn get_account_history_by_id(&self, account_id: &AccountId, user_id: &UserId) -> CustomResult<AccountHistoryDTO> {
-        let ret = account_history::get_account_history(self.conn, account_id)?;
+        let ac = account_history::get_account_history(self.conn, account_id)?;
+        // ret.account()
+        let ret = AccountHistoryDTO{
+            amounts: ac.amount().clone(),
+            timestamps: ac.timestamps().clone(),
+        };
 
-        Ok(())
+        Ok(ret)
     }
 }

src/webui/views.rs

@@ -45,7 +45,8 @@ pub async fn get_account(tmpl_env: MiniJinjaRenderer,
     let user_id = auth_service.get_login(&req).unwrap();
 
     let ctx = context!{
-        account => account_service.get_account_by_id(&account_id, &user_id).map_err(error::ErrorInternalServerError)?
+        account => account_service.get_account_by_id(&account_id, &user_id).map_err(error::ErrorInternalServerError)?,
+        account_history => account_service.get_account_history_by_id(&account_id, &user_id).map_err(error::ErrorInternalServerError)?
     };
     tmpl_env.render("account.html", ctx)
 }