Skip to content

🎨 present plot info in collapsible accordion element #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 9, 2024
Merged

🎨 present plot info in collapsible accordion element #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f253a89
make portfolio-level plot info accordion
jdhoffa Dec 9, 2024
fa22442
remove icon placeholder
jdhoffa Dec 9, 2024
30aa788
make sector level plot info accordion
jdhoffa Dec 9, 2024
16971ff
make company level plot info accordion
jdhoffa Dec 9, 2024
18801a1
Merge branch 'main' into accordion_plot_info
jdhoffa Dec 9, 2024
71008cb
change caret icon to "i" and "x"
jdhoffa Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 59 additions & 35 deletions src/routes/company_view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { techexposure_company } from '../js/techexposure_company.js';
import { createErrorMessageDiv } from '../js/createErrorMessageDiv.js';
import * as d3 from 'd3';
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';

onMount(async () => {
const exposureStatsDataResponse = await fetch('data/data_exposure_stats.json');
Expand Down Expand Up @@ -417,48 +418,71 @@
<div class="plot-bubble-card-box sm:col-span-3 p-2">
<div class="plot-bubble-box sm:col-span-3 card p-8">
<div class="bubble-explanation">
<h4 class="h4">Company Exposure to Low- and High-Carbon Technologies</h4>
<p>
This chart illustrates the current and future technology exposure and future plans
for climate alignment of companies in the sector. Companies on the left have higher
exposure to high-carbon technologies, while those on the right are more aligned with
low-carbon solutions.
</p>
<br /><br />
<p>
It also compares each company's plans for expanding low-carbon technologies against
the selected climate scenario. Companies lower on the chart have smaller planned
investments in low-carbon tech, while those higher up have larger planned
expansions.
</p>
<br /><br />
<p>
The size of the dots reflects each company's influence on the portfolio’s overall
climate alignment, with larger dots representing companies with greater weight.
</p>
<br /><br />
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Company Exposure to Low- and High-Carbon Technologies</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
This chart illustrates the current and future technology exposure and future
plans for climate alignment of companies in the sector. Companies on the left
have higher exposure to high-carbon technologies, while those on the right are
more aligned with low-carbon solutions.
<br /><br />
It also compares each company's plans for expanding low-carbon technologies against
the selected climate scenario. Companies lower on the chart have smaller planned
investments in low-carbon tech, while those higher up have larger planned expansions.
<br /><br />
The size of the dots reflects each company's influence on the portfolio’s overall
climate alignment, with larger dots representing companies with greater weight.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<div class="bubble-plot" id="bubble-plot"></div>
</div>
</div>
<div class="plot-techmix-card-box sm:col-span-3 p-2">
<div class="plot-techmix sm:col-span-3 card p-8">
<div class="techmix-explanation">
<h4 class="h4">Future technology mix</h4>
<p>
This section presents the <strong>most significant companies</strong> in your
portfolio, based on their weight, within the <strong>Power</strong> and
<strong>Automotive</strong>
sectors. For each company, we show its future <strong>technology mix</strong>.
<br /> <br />
By understanding the <strong>technology breakdown</strong> of these key companies,
you can assess how their planned production activities contribute to the overall
<strong>climate alignment</strong>
of the portfolio. This analysis supports
<strong>transition risk management</strong>
and helps inform <strong>engagement strategies</strong> for companies that may need to
accelerate their transition to low-carbon solutions.
</p>
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Future technology mix</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
This section presents the <strong>most significant companies</strong> in your
portfolio, based on their weight, within the <strong>Power</strong> and
<strong>Automotive</strong>
sectors. For each company, we show its future <strong>technology mix</strong>.
<br /> <br />
By understanding the <strong>technology breakdown</strong> of these key
companies, you can assess how their planned production activities contribute
to the overall
<strong>climate alignment</strong>
of the portfolio. This analysis supports
<strong>transition risk management</strong>
and helps inform <strong>engagement strategies</strong> for companies that may
need to accelerate their transition to low-carbon solutions.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<div class="techmix-plot" id="techmix-plot"></div>
</div>
Expand Down
140 changes: 91 additions & 49 deletions src/routes/portfolio_view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { techexposure } from '../js/techexposure';
import { tabulateIntoIncludedTable } from '../js/included_table.js';
import { createErrorMessageDiv } from '../js/createErrorMessageDiv.js';
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';

onMount(async () => {
const tableDataResponse = await fetch('data/data_included_table.json');
Expand Down Expand Up @@ -176,18 +177,31 @@
</div>
<div class="analysis-content grid sm:grid-cols-12 p-4">
<div class="analysis-table-explanation sm:col-span-12 card p-8">
<h4 class="h4">Asset classes covered by the analysis</h4>
<br />
<p>
This analysis focuses on asset classes with a direct and measurable impact on the real
economy, specifically investments in <strong>listed equities</strong> and
<strong>corporate bonds</strong> on the secondary market. These asset classes represent
the most accessible and reliable data sources for understanding portfolio alignment with
climate transition goals.
<br /> <br />
From the total market value of the portfolio, <strong>[X]%</strong> is allocated to equity
investments, and <strong>[Y]%</strong> is allocated to corporate bonds.
</p>
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Asset classes covered by the analysis</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
This analysis focuses on asset classes with a direct and measurable impact on the
real economy, specifically investments in <strong>listed equities</strong> and
<strong>corporate bonds</strong> on the secondary market. These asset classes
represent the most accessible and reliable data sources for understanding portfolio
alignment with climate transition goals.
<br /> <br />
From the total market value of the portfolio, <strong>[X]%</strong> is allocated to
equity investments, and <strong>[Y]%</strong> is allocated to corporate bonds.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
<div class="table-box sm:col-span-12">
<div class="table table-hover" id="includedTable"></div>
</div>
Expand All @@ -196,31 +210,46 @@
<div class="analysis-pie grid sm:grid-cols-12 p-4">
<div class="analysis-pie-box sm:col-span-12 card p-8">
<div class="analysis-pies-explanation sm:col-span-12">
<h4 class="h4">
Sector Coverage by Assets Under Management and Absolute CO<sub>2</sub> Emissions
</h4>
<br />
The <strong>PACTA for Investors</strong> analysis focuses on listed equity and corporate
bond holdings in key climate-relevant sectors, including
<strong
>oil and gas, coal, automotive, power generation, cement, steel, and aviation</strong
>, and <strong>aviation</strong>. These sectors meet three criteria: they are major
contributors to global GHG emissions, have available scenario benchmarks for transition
expectations, and provide sufficient data for analysis.
<br /> <br />
Sectors like <strong>agriculture, forestry, aluminum, paper, and glass</strong>
are excluded due to limited asset-level or scenario data.
<br /><br />
While the PACTA analysis centers on sectoral alignment through production capacity, estimating
<strong>absolute CO2 emissions</strong> associated with a portfolio can provide additional
insights into the relative importance of each sector in the decarbonization of the
portfolio.
<br /><br />
The charts below provide an overview of the portfolio’s exposure to
<strong>PACTA sectors</strong>, as well as the
<strong> emissions</strong> associated with those sectors.
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">
Sector Coverage by Assets Under Management and Absolute CO<sub>2</sub> Emissions
</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
The <strong>PACTA for Investors</strong> analysis focuses on listed equity and
corporate bond holdings in key climate-relevant sectors, including
<strong
>oil and gas, coal, automotive, power generation, cement, steel, and aviation</strong
>, and <strong>aviation</strong>. These sectors meet three criteria: they are
major contributors to global GHG emissions, have available scenario benchmarks for
transition expectations, and provide sufficient data for analysis.
<br /> <br />
Sectors like <strong>agriculture, forestry, aluminum, paper, and glass</strong>
are excluded due to limited asset-level or scenario data.
<br /><br />
While the PACTA analysis centers on sectoral alignment through production capacity,
estimating
<strong>absolute CO2 emissions</strong> associated with a portfolio can provide
additional insights into the relative importance of each sector in the
decarbonization of the portfolio.
<br /><br />
The charts below provide an overview of the portfolio’s exposure to
<strong>PACTA sectors</strong>, as well as the
<strong> emissions</strong> associated with those sectors.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<br />
<div class="analysis-pies-box grid sm:grid-cols-12 card p-4">
<div class="pie-value-bonds sm:col-span-6" id="valuePieBonds"></div>
<div class="pie-value-equity sm:col-span-6" id="valuePieEquity"></div>
Expand All @@ -241,19 +270,32 @@
<div class="analysis-exposures grid sm:grid-cols-12 p-4">
<div class="analysis-exposure-box sm:col-span-12 card p-8">
<div class="analysis-exposures-explanation sm:col-span-12">
<h4 class="h4">Exposure to climate-relevant sectors and technologies</h4>
<br />
<p>
Within each climate-relevant sector, different technologies play varying roles in the
transition to a low-carbon economy. Understanding your portfolio’s exposure to the
sector and the associated technologies is critical for assessing both <strong
>transition risks</strong
>
and <strong>investment opportunities</strong> in the context of climate change.
<br />
The following chart visualizes the portfolio's exposure to the different sectors and technologies,
compared to the relevant benchmarks.
</p>
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Exposure to climate-relevant sectors and technologies</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
Within each climate-relevant sector, different technologies play varying roles in
the transition to a low-carbon economy. Understanding your portfolio’s exposure to
the sector and the associated technologies is critical for assessing both <strong
>transition risks</strong
>
and <strong>investment opportunities</strong> in the context of climate change.
<br />
The following chart visualizes the portfolio's exposure to the different sectors and
technologies, compared to the relevant benchmarks.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<div class="analysis-exosures-box grid sm:grid-cols-12 p-4">
<div class="exposures-bonds sm:col-span-6" id="techMixAllBonds"></div>
Expand Down
Loading
Loading