Skip to content
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

Wire up company page #70

Merged
merged 16 commits into from
Nov 26, 2024
Merged

Wire up company page #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
28ee0c0
Style techmix sector
MonikaFu Nov 25, 2024
2245ca2
Remove unused variable
MonikaFu Nov 25, 2024
3181e2e
Update data
MonikaFu Nov 25, 2024
bb98ee8
Style data
MonikaFu Nov 25, 2024
0c11cda
Merge branch 'main' of github.com:RMI-PACTA/pacta-dashboard-svelte in…
MonikaFu Nov 25, 2024
ab53b45
Company bubble has selectable scenario, scenario source and allocatio…
MonikaFu Nov 25, 2024
825e3b3
Remove footnote
MonikaFu Nov 25, 2024
f7e4c69
Adjust sizes bubble
MonikaFu Nov 25, 2024
7361225
Error catching
MonikaFu Nov 25, 2024
3d8768c
Style
MonikaFu Nov 25, 2024
81d30f0
Wire up selectors
MonikaFu Nov 25, 2024
50a17f8
Move alert message div
MonikaFu Nov 26, 2024
daa07f8
add error handling
MonikaFu Nov 26, 2024
1613753
Place plots next to each other
MonikaFu Nov 26, 2024
6c243be
Style
MonikaFu Nov 26, 2024
ac52d91
Fix bug
MonikaFu Nov 26, 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
47 changes: 15 additions & 32 deletions src/js/company_bubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as d3 from 'd3';
import { cumsum } from 'd3-array';

