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