Feature/add group by year option on analysis page (#1568)
* Add group by year option
This commit is contained in:
@@ -198,6 +198,15 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
||||
this.chart.options.scales.x.min = this.daysInMarket
|
||||
? subDays(new Date(), this.daysInMarket).toISOString()
|
||||
: undefined;
|
||||
|
||||
if (
|
||||
this.savingsRate &&
|
||||
this.chart.options.plugins.annotation.annotations.savingsRate
|
||||
) {
|
||||
this.chart.options.plugins.annotation.annotations.savingsRate.value =
|
||||
this.savingsRate;
|
||||
}
|
||||
|
||||
this.chart.update();
|
||||
} else {
|
||||
this.chart = new Chart(this.chartCanvas.nativeElement, {
|
||||
|
@@ -39,19 +39,20 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
|
||||
public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
|
||||
public daysInMarket: number;
|
||||
public deviceType: string;
|
||||
public dividendsByMonth: InvestmentItem[];
|
||||
public dividendsByGroup: InvestmentItem[];
|
||||
public dividendTimelineDataLabel = $localize`Dividend`;
|
||||
public filters$ = new Subject<Filter[]>();
|
||||
public firstOrderDate: Date;
|
||||
public hasImpersonationId: boolean;
|
||||
public investments: InvestmentItem[];
|
||||
public investmentTimelineDataLabel = $localize`Deposit`;
|
||||
public investmentsByMonth: InvestmentItem[];
|
||||
public investmentsByGroup: InvestmentItem[];
|
||||
public isLoadingBenchmarkComparator: boolean;
|
||||
public isLoadingInvestmentChart: boolean;
|
||||
public mode: GroupBy = 'month';
|
||||
public modeOptions: ToggleOption[] = [
|
||||
{ label: $localize`Monthly`, value: 'month' }
|
||||
{ label: $localize`Monthly`, value: 'month' },
|
||||
{ label: $localize`Yearly`, value: 'year' }
|
||||
];
|
||||
public performanceDataItems: HistoricalDataItem[];
|
||||
public performanceDataItemsInPercentage: HistoricalDataItem[];
|
||||
@@ -91,6 +92,17 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
get savingsRate() {
|
||||
const savingsRatePerMonth =
|
||||
this.hasImpersonationId || this.user.settings.isRestrictedView
|
||||
? undefined
|
||||
: this.user?.settings?.savingsRate;
|
||||
|
||||
return this.mode === 'year'
|
||||
? savingsRatePerMonth * 12
|
||||
: savingsRatePerMonth;
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.deviceType = this.deviceService.getDeviceInfo().deviceType;
|
||||
|
||||
@@ -201,6 +213,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
|
||||
|
||||
public onChangeGroupBy(aMode: GroupBy) {
|
||||
this.mode = aMode;
|
||||
this.fetchDividendsAndInvestments();
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
@@ -208,6 +221,34 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
|
||||
this.unsubscribeSubject.complete();
|
||||
}
|
||||
|
||||
private fetchDividendsAndInvestments() {
|
||||
this.dataService
|
||||
.fetchDividends({
|
||||
filters: this.activeFilters,
|
||||
groupBy: this.mode,
|
||||
range: this.user?.settings?.dateRange
|
||||
})
|
||||
.pipe(takeUntil(this.unsubscribeSubject))
|
||||
.subscribe(({ dividends }) => {
|
||||
this.dividendsByGroup = dividends;
|
||||
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
this.dataService
|
||||
.fetchInvestments({
|
||||
filters: this.activeFilters,
|
||||
groupBy: this.mode,
|
||||
range: this.user?.settings?.dateRange
|
||||
})
|
||||
.pipe(takeUntil(this.unsubscribeSubject))
|
||||
.subscribe(({ investments }) => {
|
||||
this.investmentsByGroup = investments;
|
||||
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
private openPositionDialog({
|
||||
dataSource,
|
||||
symbol
|
||||
@@ -291,32 +332,6 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
this.dataService
|
||||
.fetchDividends({
|
||||
filters: this.activeFilters,
|
||||
groupBy: 'month',
|
||||
range: this.user?.settings?.dateRange
|
||||
})
|
||||
.pipe(takeUntil(this.unsubscribeSubject))
|
||||
.subscribe(({ dividends }) => {
|
||||
this.dividendsByMonth = dividends;
|
||||
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
this.dataService
|
||||
.fetchInvestments({
|
||||
filters: this.activeFilters,
|
||||
groupBy: 'month',
|
||||
range: this.user?.settings?.dateRange
|
||||
})
|
||||
.pipe(takeUntil(this.unsubscribeSubject))
|
||||
.subscribe(({ investments }) => {
|
||||
this.investmentsByMonth = investments;
|
||||
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
this.dataService
|
||||
.fetchPositions({
|
||||
filters: this.activeFilters,
|
||||
@@ -340,6 +355,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
this.fetchDividendsAndInvestments();
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
|
@@ -180,15 +180,15 @@
|
||||
<div class="chart-container">
|
||||
<gf-investment-chart
|
||||
class="h-100"
|
||||
groupBy="month"
|
||||
[benchmarkDataItems]="investmentsByMonth"
|
||||
[benchmarkDataItems]="investmentsByGroup"
|
||||
[benchmarkDataLabel]="investmentTimelineDataLabel"
|
||||
[currency]="user?.settings?.baseCurrency"
|
||||
[daysInMarket]="daysInMarket"
|
||||
[groupBy]="mode"
|
||||
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
||||
[locale]="user?.settings?.locale"
|
||||
[range]="user?.settings?.dateRange"
|
||||
[savingsRate]="(hasImpersonationId || user.settings.isRestrictedView) ? undefined : user?.settings?.savingsRate"
|
||||
[savingsRate]="savingsRate"
|
||||
></gf-investment-chart>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,11 +217,11 @@
|
||||
<div class="chart-container">
|
||||
<gf-investment-chart
|
||||
class="h-100"
|
||||
groupBy="month"
|
||||
[benchmarkDataItems]="dividendsByMonth"
|
||||
[benchmarkDataItems]="dividendsByGroup"
|
||||
[benchmarkDataLabel]="dividendTimelineDataLabel"
|
||||
[currency]="user?.settings?.baseCurrency"
|
||||
[daysInMarket]="daysInMarket"
|
||||
[groupBy]="mode"
|
||||
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
||||
[locale]="user?.settings?.locale"
|
||||
[range]="user?.settings?.dateRange"
|
||||
|
Reference in New Issue
Block a user