253 lines
8.3 KiB
HTML
253 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="static/styles/bulma-0.9.3.css">
|
|
<link rel="stylesheet" href="static/styles/custom.css" type="text/css"/>
|
|
<link rel="stylesheet" href="static/dist.css" type="text/css"/>
|
|
<title>₹ Paisa</title>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<span class="navbar-item is-size-4 has-text-weight-medium">₹ Paisa</span>
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<a id="overview" class="navbar-item is-active">Overview</a>
|
|
<a id="investment" class="navbar-item">Investment</a>
|
|
<a id="gain" class="navbar-item">Gain</a>
|
|
<a id="income" class="navbar-item">Income</a>
|
|
<a id="allocation" class="navbar-item">Allocation</a>
|
|
<a id="ledger" class="navbar-item">Ledger</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<section class="section tab-overview">
|
|
<div class="container">
|
|
<nav class="level">
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Net worth</p>
|
|
<p class="d3-networth title"></p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Investment</p>
|
|
<p class="d3-investment title"></p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Withdrawal</p>
|
|
<p class="d3-withdrawal title"></p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="heading">Gain</p>
|
|
<p class="d3-gains title"></p>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-overview">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<svg id="d3-overview-timeline" width="100%" height="500"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div>
|
|
<p class="heading">Networth Timeline</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div id="d3-overview-timeline-breakdown" class="column is-12">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-investment">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<svg id="d3-investment-timeline" width="100%" height="500"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div>
|
|
<p class="heading">Monthly Investment Timeline</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-investment">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-6">
|
|
<svg id="d3-yearly-investment-timeline" width="100%" height="300"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-6 has-text-centered">
|
|
<div>
|
|
<p class="heading">Yearly Investment Timeline</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-gain">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<svg id="d3-gain-legend" width="100%" height="50"></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container is-fluid d3-gain-timeline-breakdown">
|
|
<div class="columns">
|
|
<div id="d3-gain-timeline-breakdown" class="column is-12">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-income">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<svg id="d3-income-timeline" width="100%" height="500"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div>
|
|
<p class="heading">Monthly Income Timeline</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-allocation">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div id="d3-allocation-category" width="100%" style="height: 500px" height="500"></div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div>
|
|
<p class="heading">Allocation by category</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-allocation">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div id="d3-allocation-value" width="100%" style="height: 300px" height="300"></div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div>
|
|
<p class="heading">Allocation by value</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-allocation">
|
|
<div class="container is-fluid">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<svg id="d3-allocation-timeline" width="100%" height="300"></svg>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-12 has-text-centered">
|
|
<div>
|
|
<p class="heading">Allocation Timeline</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section tab-ledger">
|
|
<div class="container is-fluid">
|
|
<nav class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<p class="subtitle is-5">
|
|
Postings
|
|
</p>
|
|
</div>
|
|
<div class="level-item">
|
|
<div class="field">
|
|
<p class="control">
|
|
<input class="d3-posting-filter input" style="width: 440px" type="text" placeholder="filter account">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="columns">
|
|
<div class="column is-6">
|
|
<table class="table is-narrow is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Account</th>
|
|
<th class='has-text-right'>Amount</th>
|
|
<th class='has-text-right'>Market Value</th>
|
|
<th class='has-text-right'>Change</th>
|
|
<th class='has-text-right'>CAGR</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="d3-postings">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="column is-6">
|
|
<table class="table is-narrow is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>Account</th>
|
|
<th class='has-text-right'>Investment Amount</th>
|
|
<th class='has-text-right'>Withdrawal Amount</th>
|
|
<th class='has-text-right'>Market Value</th>
|
|
<th class='has-text-right'>Change</th>
|
|
<th class='has-text-right'>XIRR</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="d3-postings-breakdown">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="static/dist.js"></script>
|
|
</body>
|
|
</html>
|