Completely rebuilt the bar rendering logic for guaranteed visibility:
🔧 Improved Logarithmic Calculation:
- Better handling of edge cases (zero, infinity)
- Minimum 3% bar width for all visible values
- Maximum 100% cap to prevent overflow
- 6 orders of magnitude default range
- Proper log scale normalization
🎨 Simplified Bar Styling:
- Removed complex overlay positioning
- Larger bars (h-6 for better visibility)
- Solid background colors using CSS variables
- Simple border for definition
- White percentage text on colored bars
- Text only shows when bar is >15% wide
- Drop shadow for text readability
✨ Robust Value Handling:
- Handles zero values (2% minimal bar)
- Handles infinite/NaN values gracefully
- Uses Math.abs for negative values
- Proper min/max value detection
- Filters out invalid values before calculation
The bars will now ALWAYS be visible with proper widths,
and the logarithmic scale ensures good visual distribution
across different orders of magnitude.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced the visual comparison chart for better readability:
📊 Logarithmic Scale:
- Use log10 scale instead of linear for better visualization
- Handles units with vastly different magnitudes (mm vs km)
- Minimum bar width of 5% for visibility
- Normalizes across the full range (minLog to maxLog)
- Prevents tiny bars that are hard to see
✨ Visual Improvements:
- Taller bars (h-3 instead of h-2) for better visibility
- Larger, bolder value display (text-lg font-bold)
- Better spacing (space-y-1.5)
- Percentage indicator on each bar
- White text on bars >50% filled
- Shadow on bars for depth
- Improved typography hierarchy
- Better gap spacing between label and value
🎨 Layout Enhancements:
- Unit name on left, value on right
- Value with unit abbreviation in muted color
- Flex layout with proper wrapping
- Tabular numbers for alignment
- Relative positioning for percentage labels
This makes the chart view much more useful for comparing units
with different orders of magnitude (e.g., nanometers to kilometers).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
