From 8f57b918d7708aaa211c6c38608b668d1fc73f75 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 17 Oct 2026 09:53:08 +0200
Subject: [PATCH] Highlight negative values in performance timeline chart

---
 .../portfolio/analysis/analysis-page.html     |  2 +-
 .../investment-chart.component.stories.ts     | 61 ++++++++++++++++++-
 .../investment-chart.component.ts             |  9 +--
 3 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index 5298467499..bd8451cd38 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -449,8 +449,8 @@
             groupBy="year"
             [benchmarkDataItems]="performancePercentagesByYear"
             [benchmarkDataLabel]="performanceTimelineDataLabel"
-            [colorizeSign]="true"
             [colorScheme]="user?.settings?.colorScheme"
+            [highlightNegativeValues]="true"
             [isInPercentage]="true"
             [isLoading]="isLoadingPerformanceTimelineChart"
             [locale]="user?.settings?.locale"
diff --git a/libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts b/libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts
index 03723f0a9b..d3c7984db5 100644
--- a/libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts
+++ b/libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts
@@ -16,6 +16,65 @@ export default {
 
 type Story = StoryObj<GfInvestmentChartComponent>;
 
+export const InvestmentsByMonth: Story = {
+  args: {
+    benchmarkDataItems: [
+      {
+        date: '2025-01-01',
+        investment: 1000
+      },
+      {
+        date: '2025-02-01',
+        investment: 1000
+      },
+      {
+        date: '2025-03-01',
+        investment: 500
+      },
+      {
+        date: '2025-04-01',
+        investment: 1500
+      },
+      {
+        date: '2025-05-01',
+        investment: -2500
+      },
+      {
+        date: '2025-06-01',
+        investment: 1000
+      },
+      {
+        date: '2025-07-01',
+        investment: 0
+      },
+      {
+        date: '2025-08-01',
+        investment: 2000
+      },
+      {
+        date: '2025-09-01',
+        investment: 1000
+      },
+      {
+        date: '2025-10-01',
+        investment: -800
+      },
+      {
+        date: '2025-11-01',
+        investment: 1000
+      },
+      {
+        date: '2025-12-01',
+        investment: 1200
+      }
+    ],
+    benchmarkDataLabel: 'Invested Capital',
+    currency: 'USD',
+    groupBy: 'month',
+    locale: 'en-US'
+  }
+};
+
 export const PerformanceByYear: Story = {
   args: {
     benchmarkDataItems: [
@@ -69,8 +128,8 @@ export const PerformanceByYear: Story = {
       }
     ],
     benchmarkDataLabel: 'Net Performance',
-    colorizeSign: true,
     groupBy: 'year',
+    highlightNegativeValues: true,
     isInPercentage: true
   }
 };
diff --git a/libs/ui/src/lib/investment-chart/investment-chart.component.ts b/libs/ui/src/lib/investment-chart/investment-chart.component.ts
index 4f43600e92..eeb22d2a30 100644
--- a/libs/ui/src/lib/investment-chart/investment-chart.component.ts
+++ b/libs/ui/src/lib/investment-chart/investment-chart.component.ts
@@ -62,10 +62,10 @@ const { orange } = OpenColor;
 export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() public benchmarkDataItems: InvestmentItem[] = [];
   @Input() public benchmarkDataLabel = '';
-  @Input() public colorizeSign = false;
   @Input() public colorScheme?: ColorScheme;
   @Input() public currency?: string;
   @Input() public groupBy?: GroupBy;
+  @Input() public highlightNegativeValues = false;
   @Input() public historicalDataItems: LineChartItem[] = [];
   @Input() public isInPercentage?: boolean = false;
   @Input() public isLoading = false;
@@ -122,6 +122,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
     const isBarChart = !!this.groupBy;
 
     const benchmarkColorRgb = isBarChart ? primaryColorRgb : secondaryColorRgb;
+    const benchmarkColor = `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`;
 
     // Create clones of the input data
     this.investments = this.benchmarkDataItems.map((item) =>
@@ -142,14 +143,14 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
             if (
               (context.parsed?.y ?? 0) < 0 &&
               isBarChart &&
-              this.colorizeSign
+              this.highlightNegativeValues
             ) {
               return orange[5];
             }
 
-            return `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`;
+            return benchmarkColor;
           },
-          borderColor: `rgb(${benchmarkColorRgb.r}, ${benchmarkColorRgb.g}, ${benchmarkColorRgb.b})`,
+          borderColor: benchmarkColor,
           borderWidth: isBarChart ? 0 : 1,
           data: this.investments.map(({ date, investment }) => {
             return {