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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<script lang="ts">
import NumberStatList from '$lib/components/NumberStatList.svelte';
import type { INumberStatList } from '$lib/components/NumberStatList.svelte';
import RiskAnalysis from '$lib/components/dashboard/RiskAnalysis.svelte';
import StockGraph from '$lib/components/dashboard/StockGraph.svelte';
import TrendingSymbols from '$lib/components/dashboard/TrendingSymbols.svelte';
import { onMount } from 'svelte';
const statsList: INumberStatList[] = [
{
name: 'Portefeuille',
color: 'aqua',
value: `${Math.random().toFixed(3) * 1000}€`,
icon: '/icons/wallet.svg'
},
{
name: 'Revenus',
color: '#1FCB4F',
value: `${Math.random().toFixed(3) * 1000}€`,
icon: '/icons/money-bills.svg'
},
{
name: 'Depenses',
color: 'orange',
value: `${Math.random().toFixed(3) * 1000}€`,
icon: '/icons/credit-card.svg'
},
{
name: 'Eco score',
color: '#1FCB4F',
value: `${Math.random().toFixed(3) * 1000}`,
icon: '/icons/leaf.svg'
}
];
onMount(() => {});
</script>
<section class="dashboard-home">
<NumberStatList {statsList} />
<div class="home-grid">
<div class="card overviewGraph">
<StockGraph />
</div>
<!-- <div class="card riskAnalysis">
<RiskAnalysis />
</div> -->
<!-- <div class="card activity">c</div> -->
<div class="card tendencies">
<TrendingSymbols />
</div>
<!-- <div class="card recentInvestments">e</div> -->
</div>
</section>
<style>
.home-grid {
display: grid;
grid-template-areas:
'overviewGraph overviewGraph overviewGraph'
'tendencies tendencies tendencies';
gap: 16px;
width: calc(100% - 32px);
}
.overviewGraph {
grid-area: overviewGraph;
}
/* .riskAnalysis {
grid-area: riskAnalysis;
}
.activity {
grid-area: activity;
} */
.tendencies {
grid-area: tendencies;
}
/* .recentInvestments {
grid-area: recentInvestments;
} */
</style>
|
