Skip to content

Commit 894c013

Browse files
MonikaFuMonikaFu
authored
Edit layout sector level (#35)
* Add dummy grid layout on top * Make parameters smaller * Populate divs with plots * Wire up asset class selector * Remove old layout
1 parent 32b9174 commit 894c013

File tree

4 files changed

+124
-68
lines changed

4 files changed

+124
-68
lines changed

‎src/js/time_line.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export class time_line {
6565
.keys()
6666
.sort();
6767
let class_selector = document.createElement('select');
68-
class_selector.classList = 'peercomparison_class_selector inline_text_dropdown';
68+
class_selector.classList = 'time_line_class_selector inline_text_dropdown';
6969
class_selector.addEventListener('change', change_class);
7070
class_names.forEach((class_name) => class_selector.add(new Option(class_name, class_name)));
7171
class_selector.options[Math.max(class_names.indexOf(default_class), 0)].selected = 'selected';

‎src/js/trajectory_alignment.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export class trajectory_alignment {
100100
.keys()
101101
.sort();
102102
let class_selector = document.createElement('select');
103-
class_selector.classList = 'techexposure_class_selector inline_text_dropdown';
103+
class_selector.classList = 'trajectory_class_selector inline_text_dropdown';
104104
class_selector.addEventListener('change', change_class.bind(null, data), false);
105105
class_names.forEach((class_name) => class_selector.add(new Option(class_name, class_name)));
106106
class_selector.options[Math.max(class_names.indexOf(default_class), 0)].selected = 'selected';

‎src/routes/company_view.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
<div class="analysis-intro-stats sm:col-span-3 bg-green-300">Intro stats</div>
7676
</div>
7777
<div class="analysis-content grid sm:grid-cols-12 p-4 bg-teal-300">
78-
<div class="analysis-plots sm:col-span-9 p-4 bg-yellow-300">
78+
<div class="analysis-plots sm:col-span-10 p-4 bg-yellow-300">
7979
<div class="plot-bubble-box grid sm:grid-cols-6 p-4 bg-orange-300">
8080
<div class="bubble-explanation sm:col-span-2 bg-cyan-300">
8181
<h4 class="h4">
@@ -105,7 +105,7 @@
105105
<div class="techmix-plot sm:col-span-4 bg-teal-300" id="techmix-plot"></div>
106106
</div>
107107
</div>
108-
<div class="analysis-parameters sm:col-span-3 bg-red-300 p-4">
108+
<div class="analysis-parameters sm:col-span-2 bg-red-300 p-4">
109109
<h4 class="h4">Parameters (not working now)</h4>
110110
<br />
111111
<label class="label">

‎src/routes/sector_view.svelte

Lines changed: 120 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,34 @@
1010
1111
onMount(() => {
1212
function fetchFutureTechmix() {
13-
new techexposure_future(document.querySelector('#techmixplot1'), techmix_future_data, undefined, {
14-
default_class: 'Corporate Bonds'
15-
});
13+
new techexposure_future(
14+
document.querySelector('#techmix-plot'),
15+
techmix_future_data,
16+
undefined,
17+
{
18+
default_class: 'Corporate Bonds'
19+
}
20+
);
1621
}
1722
1823
function fetchTrajectoryAlignmentData() {
19-
new trajectory_alignment(document.querySelector('#trajplot1'), traj_data, undefined, {
24+
new trajectory_alignment(document.querySelector('#trajectory-plot1'), traj_data, undefined, {
2025
default_tech: 'Coal Power'
2126
});
22-
new trajectory_alignment(document.querySelector('#trajplot2'), traj_data, undefined, {
27+
new trajectory_alignment(document.querySelector('#trajectory-plot2'), traj_data, undefined, {
2328
default_tech: 'Gas Power'
2429
});
2530
}
2631
2732
function fetchEmissionsData() {
28-
new time_line(document.querySelector('#emissionsplot'), emissions_data);
33+
new time_line(document.querySelector('#emission-intensity-plot'), emissions_data);
2934
}
3035
3136
function addEventListeners() {
3237
const asset_class_selector = document.querySelector('#asset_class_selector');
3338
asset_class_selector.addEventListener('change', function () {
3439
const selects = document.querySelectorAll(
35-
'.techexposure_class_selector, .time_line_class_selector'
40+
'.techexposure_class_selector, .time_line_class_selector, .trajectory_class_selector'
3641
);
3742
selects.forEach((d) => {
3843
d.value = this.value;
@@ -74,46 +79,85 @@
7479
});
7580
</script>
7681

77-
<div class="gap-x-4 p-4">
78-
<h2 class="h2">Current state and future predictions for a sector</h2>
79-
<p>
80-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
81-
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
82-
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
83-
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
84-
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
85-
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
86-
ipsum dolor sit amet.
87-
</p>
88-
<br />
89-
<div class="h-screen flex gap-x-4">
90-
<div class="container">
91-
<div class="selectors card p-4">
92-
<h3 class="h3">Select parameters for the analysis</h3>
93-
94-
<label class="label">
95-
<span>Asset Class</span>
96-
<select class="select variant-outline-surface" id="asset_class_selector">
97-
<option value="Corporate Bonds">Corporate Bonds</option>
98-
<option value="Listed Equity">Listed Equity</option>
99-
</select>
100-
</label>
101-
102-
<label class="label">
103-
<span>Benchmark</span>
104-
<select class="select variant-outline-surface" id="benchmark_selector">
105-
<option value="iShares Global Corp Bond UCITS ETF"
106-
>iShares Global Corp Bond UCITS ETF</option
107-
>
108-
<option value="iShares Core S&P 500 ETF">iShares Core S&P 500 ETF</option>
109-
<option value="iShares MSCI ACWI ETF">iShares MSCI ACWI ETF</option>
110-
<option value="iShares MSCI Emerging Markets ETF"
111-
>iShares MSCI Emerging Markets ETF</option
112-
>
113-
<option value="iShares MSCI World ETF">iShares MSCI World ETF</option>
114-
</select>
115-
</label>
116-
82+
<div class="content p-8 bg-amber-300">
83+
<div class="buttons-sector-asset-class p-4 bg-purple-300 flex space-x-2 justify-center">
84+
<select class="select max-w-48 variant-outline-surface" id="sector_selector">
85+
<option value="Automotive">Automotive</option>
86+
<option value="Power">Power</option>
87+
</select>
88+
<select class="select max-w-48 variant-outline-surface" id="asset_class_selector">
89+
<option value="Corporate Bonds">Corporate Bonds</option>
90+
<option value="Listed Equity">Listed Equity</option>
91+
</select>
92+
<button class="btn variant-outline-surface" id="go_button">Go!</button>
93+
</div>
94+
<div class="analysis p-4 bg-cyan-300 grid">
95+
<div class="analysis-intro grid sm:grid-cols-12 p-4 bg-purple-300">
96+
<div class="analysis-intro-text sm:col-span-9 bg-orange-300">
97+
<h3 class="h3">Current state and future predictions for a sector</h3>
98+
<p>
99+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula quam sed mollis
100+
scelerisque. Donec sit amet purus in nibh consequat pretium. Aenean suscipit, ligula et
101+
cursus auctor, justo enim ornare ipsum, quis aliquet augue dui nec mauris. Nam eu ipsum
102+
felis. Etiam eu lorem ac magna facilisis tempus. In at quam lorem. Maecenas consequat vel
103+
tortor nec eleifend. Sed tempor fermentum tincidunt. Vivamus magna diam, hendrerit ac est
104+
et, vulputate mollis orci. Quisque ut elit vitae enim hendrerit pulvinar vel et libero.
105+
Duis et tincidunt erat. Nunc in tempus leo. Donec imperdiet ut ante in fermentum.
106+
</p>
107+
</div>
108+
<div class="analysis-intro-stats sm:col-span-3 bg-green-300">Intro stats</div>
109+
</div>
110+
<div class="analysis-content grid sm:grid-cols-12 p-4 bg-teal-300">
111+
<div class="analysis-plots sm:col-span-10 p-4 bg-yellow-300">
112+
<div class="plot-trajectory-box grid p-4 bg-orange-300">
113+
<div class="trajectory-explanation bg-cyan-300">
114+
<h4 class="h4">Production volume alignment over time for technologies in the sector</h4>
115+
<p>
116+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
117+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
118+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
119+
sanctus est Lorem ipsum dolor sit amet.
120+
</p>
121+
</div>
122+
<div class="trajectory-plots-box grid sm:grid-cols-6 bg-teal-300">
123+
<div class="trajectory-plot sm:col-span-3 bg-teal-300" id="trajectory-plot1"></div>
124+
<div class="trajectory-plot sm:col-span-3 bg-teal-300" id="trajectory-plot2"></div>
125+
<div class="trajectory-plot sm:col-span-3 bg-teal-300" id="trajectory-plot3"></div>
126+
<div class="trajectory-plot sm:col-span-3 bg-teal-300" id="trajectory-plot4"></div>
127+
<div class="trajectory-plot sm:col-span-3 bg-teal-300" id="trajectory-plot5"></div>
128+
<div class="trajectory-plot sm:col-span-3 bg-teal-300" id="trajectory-plot6"></div>
129+
</div>
130+
</div>
131+
<div class="other-sector-plots-box grid sm:grid-cols-6 p-4 bg-purple-300">
132+
<div class="techmix-plot-box sm:col-span-3 bg-teal-300">
133+
<div class="techmix-explanation">
134+
<h4 class="h4">Technology mix for a sector</h4>
135+
<p>
136+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
137+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
138+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
139+
takimata sanctus est Lorem ipsum dolor sit amet.
140+
</p>
141+
</div>
142+
<div class="techmix-plot" id="techmix-plot"></div>
143+
</div>
144+
<div class="emission-intensity-plot-box sm:col-span-3 bg-teal-300">
145+
<div class="techmix-explanation">
146+
<h4 class="h4">Emission intensity for a sector</h4>
147+
<p>
148+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
149+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
150+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
151+
takimata sanctus est Lorem ipsum dolor sit amet.
152+
</p>
153+
</div>
154+
<div class="techmix-plot" id="emission-intensity-plot"></div>
155+
</div>
156+
</div>
157+
</div>
158+
<div class="analysis-parameters sm:col-span-2 bg-red-300 p-4">
159+
<h4 class="h4">Parameters (not working now)</h4>
160+
<br />
117161
<label class="label">
118162
<span>Scenario source</span>
119163
<select class="select variant-outline-surface" id="scenario_source_selector">
@@ -122,7 +166,6 @@
122166
<option value="ISF2023">ISF2023</option>
123167
</select>
124168
</label>
125-
126169
<label class="label">
127170
<span>Scenario</span>
128171
<select class="select variant-outline-surface" id="scenario_selector">
@@ -135,22 +178,35 @@
135178
<option value="ISF2023: 1.5°C">ISF2023: 1.5°C</option>
136179
</select>
137180
</label>
138-
</div>
139-
<div class="tech_mix card p-4">
140-
<h3 class="h3">Future Technology Mix</h3>
141-
<div id="techmixplot1"></div>
142-
<div id="techmixplot2"></div>
143-
</div>
144-
<div class="emission_intensity card p-4">
145-
<h3 class="h3">Emission Intensity</h3>
146-
<div id="emissionsplot"></div>
147-
</div>
148-
<div class="volume_trajectory card p-4">
149-
<h3 class="h3">
150-
Production volume alignment over time for technologies in the Power sector
151-
</h3>
152-
<div class="d3chart" id="trajplot1"></div>
153-
<div class="d3chart" id="trajplot2"></div>
181+
<label class="label">
182+
<span>Allocation method</span>
183+
<select class="select variant-outline-surface" id="asset_class_selector">
184+
<option value="Portfolio weight">Portfolio weight</option>
185+
<option value="Ownership weight">Ownership weight</option>
186+
</select>
187+
</label>
188+
<label class="label">
189+
<span>Equity market</span>
190+
<select class="select variant-outline-surface" id="scenario_source_selector">
191+
<option value="Global Market">Global Market</option>
192+
<option value="Developed Market">Developed Market</option>
193+
<option value="Emerging Market">Emerging Market</option>
194+
</select>
195+
</label>
196+
<label class="label">
197+
<span>Benchmark</span>
198+
<select class="select variant-outline-surface" id="benchmark_selector">
199+
<option value="iShares Global Corp Bond UCITS ETF"
200+
>iShares Global Corp Bond UCITS ETF</option
201+
>
202+
<option value="iShares Core S&P 500 ETF">iShares Core S&P 500 ETF</option>
203+
<option value="iShares MSCI ACWI ETF">iShares MSCI ACWI ETF</option>
204+
<option value="iShares MSCI Emerging Markets ETF"
205+
>iShares MSCI Emerging Markets ETF</option
206+
>
207+
<option value="iShares MSCI World ETF">iShares MSCI World ETF</option>
208+
</select>
209+
</label>
154210
</div>
155211
</div>
156212
</div>

0 commit comments

Comments
 (0)