Showing neutral trend when delta is zero. (7.0)

changelog/unreleased/pr-25138.toml

@@ -0,0 +1,4 @@
+type = "f"
+message = "Showing neutral trend in number widget when delta is zero."
+
+pulls = ["25138"]

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

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