Skip to content

Commit 0af2b69

Browse files
MonikaFuMonikaFu
committed
Style
1 parent 7d3d26f commit 0af2b69

File tree

3 files changed

+209
-106
lines changed

3 files changed

+209
-106
lines changed

‎src/js/exposure_stats.js

+84-86
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as d3 from 'd3';
22

33
export class ExposureStatsTile {
4-
constructor(container, data) {
5-
let container_div;
4+
constructor(container, data) {
5+
let container_div;
66

77
if (typeof container === 'string') {
88
container_div = document.querySelector(container);
@@ -13,7 +13,7 @@ export class ExposureStatsTile {
1313
container_div.innerHTML = '';
1414

1515
d3.select(container_div).attr('chart_type', 'ExposureStatsTile');
16-
16+
1717
container_div.classList.add('ExposureStatsTile');
1818
container_div.classList.add('d3chart');
1919
container_div.classList.add('chart_container');
@@ -28,11 +28,11 @@ export class ExposureStatsTile {
2828
const marginBottom = 5;
2929
const marginLeft = 5;
3030

31-
// Declare text positions
32-
let asset_posiiton_x = (width - marginLeft)/2,
33-
text_position_y = height - marginBottom - 35,
34-
perc_position_y = (height - marginBottom)/2 - 10,
35-
sector_position_x = width - marginLeft;
31+
// Declare text positions
32+
let asset_posiiton_x = (width - marginLeft) / 2,
33+
text_position_y = height - marginBottom - 35,
34+
perc_position_y = (height - marginBottom) / 2 - 10,
35+
sector_position_x = width - marginLeft;
3636

3737
// Create the svg container
3838
const svg = this.container
@@ -43,88 +43,86 @@ export class ExposureStatsTile {
4343
.attr('preserveAspectRatio', 'xMinYMin meet')
4444
.attr('style', 'max-width: 100%; height: auto;');
4545

46-
// Filter data
47-
let sector = document.querySelector('#sector_selector').value,
46+
// Filter data
47+
let sector = document.querySelector('#sector_selector').value,
4848
asset_class = document.querySelector('#asset_class_selector').value;
49-
50-
let subdata = data
51-
.filter((d) => d.asset_type == asset_class)
52-
.filter((d) => d.sector == sector);
53-
54-
// Annotate with stats info - asset class
55-
svg
56-
.append('g')
57-
.attr('transform', 'translate(' + [asset_posiiton_x, marginTop] + ')')
58-
.append('text')
59-
.text(asset_class)
60-
.style('dominant-baseline', 'middle')
61-
.style('font-weight', 'bold')
62-
.style('text-anchor', 'end');
63-
64-
svg
65-
.append('g')
66-
.attr('transform', 'translate(' + [asset_posiiton_x, perc_position_y] + ')')
67-
.append('text')
68-
.text(prcnt_format(subdata[0].percentage_value_invested))
69-
.style('dominant-baseline', 'middle')
70-
.style('font-weight', 'bold')
71-
.style('text-anchor', 'end')
72-
.style('font-size', '2.5em');
73-
74-
let label_total = ['of the', 'total portfolio'];
75-
svg
76-
.append('g')
77-
.attr('transform', 'translate(' + [asset_posiiton_x, text_position_y] + ')')
78-
.selectAll('text')
79-
.data(label_total)
80-
.enter()
81-
.append('text')
82-
.attr('transform', (d,i) => 'translate(0, ' + (i * 15) + ')')
83-
.text(d => d)
84-
.style('dominant-baseline', 'middle')
85-
.style('text-anchor', 'end');
86-
87-
// Annotate with stats info - sector
88-
svg
89-
.append('g')
90-
.attr('transform', 'translate(' + [sector_position_x, marginTop] + ')')
91-
.append('text')
92-
.text(sector)
93-
.style('dominant-baseline', 'middle')
94-
.style('font-weight', 'bold')
95-
.style('text-anchor', 'end');
96-
97-
svg
98-
.append('g')
99-
.attr('transform', 'translate(' + [sector_position_x, perc_position_y] + ')')
100-
.append('text')
101-
.text(prcnt_format(subdata[0].perc_asset_val_sector))
102-
.style('dominant-baseline', 'middle')
103-
.style('font-weight', 'bold')
104-
.style('text-anchor', 'end')
105-
.style('font-size', '2.5em');
106-
107-
let label_sector = ['of the', asset_class, 'portion of portfolio'];
108-
svg
109-
.append('g')
110-
.attr('transform', 'translate(' + [sector_position_x, text_position_y] + ')')
111-
.selectAll('text')
112-
.data(label_sector)
113-
.enter()
114-
.append('text')
115-
.attr('transform', (d,i) => 'translate(0, ' + (i * 15) + ')')
116-
.text(d => d)
117-
.style('dominant-baseline', 'middle')
118-
.style('text-anchor', 'end');
119-
120-
function prcnt_format(num) {
49+
50+
let subdata = data.filter((d) => d.asset_type == asset_class).filter((d) => d.sector == sector);
51+
52+
// Annotate with stats info - asset class
53+
svg
54+
.append('g')
55+
.attr('transform', 'translate(' + [asset_posiiton_x, marginTop] + ')')
56+
.append('text')
57+
.text(asset_class)
58+
.style('dominant-baseline', 'middle')
59+
.style('font-weight', 'bold')
60+
.style('text-anchor', 'end');
61+
62+
svg
63+
.append('g')
64+
.attr('transform', 'translate(' + [asset_posiiton_x, perc_position_y] + ')')
65+
.append('text')
66+
.text(prcnt_format(subdata[0].percentage_value_invested))
67+
.style('dominant-baseline', 'middle')
68+
.style('font-weight', 'bold')
69+
.style('text-anchor', 'end')
70+
.style('font-size', '2.5em');
71+
72+
let label_total = ['of the', 'total portfolio'];
73+
svg
74+
.append('g')
75+
.attr('transform', 'translate(' + [asset_posiiton_x, text_position_y] + ')')
76+
.selectAll('text')
77+
.data(label_total)
78+
.enter()
79+
.append('text')
80+
.attr('transform', (d, i) => 'translate(0, ' + i * 15 + ')')
81+
.text((d) => d)
82+
.style('dominant-baseline', 'middle')
83+
.style('text-anchor', 'end');
84+
85+
// Annotate with stats info - sector
86+
svg
87+
.append('g')
88+
.attr('transform', 'translate(' + [sector_position_x, marginTop] + ')')
89+
.append('text')
90+
.text(sector)
91+
.style('dominant-baseline', 'middle')
92+
.style('font-weight', 'bold')
93+
.style('text-anchor', 'end');
94+
95+
svg
96+
.append('g')
97+
.attr('transform', 'translate(' + [sector_position_x, perc_position_y] + ')')
98+
.append('text')
99+
.text(prcnt_format(subdata[0].perc_asset_val_sector))
100+
.style('dominant-baseline', 'middle')
101+
.style('font-weight', 'bold')
102+
.style('text-anchor', 'end')
103+
.style('font-size', '2.5em');
104+
105+
let label_sector = ['of the', asset_class, 'portion of portfolio'];
106+
svg
107+
.append('g')
108+
.attr('transform', 'translate(' + [sector_position_x, text_position_y] + ')')
109+
.selectAll('text')
110+
.data(label_sector)
111+
.enter()
112+
.append('text')
113+
.attr('transform', (d, i) => 'translate(0, ' + i * 15 + ')')
114+
.text((d) => d)
115+
.style('dominant-baseline', 'middle')
116+
.style('text-anchor', 'end');
117+
118+
function prcnt_format(num) {
121119
if (num == 0) {
122120
return '0%';
123121
} else if (num < 0.001) {
124-
return '< 0.1%';
125-
} else {
122+
return '< 0.1%';
123+
} else {
126124
return d3.format('.2p')(num);
127125
}
128126
}
129-
}
130-
}
127+
}
128+
}

‎src/json/data_exposure_stats.json

+86-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,86 @@
1-
[{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Power","perc_asset_val_sector":0.0812},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Power","perc_asset_val_sector":0.1661},{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Automotive","perc_asset_val_sector":0},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Automotive","perc_asset_val_sector":0.3094},{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Oil&Gas","perc_asset_val_sector":0.2697},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Oil&Gas","perc_asset_val_sector":0.1457},{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Coal","perc_asset_val_sector":0},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Coal","perc_asset_val_sector":0.0616},{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Steel","perc_asset_val_sector":0.3992},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Steel","perc_asset_val_sector":0.073},{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Aviation","perc_asset_val_sector":0},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Aviation","perc_asset_val_sector":0.0143},{"asset_type":"Corporate Bonds","percentage_value_invested":0.1679,"sector":"Cement","perc_asset_val_sector":0},{"asset_type":"Listed Equity","percentage_value_invested":0.784,"sector":"Cement","perc_asset_val_sector":0.0414}]
1+
[
2+
{
3+
"asset_type": "Corporate Bonds",
4+
"percentage_value_invested": 0.1679,
5+
"sector": "Power",
6+
"perc_asset_val_sector": 0.0812
7+
},
8+
{
9+
"asset_type": "Listed Equity",
10+
"percentage_value_invested": 0.784,
11+
"sector": "Power",
12+
"perc_asset_val_sector": 0.1661
13+
},
14+
{
15+
"asset_type": "Corporate Bonds",
16+
"percentage_value_invested": 0.1679,
17+
"sector": "Automotive",
18+
"perc_asset_val_sector": 0
19+
},
20+
{
21+
"asset_type": "Listed Equity",
22+
"percentage_value_invested": 0.784,
23+
"sector": "Automotive",
24+
"perc_asset_val_sector": 0.3094
25+
},
26+
{
27+
"asset_type": "Corporate Bonds",
28+
"percentage_value_invested": 0.1679,
29+
"sector": "Oil&Gas",
30+
"perc_asset_val_sector": 0.2697
31+
},
32+
{
33+
"asset_type": "Listed Equity",
34+
"percentage_value_invested": 0.784,
35+
"sector": "Oil&Gas",
36+
"perc_asset_val_sector": 0.1457
37+
},
38+
{
39+
"asset_type": "Corporate Bonds",
40+
"percentage_value_invested": 0.1679,
41+
"sector": "Coal",
42+
"perc_asset_val_sector": 0
43+
},
44+
{
45+
"asset_type": "Listed Equity",
46+
"percentage_value_invested": 0.784,
47+
"sector": "Coal",
48+
"perc_asset_val_sector": 0.0616
49+
},
50+
{
51+
"asset_type": "Corporate Bonds",
52+
"percentage_value_invested": 0.1679,
53+
"sector": "Steel",
54+
"perc_asset_val_sector": 0.3992
55+
},
56+
{
57+
"asset_type": "Listed Equity",
58+
"percentage_value_invested": 0.784,
59+
"sector": "Steel",
60+
"perc_asset_val_sector": 0.073
61+
},
62+
{
63+
"asset_type": "Corporate Bonds",
64+
"percentage_value_invested": 0.1679,
65+
"sector": "Aviation",
66+
"perc_asset_val_sector": 0
67+
},
68+
{
69+
"asset_type": "Listed Equity",
70+
"percentage_value_invested": 0.784,
71+
"sector": "Aviation",
72+
"perc_asset_val_sector": 0.0143
73+
},
74+
{
75+
"asset_type": "Corporate Bonds",
76+
"percentage_value_invested": 0.1679,
77+
"sector": "Cement",
78+
"perc_asset_val_sector": 0
79+
},
80+
{
81+
"asset_type": "Listed Equity",
82+
"percentage_value_invested": 0.784,
83+
"sector": "Cement",
84+
"perc_asset_val_sector": 0.0414
85+
}
86+
]

0 commit comments

Comments
 (0)