(rocketmq-dashboard) branch rocketmq-studio updated: fix: render zero throughput without visible bars (#629)

[lizhimin]

This is an automated email from the ASF dual-hosted git repository.

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new e24591ba fix: render zero throughput without visible bars (#629)
e24591ba is described below

commit e24591ba5302fe9b6c4ae6c7dead232e9252cba5
Author: yx9o <yangx_s...@163.com>
AuthorDate: Tue Jul 28 20:56:22 2026 +0800

    fix: render zero throughput without visible bars (#629)
---
 web/src/components/MiniBar.tsx                |  2 +-
 web/src/components/__tests__/MiniBar.test.tsx | 37 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MiniBar.tsx b/web/src/components/MiniBar.tsx
index 70db81c7..ee895a72 100644
--- a/web/src/components/MiniBar.tsx
+++ b/web/src/components/MiniBar.tsx
@@ -52,7 +52,7 @@ const MiniBar = ({ data, color = '#1677ff', height = 32, 
width = 120, label }: M
           key={i}
           style={{
             width: barWidth,
-            height: `${Math.max(4, (value / max) * height)}px`,
+            height: `${value === 0 ? 0 : Math.max(4, (value / max) * 
height)}px`,
             backgroundColor: color,
             borderRadius: 2,
             opacity: 0.3 + (i / data.length) * 0.7,
diff --git a/web/src/components/__tests__/MiniBar.test.tsx 
b/web/src/components/__tests__/MiniBar.test.tsx
new file mode 100644
index 00000000..931deed5
--- /dev/null
+++ b/web/src/components/__tests__/MiniBar.test.tsx
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import MiniBar from '../MiniBar';
+
+const getBarHeights = () =>
+  Array.from(screen.getByRole('img').children, (bar) => (bar as 
HTMLElement).style.height);
+
+describe('MiniBar', () => {
+  it('renders zero values without a visible bar', () => {
+    render(<MiniBar data={[0, 0, 0]} height={20} label="Throughput trend" />);
+
+    expect(getBarHeights()).toEqual(['0px', '0px', '0px']);
+  });
+
+  it('keeps positive values visible without turning zero into traffic', () => {
+    render(<MiniBar data={[0, 1, 10]} height={20} label="Throughput trend" />);
+
+    expect(getBarHeights()).toEqual(['0px', '4px', '20px']);
+  });
+});