Skip to content

Commit 80642e2

Browse files
MonikaFuMonikaFu
authored
Portfolio layout in divs (#52)
* Put everything in divs * comment out map code * Add map
1 parent b8e275c commit 80642e2

File tree

2 files changed

+131
-135
lines changed

2 files changed

+131
-135
lines changed

‎src/js/pie_exploded.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class PieExploded {
2323
// Declare the chart dimensions and margins.
2424
const width = 700;
2525
const height = 500;
26-
const marginTop = 40;
26+
const marginTop = 20;
2727
const marginRight = 40;
2828
const marginBottom = 170;
2929
const marginLeft = 110;

‎src/routes/portfolio_view.svelte‎

Lines changed: 130 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
1515
onMount(() => {
1616
function fetchValuePie() {
17-
new PieExploded(document.querySelector('#valuePieBonds'), bondsValuePieData, 'USD', 'Value covered by PACTA sectors');
18-
new PieExploded(document.querySelector('#valuePieEquity'), equityValuePieData, 'USD', 'Value covered by PACTA sectors');
17+
new PieExploded(document.querySelector('#valuePieBonds'), bondsValuePieData, 'USD', 'of assets\' value covered by PACTA sectors');
18+
new PieExploded(document.querySelector('#valuePieEquity'), equityValuePieData, 'USD', 'of assets\' value covered by PACTA sectors');
1919
}
2020
2121
function fetchEmissionsPie() {
22-
new PieExploded(document.querySelector('#emissionsPieBonds'), bondsEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'Emissions covered by PACTA sectors');
23-
new PieExploded(document.querySelector('#emissionsPieEquity'), equityEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'Emissions covered by PACTA sectors');
22+
new PieExploded(document.querySelector('#emissionsPieBonds'), bondsEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'of assets\' emissions covered by PACTA sectors');
23+
new PieExploded(document.querySelector('#emissionsPieEquity'), equityEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'of assets\' emissions covered by PACTA sectors');
2424
}
2525
2626
function fetchTechmix() {
@@ -48,150 +48,146 @@
4848
});
4949
</script>
5050

51-
<div class="gap-x-4 p-4">
52-
<h2 class="h2">Overview of the current state of the portfolio</h2>
53-
<div class="h-screen flex flex-row gap-x-4">
54-
<div class="card p-4 w-1/2 h-full items-center justify-left">
55-
<h3 class="h3">Asset classes covered by the analysis</h3>
56-
<br />
57-
<p>
58-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
59-
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
60-
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
61-
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
62-
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
63-
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
64-
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
65-
</p>
66-
<br />
67-
<!-- Responsive Container (recommended) -->
68-
<div class="table-container">
69-
<!-- Native Table Element -->
70-
<table class="table table-hover">
71-
<thead>
72-
<tr>
73-
<th>Asset Class</th>
74-
<th>Portfolio value invested (M USD)</th>
75-
<th>Portfolio value invested (%)</th>
76-
<th>Included in the analysis</th>
77-
<th>Value breakout per means of investment</th>
78-
<th></th>
79-
</tr>
80-
</thead>
81-
<tbody>
82-
{#each tableData as row, i}
83-
<tr>
84-
<td>{row['Asset Class']}</td>
85-
<td>{row['Portfolio value invested (M USD)']}</td>
86-
<td>{row['Portfolio value invested (%)']}</td>
87-
<td>{row['Included in the analysis']}</td>
88-
<td>{row['Value breakout per means of investment']}</td>
89-
<td>{row['_']}</td>
90-
</tr>
91-
{/each}
92-
</tbody>
93-
<tfoot>
94-
<tr>
95-
<th colspan="3">This is where we could write a footer.</th>
96-
</tr>
97-
</tfoot>
98-
</table>
99-
</div>
100-
</div>
101-
<div class="card p-4 w-1/2 h-full items-center justify-right">
102-
<h3 class="h3">Portfolio value and emissions covered by PACTA sectors</h3>
103-
<br />
104-
<p>
105-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
106-
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
107-
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
108-
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
109-
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
110-
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
111-
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
112-
</p>
113-
<div class="card p-4 w-full h-1/2 justify-top">
114-
Value coverage of listed equity portion of the portfolio
115-
<div id="valuePieBonds"></div>
116-
</div>
117-
<div class="card p-4 w-full h-1/2 justify-bottom">
118-
Value coverage of corporate bonds' portion of the portfolio
119-
<div id="valuePieEquity"></div>
120-
</div>
121-
</div>
122-
</div>
123-
<div class="h-screen flex flex-row gap-x-4">
124-
<div class="card p-4 w-full h-full">
125-
<div class="flex flex-row">
126-
<div class="card p-4 basis-1/2 h-full justify-left">
127-
Emissions coverage of listed equity portion of the portfolio
128-
<div id="emissionsPieBonds"></div>
129-
</div>
130-
<div class="card p-4 basis-1/2 h-full justify-right">
131-
Emissions coverage of corporate bonds' portion of the portfolio
132-
<div id="emissionsPieEquity"></div>
133-
</div>
134-
</div>
135-
</div>
136-
</div>
137-
<div class="h-screen flex flex-row gap-x-4">
138-
<div class="card p-4 w-full h-full items-center">
139-
<div class="flex-row">
140-
<h3 class="h3">Exposure to climate-relevant sectors and technologies</h3>
141-
<h4 class="h4">For equity and bond portions of the portfolio</h4>
142-
<br />
51+
<div class="content p-8 bg-amber-300" id="content-portfolio-view">
52+
<div class="analysis p-4 bg-cyan-300">
53+
<div class="analysis-intro grid sm:grid-cols-12 p-4 bg-purple-300">
54+
<div class="analysis-intro-text sm:col-span-12 bg-orange-300">
55+
<h3 class="h3">Overview of the current state of the portfolio</h3>
14356
<p>
14457
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
14558
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
14659
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
14760
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
14861
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
14962
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
150-
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum. Lorem
151-
ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, eros in tempor
152-
malesuada, quam ex semper ex, vitae vulputate est est quis eros. Aenean fringilla vehicula
153-
libero in bibendum. Nullam vel malesuada urna. Quisque volutpat sapien a consequat
154-
maximus. Morbi nisi dolor, mollis ac tellus quis, facilisis egestas tellus. Aliquam
155-
ultricies condimentum nulla quis mollis. Sed consectetur vel lectus in vulputate. Cras vel
156-
pretium ex. In vehicula neque et eros accumsan sagittis. Ut varius feugiat volutpat.
63+
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum.
15764
</p>
15865
</div>
159-
<div class="flex flex-row">
160-
<div class="card p-4 basis-1/2 h-full justify-left">
161-
<div id="techMixAllBonds"></div>
66+
</div>
67+
<div class="analysis-content grid sm:grid-cols-12 p-2 bg-teal-300">
68+
<div class="analysis-table sm:col-span-12 bg-orange-300"></div>
69+
<div class="analysis-table-explanation sm:col-span-12 bg-orange-300">
70+
<h4 class="h4">Asset classes covered by the analysis</h4>
71+
<p>
72+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
73+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
74+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
75+
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
76+
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
77+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
78+
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
79+
</p>
80+
</div>
81+
<div class="table-box sm:col-span-12">
82+
<table class="table table-hover">
83+
<thead>
84+
<tr>
85+
<th>Asset Class</th>
86+
<th>Portfolio value invested (M USD)</th>
87+
<th>Portfolio value invested (%)</th>
88+
<th>Included in the analysis</th>
89+
<th>Value breakout per means of investment</th>
90+
<th></th>
91+
</tr>
92+
</thead>
93+
<tbody>
94+
{#each tableData as row, i}
95+
<tr>
96+
<td>{row['Asset Class']}</td>
97+
<td>{row['Portfolio value invested (M USD)']}</td>
98+
<td>{row['Portfolio value invested (%)']}</td>
99+
<td>{row['Included in the analysis']}</td>
100+
<td>{row['Value breakout per means of investment']}</td>
101+
<td>{row['_']}</td>
102+
</tr>
103+
{/each}
104+
</tbody>
105+
<tfoot>
106+
<tr>
107+
<th colspan="3">This is where we could write a footer.</th>
108+
</tr>
109+
</tfoot>
110+
</table>
111+
</div>
112+
</div>
113+
<div class="analysis-pie-box sm:col-span-12 bg-orange-300">
114+
<div class="analysis-pies-explanation sm:col-span-12 bg-teal-300">
115+
<h4 class="h4">Portfolio value and emissions covered by PACTA sectors</h4>
116+
<p>
117+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
118+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
119+
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
120+
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
121+
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
122+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
123+
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
124+
</p>
162125
</div>
163-
<div class="card p-4 basis-1/2 h-full justify-right">
164-
<div id="techMixAllEquity"></div>
126+
<div class="analysis-pies-box grid sm:grid-cols-12 bg-green-300">
127+
<div class="pies-bonds-text sm:col-span-6 bg-blue-300">
128+
<h5 class="h5">Corporate bonds portion of the portfolio</h5>
129+
</div>
130+
<div class="pies-equity-text sm:col-span-6 bg-purple-300">
131+
<h5 class="h5">Listed equity portion of the portfolio</h5>
132+
</div>
133+
<div class="pie-value-bonds sm:col-span-6 bg-blue-300" id="valuePieBonds"></div>
134+
<div class="pie-value-equity sm:col-span-6 bg-purple-300" id="valuePieEquity"></div>
135+
<div class="pie-emissions-bonds sm:col-span-6 bg-blue-300" id="emissionsPieBonds"></div>
136+
<div class="pie-emissions-equity sm:col-span-6 bg-purple-300" id="emissionsPieEquity"></div>
165137
</div>
166138
</div>
167-
</div>
168-
</div>
169-
<div class="h-screen flex flex-row gap-x-4">
170-
<div class="card p-4 w-full h-full items-center">
171-
<div class="flex-row">
172-
<h3 class="h3">Regional exposure per sector or technology within sector</h3>
173-
<h4 class="h4">For equity and bond portions of the portfolio</h4>
174-
<br />
175-
<p>
176-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
177-
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
178-
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
179-
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
180-
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
181-
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
182-
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
183-
</p>
139+
<div class="analysis-exposure-box sm:col-span-12 bg-orange-300">
140+
<div class="analysis-exposures-explanation sm:col-span-12 bg-teal-300">
141+
<h4 class="h4">Exposure to climate-relevant sectors and technologies</h4>
142+
<p>
143+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
144+
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
145+
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
146+
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
147+
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
148+
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
149+
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum. Lorem
150+
ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, eros in tempor
151+
malesuada, quam ex semper ex, vitae vulputate est est quis eros. Aenean fringilla vehicula
152+
libero in bibendum. Nullam vel malesuada urna. Quisque volutpat sapien a consequat
153+
maximus. Morbi nisi dolor, mollis ac tellus quis, facilisis egestas tellus. Aliquam
154+
ultricies condimentum nulla quis mollis. Sed consectetur vel lectus in vulputate. Cras vel
155+
pretium ex. In vehicula neque et eros accumsan sagittis. Ut varius feugiat volutpat.
156+
</p>
157+
</div>
158+
<div class="analysis-exosures-box grid sm:grid-cols-12 bg-green-300">
159+
<div class="exposures-bonds-text sm:col-span-6 bg-blue-300">
160+
<h5 class="h5">Corporate bonds portion of the portfolio</h5>
161+
</div>
162+
<div class="exposures-equity-text sm:col-span-6 bg-purple-300">
163+
<h5 class="h5">Listed equity portion of the portfolio</h5>
164+
</div>
165+
<div class="exposures-bonds sm:col-span-6 bg-blue-300" id="techMixAllBonds"></div>
166+
<div class="exposures-equity sm:col-span-6 bg-purple-300" id="techMixAllEquity"></div>
167+
</div>
184168
</div>
185-
<div class="flex flex-row">
186-
<div class="card p-4 basis-1/2 h-full justify-left">
187-
Coverage of listed equity portion of the portfolio
188-
<div id="mapBonds"></div>
169+
<div class="analysis-map-box sm:col-span-12 bg-orange-300">
170+
<div class="analysis-map-explanation sm:col-span-12 bg-teal-300">
171+
<h4 class="h4">Regional exposure per sector or technology within sector</h4>
172+
<p>
173+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
174+
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
175+
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
176+
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
177+
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
178+
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
179+
</p>
189180
</div>
190-
<div class="card p-4 basis-1/2 h-full justify-right">
191-
Coverage of corporate bonds' portion of the portfolio
192-
<div id="mapEquity"></div>
181+
<div class="analysis-map-box grid sm:grid-cols-12 bg-green-300">
182+
<div class="map-bonds-text sm:col-span-6 bg-blue-300">
183+
<h5 class="h5">Corporate bonds portion of the portfolio</h5>
184+
</div>
185+
<div class="map-equity-text sm:col-span-6 bg-purple-300">
186+
<h5 class="h5">Listed equity portion of the portfolio</h5>
187+
</div>
188+
<div class="map-bonds sm:col-span-6 bg-blue-300" id="mapBonds"></div>
189+
<div class="map-equity sm:col-span-6 bg-purple-300" id="mapEquity"></div>
193190
</div>
194191
</div>
195-
</div>
196192
</div>
197-
</div>
193+
</div>

0 commit comments

Comments
 (0)