sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/disable text hover effect in tree map chart (#3929)

Browse Source 
* Disable text hover effect in tree map chart

* Update changelog
This commit is contained in:
vitalymatyushik 2024-10-15 20:10:35 +02:00 committed by GitHub
parent ab10b9da54
commit 7f97168aa7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- Disabled the text hover effect in the chart of the holdings tab on the home page (experimental)
- Improved the language localization for German (`de`) - Improved the language localization for German (`de`)
## 2.115.0 - 2024-10-14 ## 2.115.0 - 2024-10-14

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

@ -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)}%`
]; ];
}, },
hoverColor: 'white',
position: 'top' position: 'top'
}, },
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)}%`];
} }