add parsing and displaying of transactions
This commit is contained in:
parent
c0bbe81b02
commit
48c1aac18c
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from "chart.js";
|
||||
import styles from "./Graph.module.sass";
|
||||
|
||||
export default function Graph(props) {
|
||||
Chart.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
const accounts = [
|
||||
...new Set(
|
||||
props.transactions
|
||||
.map((txn) => {
|
||||
return txn.parts.map((part) => {
|
||||
return part.account;
|
||||
});
|
||||
})
|
||||
.flat()
|
||||
),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.graph}>
|
||||
<Line
|
||||
options={{ responsive: true, maintainAspectRatio: false }}
|
||||
data={{
|
||||
labels: ["JAN", "FEB", "MAR"],
|
||||
datasets: accounts.map((account) => {
|
||||
return {
|
||||
label: account,
|
||||
data: [1, 2, 4],
|
||||
// backgroundColor: getComputedStyle(
|
||||
// document.documentElement
|
||||
// ).getPropertyValue("--color-blue"),
|
||||
// borderColor: document.documentElement.style.getPropertyValue("--color-blue"),
|
||||
};
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.graph
|
||||
border-radius: var(--card-radius)
|
||||
background-color: var(--color-white)
|
||||
margin: 10px
|
||||
padding: 20px
|
||||
width: 60%
|
||||
height: 20vh
|
||||
font-family: "Montserrat"
|
||||
font-weight: 300
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import React from "react";
|
||||
import styles from "./Overview.module.sass";
|
||||
|
||||
export default function Overview(props) {
|
||||
const accounts = [...new Set(props.transactions.map((txn) => {
|
||||
return txn.parts.map((part) => {
|
||||
return part.account;
|
||||
});
|
||||
}).flat())];
|
||||
console.log(accounts)
|
||||
return <div className={styles.overview_card}>
|
||||
<pre>
|
||||
{JSON.stringify(props.stats, null, 2)}
|
||||
</pre>
|
||||
</div>;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.overview_card
|
||||
border-radius: var(--card-radius)
|
||||
background-color: var(--color-white)
|
||||
margin: 10px
|
||||
padding: 20px
|
||||
width: 36%
|
||||
height: 20vh
|
||||
font-family: "Montserrat"
|
||||
font-weight: 300
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react";
|
||||
import styles from "./Transaction.module.sass"
|
||||
|
||||
export default function Transaction(props) {
|
||||
// console.log(props);
|
||||
return (
|
||||
<div className={styles.transaction_card}>
|
||||
<span className={styles.transaction_date}>{props.date}</span>
|
||||
<span className={styles.transaction_type}>{props.type}</span>
|
||||
<span className={styles.transaction_payee}>{props.payee}</span>
|
||||
<span className={styles.transaction_descr}>{props.descr}</span>
|
||||
{props.parts &&
|
||||
props.parts.map((part, index) => {
|
||||
return (
|
||||
<>
|
||||
<span className={styles.transaction_extract} key={"extract" + index}>
|
||||
{part.extract ? <i class="fa-regular fa-circle-left"></i> : <i class="fa-regular fa-circle-right"></i> }
|
||||
</span>
|
||||
<span className={styles.transaction_account} key={"account"+index}>{part.account || " "}</span>
|
||||
<span className={styles.transaction_amount} key={"amount"+index}>{part.amount || " "}</span>
|
||||
<span className={styles.transaction_currency} key={"currency"+index}>{part.currency || " "}</span>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.transaction_card
|
||||
border-radius: var(--card-radius)
|
||||
background-color: var(--color-white)
|
||||
margin: 10px
|
||||
padding: 20px
|
||||
width: 100%
|
||||
font-family: "Montserrat"
|
||||
font-weight: 300
|
||||
display: grid
|
||||
grid-template-columns: .5fr 2fr 1fr 3fr 3fr 3fr
|
||||
|
||||
p
|
||||
margin: 0
|
||||
margin-left: 30px
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
justify-items: flex-begin
|
||||
width: calc(100% - 30px)
|
||||
|
||||
.transaction_date,
|
||||
.transaction_payee,
|
||||
.transaction_type,
|
||||
.transaction_descr
|
||||
margin-bottom: 10px
|
||||
padding-bottom: 10px
|
||||
font-size: 1.2rem
|
||||
border-bottom: 1px solid var(--color-blue)
|
||||
|
||||
.transaction_date
|
||||
grid-column: 1 / span 2
|
||||
.transaction_payee
|
||||
grid-column: 4 / span 1
|
||||
.transaction_type
|
||||
grid-column: 3 / span 1
|
||||
.transaction_descr
|
||||
grid-column: 5 / span 2
|
||||
|
||||
.transaction_amount
|
||||
grid-column: 5 / span 1
|
||||
text-align: right
|
||||
padding-right: 10px
|
||||
.transaction_account
|
||||
grid-column: 2 / span 3
|
||||
.transaction_extract
|
||||
grid_column: 1 / span 1
|
||||
color: var(--color-blue)
|
||||
|
|
@ -8,8 +8,10 @@
|
|||
"name": "bc-next",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"chart.js": "^3.7.1",
|
||||
"next": "12.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-chartjs-2": "^4.0.1",
|
||||
"react-dom": "17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -647,6 +649,11 @@
|
|||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
|
||||
"integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
|
|
@ -2321,6 +2328,15 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-chartjs-2": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
|
||||
"integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
|
||||
"peerDependencies": {
|
||||
"chart.js": "^3.5.0",
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
|
|
@ -3224,6 +3240,11 @@
|
|||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
|
||||
"integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
|
|
@ -4456,6 +4477,12 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-chartjs-2": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
|
||||
"integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"chart.js": "^3.7.1",
|
||||
"next": "12.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-chartjs-2": "^4.0.1",
|
||||
"react-dom": "17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
import '../styles/globals.css'
|
||||
import '../styles/globals.scss'
|
||||
import Script from 'next/script'
|
||||
import Head from 'next/head'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
return (
|
||||
<>
|
||||
<Script src="https://kit.fontawesome.com/7bb3411482.js" crossorigin="anonymous"/>
|
||||
<Component {...pageProps } />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
|
|
|
|||
|
|
@ -3,3 +3,63 @@
|
|||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
|
||||
export function parseBeanCount(content) {
|
||||
// console.log(content)
|
||||
const lines = content.split(/\r?\n/)
|
||||
|
||||
var statements = []
|
||||
var statement = { parts: [], type: null, _zs: 0 }
|
||||
|
||||
// stats
|
||||
var stats = {}
|
||||
stats.time = {}
|
||||
stats.time.interval = [null, null]
|
||||
|
||||
for (const [ix, line] of lines.entries()) {
|
||||
|
||||
if (line.match(/^\s*$/)) {
|
||||
if (statement.type !== null) {
|
||||
if (statement.parts.every(({amount}) => {return amount === ''})) {
|
||||
throw(`missing transaction amount (:${ix+1})`)
|
||||
}
|
||||
statements.push(statement)
|
||||
statement = { parts: [], type: null, _zs: 0 }
|
||||
}
|
||||
} else if (statement.type === null) {
|
||||
try {
|
||||
const { date, type, payee, descr } = line.match(/(?<date>\d{4}-\d{2}-\d{2}) (?<type>(txn|\!|\*)) ("|')(?<payee>[\w\s\d]*)("|') ("|')(?<descr>[\w\d\s]*)("|')/).groups
|
||||
statement.type = type
|
||||
statement.date = date
|
||||
statement.payee = payee
|
||||
statement.descr = descr;
|
||||
|
||||
const d = new Date(date)
|
||||
if (d && stats.time.interval[0] && stats.time.interval) {
|
||||
stats.time.interval = [(d < stats.time.interval[0]) ? d :stats.time.interval[0], (d > stats.time.interval[1]) ? d : stats.time.interval[1]]
|
||||
} else if (d) {
|
||||
stats.time.interval = [d, d]
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`could not parse an operation (line ${ix + 1})`)
|
||||
throw(`Could not parse beancount file (:${ix+1}, ${error}])`)
|
||||
}
|
||||
} else {
|
||||
const groups = line.match(/\s+(?<account>[:\w\d]+)(\s+(?<amount>[-.\d]+)\s+(?<currency>\w+))?/).groups
|
||||
const amount = parseFloat(groups.amount) || null
|
||||
const currency = groups.currency || null
|
||||
console.log(amount, statement._zs)
|
||||
const extract = groups.amount < 0
|
||||
statement.parts.push({
|
||||
...groups, amount, extract, currency
|
||||
})
|
||||
statement._zs += amount
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
stats.time.range = (stats.time.interval[1] - stats.time.interval[0]) / 1000 / 60 / 60 / 24 // now in days
|
||||
stats.time.interval = [stats.time.interval[0].toISOString().slice(0,10), stats.time.interval[1].toISOString().slice(0,10)]
|
||||
|
||||
return { statements, stats }
|
||||
}
|
||||
|
|
@ -1,69 +1,47 @@
|
|||
import Head from 'next/head'
|
||||
import Image from 'next/image'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import { parseBeanCount } from "./api/hello";
|
||||
import Transaction from "../components/Transaction/Transaction";
|
||||
import Graph from "../components/Graph/Graph";
|
||||
import Overview from "../components/Overview/Overview";
|
||||
|
||||
export default function Home() {
|
||||
export default function Home({statements, stats}) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<title></title>
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className={styles.main}>
|
||||
<h1 className={styles.title}>
|
||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
||||
</h1>
|
||||
|
||||
<p className={styles.description}>
|
||||
Get started by editing{' '}
|
||||
<code className={styles.code}>pages/index.js</code>
|
||||
</p>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
||||
<h2>Documentation →</h2>
|
||||
<p>Find in-depth information about Next.js features and API.</p>
|
||||
</a>
|
||||
|
||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
||||
<h2>Learn →</h2>
|
||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/vercel/next.js/tree/canary/examples"
|
||||
className={styles.card}
|
||||
>
|
||||
<h2>Examples →</h2>
|
||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
>
|
||||
<h2>Deploy →</h2>
|
||||
<p>
|
||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
<Graph transactions={statements}/>
|
||||
<Overview transactions={statements} stats={stats} />
|
||||
{statements && statements.map((item, index) => {
|
||||
return <Transaction {...item} key={index}/>
|
||||
})}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Powered by{' '}
|
||||
<span className={styles.logo}>
|
||||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
|
||||
</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export async function getStaticProps() {
|
||||
const { statements, stats } = parseBeanCount(`
|
||||
2014-05-05 txn 'Cafe Mogador' 'Lamb tagine with wine'
|
||||
Liabilities:CreditCard:CapitalOne -37.5 USD
|
||||
Expenses:Restaurant
|
||||
|
||||
2013-06-04 * 'Cafe A' 'hi'
|
||||
Liabilities:CapitalOne -37.45 USD
|
||||
Expenses:Restaurant
|
||||
`)
|
||||
return {
|
||||
props: { statements, stats }
|
||||
}
|
||||
}
|
||||
|
|
@ -70,7 +70,8 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
width: 80vw;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Font Awesome 6", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
background-color: var(--color-gray)
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
--color-white: #ffffff;
|
||||
--color-gray: #f0f0f0;
|
||||
--color-blue: #b4dadb;
|
||||
--color-accent: #457b9d;
|
||||
--color-warn: #a31420;
|
||||
--color-dark: #1d3557;
|
||||
|
||||
--card-radius: 10px;
|
||||
}
|
||||
Loading…
Reference in New Issue