78 lines
1.8 KiB
Svelte
78 lines
1.8 KiB
Svelte
<script>
|
|
import TransactionList from '$lib/transactionList.svelte';
|
|
import { echarts } from '$lib/echarts';
|
|
|
|
let { data } = $props();
|
|
let total = $derived(data.total);
|
|
let unallocatedTrans = $derived(data.unallocatedTrans);
|
|
let underAllocatedTrans = $derived(data.underAllocatedTrans);
|
|
let budgets = $derived(data.budgets);
|
|
let budgetTransactions = $derived(data.budgetTransactions);
|
|
let last30days = $derived(data.last30DaysTransactionsSums.reverse());
|
|
|
|
let chartData = $derived(
|
|
last30days.reduce(
|
|
(acc, curr) => [...acc, acc[acc.length - 1] + Number(curr.sum)],
|
|
[Number(total)]
|
|
)
|
|
);
|
|
|
|
let chartDates = $derived([
|
|
'now',
|
|
...last30days.map((day) => `${day.date.getMonth() + 1}/${day.date.getDate()}`)
|
|
]);
|
|
|
|
const option = $derived({
|
|
xAxis: {
|
|
type: 'category',
|
|
data: chartDates
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: chartData,
|
|
type: 'line',
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
formatter: (params) => {
|
|
return `$${params.value.toFixed(2)}`;
|
|
},
|
|
fontSize: 20,
|
|
padding: 10,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
|
borderRadius: 5
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true // Labels appear on hover
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<span class="font-sans text-xl"
|
|
>Total Net Worth: <span class="{total > 0 ? 'bg-green-500' : 'bg-red-500'} pl-2 pr-2 rounded-lg"
|
|
>${total}</span
|
|
></span
|
|
>
|
|
|
|
<div class="container" use:echarts={option} />
|
|
|
|
<div class="text-xl divider">Unallocated Transactions</div>
|
|
<TransactionList {budgets} {budgetTransactions} transactions={unallocatedTrans} />
|
|
|
|
<div class="text-xl divider">Underallocated Transactions</div>
|
|
<TransactionList {budgets} {budgetTransactions} transactions={underAllocatedTrans} />
|
|
|
|
<style>
|
|
.container {
|
|
height: 500px;
|
|
width: 100%;
|
|
}
|
|
</style>
|