Exposure statistics: bold out the asset class name for sector exposure

[MonikaFu]

Making 'Corporate bonds' bold in this case would draw attention of the user more to the fact that the percentage is of the asset class portion of the portfolio and not the entire portfolio.

AB#12275

[cjyetman]

I think if you add this

.style('font-weight', (d, i) => i == 2 ? 'bold' : 'normal')

to the end of this block

pacta-dashboard-svelte/src/js/exposure_stats.js

Lines 104 to 115 in ed95a2b

	let label_sector = ['of the', asset_class, 'portion of portfolio'];
	svg
	.append('g')
	.attr('transform', 'translate(' + [sector_position_x, text_position_y] + ')')
	.selectAll('text')
	.data(label_sector)
	.enter()
	.append('text')
	.attr('transform', (d, i) => 'translate(0, ' + i * 15 + ')')
	.text((d) => d)
	.style('dominant-baseline', 'middle')
	.style('text-anchor', 'end');

with the logic that the 2nd element of the data, asset_class, will get font-weight: bold added to its style attribute, and the first and third will get font-weight: normal leaving them unchanged (assuming there's no other CSS already changing them).

note that, I'm not 100% sure what is the intent of this issue...
I'm assuming that you want
of the Corporate Bonds of the portfolio
to be
of the Corporate Bonds of the portfolio (<- Corporate Bonds is bold here even though I can barely tell in GitHub's rendering)
where only "Corporate Bonds" (or whatever other value that bit of text is filled with) is bold and the rest if left normal

[jdhoffa]

.style('font-weight', (d, i) => i == 2 ? 'bold' : 'normal')

Can I ask why we need both d and i there?

[jdhoffa]

Implemented and it seems to work in #106

[cjyetman]

.style('font-weight', (d, i) => i == 2 ? 'bold' : 'normal')

Can I ask why we need both d and i there?

The first argument passed to the arrow function will be the element/item, and second will be the iterator/index. You don't really have a choice with that (that's what D3's .style() does), but you can name them whatever you want (though d and i are very common), e.g.

.style('font-weight', (elem, idx) => idx == 2 ? 'bold' : 'normal')