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

Write Preview
Loading…
Cancel
Save