From 04911493e0668ad1d7c4fd0de997d08c5884079c Mon Sep 17 00:00:00 2001
From: Dennis Oelkers <dennis@graylog.com>
Date: Fri, 27 Feb 2026 14:09:07 +0100
Subject: [PATCH] Showing neutral trend when delta is zero. (#25138)

* Showing neutral trend when delta is zero.

* Adding changelog snippet.

* Unnecessary data attribute.

(cherry picked from commit 891f1ec5776719985a10eb68dc9bebc289aadfb1)
---
 changelog/unreleased/pr-25138.toml            |  4 ++++
 .../visualizations/number/Trend.test.tsx      | 22 +++++++++++++------
 .../visualizations/number/Trend.tsx           |  3 +++
 3 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 changelog/unreleased/pr-25138.toml

diff --git a/changelog/unreleased/pr-25138.toml b/changelog/unreleased/pr-25138.toml
new file mode 100644
index 000000000000..64cde137dbfb
--- /dev/null
+++ b/changelog/unreleased/pr-25138.toml
@@ -0,0 +1,4 @@
+type = "f"
+message = "Showing neutral trend in number widget when delta is zero."
+
+pulls = ["25138"]
diff --git a/graylog2-web-interface/src/views/components/visualizations/number/Trend.test.tsx b/graylog2-web-interface/src/views/components/visualizations/number/Trend.test.tsx
index dd82c137eefb..0ed95b536abf 100644
--- a/graylog2-web-interface/src/views/components/visualizations/number/Trend.test.tsx
+++ b/graylog2-web-interface/src/views/components/visualizations/number/Trend.test.tsx
@@ -94,13 +94,21 @@ describe('Trend', () => {
   });
 
   describe('renders background according to values and trend preference', () => {
-    it('shows neutral background if values are equal', async () => {
-      renderTrend();
-
-      const background = await screen.findByTestId('trend-background');
-
-      expect(background).toHaveStyleRule('background-color', '#fff!important');
-    });
+    it.each`
+      trendPreference
+      ${'NEUTRAL'}
+      ${'HIGHER'}
+      ${'LOWER'}
+    `(
+      'shows neutral background if values are equal and trend preference is $trendPreference',
+      async ({ trendPreference }: { trendPreference: 'NEUTRAL' | 'LOWER' | 'HIGHER' }) => {
+        renderTrend({ trendPreference });
+
+        const background = await screen.findByTestId('trend-background');
+
+        expect(background).toHaveStyleRule('background-color', '#fff!important');
+      },
+    );
 
     it('shows good background if current value and preference are higher', async () => {
       renderTrend({ current: 43, trendPreference: 'HIGHER' });
diff --git a/graylog2-web-interface/src/views/components/visualizations/number/Trend.tsx b/graylog2-web-interface/src/views/components/visualizations/number/Trend.tsx
index cc30c73b647a..cefc63682169 100644
--- a/graylog2-web-interface/src/views/components/visualizations/number/Trend.tsx
+++ b/graylog2-web-interface/src/views/components/visualizations/number/Trend.tsx
@@ -79,6 +79,9 @@ const StyledIcon = styled(Icon)<{ $trend: TrendDirection | undefined }>(({ theme
 });
 
 const _trendDirection = (delta: number, trendPreference: TrendPreference): TrendDirection => {
+  if (delta === 0) {
+    return 'neutral';
+  }
   switch (trendPreference) {
     case 'LOWER':
       return delta > 0 ? 'bad' : 'good';