105 lines
2.8 KiB
HTML
105 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" integrity="sha256-SiHXR50l06UwJvHhFY4e5vzwq75vEHH+8fFNpkXePr0=" crossorigin="anonymous"></script>
|
|
|
|
<script type="text/javascript">
|
|
Chart.defaults.global.hover.mode = 'nearest';
|
|
var ctx = document.getElementById("transchart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {{ labelslist | safe }},
|
|
datasets: [{
|
|
data: {{ translist }},
|
|
fill: false,
|
|
borderColor: "rgb(75, 192, 192)",
|
|
lineTension:0.1 }]
|
|
},
|
|
options: {
|
|
hover: {
|
|
// Overrides the global setting
|
|
mode: 'index'
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero:true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block page_content %}
|
|
<div class="row">
|
|
{% block sidebar %}
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
{% include "/settings/acc_avatar.html" %}
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">Wallet Graph</div>
|
|
<div class="panel-body">
|
|
<canvas id="transchart" height="80"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<div class="col-md-12">
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">Last 20 Transactions</div>
|
|
<div class="panel-body">
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-striped table-condensed cf">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Description</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% for transaction in transactions %}
|
|
{% if transaction.value < 0 %}
|
|
<tr class="default">
|
|
<td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
|
|
<td data-title="Description">{{ transaction.description }}</td>
|
|
<td data-title="Amount">{{ transaction.value|abs }} {{ transaction.currency }}</td>
|
|
{% else %}
|
|
<tr class="default">
|
|
<td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
|
|
<td data-title="Description">{{ transaction.description }}</td>
|
|
<td data-title="Amount">{{ transaction.value|abs }} {{ transaction.currency }}</td>
|
|
{% endif %}
|
|
</tr>
|
|
</tbody>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|