Feature/add group by year option on analysis page (#1568)

* Add group by year option
This commit is contained in:
Yash Solanki
2023-01-05 00:43:13 +05:30
committed by GitHub
parent 158bb00b8a
commit 925d38703e
14 changed files with 162 additions and 89 deletions

View File

@@ -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, {

View File

@@ -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();
}

View File

@@ -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"