1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
import Category from '../../types/category';
import Gbp from '../../types/currency/gbp';
import Histogram from '../histogram/Histogram'
import './App.css'
function App() {
return (
<>
<Histogram categories={categories} />
</>
)
}
const categories: Category[] = [
{
id: 0,
name: 'Groceries',
currentBalance: new Gbp(71, 37, 1),
currentBudget: {
quantity: new Gbp(65, 0, 1),
period: 7,
},
},
{
id: 1,
name: 'Stationery',
currentBalance: new Gbp(10, 12, -1),
currentBudget: {
quantity: new Gbp(12, 0, 1),
period: 30,
},
},
{
id: 2,
name: 'Holidays',
currentBalance: new Gbp(325, 0, 1),
currentBudget: {
quantity: new Gbp(1000, 0, 1),
period: 365,
},
},
{
id: 3,
name: 'Wages',
currentBalance: new Gbp(1025, 60, -1),
currentBudget: {
quantity: new Gbp(2167, 7, -1),
period: 30.25,
},
},
].map(c => ({ ...c, balanceToBudgetRatio: c.currentBalance.valueOf() / c.currentBudget.quantity.valueOf() }));
export default App
|
