sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Harmonize extension (before and after) (#1414)

Browse Source
This commit is contained in:
Thomas Kaul 2022-11-03 20:18:40 +01:00 committed by GitHub
parent 901c997908
commit b5e026934f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,7 @@ import {
} from 'chart.js'; } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation'; import annotationPlugin from 'chartjs-plugin-annotation';
import { addDays, format, isAfter, parseISO, subDays } from 'date-fns'; import { addDays, format, isAfter, parseISO, subDays } from 'date-fns';
import { last } from 'lodash';
@Component({ @Component({
selector: 'gf-investment-chart', selector: 'gf-investment-chart',
@ -61,7 +62,8 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas;
public chart: Chart<any>; public chart: Chart<any>;
private data: InvestmentItem[]; private investments: InvestmentItem[];
private values: LineChartItem[];
public constructor() { public constructor() {
Chart.register( Chart.register(
@ -92,31 +94,48 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
private initialize() { private initialize() {
// Create a clone // Create a clone
this.data = this.benchmarkDataItems.map((item) => Object.assign({}, item)); this.investments = this.benchmarkDataItems.map((item) =>
Object.assign({}, item)
);
this.values = this.historicalDataItems.map((item) =>
Object.assign({}, item)
);
if (!this.groupBy && this.investments?.length > 0) {
let date: string;
if (!this.groupBy && this.data?.length > 0) {
if (this.range === 'max') { if (this.range === 'max') {
// Extend chart by 5% of days in market (before) // Extend chart by 5% of days in market (before)
const firstItem = this.data[0]; date = format(
this.data.unshift({ subDays(
...firstItem, parseISO(this.investments[0].date),
date: format( this.daysInMarket * 0.05 || 90
subDays(parseISO(firstItem.date), this.daysInMarket * 0.05 || 90),
DATE_FORMAT
), ),
DATE_FORMAT
);
this.investments.unshift({
date,
investment: 0 investment: 0
}); });
this.values.unshift({
date,
value: 0
});
} }
// Extend chart by 5% of days in market (after) // Extend chart by 5% of days in market (after)
const lastItem = this.data[this.data.length - 1]; date = format(
this.data.push({ addDays(
...lastItem, parseDate(last(this.investments).date),
date: format( this.daysInMarket * 0.05 || 90
addDays(parseDate(lastItem.date), this.daysInMarket * 0.05 || 90), ),
DATE_FORMAT DATE_FORMAT
) );
this.investments.push({
date,
investment: last(this.investments).investment
}); });
this.values.push({ date, value: last(this.values).value });
} }
const data = { const data = {
@ -128,7 +147,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderWidth: this.groupBy ? 0 : 1, borderWidth: this.groupBy ? 0 : 1,
data: this.data.map(({ date, investment }) => { data: this.investments.map(({ date, investment }) => {
return { return {
x: parseDate(date), x: parseDate(date),
y: this.isInPercent ? investment * 100 : investment y: this.isInPercent ? investment * 100 : investment
@ -148,7 +167,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
{ {
borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderWidth: 2, borderWidth: 2,
data: this.historicalDataItems.map(({ date, value }) => { data: this.values.map(({ date, value }) => {
return { return {
x: parseDate(date), x: parseDate(date),
y: this.isInPercent ? value * 100 : value y: this.isInPercent ? value * 100 : value
@ -156,7 +175,15 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
}), }),
fill: false, fill: false,
label: $localize`Total Amount`, label: $localize`Total Amount`,
pointRadius: 0 pointRadius: 0,
segment: {
borderColor: (context: unknown) =>
this.isInFuture(
context,
`rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
),
borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
}
} }
] ]
}; };