export class company_bubble {
constructor(container, data, labels, opts) {
constructor(container, data) {
let container_div;

if (typeof container === 'string') {
Expand All @@ -23,11 +23,11 @@ export class company_bubble {
// Declare the chart dimensions and margins.
const width = 600;
const height = 500;
const marginTop = 70;
const marginTop = 40;
const marginRight = 60;
const marginBottom = 80;
const marginLeft = 70;
let size = Math.min(width - marginLeft - marginRight, height - marginTop - marginBottom);
const marginLeft = 80;
let size = height - marginTop - marginBottom;

// Chart parameters
let year_span = 5,
Expand All @@ -47,8 +47,7 @@ export class company_bubble {
xtooltip = xtitle,
ytooltip = ytitle,
ztooltip = 'Weight in portfolio (% of AUM)',
legend_title = 'Portfolio weight',
footnote = '* Scenario: ';
legend_title = 'Portfolio weight';

// Create the svg container
const svg = this.container
Expand All @@ -61,16 +60,19 @@ export class company_bubble {

// Filter data
let sector = document.querySelector('#sector_selector').value,
asset_class = document.querySelector('#asset_class_selector').value;
asset_class = document.querySelector('#asset_class_selector').value,
scenario_source = document.querySelector('#scenario_source_selector').value,
scenario = document.querySelector('#scenario_selector').value,
allocation = document.querySelector('#allocation_method_selector').value;
let subdata = data
.filter((d) => d.asset_class == asset_class)
.filter((d) => d.ald_sector_translation == sector);
.filter((d) => d.ald_sector_translation == sector)
.filter((d) => d.scenario_source == scenario_source)
.filter((d) => d.scenario == scenario)
.filter((d) => d.allocation == allocation);

var year_future = subdata.map((d) => d.year)[0] + year_span;
var scenario = subdata.map((d) => d.scenario)[0];
var buffer = 0.0;
var xmax = d3.max(subdata, (d) => d[xvar]);
var ymax = d3.max(subdata, (d) => d[yvar]);

// Axes
let x = d3
Expand Down Expand Up @@ -110,11 +112,7 @@ export class company_bubble {
.attr('class', 'xtitle')
.attr(
'transform',
'translate(' +
((width - marginLeft - marginRight) / 2 + marginLeft) +
' ,' +
(height - marginBottom + 40) +
')'
'translate(' + (size / 2 + marginLeft) + ' ,' + (height - marginBottom + 40) + ')'
)
.style('text-anchor', 'middle')
.text(xtitle);
Expand All @@ -124,11 +122,7 @@ export class company_bubble {
.attr('class', 'xsubtitle')
.attr(
'transform',
'translate(' +
((width - marginLeft - marginRight) / 2 + marginLeft) +
' ,' +
(height - marginBottom + 55) +
')'
'translate(' + (size / 2 + marginLeft) + ' ,' + (height - marginBottom + 55) + ')'
)
.style('text-anchor', 'middle')
.text(xsubtitle);
Expand Down Expand Up @@ -276,17 +270,6 @@ export class company_bubble {

.text(legend_title);

// Footnote
svg
.append('text')
.attr('class', 'footnote')
.attr('transform', 'translate(' + (width - marginRight) + ' ,' + (height - 10) + ')')
.attr('x', 0)
.attr('y', 0)
.attr('font-size', '0.7em')
.style('text-anchor', 'end')
.text(footnote + scenario + '.');

let tooltip = d3
.select(container_div)
.append('div')
Expand Down
65 changes: 54 additions & 11 deletions src/js/techexposure_company.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export class techexposure_company {

// Declare the chart dimensions and margins.
const width = 928;
const height = 650;
const height = 750;
const marginTop = 40;
const marginRight = 70;
const marginBottom = 140;
Expand Down Expand Up @@ -55,12 +55,22 @@ export class techexposure_company {
.style('display', 'none');

let selected_sector = document.querySelector('#sector_selector').value,
selected_class = document.querySelector('#asset_class_selector').value;
selected_class = document.querySelector('#asset_class_selector').value,
scenario_source = document.querySelector('#scenario_source_selector').value,
scenario = document.querySelector('#scenario_selector').value,
allocation = document.querySelector('#allocation_method_selector').value;
let selected_sector_org = data_down.filter(
(d) => d.ald_sector_translation == selected_sector
)[0]['ald_sector'];

let [subdata_up, undefined] = getDataBarsAndWeights(data_up, selected_class, selected_sector);
let [subdata_up, undefined] = getDataBarsAndWeights(
data_up,
selected_class,
selected_sector,
scenario_source,
scenario,
allocation
);
subdata_up = orderData(
subdata_up,
tech_order.filter((d) => d.sector == selected_sector)[0].tech_order
Expand All @@ -73,7 +83,10 @@ export class techexposure_company {
let [subdata_down, subdata_weights] = getDataBarsAndWeights(
data_down,
selected_class,
selected_sector
selected_sector,
scenario_source,
scenario,
allocation
);
subdata_down = orderData(
subdata_down,
Expand Down Expand Up @@ -316,8 +329,22 @@ export class techexposure_company {
return subdata_tech;
}

function getDataBarsAndWeights(data, asset_class, sector) {
let subdata = getSectorAssetSubsetData(data, asset_class, sector);
function getDataBarsAndWeights(
data,
asset_class,
sector,
scenario_source,
scenario,
allocation
) {
let subdata = getSectorAssetSubsetData(
data,
asset_class,
sector,
scenario_source,
scenario,
allocation
);
var subdata_weights = getPortfolioWeightsPerIdData(subdata);
let subdata_tech = getTechnologyDataForStacking(subdata, subdata_weights);

Expand Down Expand Up @@ -355,9 +382,20 @@ export class techexposure_company {
}
}

function getSectorAssetSubsetData(data, asset_class, sector) {
let subdata = data.filter((d) => d.asset_class_translation == asset_class);
subdata = subdata.filter((d) => d.ald_sector_translation == sector);
function getSectorAssetSubsetData(
data,
asset_class,
sector,
scenario_source,
scenario,
allocation
) {
let subdata = data
.filter((d) => d.asset_class_translation == asset_class)
.filter((d) => d.ald_sector_translation == sector)
.filter((d) => d.scenario_source == scenario_source)
.filter((d) => d.scenario == scenario)
.filter((d) => d.allocation == allocation);

return subdata;
}
Expand All @@ -369,9 +407,14 @@ export class techexposure_company {
data_ordered[idx] = {};
data_ordered[idx].id = item.id;
tech_order_sector.forEach(function (tech) {
data_ordered[idx][tech] = item[tech];
if (Object.keys(item).includes(tech)) {
data_ordered[idx][tech] = item[tech];
}
});
});
if (Object.keys(item).length != Object.keys(data_ordered[idx]).length) {
throw new Error('Not all technologies for the sector found in json/tech_order_in_sectors.json dataset. Please append the dataset with new technologies if needed.');
}
});

return data_ordered;
}
Expand Down
8 changes: 5 additions & 3 deletions src/js/techmix_sector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class techmix_sector {
let dataYear = data.filter((d) => d.year == year);
let greenData = [];
uniqueValueTypes.forEach((item, idx) => {
let greenDataItem = dataYear.filter((d) => (d.val_type == item & d.green == true));
let greenDataItem = dataYear.filter((d) => (d.val_type == item) & (d.green == true));
greenData[idx] = {};
greenData[idx]['val_type'] = item;
if (greenDataItem.length > 0) {
Expand Down Expand Up @@ -326,7 +326,9 @@ export class techmix_sector {
.attr('y', 20)
.text((d) => d);

let sumGreenBarsInPlot = d3.sum(subdataTechPerYear[0], d => d.greenBars.green_sum) + d3.sum(subdataTechPerYear[1], d => d.greenBars.green_sum);
let sumGreenBarsInPlot =
d3.sum(subdataTechPerYear[0], (d) => d.greenBars.green_sum) +
d3.sum(subdataTechPerYear[1], (d) => d.greenBars.green_sum);
if (sumGreenBarsInPlot > 0) {
// Append legend for green bars
let legendGreen = svg
Expand All @@ -345,7 +347,7 @@ export class techmix_sector {
.attr('x', 30)
.attr('y', 20)
.text((d) => d);
}
}

// Add hover overs
const tooltip = d3
Expand Down
Loading
Loading