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

Feature/change color assignment by annualized performance in treemap chart (#3617)

Browse Source 
* Change color assignment to annualized performance

* Update changelog
This commit is contained in:
Thomas Kaul
2024-07-31 19:18:50 +02:00
committed by GitHub
parent 7efda2f890
commit fcc2ab1a48
6 changed files with 120 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import { getAnnualizedPerformancePercent } from '@ghostfolio/common/calculation-helper';
import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
import { CommonModule } from '@angular/common';
@@ -14,10 +15,12 @@ import {
ViewChild
} from '@angular/core';
import { DataSource } from '@prisma/client';
import { Big } from 'big.js';
import { ChartConfiguration } from 'chart.js';
import { LinearScale } from 'chart.js';
import { Chart } from 'chart.js';
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
import { differenceInDays } from 'date-fns';
import { orderBy } from 'lodash';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -41,6 +44,8 @@ export class GfTreemapChartComponent
@ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
public static readonly HEAT_MULTIPLIER = 5;
public chart: Chart<'treemap'>;
public isLoading = true;
@@ -71,24 +76,52 @@ export class GfTreemapChartComponent
datasets: [
{
backgroundColor(ctx) {
const netPerformancePercentWithCurrencyEffect =
ctx.raw._data.netPerformancePercentWithCurrencyEffect;
const annualizedNetPerformancePercentWithCurrencyEffect =
getAnnualizedPerformancePercent({
daysInMarket: differenceInDays(
new Date(),
ctx.raw._data.dateOfFirstActivity
),
netPerformancePercentage: new Big(
ctx.raw._data.netPerformancePercentWithCurrencyEffect
)
}).toNumber();
if (netPerformancePercentWithCurrencyEffect > 0.03) {
if (
annualizedNetPerformancePercentWithCurrencyEffect >
0.03 * GfTreemapChartComponent.HEAT_MULTIPLIER
) {
return green[9];
} else if (netPerformancePercentWithCurrencyEffect > 0.02) {
} else if (
annualizedNetPerformancePercentWithCurrencyEffect >
0.02 * GfTreemapChartComponent.HEAT_MULTIPLIER
) {
return green[7];
} else if (netPerformancePercentWithCurrencyEffect > 0.01) {
} else if (
annualizedNetPerformancePercentWithCurrencyEffect >
0.01 * GfTreemapChartComponent.HEAT_MULTIPLIER
) {
return green[5];
} else if (netPerformancePercentWithCurrencyEffect > 0) {
} else if (annualizedNetPerformancePercentWithCurrencyEffect > 0) {
return green[3];
} else if (netPerformancePercentWithCurrencyEffect === 0) {
} else if (
annualizedNetPerformancePercentWithCurrencyEffect === 0
) {
return gray[3];
} else if (netPerformancePercentWithCurrencyEffect > -0.01) {
} else if (
annualizedNetPerformancePercentWithCurrencyEffect >
-0.01 * GfTreemapChartComponent.HEAT_MULTIPLIER
) {
return red[3];
} else if (netPerformancePercentWithCurrencyEffect > -0.02) {
} else if (
annualizedNetPerformancePercentWithCurrencyEffect >
-0.02 * GfTreemapChartComponent.HEAT_MULTIPLIER
) {
return red[5];
} else if (netPerformancePercentWithCurrencyEffect > -0.03) {
} else if (
annualizedNetPerformancePercentWithCurrencyEffect >
-0.03 * GfTreemapChartComponent.HEAT_MULTIPLIER
) {
return red[7];
} else {
return red[9];