|
@ -57,8 +57,6 @@ export class GfTreemapChartComponent |
|
|
|
|
|
|
|
|
@ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>; |
|
|
@ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>; |
|
|
|
|
|
|
|
|
public static readonly HEAT_MULTIPLIER = 5; |
|
|
|
|
|
|
|
|
|
|
|
public chart: Chart<'treemap'>; |
|
|
public chart: Chart<'treemap'>; |
|
|
public isLoading = true; |
|
|
public isLoading = true; |
|
|
|
|
|
|
|
@ -86,6 +84,7 @@ export class GfTreemapChartComponent |
|
|
this.isLoading = true; |
|
|
this.isLoading = true; |
|
|
|
|
|
|
|
|
const { endDate, startDate } = getIntervalFromDateRange(this.dateRange); |
|
|
const { endDate, startDate } = getIntervalFromDateRange(this.dateRange); |
|
|
|
|
|
|
|
|
const netPerformancePercentsWithCurrencyEffect = this.holdings.map( |
|
|
const netPerformancePercentsWithCurrencyEffect = this.holdings.map( |
|
|
({ dateOfFirstActivity, netPerformancePercentWithCurrencyEffect }) => { |
|
|
({ dateOfFirstActivity, netPerformancePercentWithCurrencyEffect }) => { |
|
|
return getAnnualizedPerformancePercent({ |
|
|
return getAnnualizedPerformancePercent({ |
|
@ -101,18 +100,24 @@ export class GfTreemapChartComponent |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
const positiveNetPerformancePercents = |
|
|
const positiveNetPerformancePercents = |
|
|
netPerformancePercentsWithCurrencyEffect.filter((v) => { |
|
|
netPerformancePercentsWithCurrencyEffect.filter( |
|
|
return v > 0; |
|
|
(annualizedNetPerformancePercent) => { |
|
|
}); |
|
|
return annualizedNetPerformancePercent > 0; |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
const positiveNetPerformancePercentsRange = { |
|
|
const positiveNetPerformancePercentsRange = { |
|
|
max: Math.max(...positiveNetPerformancePercents), |
|
|
max: Math.max(...positiveNetPerformancePercents), |
|
|
min: Math.min(...positiveNetPerformancePercents) |
|
|
min: Math.min(...positiveNetPerformancePercents) |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const negativeNetPerformancePercents = |
|
|
const negativeNetPerformancePercents = |
|
|
netPerformancePercentsWithCurrencyEffect.filter((v) => { |
|
|
netPerformancePercentsWithCurrencyEffect.filter( |
|
|
return v < 0; |
|
|
(annualizedNetPerformancePercent) => { |
|
|
}); |
|
|
return annualizedNetPerformancePercent < 0; |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
const negativeNetPerformancePercentsRange = { |
|
|
const negativeNetPerformancePercentsRange = { |
|
|
max: Math.max(...negativeNetPerformancePercents), |
|
|
max: Math.max(...negativeNetPerformancePercents), |
|
|
min: Math.min(...negativeNetPerformancePercents) |
|
|
min: Math.min(...negativeNetPerformancePercents) |
|
@ -172,8 +177,7 @@ export class GfTreemapChartComponent |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return green[3]; |
|
|
return green[3]; |
|
|
} |
|
|
} else { |
|
|
|
|
|
|
|
|
const range = |
|
|
const range = |
|
|
negativeNetPerformancePercentsRange.min - |
|
|
negativeNetPerformancePercentsRange.min - |
|
|
negativeNetPerformancePercentsRange.max; |
|
|
negativeNetPerformancePercentsRange.max; |
|
@ -196,6 +200,7 @@ export class GfTreemapChartComponent |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return red[3]; |
|
|
return red[3]; |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
borderRadius: 4, |
|
|
borderRadius: 4, |
|
|
key: 'allocationInPercentage', |
|
|
key: 'allocationInPercentage', |
|
|