Browse Source

feat: make white hover color

pull/3929/head
vitalymatyushik 10 months ago
committed by Thomas Kaul
parent
commit
d2029fcfd1
  1. 20
      libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

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

@ -87,7 +87,7 @@ export class GfTreemapChartComponent
const { endDate, startDate } = getIntervalFromDateRange(this.dateRange); const { endDate, startDate } = getIntervalFromDateRange(this.dateRange);
const data: ChartConfiguration['data'] = <any>{ const data: ChartConfiguration['data'] = {
datasets: [ datasets: [
{ {
backgroundColor(ctx) { backgroundColor(ctx) {
@ -170,25 +170,25 @@ export class GfTreemapChartComponent
`${netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''}${(ctx.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%` `${netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''}${(ctx.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`
]; ];
}, },
position: 'top' position: 'top',
hoverColor: ['white']
}, },
spacing: 1, spacing: 1,
tree: this.holdings tree: this.holdings
} }
] ]
}; } as any;
if (this.chartCanvas) { if (this.chartCanvas) {
if (this.chart) { if (this.chart) {
this.chart.data = data; this.chart.data = data;
this.chart.options.plugins.tooltip = <unknown>( this.chart.options.plugins.tooltip =
this.getTooltipPluginConfiguration() this.getTooltipPluginConfiguration() as unknown;
);
this.chart.update(); this.chart.update();
} else { } else {
this.chart = new Chart(this.chartCanvas.nativeElement, { this.chart = new Chart(this.chartCanvas.nativeElement, {
data, data,
options: <unknown>{ options: {
animation: false, animation: false,
onClick: (event, activeElements) => { onClick: (event, activeElements) => {
try { try {
@ -217,7 +217,7 @@ export class GfTreemapChartComponent
plugins: { plugins: {
tooltip: this.getTooltipPluginConfiguration() tooltip: this.getTooltipPluginConfiguration()
} }
}, } as unknown,
type: 'treemap' type: 'treemap'
}); });
} }
@ -239,7 +239,7 @@ export class GfTreemapChartComponent
const symbol = context.raw._data.symbol; 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 = context.raw._data.valueInBaseCurrency as number;
return [ return [
`${name ?? symbol}`, `${name ?? symbol}`,
@ -250,7 +250,7 @@ export class GfTreemapChartComponent
]; ];
} else { } else {
const percentage = const percentage =
<number>context.raw._data.allocationInPercentage * 100; (context.raw._data.allocationInPercentage as number) * 100;
return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`]; return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
} }

Loading…
Cancel
Save