const usd = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
const categories = data.data.transactions.reduce((xs, x) => { xs[x.Category] = null; return xs; }, {});
function sortTransactions(transactions) {
return [...transactions].sort((x, y) => {
if (x.Outflow < y.Outflow) {
return 1;
} else if (x.Outflow > y.Outflow) {
return -1;
} else {
return 0;
}
});
}
function transactionKey(x) {
const keys = [
'Account',
'Flag',
'Date',
'Payee',
'Category',
'Memo',
'Outflow',
'Inflow',
'Cleared',
];
return keys.map(k => x[k]).join('|');
}
class App extends React.Component {
constructor(props) {
super(props);
const query = 'Account:/checking/ after:"01/01/2022" before:"01/01/2023"';
this.state = {
query,
transactions: select(query, data.data.transactions),
saved: {},
focus: {
1000: false,
100: false,
10: false,
1: false,
0.1: false,
},
};
}
render() {
const sum = this.state.transactions.reduce((acc, { Outflow }) => acc + Outflow, 0);
const savedSum = Object.values(this.state.saved).reduce((acc, sum) => acc + sum, 0);
return (
<div className="container">
<select>
{Object.keys(categories).map(x => (
<option value={x} key={x}>{x}</option>
))}
</select>
<Input
query={this.state.query}
onChange={query => this.setState({
query,
})}
onFilter={() => this.setState({
transactions: select(this.state.query, data.data.transactions),
})}
onSave={() => this.setState({
saved: { ...this.state.saved, [this.state.query]: sum }
})}
/>
<AggregateTable
focus={this.state.focus}
onFocus={(n) => this.setState({
focus: { ...this.state.focus, [n]: !this.state.focus[n] },
})}
transactions={this.state.transactions}
/>
<hr />
<div>
<ul>
{Object.keys(this.state.saved).map(k => (
<li key={k}>
{usd.format(this.state.saved[k])} {k}
</li>
))}
</ul>
<p>{usd.format(savedSum)}</p>
<button className="btn btn-default" onClick={() => this.setState({ saved: {} })}>clear</button>
</div>
<hr />
<Table
transactions={sortTransactions(this.state.transactions)}
onClick={x => this.setState({
saved: { ...this.state.saved, [transactionKey(x)]: x.Outflow }
})}
/>
</div>
);
}
}
/**
* Table rendering information about transactions bucketed by its order of
* magnitude.
*/
const Magnitable = ({ label, transactions }) => {
const categories = transactions.reduce((acc, x) => {
if (x.Category === '') {
return acc;
}
if (!(x.Category in acc)) {
acc[x.Category] = 0;
}
acc[x.Category] += x.Outflow;
return acc;
}, {});
// Sort category keys by sum decreasing.
const keys = [...Object.keys(categories)].sort((x, y) => {
if (categories[x] < categories[y]) {
return 1;
} else if (categories[x] > categories[y]) {
return -1;
} else {
return 0;
}
});
return (
<React.Fragment>
{keys.map(k => (
<tr style={{backgroundColor: '#F0F8FF'}}>
<td>{k}</td><td>{usd.format(categories[k])}</td>
</tr>
))}
</React.Fragment>
);
};
/**
* Calculates and renders various aggregates over an input list of transactions.
*/
const AggregateTable = ({ focus, onFocus, transactions }) => {
const sum = transactions.reduce((acc, x) => acc + x.Outflow, 0);
const buckets = transactions.reduce((acc, x) => {
const order = Math.floor(Math.log(x.Outflow) / Math.LN10 + 0.000000001);
const bucket = Math.pow(10, order);
acc[bucket].push(x);
return acc;
}, {0.1: [], 0: [], 1: [], 10: [], 100: [], 1000: []});
return (
<div>
<table>
<caption>Aggregations</caption>
<thead>
<tr>
<th>function</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr><td>sum</td><td>{usd.format(sum)}</td></tr>
<tr><td>per day</td><td>{usd.format(sum / 365)}</td></tr>
<tr><td>per week</td><td>{usd.format(sum / 52)}</td></tr>
<tr><td>per month</td><td>{usd.format(sum / 12)}</td></tr>
<tr onClick={() => onFocus(1000)}><td>Σ Θ($1,000)</td><td>{usd.format(buckets[1000].reduce((acc, x) => acc + x.Outflow, 0))}</td></tr>
{(focus[1000]) && <Magnitable label="$1,000" transactions={buckets[1000]} />}
<tr onClick={() => onFocus(100)}><td>Σ Θ($100)</td><td>{usd.format(buckets[100].reduce((acc, x) => acc + x.Outflow, 0))}</td></tr>
{(focus[100]) && <Magnitable label="$100" transactions={buckets[100]} />}
<tr onClick={() => onFocus(10)}><td>Σ Θ($10)</td><td>{usd.format(buckets[10].reduce((acc, x) => acc + x.Outflow, 0))}</td></tr>
{(focus[10]) && <Magnitable label="$10" transactions={buckets[10]} />}
<tr onClick={() => onFocus(1)}><td>Σ Θ($1)</td><td>{usd.format(buckets[1].reduce((acc, x) => acc + x.Outflow, 0))}</td></tr>
{(focus[1]) && <Magnitable label="$1.00" transactions={buckets[1]} />}
<tr onClick={() => onFocus(0.1)}><td>Σ Θ($0.10)</td><td>{usd.format(buckets[0.1].reduce((acc, x) => acc + x.Outflow, 0))}</td></tr>
{(focus[0.1]) && <Magnitable label="$0.10" transactions={buckets[0.1]} />}
<tr><td>average</td><td>{usd.format(sum / transactions.length)}</td></tr>
<tr><td>count</td><td>{transactions.length}</td></tr>
</tbody>
</table>
</div>
);
};
const Input = ({ query, onChange, onFilter, onSave }) => (
<fieldset>
<legend>Query</legend>
<div className="form-group">
<input name="query" type="text" value={query} onChange={e => onChange(e.target.value)} />
<div className="btn-group">
<button className="btn btn-default" onClick={() => onFilter()}>Filter</button>
<button className="btn btn-default" onClick={() => onSave()}>Save</button>
</div>
</div>
</fieldset>
);
const Table = ({ transactions, onClick }) => (
<table>
<caption>Transactions</caption>
<thead>
<tr>
<th>Account</th>
<th>Category</th>
<th>Date</th>
<th>Outflow</th>
<th>Payee</th>
<th>Memo</th>
</tr>
</thead>
<tbody>
{transactions.map(x => (
<tr onClick={() => onClick(x)}>
<td>{x.Account}</td>
<td>{x.Category}</td>
<td>{x.Date.toLocaleDateString()}</td>
<td>{usd.format(x.Outflow)}</td>
<td>{x.Payee}</td>
<td>{x.Memo}</td>
</tr>
))}
</tbody>
</table>
);
const domContainer = document.querySelector('#react-mount');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
