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

feat(client): use viewChild signals

pull/6859/head
KenTandrian 1 day ago
parent
3a24348d39
commit
31f0b10053
1 changed files with 103 additions and 99 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. 202
      apps/client/src/app/components/investment-chart/investment-chart.component.ts

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

@ -24,7 +24,7 @@ import {
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
ViewChild viewChild
} from '@angular/core'; } from '@angular/core';
import { import {
BarController, BarController,
@ -66,7 +66,8 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
@Input() public locale = getLocale(); @Input() public locale = getLocale();
@Input() public savingsRate = 0; @Input() public savingsRate = 0;
@ViewChild('chartCanvas') private chartCanvas: ElementRef<HTMLCanvasElement>; private readonly chartCanvas =
viewChild.required<ElementRef<HTMLCanvasElement>>('chartCanvas');
private chart: Chart<'bar' | 'line'>; private chart: Chart<'bar' | 'line'>;
private investments: InvestmentItem[]; private investments: InvestmentItem[];
@ -172,116 +173,119 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
this.chart.update(); this.chart.update();
} else { } else {
this.chart = new Chart<'bar' | 'line'>(this.chartCanvas.nativeElement, { this.chart = new Chart<'bar' | 'line'>(
data: chartData, this.chartCanvas().nativeElement,
options: { {
animation: false, data: chartData,
elements: { options: {
line: { animation: false,
tension: 0 elements: {
line: {
tension: 0
},
point: {
hoverBackgroundColor: getBackgroundColor(this.colorScheme),
hoverRadius: 2,
radius: 0
}
}, },
point: { interaction: { intersect: false, mode: 'index' },
hoverBackgroundColor: getBackgroundColor(this.colorScheme), maintainAspectRatio: true,
hoverRadius: 2, plugins: {
radius: 0 annotation: {
} annotations: {
}, savingsRate: this.savingsRate
interaction: { intersect: false, mode: 'index' }, ? {
maintainAspectRatio: true, borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`,
plugins: { borderWidth: 1,
annotation: { label: {
annotations: { backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
savingsRate: this.savingsRate borderRadius: 2,
? { color: 'white',
borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`, content: $localize`Savings Rate`,
borderWidth: 1, display: true,
label: { font: { size: 10, weight: 'normal' },
backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, padding: {
borderRadius: 2, x: 4,
color: 'white', y: 2
content: $localize`Savings Rate`, },
display: true, position: 'start'
font: { size: 10, weight: 'normal' },
padding: {
x: 4,
y: 2
}, },
position: 'start' scaleID: 'y',
}, type: 'line',
scaleID: 'y', value: this.savingsRate
type: 'line', }
value: this.savingsRate : undefined,
} yAxis: {
: undefined, borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
yAxis: { borderWidth: 1,
borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, scaleID: 'y',
borderWidth: 1, type: 'line',
scaleID: 'y', value: 0
type: 'line', }
value: 0
} }
}
},
legend: {
display: false
},
tooltip: this.getTooltipPluginConfiguration(),
verticalHoverLine: {
color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
}
},
responsive: true,
scales: {
x: {
border: {
color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
width: this.groupBy ? 0 : 1
}, },
display: true, legend: {
grid: {
display: false display: false
}, },
type: 'time', tooltip: this.getTooltipPluginConfiguration(),
time: { verticalHoverLine: {
tooltipFormat: getDateFormatString(this.locale), color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
unit: 'year'
} }
}, },
y: { responsive: true,
border: { scales: {
display: false x: {
}, border: {
display: !this.isInPercentage, color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
grid: { width: this.groupBy ? 0 : 1
color: ({ scale, tick }) => { },
if ( display: true,
tick.value === 0 || grid: {
tick.value === scale.max || display: false
tick.value === scale.min },
) { type: 'time',
return `rgba(${getTextColor(this.colorScheme)}, 0.1)`; time: {
} tooltipFormat: getDateFormatString(this.locale),
unit: 'year'
return 'transparent';
} }
}, },
position: 'right', y: {
ticks: { border: {
callback: (value: number) => { display: false
return transformTickToAbbreviation(value);
}, },
display: true, display: !this.isInPercentage,
mirror: true, grid: {
z: 1 color: ({ scale, tick }) => {
if (
tick.value === 0 ||
tick.value === scale.max ||
tick.value === scale.min
) {
return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
}
return 'transparent';
}
},
position: 'right',
ticks: {
callback: (value: number) => {
return transformTickToAbbreviation(value);
},
display: true,
mirror: true,
z: 1
}
} }
} }
} },
}, plugins: [
plugins: [ getVerticalHoverLinePlugin(this.chartCanvas(), this.colorScheme)
getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme) ],
], type: this.groupBy ? 'bar' : 'line'
type: this.groupBy ? 'bar' : 'line' }
}); );
} }
} }
} }

Write Preview
Loading…
Cancel
Save