topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat(lib): improve chart type safety

pull/6264/head
KenTandrian 2 days ago
parent
131fd2cc7c
commit
c30893bdee
8 changed files with 160 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
  2. 28
      apps/client/src/app/components/investment-chart/investment-chart.component.ts
  3. 22
      libs/common/src/lib/chart-helper.ts
  4. 67
      libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
  5. 16
      libs/ui/src/lib/line-chart/line-chart.component.ts
  6. 45
      libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
  7. 13
      libs/ui/src/lib/treemap-chart/interfaces/interfaces.ts
  8. 31
      libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

16
apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
View File

@ -21,6 +21,7 @@ import { CommonModule } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
Component, Component,
type ElementRef,
EventEmitter, EventEmitter,
Input, Input,
OnChanges, OnChanges,
@ -42,7 +43,8 @@ import {
PointElement, PointElement,
TimeScale, TimeScale,
Tooltip, Tooltip,
TooltipPosition type TooltipOptions,
type TooltipPosition
} from 'chart.js'; } from 'chart.js';
import 'chartjs-adapter-date-fns'; import 'chartjs-adapter-date-fns';
import annotationPlugin from 'chartjs-plugin-annotation'; import annotationPlugin from 'chartjs-plugin-annotation';
@ -78,7 +80,7 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
@Output() benchmarkChanged = new EventEmitter<string>(); @Output() benchmarkChanged = new EventEmitter<string>();
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
public chart: Chart<'line'>; public chart: Chart<'line'>;
public hasPermissionToAccessAdminControl: boolean; public hasPermissionToAccessAdminControl: boolean;
@ -158,7 +160,7 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
if (this.chart) { if (this.chart) {
this.chart.data = data; this.chart.data = data;
this.chart.options.plugins.tooltip = this.chart.options.plugins.tooltip =
this.getTooltipPluginConfiguration() as 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, {
@ -193,10 +195,11 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
display: false display: false
}, },
tooltip: this.getTooltipPluginConfiguration(), tooltip: this.getTooltipPluginConfiguration(),
// @ts-ignore
verticalHoverLine: { verticalHoverLine: {
color: `rgba(${getTextColor(this.colorScheme)}, 0.1)` color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
} }
} as unknown, },
responsive: true, responsive: true,
scales: { scales: {
x: { x: {
@ -253,7 +256,7 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
} }
} }
private getTooltipPluginConfiguration() { private getTooltipPluginConfiguration(): Partial<TooltipOptions<'line'>> {
return { return {
...getTooltipOptions({ ...getTooltipOptions({
colorScheme: this.colorScheme, colorScheme: this.colorScheme,
@ -261,7 +264,8 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
unit: '%' unit: '%'
}), }),
mode: 'index', mode: 'index',
position: 'top' as unknown, // @ts-ignore
position: 'top',
xAlign: 'center', xAlign: 'center',
yAlign: 'bottom' yAlign: 'bottom'
}; };

28
apps/client/src/app/components/investment-chart/investment-chart.component.ts
View File

@ -20,6 +20,7 @@ import { CommonModule } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
Component, Component,
type ElementRef,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
@ -36,7 +37,8 @@ import {
PointElement, PointElement,
TimeScale, TimeScale,
Tooltip, Tooltip,
TooltipPosition type TooltipOptions,
type TooltipPosition
} from 'chart.js'; } from 'chart.js';
import 'chartjs-adapter-date-fns'; import 'chartjs-adapter-date-fns';
import annotationPlugin from 'chartjs-plugin-annotation'; import annotationPlugin from 'chartjs-plugin-annotation';
@ -62,7 +64,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
@Input() locale = getLocale(); @Input() locale = getLocale();
@Input() savingsRate = 0; @Input() savingsRate = 0;
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
public chart: Chart<'bar' | 'line'>; public chart: Chart<'bar' | 'line'>;
private investments: InvestmentItem[]; private investments: InvestmentItem[];
@ -121,12 +123,12 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
}), }),
label: this.benchmarkDataLabel, label: this.benchmarkDataLabel,
segment: { segment: {
borderColor: (context: unknown) => borderColor: (context) =>
this.isInFuture( this.isInFuture(
context, context,
`rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.67)` `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.67)`
), ),
borderDash: (context: unknown) => this.isInFuture(context, [2, 2]) borderDash: (context) => this.isInFuture(context, [2, 2])
}, },
stepped: true stepped: true
}, },
@ -143,12 +145,12 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
label: $localize`Total Amount`, label: $localize`Total Amount`,
pointRadius: 0, pointRadius: 0,
segment: { segment: {
borderColor: (context: unknown) => borderColor: (context) =>
this.isInFuture( this.isInFuture(
context, context,
`rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)` `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
), ),
borderDash: (context: unknown) => this.isInFuture(context, [2, 2]) borderDash: (context) => this.isInFuture(context, [2, 2])
} }
} }
] ]
@ -158,7 +160,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
if (this.chart) { if (this.chart) {
this.chart.data = chartData; this.chart.data = chartData;
this.chart.options.plugins.tooltip = this.chart.options.plugins.tooltip =
this.getTooltipPluginConfiguration() as unknown; this.getTooltipPluginConfiguration();
if ( if (
this.savingsRate && this.savingsRate &&
@ -201,7 +203,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
color: 'white', color: 'white',
content: $localize`Savings Rate`, content: $localize`Savings Rate`,
display: true, display: true,
font: { size: '10px', weight: 'normal' }, font: { size: 10, weight: 'normal' },
padding: { padding: {
x: 4, x: 4,
y: 2 y: 2
@ -226,10 +228,11 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
display: false display: false
}, },
tooltip: this.getTooltipPluginConfiguration(), tooltip: this.getTooltipPluginConfiguration(),
// @ts-ignore
verticalHoverLine: { verticalHoverLine: {
color: `rgba(${getTextColor(this.colorScheme)}, 0.1)` color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
} }
} as unknown, },
responsive: true, responsive: true,
scales: { scales: {
x: { x: {
@ -286,7 +289,9 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
} }
} }
private getTooltipPluginConfiguration() { private getTooltipPluginConfiguration(): Partial<
TooltipOptions<'bar' | 'line'>
> {
return { return {
...getTooltipOptions({ ...getTooltipOptions({
colorScheme: this.colorScheme, colorScheme: this.colorScheme,
@ -296,7 +301,8 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
unit: this.isInPercent ? '%' : undefined unit: this.isInPercent ? '%' : undefined
}), }),
mode: 'index', mode: 'index',
position: 'top' as unknown, // @ts-ignore
position: 'top',
xAlign: 'center', xAlign: 'center',
yAlign: 'bottom' yAlign: 'bottom'
}; };

22
libs/common/src/lib/chart-helper.ts
View File

@ -3,6 +3,7 @@ import type {
Chart, Chart,
ChartTypeRegistry, ChartTypeRegistry,
Plugin, Plugin,
TooltipOptions,
TooltipPosition TooltipPosition
} from 'chart.js'; } from 'chart.js';
import { format } from 'date-fns'; import { format } from 'date-fns';
@ -21,7 +22,7 @@ export function formatGroupedDate({
date, date,
groupBy groupBy
}: { }: {
date: Date; date: number;
groupBy: GroupBy; groupBy: GroupBy;
}) { }) {
if (groupBy === 'month') { if (groupBy === 'month') {
@ -45,34 +46,51 @@ export function getTooltipOptions({
groupBy?: GroupBy; groupBy?: GroupBy;
locale?: string; locale?: string;
unit?: string; unit?: string;
}) { }): Partial<TooltipOptions> {
return { return {
backgroundColor: getBackgroundColor(colorScheme), backgroundColor: getBackgroundColor(colorScheme),
bodyColor: `rgb(${getTextColor(colorScheme)})`, bodyColor: `rgb(${getTextColor(colorScheme)})`,
borderWidth: 1, borderWidth: 1,
borderColor: `rgba(${getTextColor(colorScheme)}, 0.1)`, borderColor: `rgba(${getTextColor(colorScheme)}, 0.1)`,
callbacks: { callbacks: {
afterBody: () => '',
afterFooter: () => '',
afterLabel: () => '',
afterTitle: () => '',
beforeBody: () => '',
beforeFooter: () => '',
beforeLabel: () => '',
beforeTitle: () => '',
footer: () => '',
label: (context) => { label: (context) => {
let label = context.dataset.label ?? ''; let label = context.dataset.label ?? '';
if (label) { if (label) {
label += ': '; label += ': ';
} }
// @ts-ignore
if (context.parsed.y !== null) { if (context.parsed.y !== null) {
if (currency) { if (currency) {
// @ts-ignore
label += `${context.parsed.y.toLocaleString(locale, { label += `${context.parsed.y.toLocaleString(locale, {
maximumFractionDigits: 2, maximumFractionDigits: 2,
minimumFractionDigits: 2 minimumFractionDigits: 2
})} ${currency}`; })} ${currency}`;
} else if (unit) { } else if (unit) {
// @ts-ignore
label += `${context.parsed.y.toFixed(2)} ${unit}`; label += `${context.parsed.y.toFixed(2)} ${unit}`;
} else { } else {
// @ts-ignore
label += context.parsed.y.toFixed(2); label += context.parsed.y.toFixed(2);
} }
} }
return label; return label;
}, },
labelColor: () => {},
labelPointStyle: () => {},
labelTextColor: () => {},
title: (contexts) => { title: (contexts) => {
if (groupBy) { if (groupBy) {
// @ts-ignore
return formatGroupedDate({ groupBy, date: contexts[0].parsed.x }); return formatGroupedDate({ groupBy, date: contexts[0].parsed.x });
} }

67
libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
View File

@ -98,10 +98,15 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
@ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>; @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
public calculatorForm = this.formBuilder.group({ public calculatorForm = this.formBuilder.group({
// @ts-ignore
annualInterestRate: new FormControl<number>(undefined), annualInterestRate: new FormControl<number>(undefined),
// @ts-ignore
paymentPerPeriod: new FormControl<number>(undefined), paymentPerPeriod: new FormControl<number>(undefined),
// @ts-ignore
principalInvestmentAmount: new FormControl<number>(undefined), principalInvestmentAmount: new FormControl<number>(undefined),
// @ts-ignore
projectedTotalAmount: new FormControl<number>(undefined), projectedTotalAmount: new FormControl<number>(undefined),
// @ts-ignore
retirementDate: new FormControl<Date>(undefined) retirementDate: new FormControl<Date>(undefined)
}); });
public chart: Chart<'bar'>; public chart: Chart<'bar'>;
@ -148,25 +153,25 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
this.calculatorForm this.calculatorForm
.get('annualInterestRate') .get('annualInterestRate')
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) ?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
.subscribe((annualInterestRate) => { .subscribe((annualInterestRate) => {
this.annualInterestRateChanged.emit(annualInterestRate); this.annualInterestRateChanged.emit(annualInterestRate);
}); });
this.calculatorForm this.calculatorForm
.get('paymentPerPeriod') .get('paymentPerPeriod')
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) ?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
.subscribe((savingsRate) => { .subscribe((savingsRate) => {
this.savingsRateChanged.emit(savingsRate); this.savingsRateChanged.emit(savingsRate);
}); });
this.calculatorForm this.calculatorForm
.get('projectedTotalAmount') .get('projectedTotalAmount')
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) ?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
.subscribe((projectedTotalAmount) => { .subscribe((projectedTotalAmount) => {
this.projectedTotalAmountChanged.emit(projectedTotalAmount); this.projectedTotalAmountChanged.emit(projectedTotalAmount);
}); });
this.calculatorForm this.calculatorForm
.get('retirementDate') .get('retirementDate')
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) ?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
.subscribe((retirementDate) => { .subscribe((retirementDate) => {
this.retirementDateChanged.emit(retirementDate); this.retirementDateChanged.emit(retirementDate);
}); });
@ -194,11 +199,11 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
this.calculatorForm.patchValue( this.calculatorForm.patchValue(
{ {
annualInterestRate: annualInterestRate:
this.calculatorForm.get('annualInterestRate').value, this.calculatorForm.get('annualInterestRate')?.value,
paymentPerPeriod: this.getPMT(), paymentPerPeriod: this.getPMT(),
principalInvestmentAmount: this.calculatorForm.get( principalInvestmentAmount: this.calculatorForm.get(
'principalInvestmentAmount' 'principalInvestmentAmount'
).value, )?.value,
projectedTotalAmount: projectedTotalAmount:
Math.round(this.getProjectedTotalAmount()) || 0, Math.round(this.getProjectedTotalAmount()) || 0,
retirementDate: retirementDate:
@ -208,7 +213,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
emitEvent: false emitEvent: false
} }
); );
this.calculatorForm.get('principalInvestmentAmount').disable(); this.calculatorForm.get('principalInvestmentAmount')?.disable();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
}); });
@ -217,34 +222,36 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
if (this.hasPermissionToUpdateUserSettings === true) { if (this.hasPermissionToUpdateUserSettings === true) {
this.calculatorForm this.calculatorForm
.get('annualInterestRate') .get('annualInterestRate')
.enable({ emitEvent: false }); ?.enable({ emitEvent: false });
this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false }); this.calculatorForm.get('paymentPerPeriod')?.enable({ emitEvent: false });
this.calculatorForm this.calculatorForm
.get('projectedTotalAmount') .get('projectedTotalAmount')
.enable({ emitEvent: false }); ?.enable({ emitEvent: false });
} else { } else {
this.calculatorForm this.calculatorForm
.get('annualInterestRate') .get('annualInterestRate')
.disable({ emitEvent: false }); ?.disable({ emitEvent: false });
this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false }); this.calculatorForm
.get('paymentPerPeriod')
?.disable({ emitEvent: false });
this.calculatorForm this.calculatorForm
.get('projectedTotalAmount') .get('projectedTotalAmount')
.disable({ emitEvent: false }); ?.disable({ emitEvent: false });
} }
this.calculatorForm.get('retirementDate').disable({ emitEvent: false }); this.calculatorForm.get('retirementDate')?.disable({ emitEvent: false });
} }
public setMonthAndYear( public setMonthAndYear(
normalizedMonthAndYear: Date, normalizedMonthAndYear: Date,
datepicker: MatDatepicker<Date> datepicker: MatDatepicker<Date>
) { ) {
const retirementDate = this.calculatorForm.get('retirementDate').value; const retirementDate = this.calculatorForm.get('retirementDate')!.value;
const newRetirementDate = setMonth( const newRetirementDate = setMonth(
setYear(retirementDate, normalizedMonthAndYear.getFullYear()), setYear(retirementDate, normalizedMonthAndYear.getFullYear()),
normalizedMonthAndYear.getMonth() normalizedMonthAndYear.getMonth()
); );
this.calculatorForm.get('retirementDate').setValue(newRetirementDate); this.calculatorForm.get('retirementDate')?.setValue(newRetirementDate);
datepicker.close(); datepicker.close();
} }
@ -270,7 +277,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
this.chart.update(); this.chart.update();
} else { } else {
this.chart = new Chart(this.chartCanvas.nativeElement, { this.chart = new Chart<'bar'>(this.chartCanvas.nativeElement, {
data: chartData, data: chartData,
options: { options: {
plugins: { plugins: {
@ -280,6 +287,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
callbacks: { callbacks: {
footer: (items) => { footer: (items) => {
const totalAmount = items.reduce( const totalAmount = items.reduce(
// @ts-ignore
(a, b) => a + b.parsed.y, (a, b) => a + b.parsed.y,
0 0
); );
@ -347,7 +355,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
private getChartData() { private getChartData() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const labels = []; const labels: number[] = [];
// Principal investment amount // Principal investment amount
const P: number = this.getP(); const P: number = this.getP();
@ -360,6 +368,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
// Calculate retirement date // Calculate retirement date
// if we want to retire at month x, we need the projectedTotalAmount at month x-1 // if we want to retire at month x, we need the projectedTotalAmount at month x-1
// @ts-ignore
const lastPeriodDate = sub(this.getRetirementDate(), { months: 1 }); const lastPeriodDate = sub(this.getRetirementDate(), { months: 1 });
const yearsToRetire = lastPeriodDate.getFullYear() - currentYear; const yearsToRetire = lastPeriodDate.getFullYear() - currentYear;
@ -373,7 +382,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
const datasetDeposit = { const datasetDeposit = {
backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
data: [], data: [] as number[],
label: $localize`Deposit` label: $localize`Deposit`
}; };
@ -383,7 +392,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
) )
.lighten(0.5) .lighten(0.5)
.hex(), .hex(),
data: [], data: [] as number[],
label: $localize`Interest` label: $localize`Interest`
}; };
@ -393,7 +402,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
) )
.lighten(0.25) .lighten(0.25)
.hex(), .hex(),
data: [], data: [] as number[],
label: $localize`Savings` label: $localize`Savings`
}; };
@ -426,12 +435,12 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
} }
private getPeriodsToRetire(): number { private getPeriodsToRetire(): number {
if (this.calculatorForm.get('projectedTotalAmount').value) { if (this.calculatorForm.get('projectedTotalAmount')?.value) {
let periods = this.fireCalculatorService.calculatePeriodsToRetire({ let periods = this.fireCalculatorService.calculatePeriodsToRetire({
P: this.getP(), P: this.getP(),
PMT: this.getPMT(), PMT: this.getPMT(),
r: this.getR(), r: this.getR(),
totalAmount: this.calculatorForm.get('projectedTotalAmount').value totalAmount: this.calculatorForm.get('projectedTotalAmount')!.value
}); });
if (periods === Infinity) { if (periods === Infinity) {
@ -452,13 +461,13 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
} }
} }
private getPMT() { private getPMT(): number {
return this.calculatorForm.get('paymentPerPeriod').value; return this.calculatorForm.get('paymentPerPeriod')!.value;
} }
private getProjectedTotalAmount() { private getProjectedTotalAmount() {
if (this.calculatorForm.get('projectedTotalAmount').value) { if (this.calculatorForm.get('projectedTotalAmount')?.value) {
return this.calculatorForm.get('projectedTotalAmount').value; return this.calculatorForm.get('projectedTotalAmount')!.value;
} }
const { totalAmount } = const { totalAmount } =
@ -473,10 +482,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
} }
private getR() { private getR() {
return this.calculatorForm.get('annualInterestRate').value / 100; return this.calculatorForm.get('annualInterestRate')!.value / 100;
} }
private getRetirementDate(): Date { private getRetirementDate(): Date | undefined {
if (this.periodsToRetire === Number.MAX_SAFE_INTEGER) { if (this.periodsToRetire === Number.MAX_SAFE_INTEGER) {
return undefined; return undefined;
} }

16
libs/ui/src/lib/line-chart/line-chart.component.ts
View File

@ -19,12 +19,14 @@ import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
Component, Component,
type ElementRef,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import { import {
type AnimationSpec,
Chart, Chart,
Filler, Filler,
LinearScale, LinearScale,
@ -68,7 +70,7 @@ export class GfLineChartComponent
@Input() yMin: number; @Input() yMin: number;
@Input() yMinLabel: string; @Input() yMinLabel: string;
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
public chart: Chart<'line'>; public chart: Chart<'line'>;
public isLoading = true; public isLoading = true;
@ -130,10 +132,11 @@ export class GfLineChartComponent
const gradient = this.chartCanvas?.nativeElement const gradient = this.chartCanvas?.nativeElement
?.getContext('2d') ?.getContext('2d')
.createLinearGradient( ?.createLinearGradient(
0, 0,
0, 0,
0, 0,
// @ts-ignore
(this.chartCanvas.nativeElement.parentNode.offsetHeight * 4) / 5 (this.chartCanvas.nativeElement.parentNode.offsetHeight * 4) / 5
); );
@ -180,6 +183,7 @@ export class GfLineChartComponent
this.chart.options.plugins.tooltip = this.chart.options.plugins.tooltip =
this.getTooltipPluginConfiguration(); this.getTooltipPluginConfiguration();
this.chart.options.animation = this.isAnimated && { this.chart.options.animation = this.isAnimated && {
// @ts-ignore
x: this.getAnimationConfigurationForAxis({ labels, axis: 'x' }), x: this.getAnimationConfigurationForAxis({ labels, axis: 'x' }),
y: this.getAnimationConfigurationForAxis({ labels, axis: 'y' }) y: this.getAnimationConfigurationForAxis({ labels, axis: 'y' })
}; };
@ -189,6 +193,7 @@ export class GfLineChartComponent
data, data,
options: { options: {
animation: this.isAnimated && { animation: this.isAnimated && {
// @ts-ignore
x: this.getAnimationConfigurationForAxis({ labels, axis: 'x' }), x: this.getAnimationConfigurationForAxis({ labels, axis: 'x' }),
y: this.getAnimationConfigurationForAxis({ labels, axis: 'y' }) y: this.getAnimationConfigurationForAxis({ labels, axis: 'y' })
}, },
@ -207,6 +212,7 @@ export class GfLineChartComponent
position: 'bottom' position: 'bottom'
}, },
tooltip: this.getTooltipPluginConfiguration(), tooltip: this.getTooltipPluginConfiguration(),
// @ts-ignore
verticalHoverLine: { verticalHoverLine: {
color: `rgba(${getTextColor(this.colorScheme)}, 0.1)` color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
} }
@ -300,7 +306,7 @@ export class GfLineChartComponent
}: { }: {
axis: 'x' | 'y'; axis: 'x' | 'y';
labels: string[]; labels: string[];
}) { }): AnimationSpec<'line'> {
const delayBetweenPoints = this.ANIMATION_DURATION / labels.length; const delayBetweenPoints = this.ANIMATION_DURATION / labels.length;
return { return {
@ -310,11 +316,14 @@ export class GfLineChartComponent
} }
context[`${axis}Started`] = true; context[`${axis}Started`] = true;
// @ts-ignore
return context.index * delayBetweenPoints; return context.index * delayBetweenPoints;
}, },
duration: delayBetweenPoints, duration: delayBetweenPoints,
easing: 'linear', easing: 'linear',
// @ts-ignore
from: NaN, from: NaN,
// @ts-ignore
type: 'number' type: 'number'
}; };
} }
@ -328,6 +337,7 @@ export class GfLineChartComponent
unit: this.unit unit: this.unit
}), }),
mode: 'index', mode: 'index',
// @ts-ignore
position: 'top', position: 'top',
xAlign: 'center', xAlign: 'center',
yAlign: 'bottom' yAlign: 'bottom'

45
libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
View File

@ -22,11 +22,16 @@ import {
} from '@angular/core'; } from '@angular/core';
import { DataSource } from '@prisma/client'; import { DataSource } from '@prisma/client';
import { Big } from 'big.js'; import { Big } from 'big.js';
import { ChartConfiguration, Tooltip } from 'chart.js'; import {
import { LinearScale } from 'chart.js'; ArcElement,
import { ArcElement } from 'chart.js'; Chart,
import { DoughnutController } from 'chart.js'; type ChartData,
import { Chart } from 'chart.js'; type ChartDataset,
DoughnutController,
LinearScale,
Tooltip,
type TooltipItem
} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels'; import ChartDataLabels from 'chartjs-plugin-datalabels';
import { isUUID } from 'class-validator'; import { isUUID } from 'class-validator';
import Color from 'color'; import Color from 'color';
@ -137,14 +142,16 @@ export class GfPortfolioProportionChartComponent
chartData[this.data[symbol][this.keys[0]].toUpperCase()] chartData[this.data[symbol][this.keys[0]].toUpperCase()]
?.subCategory?.[this.data[symbol][this.keys[1]]] ?.subCategory?.[this.data[symbol][this.keys[1]]]
) { ) {
// @ts-ignore
chartData[ chartData[
this.data[symbol][this.keys[0]].toUpperCase() this.data[symbol][this.keys[0]].toUpperCase()
].subCategory[this.data[symbol][this.keys[1]]].value = chartData[ ].subCategory[this.data[symbol][this.keys[1]]].value = chartData[
this.data[symbol][this.keys[0]].toUpperCase() this.data[symbol][this.keys[0]].toUpperCase()
].subCategory[this.data[symbol][this.keys[1]]].value.plus( ].subCategory?.[this.data[symbol][this.keys[1]]].value.plus(
this.data[symbol].value || 0 this.data[symbol].value || 0
); );
} else { } else {
// @ts-ignore
chartData[ chartData[
this.data[symbol][this.keys[0]].toUpperCase() this.data[symbol][this.keys[0]].toUpperCase()
].subCategory[this.data[symbol][this.keys[1]] ?? UNKNOWN_KEY] = { ].subCategory[this.data[symbol][this.keys[1]] ?? UNKNOWN_KEY] = {
@ -273,12 +280,14 @@ export class GfPortfolioProportionChartComponent
Object.keys(item.subCategory ?? {}).forEach((subCategory) => { Object.keys(item.subCategory ?? {}).forEach((subCategory) => {
if (item.name === UNKNOWN_KEY) { if (item.name === UNKNOWN_KEY) {
// @ts-ignore
backgroundColorSubCategory.push(item.color); backgroundColorSubCategory.push(item.color);
} else { } else {
backgroundColorSubCategory.push( backgroundColorSubCategory.push(
Color(item.color).lighten(lightnessRatio).hex() Color(item.color).lighten(lightnessRatio).hex()
); );
} }
// @ts-ignore
dataSubCategory.push(item.subCategory[subCategory].value.toNumber()); dataSubCategory.push(item.subCategory[subCategory].value.toNumber());
labelSubCategory.push(subCategory); labelSubCategory.push(subCategory);
@ -286,7 +295,7 @@ export class GfPortfolioProportionChartComponent
}); });
}); });
const datasets: ChartConfiguration<'doughnut'>['data']['datasets'] = [ const datasets: ChartDataset<'doughnut'>[] = [
{ {
backgroundColor: chartDataSorted.map(([, item]) => { backgroundColor: chartDataSorted.map(([, item]) => {
return item.color; return item.color;
@ -324,7 +333,7 @@ export class GfPortfolioProportionChartComponent
datasets[1].data[1] = Number.MAX_SAFE_INTEGER; datasets[1].data[1] = Number.MAX_SAFE_INTEGER;
} }
const data: ChartConfiguration<'doughnut'>['data'] = { const data: ChartData<'doughnut'> = {
datasets, datasets,
labels labels
}; };
@ -332,9 +341,13 @@ export class GfPortfolioProportionChartComponent
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 = this.getTooltipPluginConfiguration(
data if (!this.chart.options.plugins) {
) as unknown; this.chart.options.plugins = {};
}
this.chart.options.plugins.tooltip =
this.getTooltipPluginConfiguration(data);
this.chart.update(); this.chart.update();
} else { } else {
this.chart = new Chart<'doughnut'>(this.chartCanvas.nativeElement, { this.chart = new Chart<'doughnut'>(this.chartCanvas.nativeElement, {
@ -348,15 +361,17 @@ export class GfPortfolioProportionChartComponent
onClick: (event, activeElements) => { onClick: (event, activeElements) => {
try { try {
const dataIndex = activeElements[0].index; const dataIndex = activeElements[0].index;
// @ts-ignore
const symbol: string = event.chart.data.labels[dataIndex]; const symbol: string = event.chart.data.labels[dataIndex];
const dataSource = this.data[symbol]?.dataSource; const dataSource = this.data[symbol]?.dataSource!;
this.proportionChartClicked.emit({ dataSource, symbol }); this.proportionChartClicked.emit({ dataSource, symbol });
} catch {} } catch {}
}, },
onHover: (event, chartElement) => { onHover: (event, chartElement) => {
if (this.cursor) { if (this.cursor) {
// @ts-ignore
event.native.target.style.cursor = chartElement[0] event.native.target.style.cursor = chartElement[0]
? this.cursor ? this.cursor
: 'default'; : 'default';
@ -392,7 +407,7 @@ export class GfPortfolioProportionChartComponent
legend: { display: false }, legend: { display: false },
tooltip: this.getTooltipPluginConfiguration(data) tooltip: this.getTooltipPluginConfiguration(data)
} }
} as unknown, },
plugins: [ChartDataLabels], plugins: [ChartDataLabels],
type: 'doughnut' type: 'doughnut'
}); });
@ -419,7 +434,7 @@ export class GfPortfolioProportionChartComponent
]; ];
} }
private getTooltipPluginConfiguration(data: ChartConfiguration['data']) { private getTooltipPluginConfiguration(data: ChartData<'doughnut'>) {
return { return {
...getTooltipOptions({ ...getTooltipOptions({
colorScheme: this.colorScheme, colorScheme: this.colorScheme,
@ -427,7 +442,7 @@ export class GfPortfolioProportionChartComponent
locale: this.locale locale: this.locale
}), }),
callbacks: { callbacks: {
label: (context) => { label: (context: TooltipItem<'doughnut'>) => {
const labelIndex = const labelIndex =
(data.datasets[context.datasetIndex - 1]?.data?.length ?? 0) + (data.datasets[context.datasetIndex - 1]?.data?.length ?? 0) +
context.dataIndex; context.dataIndex;

13
libs/ui/src/lib/treemap-chart/interfaces/interfaces.ts
View File

@ -1,5 +1,18 @@
import { PortfolioPosition } from '@ghostfolio/common/interfaces';
import {
TreemapDataPoint,
TreemapScriptableContext
} from 'chartjs-chart-treemap';
export interface GetColorParams { export interface GetColorParams {
annualizedNetPerformancePercent: number; annualizedNetPerformancePercent: number;
negativeNetPerformancePercentsRange: { max: number; min: number }; negativeNetPerformancePercentsRange: { max: number; min: number };
positiveNetPerformancePercentsRange: { max: number; min: number }; positiveNetPerformancePercentsRange: { max: number; min: number };
} }
export interface GfTreemapChartTooltipContext extends TreemapScriptableContext {
raw: TreemapDataPoint & {
_data: PortfolioPosition;
};
}

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

@ -25,7 +25,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import { DataSource } from '@prisma/client'; import { DataSource } from '@prisma/client';
import { Big } from 'big.js'; import { Big } from 'big.js';
import type { ChartConfiguration, TooltipOptions } from 'chart.js'; import type { ChartData, TooltipOptions } from 'chart.js';
import { LinearScale } from 'chart.js'; import { LinearScale } from 'chart.js';
import { Chart, Tooltip } from 'chart.js'; import { Chart, Tooltip } from 'chart.js';
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap'; import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
@ -35,7 +35,10 @@ import { orderBy } from 'lodash';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import OpenColor from 'open-color'; import OpenColor from 'open-color';
import { GetColorParams } from './interfaces/interfaces'; import {
GetColorParams,
GfTreemapChartTooltipContext
} from './interfaces/interfaces';
const { gray, green, red } = OpenColor; const { gray, green, red } = OpenColor;
@ -198,10 +201,10 @@ export class GfTreemapChartComponent
min: Math.min(...negativeNetPerformancePercents) min: Math.min(...negativeNetPerformancePercents)
}; };
const data: ChartConfiguration<'treemap'>['data'] = { const data: ChartData<'treemap'> = {
datasets: [ datasets: [
{ {
backgroundColor: (context) => { backgroundColor: (context: GfTreemapChartTooltipContext) => {
let annualizedNetPerformancePercent = let annualizedNetPerformancePercent =
getAnnualizedPerformancePercent({ getAnnualizedPerformancePercent({
daysInMarket: differenceInDays( daysInMarket: differenceInDays(
@ -232,7 +235,7 @@ export class GfTreemapChartComponent
key: 'allocationInPercentage', key: 'allocationInPercentage',
labels: { labels: {
align: 'left', align: 'left',
color: (context) => { color: (context: GfTreemapChartTooltipContext) => {
let annualizedNetPerformancePercent = let annualizedNetPerformancePercent =
getAnnualizedPerformancePercent({ getAnnualizedPerformancePercent({
daysInMarket: differenceInDays( daysInMarket: differenceInDays(
@ -261,7 +264,7 @@ export class GfTreemapChartComponent
}, },
display: true, display: true,
font: [{ size: 16 }, { lineHeight: 1.5, size: 14 }], font: [{ size: 16 }, { lineHeight: 1.5, size: 14 }],
formatter: ({ raw }) => { formatter: ({ raw }: GfTreemapChartTooltipContext) => {
// Round to 4 decimal places // Round to 4 decimal places
let netPerformancePercentWithCurrencyEffect = let netPerformancePercentWithCurrencyEffect =
Math.round( Math.round(
@ -286,10 +289,11 @@ export class GfTreemapChartComponent
position: 'top' position: 'top'
}, },
spacing: 1, spacing: 1,
// @ts-ignore
tree: this.holdings tree: this.holdings
} }
] ]
} as any; };
if (this.chartCanvas) { if (this.chartCanvas) {
if (this.chart) { if (this.chart) {
@ -303,7 +307,7 @@ export class GfTreemapChartComponent
this.getTooltipPluginConfiguration(); this.getTooltipPluginConfiguration();
this.chart.update(); this.chart.update();
} else { } else {
this.chart = new Chart(this.chartCanvas.nativeElement, { this.chart = new Chart<'treemap'>(this.chartCanvas.nativeElement, {
data, data,
options: { options: {
animation: false, animation: false,
@ -313,6 +317,7 @@ export class GfTreemapChartComponent
const datasetIndex = activeElements[0].datasetIndex; const datasetIndex = activeElements[0].datasetIndex;
const dataset = orderBy( const dataset = orderBy(
// @ts-ignore
event.chart.data.datasets[datasetIndex].tree, event.chart.data.datasets[datasetIndex].tree,
['allocationInPercentage'], ['allocationInPercentage'],
['desc'] ['desc']
@ -326,6 +331,7 @@ export class GfTreemapChartComponent
}, },
onHover: (event, chartElement) => { onHover: (event, chartElement) => {
if (this.cursor) { if (this.cursor) {
// @ts-ignore
event.native.target.style.cursor = chartElement[0] event.native.target.style.cursor = chartElement[0]
? this.cursor ? this.cursor
: 'default'; : 'default';
@ -351,8 +357,9 @@ export class GfTreemapChartComponent
locale: this.locale locale: this.locale
}), }),
callbacks: { callbacks: {
label: ({ raw }) => { // @ts-ignore
const allocationInPercentage = `${((raw._data.allocationInPercentage as number) * 100).toFixed(2)}%`; label: ({ raw }: GfTreemapChartTooltipContext) => {
const allocationInPercentage = `${(raw._data.allocationInPercentage * 100).toFixed(2)}%`;
const name = raw._data.name; const name = raw._data.name;
const sign = const sign =
raw._data.netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''; raw._data.netPerformancePercentWithCurrencyEffect > 0 ? '+' : '';
@ -361,11 +368,11 @@ export class GfTreemapChartComponent
const netPerformanceInPercentageWithSign = `${sign}${(raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`; const netPerformanceInPercentageWithSign = `${sign}${(raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`;
if (raw._data.valueInBaseCurrency !== null) { if (raw._data.valueInBaseCurrency !== null) {
const value = raw._data.valueInBaseCurrency as number; const value = raw._data.valueInBaseCurrency;
return [ return [
`${name ?? symbol} (${allocationInPercentage})`, `${name ?? symbol} (${allocationInPercentage})`,
`${value.toLocaleString(this.locale, { `${value?.toLocaleString(this.locale, {
maximumFractionDigits: 2, maximumFractionDigits: 2,
minimumFractionDigits: 2 minimumFractionDigits: 2
})} ${this.baseCurrency}`, })} ${this.baseCurrency}`,

Write Preview
Loading…
Cancel
Save