|
|
@ -2,11 +2,13 @@ import {
|
|
|
|
getAnnualizedPerformancePercent,
|
|
|
|
getAnnualizedPerformancePercent,
|
|
|
|
getIntervalFromDateRange
|
|
|
|
getIntervalFromDateRange
|
|
|
|
} from '@ghostfolio/common/calculation-helper';
|
|
|
|
} from '@ghostfolio/common/calculation-helper';
|
|
|
|
|
|
|
|
import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
|
|
|
|
|
|
|
|
import { getLocale } from '@ghostfolio/common/helper';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
AssetProfileIdentifier,
|
|
|
|
AssetProfileIdentifier,
|
|
|
|
PortfolioPosition
|
|
|
|
PortfolioPosition
|
|
|
|
} from '@ghostfolio/common/interfaces';
|
|
|
|
} from '@ghostfolio/common/interfaces';
|
|
|
|
import { DateRange } from '@ghostfolio/common/types';
|
|
|
|
import { ColorScheme, DateRange } from '@ghostfolio/common/types';
|
|
|
|
|
|
|
|
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
@ -25,7 +27,7 @@ import { DataSource } from '@prisma/client';
|
|
|
|
import { Big } from 'big.js';
|
|
|
|
import { Big } from 'big.js';
|
|
|
|
import { ChartConfiguration } from 'chart.js';
|
|
|
|
import { ChartConfiguration } from 'chart.js';
|
|
|
|
import { LinearScale } from 'chart.js';
|
|
|
|
import { LinearScale } from 'chart.js';
|
|
|
|
import { Chart } from 'chart.js';
|
|
|
|
import { Chart, Tooltip } from 'chart.js';
|
|
|
|
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
|
|
|
|
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
|
|
|
|
import { differenceInDays, max } from 'date-fns';
|
|
|
|
import { differenceInDays, max } from 'date-fns';
|
|
|
|
import { orderBy } from 'lodash';
|
|
|
|
import { orderBy } from 'lodash';
|
|
|
@ -44,9 +46,12 @@ const { gray, green, red } = require('open-color');
|
|
|
|
export class GfTreemapChartComponent
|
|
|
|
export class GfTreemapChartComponent
|
|
|
|
implements AfterViewInit, OnChanges, OnDestroy
|
|
|
|
implements AfterViewInit, OnChanges, OnDestroy
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
@Input() baseCurrency: string;
|
|
|
|
|
|
|
|
@Input() colorScheme: ColorScheme;
|
|
|
|
@Input() cursor: string;
|
|
|
|
@Input() cursor: string;
|
|
|
|
@Input() dateRange: DateRange;
|
|
|
|
@Input() dateRange: DateRange;
|
|
|
|
@Input() holdings: PortfolioPosition[];
|
|
|
|
@Input() holdings: PortfolioPosition[];
|
|
|
|
|
|
|
|
@Input() locale = getLocale();
|
|
|
|
|
|
|
|
|
|
|
|
@Output() treemapChartClicked = new EventEmitter<AssetProfileIdentifier>();
|
|
|
|
@Output() treemapChartClicked = new EventEmitter<AssetProfileIdentifier>();
|
|
|
|
|
|
|
|
|
|
|
@ -58,7 +63,7 @@ export class GfTreemapChartComponent
|
|
|
|
public isLoading = true;
|
|
|
|
public isLoading = true;
|
|
|
|
|
|
|
|
|
|
|
|
public constructor() {
|
|
|
|
public constructor() {
|
|
|
|
Chart.register(LinearScale, TreemapController, TreemapElement);
|
|
|
|
Chart.register(LinearScale, Tooltip, TreemapController, TreemapElement);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public ngAfterViewInit() {
|
|
|
|
public ngAfterViewInit() {
|
|
|
@ -168,6 +173,9 @@ export class GfTreemapChartComponent
|
|
|
|
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.getTooltipPluginConfiguration()
|
|
|
|
|
|
|
|
);
|
|
|
|
this.chart.update();
|
|
|
|
this.chart.update();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.chart = new Chart(this.chartCanvas.nativeElement, {
|
|
|
|
this.chart = new Chart(this.chartCanvas.nativeElement, {
|
|
|
@ -199,9 +207,7 @@ export class GfTreemapChartComponent
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
plugins: {
|
|
|
|
plugins: {
|
|
|
|
tooltip: {
|
|
|
|
tooltip: this.getTooltipPluginConfiguration()
|
|
|
|
enabled: false
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
type: 'treemap'
|
|
|
|
type: 'treemap'
|
|
|
@ -211,4 +217,34 @@ export class GfTreemapChartComponent
|
|
|
|
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private getTooltipPluginConfiguration() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
...getTooltipOptions({
|
|
|
|
|
|
|
|
colorScheme: this.colorScheme,
|
|
|
|
|
|
|
|
currency: this.baseCurrency,
|
|
|
|
|
|
|
|
locale: this.locale
|
|
|
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
callbacks: {
|
|
|
|
|
|
|
|
label: (context) => {
|
|
|
|
|
|
|
|
if (context.raw._data.valueInBaseCurrency !== null) {
|
|
|
|
|
|
|
|
const value = <number>context.raw._data.valueInBaseCurrency;
|
|
|
|
|
|
|
|
return `${value.toLocaleString(this.locale, {
|
|
|
|
|
|
|
|
maximumFractionDigits: 2,
|
|
|
|
|
|
|
|
minimumFractionDigits: 2
|
|
|
|
|
|
|
|
})} ${this.baseCurrency}`;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
const percentage =
|
|
|
|
|
|
|
|
<number>context.raw._data.allocationInPercentage * 100;
|
|
|
|
|
|
|
|
return `${percentage.toFixed(2)}%`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
title: () => {
|
|
|
|
|
|
|
|
return '';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
xAlign: 'center',
|
|
|
|
|
|
|
|
yAlign: 'center'
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|