|
|
|
@ -24,7 +24,7 @@ import {
|
|
|
|
|
} from '@ghostfolio/common/helper';
|
|
|
|
|
import { LineChartItem } from '@ghostfolio/common/interfaces';
|
|
|
|
|
import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
|
|
|
|
|
import { DateRange, GroupBy } from '@ghostfolio/common/types';
|
|
|
|
|
import { ColorScheme, DateRange, GroupBy } from '@ghostfolio/common/types';
|
|
|
|
|
import {
|
|
|
|
|
BarController,
|
|
|
|
|
BarElement,
|
|
|
|
@ -47,6 +47,7 @@ import { addDays, format, isAfter, parseISO, subDays } from 'date-fns';
|
|
|
|
|
})
|
|
|
|
|
export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
@Input() benchmarkDataItems: InvestmentItem[] = [];
|
|
|
|
|
@Input() colorScheme: ColorScheme;
|
|
|
|
|
@Input() currency: string;
|
|
|
|
|
@Input() daysInMarket: number;
|
|
|
|
|
@Input() groupBy: GroupBy;
|
|
|
|
@ -180,7 +181,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
tension: 0
|
|
|
|
|
},
|
|
|
|
|
point: {
|
|
|
|
|
hoverBackgroundColor: getBackgroundColor(),
|
|
|
|
|
hoverBackgroundColor: getBackgroundColor(this.colorScheme),
|
|
|
|
|
hoverRadius: 2,
|
|
|
|
|
radius: 0
|
|
|
|
|
}
|
|
|
|
@ -213,7 +214,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
}
|
|
|
|
|
: undefined,
|
|
|
|
|
yAxis: {
|
|
|
|
|
borderColor: `rgba(${getTextColor()}, 0.1)`,
|
|
|
|
|
borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
scaleID: 'y',
|
|
|
|
|
type: 'line',
|
|
|
|
@ -226,7 +227,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
},
|
|
|
|
|
tooltip: this.getTooltipPluginConfiguration(),
|
|
|
|
|
verticalHoverLine: {
|
|
|
|
|
color: `rgba(${getTextColor()}, 0.1)`
|
|
|
|
|
color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
responsive: true,
|
|
|
|
@ -234,9 +235,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
x: {
|
|
|
|
|
display: true,
|
|
|
|
|
grid: {
|
|
|
|
|
borderColor: `rgba(${getTextColor()}, 0.1)`,
|
|
|
|
|
borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
|
|
|
|
|
borderWidth: this.groupBy ? 0 : 1,
|
|
|
|
|
color: `rgba(${getTextColor()}, 0.8)`,
|
|
|
|
|
color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
|
|
|
|
|
display: false
|
|
|
|
|
},
|
|
|
|
|
type: 'time',
|
|
|
|
@ -248,8 +249,8 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
y: {
|
|
|
|
|
display: !this.isInPercent,
|
|
|
|
|
grid: {
|
|
|
|
|
borderColor: `rgba(${getTextColor()}, 0.1)`,
|
|
|
|
|
color: `rgba(${getTextColor()}, 0.8)`,
|
|
|
|
|
borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
|
|
|
|
|
color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
|
|
|
|
|
display: false,
|
|
|
|
|
drawBorder: false
|
|
|
|
|
},
|
|
|
|
@ -265,7 +266,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
|
|
|
|
|
plugins: [
|
|
|
|
|
getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
|
|
|
|
|
],
|
|
|
|
|
type: this.groupBy ? 'bar' : 'line'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
@ -277,6 +280,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
|
|
|
|
|
private getTooltipPluginConfiguration() {
|
|
|
|
|
return {
|
|
|
|
|
...getTooltipOptions({
|
|
|
|
|
colorScheme: this.colorScheme,
|
|
|
|
|
currency: this.isInPercent ? undefined : this.currency,
|
|
|
|
|
locale: this.isInPercent ? undefined : this.locale,
|
|
|
|
|
unit: this.isInPercent ? '%' : undefined
|
|
|
|
|