浏览代码

fix: histogram bars now proportional instead of binary

The flex: 1 shorthand (flex-basis: 0%) was overriding the width
percentage on the bar div, causing bars to render full-width or
empty instead of proportionally by count. Split into a track div
(flex: 1, gray background) and an inner fill div (width: pct%,
green) so the bar width reflects actual statistics.

Co-Authored-By: Claude <noreply@anthropic.com>
Oleg Panashchenko 1 周之前
父节点
当前提交
a3295448a1
共有 2 个文件被更改,包括 6 次插入1 次删除
  1. 3 1
      client/src/screens/Screen3Results.tsx
  2. 3 0
      raw/09-bug-statistic-bars.txt

+ 3 - 1
client/src/screens/Screen3Results.tsx

@@ -92,7 +92,9 @@ function Histogram({ stats }: { stats: GameStats }) {
         return (
           <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
             <span style={{ width: '20px', textAlign: 'right', fontWeight: 'bold', color: '#555' }}>{label}</span>
-            <div style={{ flex: 1, height: '20px', backgroundColor: count > 0 ? '#6aaa64' : '#d3d6da', width: `${Math.max(pct, count > 0 ? 5 : 0)}%`, minWidth: count > 0 ? '12px' : '4px', borderRadius: '2px' }} />
+            <div style={{ flex: 1, height: '20px', backgroundColor: '#d3d6da', borderRadius: '2px' }}>
+              <div style={{ height: '100%', backgroundColor: '#6aaa64', width: `${Math.max(pct, count > 0 ? 5 : 0)}%`, minWidth: count > 0 ? '12px' : '0px', borderRadius: '2px' }} />
+            </div>
             <span style={{ width: '24px', fontSize: '0.8rem', color: '#555' }}>{count}</span>
           </div>
         );

+ 3 - 0
raw/09-bug-statistic-bars.txt

@@ -0,0 +1,3 @@
+fix
+Results page shows histogram with statistics by number of attempts. Horizontal green bars in the histogram has to reflect number of words solved by given number of attempts.
+By now the green bars show either empty of full.