-
- {{ element.SymbolProfile?.name }}
- @if (element.isDraft) {
- Draft
- }
-
+
+ {{ element.SymbolProfile?.name }}
+ @if (element.isDraft) {
+ Draft
+ }
@if (
element.SymbolProfile?.dataSource !== 'MANUAL' &&
diff --git a/libs/ui/src/lib/chart/chart.registry.ts b/libs/ui/src/lib/chart/chart.registry.ts
index 465d6e716..a6a8b3e55 100644
--- a/libs/ui/src/lib/chart/chart.registry.ts
+++ b/libs/ui/src/lib/chart/chart.registry.ts
@@ -1,6 +1,7 @@
import { getTooltipPositionerMapTop } from '@ghostfolio/common/chart-helper';
-import { Tooltip, TooltipPositionerFunction, ChartType } from 'chart.js';
+import { Chart, Tooltip, TooltipPositionerFunction, ChartType } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
interface VerticalHoverLinePluginOptions {
color?: string;
@@ -23,6 +24,10 @@ export function registerChartConfiguration() {
return;
}
+ // Register the annotation plugin early so that every chart is initialized
+ // with its state and does not crash on interaction
+ Chart.register(annotationPlugin);
+
Tooltip.positioners.top = function (_elements, eventPosition) {
return getTooltipPositionerMapTop(this.chart, eventPosition);
};
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts b/libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts
new file mode 100644
index 000000000..25d12b049
--- /dev/null
+++ b/libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts
@@ -0,0 +1,5 @@
+import { AssetProfileIdentifier } from '@ghostfolio/common/interfaces';
+
+export type PortfolioProportionChartClickEvent =
+ | AssetProfileIdentifier
+ | { accountId: string };
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index e2c41e956..bf6fd193e 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
@@ -1,10 +1,7 @@
import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
import { UNKNOWN_KEY } from '@ghostfolio/common/config';
import { getLocale, getSum, getTextColor } from '@ghostfolio/common/helper';
-import {
- AssetProfileIdentifier,
- PortfolioPosition
-} from '@ghostfolio/common/interfaces';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
import { ColorScheme } from '@ghostfolio/common/types';
import {
@@ -36,6 +33,8 @@ import Color from 'color';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import OpenColor from 'open-color';
+import { PortfolioProportionChartClickEvent } from './interfaces/interfaces';
+
const {
blue,
cyan,
@@ -80,7 +79,8 @@ export class GfPortfolioProportionChartComponent
public chart: Chart<'doughnut'>;
public isLoading = true;
- protected readonly proportionChartClicked = output
();
+ protected readonly proportionChartClicked =
+ output();
private readonly OTHER_KEY = 'OTHER';
@@ -355,11 +355,11 @@ export class GfPortfolioProportionChartComponent
const dataIndex = activeElements[0].index;
const symbol = chart.data.labels?.[dataIndex] as string;
- const dataSource = this.data[symbol].dataSource;
+ const dataSource = this.data[symbol]?.dataSource;
- if (dataSource) {
- this.proportionChartClicked.emit({ dataSource, symbol });
- }
+ this.proportionChartClicked.emit(
+ dataSource ? { dataSource, symbol } : { accountId: symbol }
+ );
} catch {}
},
onHover: (event, chartElement) => {