48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
{% set active_navbar_item = 'accounts' %}
|
|
{% set script_chart_js = true %}
|
|
|
|
{% extends "base.html" %}
|
|
|
|
{% block body %}
|
|
|
|
|
|
<table class="uk-table uk-table-divider uk-table-striped uk-table-hover uk-table-small">
|
|
<caption>Summary</caption>
|
|
<tr><th>Micro ID</th><td style="font-family: monospace;">{{ account.id | micro_id }}</td></tr>
|
|
<tr><th>Account ID</th><td style="font-family: monospace;">{{ 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>
|
|
<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>
|
|
|
|
<div id="account-history-chart-2" style="width: 100%"></div>
|
|
|
|
<script>
|
|
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'}
|
|
}
|
|
};
|
|
|
|
// Embed the visualization in the container with id `vis`
|
|
vegaEmbed('#account-history-chart-2', vlSpec);
|
|
</script>
|
|
|
|
{% endblock %} |