Browse Source

Feature/Extend tooltip in treemap chart component by name (#3907)

* Extend tooltip in treemap chart component by name

* Update changelog
pull/3910/head
Uday R 3 months ago
committed by GitHub
parent
commit
d158d0c326
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 4
      CHANGELOG.md
  2. 18
      libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

4
CHANGELOG.md

@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## Unreleased ## Unreleased
### Added
- Added the name to the tooltip of the chart of the holdings tab on the home page (experimental)
### Fixed ### Fixed
- Considered the language of the user settings on login with _Security Token_ - Considered the language of the user settings on login with _Security Token_

18
libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@ -227,16 +227,24 @@ export class GfTreemapChartComponent
}), }),
callbacks: { callbacks: {
label: (context) => { label: (context) => {
const name = context.raw._data.name;
const symbol = context.raw._data.symbol;
if (context.raw._data.valueInBaseCurrency !== null) { if (context.raw._data.valueInBaseCurrency !== null) {
const value = <number>context.raw._data.valueInBaseCurrency; const value = <number>context.raw._data.valueInBaseCurrency;
return `${value.toLocaleString(this.locale, {
maximumFractionDigits: 2, return [
minimumFractionDigits: 2 `${name ?? symbol}`,
})} ${this.baseCurrency}`; `${value.toLocaleString(this.locale, {
maximumFractionDigits: 2,
minimumFractionDigits: 2
})} ${this.baseCurrency}`
];
} else { } else {
const percentage = const percentage =
<number>context.raw._data.allocationInPercentage * 100; <number>context.raw._data.allocationInPercentage * 100;
return `${percentage.toFixed(2)}%`;
return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
} }
}, },
title: () => { title: () => {

Loading…
Cancel
Save