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

Switch inputs

pull/1362/head
Thomas 3 years ago
parent
384d18b2a6
commit
efa4364003
2 changed files with 18 additions and 18 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. 30
      apps/client/src/app/components/investment-chart/investment-chart.component.ts
  2. 6
      apps/client/src/app/pages/portfolio/analysis/analysis-page.html

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

@ -46,11 +46,11 @@ import { addDays, format, isAfter, parseISO, subDays } from 'date-fns';
styleUrls: ['./investment-chart.component.scss'] styleUrls: ['./investment-chart.component.scss']
}) })
export class InvestmentChartComponent implements OnChanges, OnDestroy { export class InvestmentChartComponent implements OnChanges, OnDestroy {
@Input() benchmarkDataItems: LineChartItem[] = []; @Input() benchmarkDataItems: InvestmentItem[] = [];
@Input() currency: string; @Input() currency: string;
@Input() daysInMarket: number; @Input() daysInMarket: number;
@Input() groupBy: GroupBy; @Input() groupBy: GroupBy;
@Input() investments: InvestmentItem[]; @Input() historicalDataItems: LineChartItem[] = [];
@Input() isInPercent = false; @Input() isInPercent = false;
@Input() locale: string; @Input() locale: string;
@Input() range: DateRange = 'max'; @Input() range: DateRange = 'max';
@ -81,7 +81,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
} }
public ngOnChanges() { public ngOnChanges() {
if (this.benchmarkDataItems && this.investments) { if (this.benchmarkDataItems && this.historicalDataItems) {
this.initialize(); this.initialize();
} }
} }
@ -94,7 +94,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
this.isLoading = true; this.isLoading = true;
// Create a clone // Create a clone
this.data = this.investments.map((a) => Object.assign({}, a)); this.data = this.benchmarkDataItems.map((item) => Object.assign({}, item));
if (!this.groupBy && this.data?.length > 0) { if (!this.groupBy && this.data?.length > 0) {
if (this.range === 'max') { if (this.range === 'max') {
@ -122,14 +122,14 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
} }
const data = { const data = {
labels: this.benchmarkDataItems.map(({ date }) => { labels: this.historicalDataItems.map(({ date }) => {
return parseDate(date); return parseDate(date);
}), }),
datasets: [ datasets: [
{ {
backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderWidth: this.groupBy ? 0 : 2, borderWidth: this.groupBy ? 0 : 1,
data: this.data.map(({ date, investment }) => { data: this.data.map(({ date, investment }) => {
return { return {
x: parseDate(date), x: parseDate(date),
@ -141,16 +141,16 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
borderColor: (context: unknown) => borderColor: (context: unknown) =>
this.isInFuture( this.isInFuture(
context, context,
`rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)` `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.67)`
), ),
borderDash: (context: unknown) => this.isInFuture(context, [2, 2]) borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
}, },
stepped: true stepped: true
}, },
{ {
borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderWidth: 1, borderWidth: 2,
data: this.benchmarkDataItems.map(({ date, value }) => { data: this.historicalDataItems.map(({ date, value }) => {
return { return {
x: parseDate(date), x: parseDate(date),
y: this.isInPercent ? value * 100 : value y: this.isInPercent ? value * 100 : value
@ -192,13 +192,13 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
annotations: { annotations: {
savingsRate: this.savingsRate savingsRate: this.savingsRate
? { ? {
borderColor: `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.75)`, borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`,
borderWidth: 1, borderWidth: 1,
label: { label: {
backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderRadius: 2, borderRadius: 2,
color: 'white', color: 'white',
content: 'Savings Rate', content: $localize`Savings Rate`,
display: true, display: true,
font: { size: '10px', weight: 'normal' }, font: { size: '10px', weight: 'normal' },
padding: { padding: {

6
apps/client/src/app/pages/portfolio/analysis/analysis-page.html
View File

@ -119,10 +119,10 @@
<div class="chart-container"> <div class="chart-container">
<gf-investment-chart <gf-investment-chart
class="h-100" class="h-100"
[benchmarkDataItems]="performanceDataItems" [benchmarkDataItems]="investments"
[currency]="user?.settings?.baseCurrency" [currency]="user?.settings?.baseCurrency"
[daysInMarket]="daysInMarket" [daysInMarket]="daysInMarket"
[investments]="investments" [historicalDataItems]="performanceDataItems"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView" [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[locale]="user?.settings?.locale" [locale]="user?.settings?.locale"
[range]="user?.settings?.dateRange" [range]="user?.settings?.dateRange"
@ -155,9 +155,9 @@
<gf-investment-chart <gf-investment-chart
class="h-100" class="h-100"
groupBy="month" groupBy="month"
[benchmarkDataItems]="investmentsByMonth"
[currency]="user?.settings?.baseCurrency" [currency]="user?.settings?.baseCurrency"
[daysInMarket]="daysInMarket" [daysInMarket]="daysInMarket"
[investments]="investmentsByMonth"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView" [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[locale]="user?.settings?.locale" [locale]="user?.settings?.locale"
[range]="user?.settings?.dateRange" [range]="user?.settings?.dateRange"

Write Preview
Loading…
Cancel
Save