this repo has no description
feat(growth): remove fire calculation
+40
-105
+40
-105
src/app/growth/page.tsx
+40
-105
src/app/growth/page.tsx
···
1
1
"use client";
2
2
3
3
import { useEffect, useState } from "react";
4
-
import {
5
-
Bar,
6
-
BarChart,
7
-
CartesianGrid,
8
-
ReferenceLine,
9
-
XAxis,
10
-
YAxis,
11
-
} from "recharts";
4
+
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
12
5
import {
13
6
Card,
14
-
CardAction,
15
7
CardContent,
16
8
CardDescription,
17
9
CardFooter,
···
26
18
} from "@/components/ui/chart";
27
19
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
28
20
import { Input } from "@/components/ui/input";
29
-
import { getTarget, getTotalFv } from "@/lib/math";
21
+
import { getTotalFv } from "@/lib/math";
30
22
31
23
const chartConfig = {
32
24
contribution: { label: "Contribution" },
···
49
41
50
42
export default function Growth() {
51
43
const [principal, setPrincipal] = useState(100000);
52
-
const [periods, setPeriods] = useState(10);
53
44
const [payment, setPayment] = useState(20000);
54
-
const [rate, setRate] = useState(7 / 100);
55
-
const [spending, setSpending] = useState(40000);
56
-
const [withdrawal, setWithDrawal] = useState(4 / 100);
57
-
const [target, setTarget] = useState(0);
45
+
const [rate, setRate] = useState(10 / 100);
46
+
const [periods, setPeriods] = useState(15);
58
47
const [history, setHistory] = useState<ReturnType<typeof calculate>>([]);
59
48
60
49
useEffect(() => {
···
62
51
Number.isNaN(principal) ||
63
52
Number.isNaN(periods) ||
64
53
Number.isNaN(payment) ||
65
-
Number.isNaN(rate) ||
66
-
Number.isNaN(spending) ||
67
-
Number.isNaN(withdrawal)
54
+
Number.isNaN(rate)
68
55
)
69
56
return;
70
57
71
-
setTarget(getTarget(spending, withdrawal));
72
58
setHistory(calculate(principal, payment, rate, periods));
73
-
}, [principal, periods, payment, rate, spending, withdrawal]);
59
+
}, [principal, periods, payment, rate]);
74
60
75
61
return (
76
62
<main className="flex flex-1 items-center justify-center p-4">
···
78
64
<CardHeader>
79
65
<CardTitle>Growth</CardTitle>
80
66
<CardDescription>
81
-
See how you money can change with time
67
+
See how your money can change with time
82
68
</CardDescription>
83
-
<CardAction>
84
-
In{" "}
85
-
<span className="text-lg leading-none font-bold sm:text-3xl">
86
-
{Math.ceil(periods * 100) / 100}
87
-
</span>{" "}
88
-
years.
89
-
</CardAction>
90
69
</CardHeader>
91
70
<CardContent>
92
71
<ChartContainer config={chartConfig}>
···
95
74
<XAxis dataKey="period" />
96
75
<YAxis />
97
76
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
98
-
<ReferenceLine y={target} />
99
-
<Bar
100
-
dataKey="contribution"
101
-
stackId="a"
102
-
fill="var(--chart-1)"
103
-
radius={[0, 0, 4, 4]}
104
-
/>
105
-
<Bar
106
-
dataKey="interest"
107
-
stackId="a"
108
-
fill="var(--chart-2)"
109
-
radius={[4, 4, 0, 0]}
110
-
/>
77
+
<Bar dataKey="contribution" stackId="a" fill="var(--chart-1)" />
78
+
<Bar dataKey="interest" stackId="a" fill="var(--chart-2)" />
111
79
</BarChart>
112
80
</ChartContainer>
113
81
</CardContent>
114
82
<CardFooter>
115
83
<FieldGroup>
116
84
<div className="grid grid-cols-2 gap-4">
117
-
<Field>
118
-
<FieldLabel htmlFor="principal">Principal</FieldLabel>
119
-
<Input
120
-
id="principal"
121
-
type="number"
122
-
value={principal}
123
-
onChange={(e) =>
124
-
setPrincipal(Number.parseInt(e.target.value, 10))
125
-
}
126
-
/>
127
-
</Field>
128
-
<Field>
129
-
<FieldLabel htmlFor="periods">Periods</FieldLabel>
130
-
<Input
131
-
id="periods"
132
-
type="number"
133
-
value={periods}
134
-
onChange={(e) =>
135
-
setPeriods(Number.parseInt(e.target.value, 10))
136
-
}
137
-
/>
138
-
</Field>
139
-
<Field>
140
-
<FieldLabel htmlFor="payment">Payment</FieldLabel>
141
-
<Input
142
-
id="payment"
143
-
type="number"
144
-
value={payment}
145
-
onChange={(e) =>
146
-
setPayment(Number.parseInt(e.target.value, 10))
147
-
}
148
-
/>
149
-
</Field>
150
-
<Field>
151
-
<FieldLabel htmlFor="rate">Rate</FieldLabel>
152
-
<Input
153
-
id="rate"
154
-
type="number"
155
-
value={rate}
156
-
onChange={(e) => setRate(Number.parseFloat(e.target.value))}
157
-
/>
158
-
</Field>
159
-
<Field>
160
-
<FieldLabel htmlFor="spending">Spending</FieldLabel>
161
-
<Input
162
-
id="spending"
163
-
type="number"
164
-
value={spending}
165
-
onChange={(e) =>
166
-
setSpending(Number.parseInt(e.target.value, 10))
167
-
}
168
-
/>
169
-
</Field>
170
-
<Field>
171
-
<FieldLabel htmlFor="withdrawal">WithDrawal</FieldLabel>
172
-
<Input
173
-
id="withdrawal"
174
-
type="number"
175
-
value={withdrawal}
176
-
onChange={(e) =>
177
-
setWithDrawal(Number.parseFloat(e.target.value))
178
-
}
179
-
/>
180
-
</Field>
85
+
{[
86
+
{
87
+
id: "principal",
88
+
label: "Principal",
89
+
val: principal,
90
+
set: setPrincipal,
91
+
},
92
+
{
93
+
id: "payment",
94
+
label: "Payment",
95
+
val: payment,
96
+
set: setPayment,
97
+
},
98
+
{ id: "rate", label: "Rate", val: rate, set: setRate },
99
+
{
100
+
id: "periods",
101
+
label: "Periods",
102
+
val: periods,
103
+
set: setPeriods,
104
+
},
105
+
].map(({ id, label, val, set }) => (
106
+
<Field key={id}>
107
+
<FieldLabel htmlFor={id}>{label}</FieldLabel>
108
+
<Input
109
+
id={id}
110
+
type="number"
111
+
value={val}
112
+
onChange={(e) => set(parseFloat(e.target.value) || 0)}
113
+
/>
114
+
</Field>
115
+
))}
181
116
</div>
182
117
</FieldGroup>
183
118
</CardFooter>