Sebastian Krüger
cd4da342e5
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>
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import { type ConversionResult } from '@/lib/units';
|
|
import { formatNumber, cn } from '@/lib/utils';
|
|
|
|
interface VisualComparisonProps {
|
|
conversions: ConversionResult[];
|
|
color: string;
|
|
}
|
|
|
|
export default function VisualComparison({
|
|
conversions,
|
|
color,
|
|
}: VisualComparisonProps) {
|
|
// Calculate percentages for visual bars using logarithmic scale
|
|
const withPercentages = useMemo(() => {
|
|
if (conversions.length === 0) return [];
|
|
|
|
// Get all values
|
|
const values = conversions.map(c => Math.abs(c.value));
|
|
const maxValue = Math.max(...values);
|
|
const minValue = Math.min(...values.filter(v => v > 0));
|
|
|
|
if (maxValue === 0 || !isFinite(maxValue)) {
|
|
return conversions.map(c => ({ ...c, percentage: 0 }));
|
|
}
|
|
|
|
// Use logarithmic scale for better visualization
|
|
return conversions.map(c => {
|
|
const absValue = Math.abs(c.value);
|
|
|
|
if (absValue === 0 || !isFinite(absValue)) {
|
|
return { ...c, percentage: 2 }; // Show minimal bar
|
|
}
|
|
|
|
// Logarithmic scale
|
|
const logValue = Math.log10(absValue);
|
|
const logMax = Math.log10(maxValue);
|
|
const logMin = minValue > 0 ? Math.log10(minValue) : logMax - 6; // 6 orders of magnitude range
|
|
|
|
const logRange = logMax - logMin;
|
|
|
|
let percentage: number;
|
|
if (logRange === 0) {
|
|
percentage = 100;
|
|
} else {
|
|
percentage = ((logValue - logMin) / logRange) * 100;
|
|
// Ensure bars are visible - minimum 3%, maximum 100%
|
|
percentage = Math.max(3, Math.min(100, percentage));
|
|
}
|
|
|
|
return {
|
|
...c,
|
|
percentage,
|
|
};
|
|
});
|
|
}, [conversions]);
|
|
|
|
if (conversions.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
Enter a value to see conversions
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{withPercentages.map(item => (
|
|
<div key={item.unit} className="space-y-1.5">
|
|
<div className="flex items-baseline justify-between gap-4">
|
|
<span className="text-sm font-medium text-foreground min-w-0 flex-shrink">
|
|
{item.unitInfo.plural}
|
|
</span>
|
|
<span className="text-lg font-bold tabular-nums flex-shrink-0">
|
|
{formatNumber(item.value)}
|
|
<span className="text-sm font-normal text-muted-foreground ml-1">
|
|
{item.unit}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
{/* Progress bar */}
|
|
<div className="w-full h-6 bg-secondary/20 rounded-lg overflow-hidden border border-border">
|
|
<div
|
|
className="h-full flex items-center justify-end px-2 transition-all duration-500 ease-out"
|
|
style={{
|
|
width: `${item.percentage}%`,
|
|
backgroundColor: `var(--color-${color})`,
|
|
}}
|
|
>
|
|
<span className="text-[11px] font-semibold text-white drop-shadow">
|
|
{item.percentage >= 15 && `${Math.round(item.percentage)}%`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|