kris/etf-trade-tracker
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand from ETF Trade Tracker to Personal Finance Tracker with growth charts

Browse Source 
Update application branding to reflect broader financial tracking capabilities beyond just ETF trades. Add comprehensive growth visualization features with time period selectors and three distinct chart views for portfolio, cash, and total net worth tracking.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kris 2025-12-23 13:58:43 +00:00
parent 8f4899cf8b
commit 4fb0d35daf
3 changed files with 502 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ETF Trade Tracker</title>
<title>Personal Finance Tracker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-container">
<nav class="sidebar">
<div class="sidebar-header">
<h2>ETF Tracker</h2>
<h2>Finance Tracker</h2>
</div>
<ul class="sidebar-menu">
<li class="menu-item active" data-page="dashboard">
@ -80,7 +80,7 @@
<!-- Login Page -->
<div id="login-page" class="page active">
<div class="login-container">
<h2>Login to ETF Tracker</h2>
<h2>Login to Personal Finance Tracker</h2>
<form id="login-form" class="login-form">
<div class="form-group">
<label for="login-username">Username</label>
@ -181,8 +181,63 @@
</div>
</div>
</div>
<!-- Growth Graphs Section -->
<div class="growth-graphs-section">
<div class="graphs-header">
<h2>Growth & Trends</h2>
<div class="time-period-selector">
<button class="period-btn active" data-period="7d">7D</button>
<button class="period-btn" data-period="1m">1M</button>
<button class="period-btn" data-period="3m">3M</button>
<button class="period-btn" data-period="6m">6M</button>
<button class="period-btn" data-period="1y">1Y</button>
</div>
</div>
<div class="graphs-grid">
<div class="graph-card portfolio-graph">
<div class="graph-header">
<h3>Portfolio Value</h3>
<div class="graph-stats">
<span class="current-value" id="portfolio-graph-value">€0.00</span>
<span class="change-indicator" id="portfolio-graph-change">+0.0%</span>
</div>
</div>
<div class="graph-container">
<canvas id="portfolio-chart" class="chart-canvas"></canvas>
</div>
</div>
<div class="graph-card cash-graph">
<div class="graph-header">
<h3>Cash Holdings</h3>
<div class="graph-stats">
<span class="current-value" id="cash-graph-value">€0.00</span>
<span class="change-indicator" id="cash-graph-change">+0.0%</span>
</div>
</div>
<div class="graph-container">
<canvas id="cash-chart" class="chart-canvas"></canvas>
</div>
</div>
<div class="graph-card combined-graph">
<div class="graph-header">
<h3>Total Net Worth</h3>
<div class="graph-stats">
<span class="current-value" id="total-graph-value">€0.00</span>
<span class="change-indicator" id="total-graph-change">+0.0%</span>
</div>
</div>
<div class="graph-container">
<canvas id="total-chart" class="chart-canvas"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Add Trade Page -->
<div id="add-trade-page" class="page">
<div class="trade-form-container">

193
script.js
View File

