diff --git a/src/bankData.ts b/src/bankData.ts new file mode 100644 index 0000000..e1243bf --- /dev/null +++ b/src/bankData.ts @@ -0,0 +1 @@ +export const transactions: Array = []; \ No newline at end of file diff --git a/src/generateCharts.ts b/src/generateCharts.ts new file mode 100644 index 0000000..85587df --- /dev/null +++ b/src/generateCharts.ts @@ -0,0 +1,129 @@ +import { transactions } from "./bankData"; +import Chart from 'chart.js/auto'; + +export default function generateCharts(): void { + // const filter: Filter = { year: 2022, category: 'Eating out', excludeIncome: true}; + const filter: Filter = { year: 2022, excludeIncome: true}; + // const filter: Filter = { year: 2022, month: 1, excludeIncome: true}; + const chartData = getChartData(transactions, filter); + console.log('chartData', chartData); + + const ctx = document.getElementById('myChart') as HTMLCanvasElement; + const myChart = new Chart(ctx, { + type: 'bar', + data: chartData, + options: { + responsive: true, + scales: { + x: { + stacked: true, + }, + y: { + stacked: true + } + } + } + }); +} + +function getRandomColor(): string { + // Generate a random color in hexadecimal format + const color = Math.floor(Math.random() * 0x1000000).toString(16); + return '#' + ('000000' + color).slice(-6); +} + +function getChartData(transactions: BankTransaction[], filters: { year?: number, month?: number, category?: string, excludeIncome?: boolean } | null | undefined): ChartData { + // Return an empty chart data object if no filters are provided + if (!filters) { + return { + labels: [], + datasets: [] + }; + } + + // Filter the transactions based on the specified filters + const filteredTransactions = transactions.filter(transaction => { + if (filters.year && transaction.dateYear !== filters.year) { + return false; + } + if (filters.month && transaction.dateMonth !== filters.month) { + return false; + } + if (filters.category && transaction.category !== filters.category) { + return false; + } + return true; + }); + + // Group the transactions by year or month, depending on the filters + const groupedTransactions: { [key: string]: BankTransaction[] } = {}; + if (filters.year && !filters.month) { + // Group the transactions by month + for (const transaction of filteredTransactions) { + if (filters.excludeIncome && transaction.amount < 0) { + continue; // Skip transactions with a positive amount if excludeIncome is true + } + const month = `${transaction.dateYear}-${transaction.dateMonth}`; + if (!groupedTransactions[month]) { + groupedTransactions[month] = []; + } + groupedTransactions[month].push(transaction); + } + } else { + // Group the transactions by year + for (const transaction of filteredTransactions) { + if (filters.excludeIncome && transaction.amount < 0) { + continue; // Skip transactions with a positive amount if excludeIncome is true + } + const year = transaction.dateYear.toString(); + if (!groupedTransactions[year]) { + groupedTransactions[year] = []; + } + groupedTransactions[year].push(transaction); + } + } + + // Create the chart data object + const chartData: ChartData = { + labels: [], + datasets: [] + }; + + // Add a dataset for each category + const categories: { [key: string]: string } = {}; + for (const year in groupedTransactions) { + for (let index = 0; index < groupedTransactions[year].length; index++) { + const transaction = groupedTransactions[year][index]; + if (!categories[transaction.category]) { + categories[transaction.category] = getRandomColor(); + chartData.datasets.push({ + label: transaction.category, + data: [], + backgroundColor: categories[transaction.category] + }); + } + } + console.log('here'); + + // Populate the chart data with the transaction amounts + for (const year in groupedTransactions) { + chartData.labels.push(year); + for (let i = 0; i < chartData.datasets.length; i++) { + chartData.datasets[i].data.push(0); + } + for (const transaction of groupedTransactions[year]) { + for (let i = 0; i < chartData.datasets.length; i++) { + if (chartData.datasets[i].label === transaction.category) { + chartData.datasets[i].data[chartData.labels.length - 1] += transaction.amount; + break; + } + } + } + } + + + + return chartData; + } +} + diff --git a/src/index.ts b/src/index.ts index b95b01f..e8e1e9e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,6 @@ import loadServiceWorker from './loadServiceWorker'; -import Chart from 'chart.js/auto'; +import loadBankData from './loadBankData'; +import generateCharts from './generateCharts'; require('./assets/favicon.ico'); require('./assets/android-chrome-192x192.png'); @@ -12,26 +13,12 @@ require('./styles/buttons.scss'); require('./styles/modal.scss'); require('./styles/spinner.scss'); -const ctx: HTMLCanvasElement = document.getElementById('myChart'); +if (localStorage.hasOwnProperty('bankData')) { + loadBankData(JSON.parse(localStorage.getItem('bankData')).values); + generateCharts(); +} + -new Chart(ctx, { - type: 'bar', - data: { - labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], - datasets: [{ - label: '# of Votes', - data: [12, 19, 3, 5, 2, 3], - borderWidth: 1 - }] - }, - options: { - scales: { - y: { - beginAtZero: true - } - } - } -}); if (process.env.NODE_ENV === 'production') { loadServiceWorker(); diff --git a/src/loadBankData.ts b/src/loadBankData.ts new file mode 100644 index 0000000..827a077 --- /dev/null +++ b/src/loadBankData.ts @@ -0,0 +1,29 @@ +import { transactions } from "./bankData"; + +export default function loadBankData(data: Array):void { + // Set bankData array to be whatever this new data is + for (let index = 0; index < data.length; index++) { + const dateParts: Array = data[index][0].split("/"); + const date: Date = new Date(Number(dateParts[2]), Number(dateParts[1])-1, Number(dateParts[0])); // JS months are zero-indexed + const year: number = date.getFullYear(); + const month: number = date.getMonth(); + const day: number = date.getDay(); + + const transaction: BankTransaction = { + date: data[index][0], + dateYear: year, + dateMonth: month + 1, // JS months are zero-indexed + dateDay: day, + time: data[index][1], + type: data[index][2], + name: data[index][3], + category: data[index][5], + amount: Number(data[index][6]) * -1, // Invert money out being negative and money in being positive + currency: data[index][7], + localAmount: Number(data[index][8]) * -1, // Invert money out being negative and money in being positive + localCurrency: data[index][9], + }; + + transactions.push(transaction); + } +} \ No newline at end of file diff --git a/src/template.html b/src/template.html index cfcb24f..2b7c798 100644 --- a/src/template.html +++ b/src/template.html @@ -45,11 +45,6 @@ - - - - -