Browse Source

Extend tooltip

* allocation
* change
* performance
pull/4323/head
Thomas Kaul 6 months ago
parent
commit
0d59aa5f93
  1. 25
      libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

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

@ -342,33 +342,42 @@ export class GfTreemapChartComponent
}), }),
callbacks: { callbacks: {
label: (context) => { label: (context) => {
const allocationInPercentage = `${((context.raw._data.allocationInPercentage as number) * 100).toFixed(2)}%`;
const name = context.raw._data.name; const name = context.raw._data.name;
const sign =
context.raw._data.netPerformancePercentWithCurrencyEffect > 0
? '+'
: '';
const symbol = context.raw._data.symbol; const symbol = context.raw._data.symbol;
const netPerformanceInPercentageWithSign = `${sign}${(context.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`;
if (context.raw._data.valueInBaseCurrency !== null) { if (context.raw._data.valueInBaseCurrency !== null) {
const value = context.raw._data.valueInBaseCurrency as number; const value = context.raw._data.valueInBaseCurrency as number;
const sign =
context.raw._data.netPerformanceWithCurrencyEffect > 0 ? '+' : '';
return [ return [
`${name ?? symbol}`, `${name ?? symbol} (${allocationInPercentage})`,
`${value.toLocaleString(this.locale, { `${value.toLocaleString(this.locale, {
maximumFractionDigits: 2, maximumFractionDigits: 2,
minimumFractionDigits: 2 minimumFractionDigits: 2
})} ${this.baseCurrency}`, })} ${this.baseCurrency}`,
'',
$localize`Change` + ' (' + $localize`Performance` + ')',
`${sign}${context.raw._data.netPerformanceWithCurrencyEffect.toLocaleString( `${sign}${context.raw._data.netPerformanceWithCurrencyEffect.toLocaleString(
this.locale, this.locale,
{ {
maximumFractionDigits: 2, maximumFractionDigits: 2,
minimumFractionDigits: 2 minimumFractionDigits: 2
} }
)} (${sign}${(context.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%)` )} ${this.baseCurrency} (${netPerformanceInPercentageWithSign})`
]; ];
} else { } else {
const percentage = return [
(context.raw._data.allocationInPercentage as number) * 100; `${name ?? symbol} (${allocationInPercentage})`,
'',
return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`]; $localize`Performance`,
netPerformanceInPercentageWithSign
];
} }
}, },
title: () => { title: () => {

Loading…
Cancel
Save