Skip to content

Instantly share code, notes, and snippets.

@maan-singh

maan-singh/txn_overview.html

Created July 11, 2024 05:07
Show Gist options
  • Save maan-singh/cfaba95b748b2c684ed40e762d6f1d21 to your computer and use it in GitHub Desktop.
Save maan-singh/cfaba95b748b2c684ed40e762d6f1d21 to your computer and use it in GitHub Desktop.
Download ZIP
Txn overview file with transactions, income, expenses per day.
Raw
txn_overview.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transactions Overview</title>
<style>
h3, h4 {
text-align: center;
}
.nav-pills .nav-link {
cursor: pointer;
margin-bottom: 30px;
}
/* #chart-container {
width: 800px;
height: 355px;
margin: auto;
} */
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% load static %}
</head>
<body>
<h3>Transactions Overview</h3>
<div class="row">
<div class="col-4">
<h4>Transactions Per Day</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" data-range="5" href="#">5 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-range="10" href="#">10 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-range="15" href="#">15 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-range="30" href="#">30 DAYS</a>
</li>
</ul>
<div id="chart-container">
<canvas id="myChart1"></canvas>
</div>
</div>
<div class="col-4">
<h4>Income Per Day</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" data-range="5" href="#">5 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-range="10" href="#">10 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-range="15" href="#">15 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-range="30" href="#">30 DAYS</a>
</li>
</ul>
<div id="chart-container">
<canvas id="myChart2"></canvas>
</div>
</div>
<div class="col-4">
<h4>Expenses Per Day</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" data-range="5" href="#">5 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-range="10" href="#">10 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-range="15" href="#">15 DAYS</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-range="30" href="#">30 DAYS</a>
</li>
</ul>
<div id="chart-container">
<canvas id="myChart3"></canvas>
</div>
</div>
</div>
<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="{% static 'js/chartUtils.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
let data;
try {
const response = await fetch('/api/transactions/');
data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
new ChartManager('myChart1', data, '.col-4:nth-child(1) .nav-link', filterTransactions);
new ChartManager('myChart2', data, '.col-4:nth-child(2) .nav-link', filterIncome);
new ChartManager('myChart3', data, '.col-4:nth-child(3) .nav-link', filterExpenses);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment