Merge branch 'main' into bugfix/import-activities-dialog-overflows-screen

CHANGELOG.md

@@ -7,8 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Improved the styling of the checkboxes to consistently use the primary color in their states
+- Improved the name display in the activities table
+- Improved the user id display in the users table of the admin control panel
+- Improved the language localization for German (`de`)
+
 ### Fixed
 
+- Fixed a chart error on interaction by registering the annotation plugin early
+- Fixed an issue on the allocations page where clicking an account in the _By Account_ chart did not open the detail dialog
 - Restricted the maximum height of the import activities dialog
 
 ## 3.11.0 - 2026-06-14

apps/client/src/app/components/admin-users/admin-users.html

@@ -16,7 +16,7 @@
               class="mat-mdc-cell px-1 py-2"
               mat-cell
             >
-              <div class="d-flex align-items-center">
+              <div class="align-items-center d-flex text-nowrap">
                 <span
                   class="d-none d-sm-inline-block text-monospace"
                   [class.text-line-through]="element.role === 'INACTIVE'"

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -44,7 +44,6 @@ import {
   type TooltipOptions
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
-import annotationPlugin from 'chartjs-plugin-annotation';
 import { addIcons } from 'ionicons';
 import { arrowForwardOutline } from 'ionicons/icons';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -86,7 +85,6 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
 
   public constructor() {
     Chart.register(
-      annotationPlugin,
       LinearScale,
       LineController,
       LineElement,

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

@@ -40,9 +40,7 @@ import {
   type TooltipOptions
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
-import annotationPlugin, {
+import { type AnnotationOptions } from 'chartjs-plugin-annotation';
-  type AnnotationOptions
-} from 'chartjs-plugin-annotation';
 import { isAfter } from 'date-fns';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -74,7 +72,6 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
 
   public constructor() {
     Chart.register(
-      annotationPlugin,
       BarController,
       BarElement,
       LinearScale,

apps/client/src/app/pages/about/overview/about-overview-page.html

@@ -94,7 +94,7 @@
           <ng-container i18n>or start a discussion at</ng-container>
           <ng-container>&nbsp;</ng-container>
           <a
-            href="https://github.com/ghostfolio/ghostfolio"
+            href="https://github.com/ghostfolio/ghostfolio/discussions"
             i18n-title
             title="Find Ghostfolio on GitHub"
             >GitHub</a

apps/client/src/app/pages/faq/overview/faq-overview-page.html

@@ -193,7 +193,7 @@
           }
           or start a discussion at
           <a
-            href="https://github.com/ghostfolio/ghostfolio"
+            href="https://github.com/ghostfolio/ghostfolio/discussions"
             title="Find Ghostfolio on GitHub"
             >GitHub</a
           >.</mat-card-content

apps/client/src/app/pages/faq/saas/saas-page.html

@@ -186,7 +186,7 @@
           }
           or start a discussion at
           <a
-            href="https://github.com/ghostfolio/ghostfolio"
+            href="https://github.com/ghostfolio/ghostfolio/discussions"
             title="Find Ghostfolio on GitHub"
             >GitHub</a
           >.</mat-card-content

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html

@@ -294,7 +294,7 @@
           >
           or start a discussion at
           <a
-            href="https://github.com/ghostfolio/ghostfolio"
+            href="https://github.com/ghostfolio/ghostfolio/discussions"
             title="Find Ghostfolio on GitHub"
             >GitHub</a
           >.</mat-card-content

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -185,10 +185,10 @@ export class GfAllocationsPageComponent implements OnInit {
     this.initialize();
   }
 
-  public onAccountChartClicked({ symbol }: AssetProfileIdentifier) {
+  public onAccountChartClicked({ accountId }: { accountId: string }) {
-    if (symbol && symbol !== UNKNOWN_KEY) {
+    if (accountId && accountId !== UNKNOWN_KEY) {
       this.router.navigate([], {
-        queryParams: { accountId: symbol, accountDetailDialog: true }
+        queryParams: { accountId, accountDetailDialog: true }
       });
     }
   }

apps/client/src/locales/messages.de.xlf

@@ -2143,7 +2143,7 @@
       </trans-unit>
       <trans-unit id="7500665368930738879" datatype="html">
         <source>or start a discussion at</source>
-        <target state="translated">oder beginne eine Diskussion unter</target>
+        <target state="translated">oder beginne eine Diskussion bei</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/about/overview/about-overview-page.html</context>
           <context context-type="linenumber">94</context>

apps/client/src/main.ts

@@ -1,5 +1,6 @@
 import { InfoResponse } from '@ghostfolio/common/interfaces';
 import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
+import { registerChartConfiguration } from '@ghostfolio/ui/chart';
 import { GF_ENVIRONMENT } from '@ghostfolio/ui/environment';
 import { GfNotificationModule } from '@ghostfolio/ui/notifications';
 
@@ -58,6 +59,8 @@ import { environment } from './environments/environment';
     enableProdMode();
   }
 
+  registerChartConfiguration();
+
   await bootstrapApplication(GfAppComponent, {
     providers: [
       authInterceptorProviders,

apps/client/src/styles/theme.scss

@@ -312,7 +312,10 @@ $gf-typography: (
 
   @include mat.checkbox-overrides(
     (
-      selected-icon-color: var(--gf-theme-primary-500)
+      selected-focus-icon-color: var(--gf-theme-primary-500),
+      selected-hover-icon-color: var(--gf-theme-primary-500),
+      selected-icon-color: var(--gf-theme-primary-500),
+      selected-pressed-icon-color: var(--gf-theme-primary-500)
     )
   );
 

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -161,13 +161,11 @@
         <ng-container i18n>Name</ng-container>
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
-        <div class="align-items-center d-flex line-height-1">
+        <div class="align-items-center d-flex line-height-1 text-nowrap">
-          <div>
+          <span class="text-truncate">{{ element.SymbolProfile?.name }}</span>
-            <span class="text-truncate">{{ element.SymbolProfile?.name }}</span>
+          @if (element.isDraft) {
-            @if (element.isDraft) {
+            <span class="badge badge-secondary ml-1" i18n>Draft</span>
-              <span class="badge badge-secondary ml-1" i18n>Draft</span>
+          }
-            }
-          </div>
         </div>
         @if (
           element.SymbolProfile?.dataSource !== 'MANUAL' &&

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);
   };

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 };

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 {
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
-  AssetProfileIdentifier,
-  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<AssetProfileIdentifier>();
+  protected readonly proportionChartClicked =
+    output<PortfolioProportionChartClickEvent>();
 
   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(
-                  this.proportionChartClicked.emit({ dataSource, symbol });
+                  dataSource ? { dataSource, symbol } : { accountId: symbol }
-                }
+                );
               } catch {}
             },
             onHover: (event, chartElement) => {