Skip to content

Commit

Permalink
Add landing pages (#37)
Browse files Browse the repository at this point in the history 
* Add landing page company view

* Add landing page sector view
  • Loading branch information
@MonikaFu
MonikaFu authored Aug 30, 2024
1 parent 688e209 commit 1e34b06
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 4 deletions.
53 changes: 50 additions & 3 deletions src/routes/company_view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { onMount } from 'svelte';
import companyBubbleData from '../json/data_company_bubble.json';
import companyTechmixData from '../json/data_techexposure_company_companies.json';
import portfolioTechmixData from '../json/data_techexposure_company_portfolio.json'
import portfolioTechmixData from '../json/data_techexposure_company_portfolio.json';
import { company_bubble } from '../js/company_bubble.js';
import { techexposure_company } from '../js/techexposure_company.js';
Expand All @@ -14,10 +14,24 @@
});
}
function fetchCompanyTechmix() {
new techexposure_company(document.querySelector('#techmix-plot'), companyTechmixData, undefined, {}, portfolioTechmixData);
new techexposure_company(
document.querySelector('#techmix-plot'),
companyTechmixData,
undefined,
{},
portfolioTechmixData
);
}
function addEventListeners() {
const go_button_landing = document.querySelector('#go_button_landing');
go_button_landing.addEventListener('click', function () {
document.querySelector('#content-landing-page').classList.toggle('hidden');
document.querySelector('#content-company-view').classList.toggle('hidden');
});
const go_button = document.querySelector('#go_button');
// TODO: wire these up correctly. Doesn't make sense to spend too much time on this
// now since we'll remove the selectors from inside the plot anyway.
go_button.addEventListener('click', function () {
Expand Down Expand Up @@ -46,7 +60,40 @@
});
</script>

<div class="content p-8 bg-amber-300">
<div class="content p-8 bg-amber-300" id="content-landing-page">
<div class="intro-text p-4 bg-teal-300">
<h2 class="h3 text-center">Please select a sector and an asset class for the analysis</h2>
<br />
<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="buttons-sector-asset-class p-4 bg-purple-300 flex space-x-2 justify-center">
<select class="select max-w-48 variant-outline-surface" id="sector_selector_landing">
<option value="Automotive">Automotive</option>
<option value="Power">Power</option>
</select>
<select class="select max-w-48 variant-outline-surface" id="asset_class_selector_landing">
<option value="Corporate Bonds">Corporate Bonds</option>
<option value="Listed Equity">Listed Equity</option>
</select>
<button class="btn variant-outline-surface" id="go_button_landing">Go!</button>
</div>
</div>

<div class="content p-8 bg-amber-300 hidden" id="content-company-view">
<div class="buttons-sector-asset-class p-4 bg-purple-300 flex space-x-2 justify-center">
<select class="select max-w-48 variant-outline-surface" id="sector_selector">
<option value="Automotive">Automotive</option>
Expand Down
52 changes: 51 additions & 1 deletion src/routes/sector_view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@
}
function addEventListeners() {
const go_button_landing = document.querySelector('#go_button_landing');
go_button_landing.addEventListener('click', function () {
document.querySelector('#content-landing-page').classList.toggle('hidden');
document.querySelector('#content-sector-view').classList.toggle('hidden');
});
const asset_class_selector = document.querySelector('#asset_class_selector');
asset_class_selector.addEventListener('change', function () {
const selects = document.querySelectorAll(
Expand Down Expand Up @@ -79,11 +86,54 @@
});
</script>

<div class="content p-8 bg-amber-300">
<div class="content p-8 bg-amber-300" id="content-landing-page">
<div class="intro-text p-4 bg-teal-300">
<h2 class="h3 text-center">Please select a sector and an asset class for the analysis</h2>
<br />
<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="buttons-sector-asset-class p-4 bg-purple-300 flex space-x-2 justify-center">
<select class="select max-w-48 variant-outline-surface" id="sector_selector_landing">
<option value="Automotive">Automotive</option>
<option value="Power">Power</option>
<option value="Oil&gas">Oil & gas</option>
<option value="Coal">Coal</option>
<option value="Steel">Steel</option>
<option value="Cement">Cement</option>
<option value="Aviation">Aviation</option>
</select>
<select class="select max-w-48 variant-outline-surface" id="asset_class_selector_landing">
<option value="Corporate Bonds">Corporate Bonds</option>
<option value="Listed Equity">Listed Equity</option>
</select>
<button class="btn variant-outline-surface" id="go_button_landing">Go!</button>
</div>
</div>

<div class="content p-8 bg-amber-300 hidden" id="content-sector-view">
<div class="buttons-sector-asset-class p-4 bg-purple-300 flex space-x-2 justify-center">
<select class="select max-w-48 variant-outline-surface" id="sector_selector">
<option value="Automotive">Automotive</option>
<option value="Power">Power</option>
<option value="Oil&gas">Oil & gas</option>
<option value="Coal">Coal</option>
<option value="Steel">Steel</option>
<option value="Cement">Cement</option>
<option value="Aviation">Aviation</option>
</select>
<select class="select max-w-48 variant-outline-surface" id="asset_class_selector">
<option value="Corporate Bonds">Corporate Bonds</option>
Expand Down

0 comments on commit 1e34b06

Please sign in to comment.