From 56f2802b4e9f6252a83709141486a94ee15b26eb Mon Sep 17 00:00:00 2001
From: Deepak_K <139794590+Dkghuser@users.noreply.github.com>
Date: Sun, 10 Nov 2024 18:44:04 +0530
Subject: [PATCH 1/4] Create pfid.html
---
.../pfid.html | 58 +++++++++++++++++++
1 file changed, 58 insertions(+)
create mode 100644 Financial Insights Dashboard: Personal Finance Manager/pfid.html
diff --git a/Financial Insights Dashboard: Personal Finance Manager/pfid.html b/Financial Insights Dashboard: Personal Finance Manager/pfid.html
new file mode 100644
index 00000000..f34e15ba
--- /dev/null
+++ b/Financial Insights Dashboard: Personal Finance Manager/pfid.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+ Financial Insights Dashboard: Personal Finance Manager
+
+
+
+
+
+
+
+
+ Personal Finance Dashboard: Comprehensive Financial Management Tool
+
+
+
+
+
+
+
+
+
+ Investment Tracking
+
+
+
+
+
+
+
From b61997e180b2256afc1387cea916ab4e23571361 Mon Sep 17 00:00:00 2001
From: Deepak_K <139794590+Dkghuser@users.noreply.github.com>
Date: Sun, 10 Nov 2024 18:44:49 +0530
Subject: [PATCH 2/4] Create style.css
---
.../style.css | 32 +++++++++++++++++++
1 file changed, 32 insertions(+)
create mode 100644 Financial Insights Dashboard: Personal Finance Manager/style.css
diff --git a/Financial Insights Dashboard: Personal Finance Manager/style.css b/Financial Insights Dashboard: Personal Finance Manager/style.css
new file mode 100644
index 00000000..4e3a5371
--- /dev/null
+++ b/Financial Insights Dashboard: Personal Finance Manager/style.css
@@ -0,0 +1,32 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f0f2f5;
+}
+
+header {
+ background-color: #3b5998;
+ color: white;
+ padding: 1rem;
+ text-align: center;
+}
+
+section {
+ padding: 2rem;
+ border-bottom: 1px solid #ccc;
+}
+
+h2 {
+ color: #3b5998;
+}
+
+input, button {
+ padding: 0.5rem;
+ margin: 0.5rem;
+}
+
+canvas {
+ max-width: 100%;
+ height: auto;
+}
From 9c0abde03336c6b43f56da9cdbd40ba1e37d0e9c Mon Sep 17 00:00:00 2001
From: Deepak_K <139794590+Dkghuser@users.noreply.github.com>
Date: Sun, 10 Nov 2024 18:45:16 +0530
Subject: [PATCH 3/4] Create app.js
---
.../app.js | 52 +++++++++++++++++++
1 file changed, 52 insertions(+)
create mode 100644 Financial Insights Dashboard: Personal Finance Manager/app.js
diff --git a/Financial Insights Dashboard: Personal Finance Manager/app.js b/Financial Insights Dashboard: Personal Finance Manager/app.js
new file mode 100644
index 00000000..08fcf21a
--- /dev/null
+++ b/Financial Insights Dashboard: Personal Finance Manager/app.js
@@ -0,0 +1,52 @@
+import { renderCharts } from './chart.js';
+
+// Initial values
+let monthlyBudget = 0;
+let expenses = [];
+let savingsGoals = [];
+let investments = [
+ { name: 'Stocks', value: 5000 },
+ { name: 'Bonds', value: 2000 },
+ { name: 'Real Estate', value: 3000 }
+];
+
+// Budgeting function
+window.setBudget = function() {
+ monthlyBudget = parseFloat(document.getElementById('budget-input').value) || 0;
+ renderCharts(expenses, monthlyBudget, savingsGoals, investments);
+}
+
+// Expense Tracking function
+window.addExpense = function() {
+ const category = document.getElementById('expense-category').value;
+ const amount = parseFloat(document.getElementById('expense-amount').value) || 0;
+ expenses.push({ category, amount });
+ renderCharts(expenses, monthlyBudget, savingsGoals, investments);
+}
+
+// Savings Goal function
+window.setGoal = function() {
+ const name = document.getElementById('goal-name').value;
+ const amount = parseFloat(document.getElementById('goal-amount').value) || 0;
+ savingsGoals.push({ name, amount });
+ renderCharts(expenses, monthlyBudget, savingsGoals, investments);
+}
+
+// Financial Insights
+function updateInsights() {
+ const insightsDiv = document.getElementById('insights');
+ insightsDiv.innerHTML = `Monthly budget is set to $${monthlyBudget}.
`;
+
+ let totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
+ insightsDiv.innerHTML += `Total spending so far: $${totalExpenses}
`;
+
+ if (totalExpenses > monthlyBudget) {
+ insightsDiv.innerHTML += `Warning: You have exceeded your monthly budget!
`;
+ }
+}
+
+// Initialize charts and insights
+document.addEventListener('DOMContentLoaded', () => {
+ renderCharts(expenses, monthlyBudget, savingsGoals, investments);
+ updateInsights();
+});
From 7a51293acee91808ccce78f1990782a91e99077c Mon Sep 17 00:00:00 2001
From: Deepak_K <139794590+Dkghuser@users.noreply.github.com>
Date: Sun, 10 Nov 2024 18:45:39 +0530
Subject: [PATCH 4/4] Create chart.js
---
.../chart.js | 55 +++++++++++++++++++
1 file changed, 55 insertions(+)
create mode 100644 Financial Insights Dashboard: Personal Finance Manager/chart.js
diff --git a/Financial Insights Dashboard: Personal Finance Manager/chart.js b/Financial Insights Dashboard: Personal Finance Manager/chart.js
new file mode 100644
index 00000000..7d2eeb3e
--- /dev/null
+++ b/Financial Insights Dashboard: Personal Finance Manager/chart.js
@@ -0,0 +1,55 @@
+// chart.js
+
+// Function to render all charts
+function renderCharts(expenses, monthlyBudget, savingsGoals, investments) {
+ // Budget Chart
+ const budgetChart = new Chart(document.getElementById('budgetChart'), {
+ type: 'doughnut',
+ data: {
+ labels: ['Spent', 'Remaining'],
+ datasets: [{
+ data: [expenses.reduce((sum, expense) => sum + expense.amount, 0), monthlyBudget - expenses.reduce((sum, expense) => sum + expense.amount, 0)],
+ backgroundColor: ['#FF6384', '#36A2EB'],
+ }]
+ }
+ });
+
+ // Expense Chart
+ const expenseChart = new Chart(document.getElementById('expenseChart'), {
+ type: 'pie',
+ data: {
+ labels: expenses.map(e => e.category),
+ datasets: [{
+ data: expenses.map(e => e.amount),
+ backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
+ }]
+ }
+ });
+
+ // Savings Goal Chart
+ const goalChart = new Chart(document.getElementById('goalChart'), {
+ type: 'bar',
+ data: {
+ labels: savingsGoals.map(g => g.name),
+ datasets: [{
+ data: savingsGoals.map(g => g.amount),
+ backgroundColor: '#4BC0C0',
+ }]
+ }
+ });
+
+ // Investment Chart
+ const investmentChart = new Chart(document.getElementById('investmentChart'), {
+ type: 'pie',
+ data: {
+ labels: investments.map(i => i.name),
+ datasets: [{
+ data: investments.map(i => i.value),
+ backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+ }]
+ }
+ });
+}
+
+// Export the renderCharts function
+export { renderCharts };