Skip to content

Commit

Permalink
Portfolio layout in divs (#52)
Browse files Browse the repository at this point in the history 
* Put everything in divs

* comment out map code

* Add map
  • Loading branch information
@MonikaFu
MonikaFu authored Nov 7, 2024
1 parent b8e275c commit 80642e2
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 135 deletions.
2 changes: 1 addition & 1 deletion src/js/pie_exploded.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class PieExploded {
// Declare the chart dimensions and margins.
const width = 700;
const height = 500;
const marginTop = 40;
const marginTop = 20;
const marginRight = 40;
const marginBottom = 170;
const marginLeft = 110;
Expand Down
264 changes: 130 additions & 134 deletions src/routes/portfolio_view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
onMount(() => {
function fetchValuePie() {
new PieExploded(document.querySelector('#valuePieBonds'), bondsValuePieData, 'USD', 'Value covered by PACTA sectors');
new PieExploded(document.querySelector('#valuePieEquity'), equityValuePieData, 'USD', 'Value covered by PACTA sectors');
new PieExploded(document.querySelector('#valuePieBonds'), bondsValuePieData, 'USD', 'of assets\' value covered by PACTA sectors');
new PieExploded(document.querySelector('#valuePieEquity'), equityValuePieData, 'USD', 'of assets\' value covered by PACTA sectors');
}
function fetchEmissionsPie() {
new PieExploded(document.querySelector('#emissionsPieBonds'), bondsEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'Emissions covered by PACTA sectors');
new PieExploded(document.querySelector('#emissionsPieEquity'), equityEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'Emissions covered by PACTA sectors');
new PieExploded(document.querySelector('#emissionsPieBonds'), bondsEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'of assets\' emissions covered by PACTA sectors');
new PieExploded(document.querySelector('#emissionsPieEquity'), equityEmissionsPieData, 'tonnes CO<sub>2<\/sub> emissions', 'of assets\' emissions covered by PACTA sectors');
}
function fetchTechmix() {
Expand Down Expand Up @@ -48,150 +48,146 @@
});
</script>

<div class="gap-x-4 p-4">
<h2 class="h2">Overview of the current state of the portfolio</h2>
<div class="h-screen flex flex-row gap-x-4">
<div class="card p-4 w-1/2 h-full items-center justify-left">
<h3 class="h3">Asset classes covered by the analysis</h3>
<br />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<br />
<!-- Responsive Container (recommended) -->
<div class="table-container">
<!-- Native Table Element -->
<table class="table table-hover">
<thead>
<tr>
<th>Asset Class</th>
<th>Portfolio value invested (M USD)</th>
<th>Portfolio value invested (%)</th>
<th>Included in the analysis</th>
<th>Value breakout per means of investment</th>
<th></th>
</tr>
</thead>
<tbody>
{#each tableData as row, i}
<tr>
<td>{row['Asset Class']}</td>
<td>{row['Portfolio value invested (M USD)']}</td>
<td>{row['Portfolio value invested (%)']}</td>
<td>{row['Included in the analysis']}</td>
<td>{row['Value breakout per means of investment']}</td>
<td>{row['_']}</td>
</tr>
{/each}
</tbody>
<tfoot>
<tr>
<th colspan="3">This is where we could write a footer.</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card p-4 w-1/2 h-full items-center justify-right">
<h3 class="h3">Portfolio value and emissions covered by PACTA sectors</h3>
<br />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="card p-4 w-full h-1/2 justify-top">
Value coverage of listed equity portion of the portfolio
<div id="valuePieBonds"></div>
</div>
<div class="card p-4 w-full h-1/2 justify-bottom">
Value coverage of corporate bonds' portion of the portfolio
<div id="valuePieEquity"></div>
</div>
</div>
</div>
<div class="h-screen flex flex-row gap-x-4">
<div class="card p-4 w-full h-full">
<div class="flex flex-row">
<div class="card p-4 basis-1/2 h-full justify-left">
Emissions coverage of listed equity portion of the portfolio
<div id="emissionsPieBonds"></div>
</div>
<div class="card p-4 basis-1/2 h-full justify-right">
Emissions coverage of corporate bonds' portion of the portfolio
<div id="emissionsPieEquity"></div>
</div>
</div>
</div>
</div>
<div class="h-screen flex flex-row gap-x-4">
<div class="card p-4 w-full h-full items-center">
<div class="flex-row">
<h3 class="h3">Exposure to climate-relevant sectors and technologies</h3>
<h4 class="h4">For equity and bond portions of the portfolio</h4>
<br />
<div class="content p-8 bg-amber-300" id="content-portfolio-view">
<div class="analysis p-4 bg-cyan-300">
<div class="analysis-intro grid sm:grid-cols-12 p-4 bg-purple-300">
<div class="analysis-intro-text sm:col-span-12 bg-orange-300">
<h3 class="h3">Overview of the current state of the portfolio</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, eros in tempor
malesuada, quam ex semper ex, vitae vulputate est est quis eros. Aenean fringilla vehicula
libero in bibendum. Nullam vel malesuada urna. Quisque volutpat sapien a consequat
maximus. Morbi nisi dolor, mollis ac tellus quis, facilisis egestas tellus. Aliquam
ultricies condimentum nulla quis mollis. Sed consectetur vel lectus in vulputate. Cras vel
pretium ex. In vehicula neque et eros accumsan sagittis. Ut varius feugiat volutpat.
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum.
</p>
</div>
<div class="flex flex-row">
<div class="card p-4 basis-1/2 h-full justify-left">
<div id="techMixAllBonds"></div>
</div>
<div class="analysis-content grid sm:grid-cols-12 p-2 bg-teal-300">
<div class="analysis-table sm:col-span-12 bg-orange-300"></div>
<div class="analysis-table-explanation sm:col-span-12 bg-orange-300">
<h4 class="h4">Asset classes covered by the analysis</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="table-box sm:col-span-12">
<table class="table table-hover">
<thead>
<tr>
<th>Asset Class</th>
<th>Portfolio value invested (M USD)</th>
<th>Portfolio value invested (%)</th>
<th>Included in the analysis</th>
<th>Value breakout per means of investment</th>
<th></th>
</tr>
</thead>
<tbody>
{#each tableData as row, i}
<tr>
<td>{row['Asset Class']}</td>
<td>{row['Portfolio value invested (M USD)']}</td>
<td>{row['Portfolio value invested (%)']}</td>
<td>{row['Included in the analysis']}</td>
<td>{row['Value breakout per means of investment']}</td>
<td>{row['_']}</td>
</tr>
{/each}
</tbody>
<tfoot>
<tr>
<th colspan="3">This is where we could write a footer.</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="analysis-pie-box sm:col-span-12 bg-orange-300">
<div class="analysis-pies-explanation sm:col-span-12 bg-teal-300">
<h4 class="h4">Portfolio value and emissions covered by PACTA sectors</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="card p-4 basis-1/2 h-full justify-right">
<div id="techMixAllEquity"></div>
<div class="analysis-pies-box grid sm:grid-cols-12 bg-green-300">
<div class="pies-bonds-text sm:col-span-6 bg-blue-300">
<h5 class="h5">Corporate bonds portion of the portfolio</h5>
</div>
<div class="pies-equity-text sm:col-span-6 bg-purple-300">
<h5 class="h5">Listed equity portion of the portfolio</h5>
</div>
<div class="pie-value-bonds sm:col-span-6 bg-blue-300" id="valuePieBonds"></div>
<div class="pie-value-equity sm:col-span-6 bg-purple-300" id="valuePieEquity"></div>
<div class="pie-emissions-bonds sm:col-span-6 bg-blue-300" id="emissionsPieBonds"></div>
<div class="pie-emissions-equity sm:col-span-6 bg-purple-300" id="emissionsPieEquity"></div>
</div>
</div>
</div>
</div>
<div class="h-screen flex flex-row gap-x-4">
<div class="card p-4 w-full h-full items-center">
<div class="flex-row">
<h3 class="h3">Regional exposure per sector or technology within sector</h3>
<h4 class="h4">For equity and bond portions of the portfolio</h4>
<br />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="analysis-exposure-box sm:col-span-12 bg-orange-300">
<div class="analysis-exposures-explanation sm:col-span-12 bg-teal-300">
<h4 class="h4">Exposure to climate-relevant sectors and technologies</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, eros in tempor
malesuada, quam ex semper ex, vitae vulputate est est quis eros. Aenean fringilla vehicula
libero in bibendum. Nullam vel malesuada urna. Quisque volutpat sapien a consequat
maximus. Morbi nisi dolor, mollis ac tellus quis, facilisis egestas tellus. Aliquam
ultricies condimentum nulla quis mollis. Sed consectetur vel lectus in vulputate. Cras vel
pretium ex. In vehicula neque et eros accumsan sagittis. Ut varius feugiat volutpat.
</p>
</div>
<div class="analysis-exosures-box grid sm:grid-cols-12 bg-green-300">
<div class="exposures-bonds-text sm:col-span-6 bg-blue-300">
<h5 class="h5">Corporate bonds portion of the portfolio</h5>
</div>
<div class="exposures-equity-text sm:col-span-6 bg-purple-300">
<h5 class="h5">Listed equity portion of the portfolio</h5>
</div>
<div class="exposures-bonds sm:col-span-6 bg-blue-300" id="techMixAllBonds"></div>
<div class="exposures-equity sm:col-span-6 bg-purple-300" id="techMixAllEquity"></div>
</div>
</div>
<div class="flex flex-row">
<div class="card p-4 basis-1/2 h-full justify-left">
Coverage of listed equity portion of the portfolio
<div id="mapBonds"></div>
<div class="analysis-map-box sm:col-span-12 bg-orange-300">
<div class="analysis-map-explanation sm:col-span-12 bg-teal-300">
<h4 class="h4">Regional exposure per sector or technology within sector</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
</p>
</div>
<div class="card p-4 basis-1/2 h-full justify-right">
Coverage of corporate bonds' portion of the portfolio
<div id="mapEquity"></div>
<div class="analysis-map-box grid sm:grid-cols-12 bg-green-300">
<div class="map-bonds-text sm:col-span-6 bg-blue-300">
<h5 class="h5">Corporate bonds portion of the portfolio</h5>
</div>
<div class="map-equity-text sm:col-span-6 bg-purple-300">
<h5 class="h5">Listed equity portion of the portfolio</h5>
</div>
<div class="map-bonds sm:col-span-6 bg-blue-300" id="mapBonds"></div>
<div class="map-equity sm:col-span-6 bg-purple-300" id="mapEquity"></div>
</div>
</div>
</div>
</div>
</div>
</div>

0 comments on commit 80642e2

Please sign in to comment.