@ -1,4 +1,4 @@
class ETFTradeTracker {
class PersonalFinanceTracker {
constructor() {
this.trades = [];
this.currentPrices = new Map(); // Store current market prices
@ -793,6 +793,10 @@ class ETFTradeTracker {
// Load and display top accounts for each segment
this.loadDashboardTopAccounts();
// Initialize and update growth charts
this.initializeGrowthCharts();
this.updateGrowthCharts();
}
updateDashboardColors(totalGains) {
@ -3702,6 +3706,191 @@ class ETFTradeTracker {
subscriptionsValue.textContent = '€0.00';
}
}
// Growth Charts Functionality
initializeGrowthCharts() {
// Initialize chart data storage
this.chartData = {
portfolio: [],
cash: [],
total: [],
currentPeriod: '7d'
};
// Bind period selector events
const periodButtons = document.querySelectorAll('.period-btn');
periodButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
// Update active button
periodButtons.forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
// Update period and refresh charts
this.chartData.currentPeriod = e.target.dataset.period;
this.updateGrowthCharts();
});
});
// Generate initial mock data
this.generateMockChartData();
}
generateMockChartData() {
// Generate mock historical data for different time periods
const periods = {
'7d': 7,
'1m': 30,
'3m': 90,
'6m': 180,
'1y': 365
};
Object.keys(periods).forEach(period => {
const days = periods[period];
const portfolioData = [];
const cashData = [];
const totalData = [];
// Get current values as base
const currentPortfolio = this.calculatePortfolioTotals().currentValue;
const currentCash = 5000; // Mock current cash value
const currentTotal = currentPortfolio + currentCash;
// Generate historical values with some growth trend
for (let i = days; i >= 0; i--) {
const date = new Date();
date.setDate(date.getDate() - i);
// Add some randomness but overall upward trend
const growthFactor = Math.pow(1.0008, days - i); // 0.08% daily growth on average
const randomFactor = 0.95 + Math.random() * 0.1; // ±5% random variation
const portfolioValue = currentPortfolio / growthFactor * randomFactor;
const cashValue = currentCash + (Math.random() - 0.5) * 1000; // Cash fluctuates more
portfolioData.push({ date, value: portfolioValue });
cashData.push({ date, value: Math.max(0, cashValue) });
totalData.push({ date, value: portfolioValue + Math.max(0, cashValue) });
}
this.chartData[`portfolio_${period}`] = portfolioData;
this.chartData[`cash_${period}`] = cashData;
this.chartData[`total_${period}`] = totalData;
});
}
updateGrowthCharts() {
const period = this.chartData.currentPeriod;
// Update portfolio chart
this.renderChart('portfolio-chart', this.chartData[`portfolio_${period}`], '#28a745');
this.updateChartStats('portfolio', this.chartData[`portfolio_${period}`]);
// Update cash chart
this.renderChart('cash-chart', this.chartData[`cash_${period}`], '#17a2b8');
this.updateChartStats('cash', this.chartData[`cash_${period}`]);
// Update total chart
this.renderChart('total-chart', this.chartData[`total_${period}`], '#667eea');
this.updateChartStats('total', this.chartData[`total_${period}`]);
}
renderChart(canvasId, data, color) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
// Set canvas size
canvas.width = rect.width * window.devicePixelRatio;
canvas.height = rect.height * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Clear canvas
ctx.clearRect(0, 0, rect.width, rect.height);
if (!data || data.length < 2) return;
// Calculate bounds
const values = data.map(d => d.value);
const minValue = Math.min(...values);
const maxValue = Math.max(...values);
const valueRange = maxValue - minValue;
const padding = 20;
// Draw grid lines
ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--border-light');
ctx.lineWidth = 1;
ctx.setLineDash([2, 2]);
for (let i = 0; i <= 4; i++) {
const y = padding + (i * (rect.height - 2 * padding)) / 4;
ctx.beginPath();
ctx.moveTo(padding, y);
ctx.lineTo(rect.width - padding, y);
ctx.stroke();
}
ctx.setLineDash([]);
// Draw line chart
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.beginPath();
data.forEach((point, index) => {
const x = padding + (index * (rect.width - 2 * padding)) / (data.length - 1);
const y = rect.height - padding - ((point.value - minValue) / valueRange) * (rect.height - 2 * padding);
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.stroke();
// Fill area under curve
ctx.globalAlpha = 0.1;
ctx.fillStyle = color;
ctx.lineTo(rect.width - padding, rect.height - padding);
ctx.lineTo(padding, rect.height - padding);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1;
}
updateChartStats(type, data) {
if (!data || data.length < 2) return;
const latest = data[data.length - 1];
const previous = data[0];
const change = ((latest.value - previous.value) / previous.value) * 100;
// Update value display
const valueElement = document.getElementById(`${type}-graph-value`);
const changeElement = document.getElementById(`${type}-graph-change`);
if (valueElement) {
valueElement.textContent = this.formatCurrency(latest.value, 'EUR');
}
if (changeElement) {
const changeText = `${change >= 0 ? '+' : ''}${change.toFixed(1)}%`;
changeElement.textContent = changeText;
// Update change indicator classes
changeElement.className = 'change-indicator';
if (change > 0) {
changeElement.classList.add('positive');
} else if (change < 0) {
changeElement.classList.add('negative');
} else {
changeElement.classList.add('neutral');
}
}
}
}
const app = new ETFTradeTracker();
const app = new PersonalFinanceTracker();

252
styles.css
View File

@ -942,6 +942,258 @@ body {
border-left-color: var(--info);
}
/* Growth Graphs Section */
.growth-graphs-section {
margin-top: 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.graphs-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.graphs-header h2 {
margin: 0;
color: var(--text-primary);
font-size: 1.5rem;
font-weight: 600;
}
.time-period-selector {
display: flex;
gap: 8px;
background: var(--bg-secondary);
padding: 4px;
border-radius: 8px;
box-shadow: var(--shadow-light);
}
.period-btn {
background: transparent;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.period-btn:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.period-btn.active {
background: var(--accent-primary);
color: white;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.graphs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.graph-card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow-light);
border-left: 4px solid var(--accent-primary);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.graph-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.graph-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.graph-header h3 {
margin: 0;
font-size: 1rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.graph-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.current-value {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
}
.change-indicator {
font-size: 0.8rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
}
.change-indicator.positive {
color: var(--success);
background: var(--success-bg);
}
.change-indicator.negative {
color: var(--danger);
background: var(--danger-bg);
}
.change-indicator.neutral {
color: var(--text-muted);
background: var(--bg-tertiary);
}
.graph-container {
height: 200px;
position: relative;
background: var(--bg-primary);
border-radius: 8px;
padding: 15px;
overflow: hidden;
}
.chart-canvas {
width: 100%;
height: 100%;
display: block;
}
/* Specific graph card styling */
.portfolio-graph {
border-left-color: var(--success);
}
.cash-graph {
border-left-color: var(--info);
}
.combined-graph {
border-left-color: var(--accent-primary);
}
/* Mock chart styling for visual representation */
.mock-chart {
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 0%, var(--accent-primary) 20%, transparent 40%);
opacity: 0.1;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.mock-chart::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: var(--accent-primary);
opacity: 0.6;
transform: translateY(-50%) rotate(-10deg);
}
.mock-chart::after {
content: 'Chart data loading...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-muted);
font-size: 0.9rem;
font-style: italic;
}
/* Responsive design for graphs */
@media (max-width: 768px) {
.graphs-header {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.graphs-header h2 {
text-align: center;
}
.time-period-selector {
justify-content: center;
}
.graphs-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.graph-card {
padding: 15px;
}
.graph-container {
height: 180px;
padding: 10px;
}
.period-btn {
padding: 6px 12px;
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.growth-graphs-section {
margin-top: 30px;
}
.graphs-header h2 {
font-size: 1.3rem;
}
.graph-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 15px;
}
.graph-stats {
align-items: flex-start;
}
.current-value {
font-size: 1.1rem;
}
.graph-container {
height: 160px;
}
}
.dashboard-card.yearly-investment {
border-left-color: var(--accent-purple);
}