118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
// src/components/weather/WeatherAverageBar.tsx
|
|
import { getAverageEmoji, getEmojiScore } from '@/lib/weather-utils';
|
|
|
|
interface WeatherEntry {
|
|
performanceEmoji: string | null;
|
|
moralEmoji: string | null;
|
|
fluxEmoji: string | null;
|
|
valueCreationEmoji: string | null;
|
|
}
|
|
|
|
interface WeatherAverageBarProps {
|
|
entries: WeatherEntry[];
|
|
previousAverages?: {
|
|
performance: number | null;
|
|
moral: number | null;
|
|
flux: number | null;
|
|
valueCreation: number | null;
|
|
} | null;
|
|
}
|
|
|
|
const AXES = [
|
|
{ key: 'performanceEmoji' as const, scoreKey: 'performance' as const, label: 'Performance' },
|
|
{ key: 'moralEmoji' as const, scoreKey: 'moral' as const, label: 'Moral' },
|
|
{ key: 'fluxEmoji' as const, scoreKey: 'flux' as const, label: 'Flux' },
|
|
{
|
|
key: 'valueCreationEmoji' as const,
|
|
scoreKey: 'valueCreation' as const,
|
|
label: 'Création de valeur',
|
|
},
|
|
];
|
|
|
|
function getAverageScore(emojis: (string | null)[]): number | null {
|
|
const scores = emojis.map(getEmojiScore).filter((score): score is number => score !== null);
|
|
if (scores.length === 0) return null;
|
|
return scores.reduce((sum, score) => sum + score, 0) / scores.length;
|
|
}
|
|
|
|
function AverageEvolutionIndicator({
|
|
currentScore,
|
|
previousScore,
|
|
}: {
|
|
currentScore: number | null;
|
|
previousScore: number | null | undefined;
|
|
}) {
|
|
if (currentScore === null || previousScore === null || previousScore === undefined) return null;
|
|
const delta = currentScore - previousScore;
|
|
|
|
if (delta < 0) {
|
|
return (
|
|
<span
|
|
className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
|
|
style={{
|
|
backgroundColor: 'color-mix(in srgb, var(--success) 18%, transparent)',
|
|
color: 'var(--success)',
|
|
}}
|
|
title="En progression"
|
|
>
|
|
↑
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (delta > 0) {
|
|
return (
|
|
<span
|
|
className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
|
|
style={{
|
|
backgroundColor: 'color-mix(in srgb, var(--destructive) 18%, transparent)',
|
|
color: 'var(--destructive)',
|
|
}}
|
|
title="En baisse"
|
|
>
|
|
↓
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span
|
|
className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
|
|
style={{
|
|
backgroundColor: 'color-mix(in srgb, var(--muted) 15%, transparent)',
|
|
color: 'var(--muted)',
|
|
}}
|
|
title="Stable"
|
|
>
|
|
→
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function WeatherAverageBar({ entries, previousAverages }: WeatherAverageBarProps) {
|
|
if (entries.length === 0) return null;
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3 mb-4">
|
|
<span className="text-xs font-medium text-muted uppercase tracking-wide">Moyenne équipe</span>
|
|
{AXES.map(({ key, scoreKey, label }) => {
|
|
const currentScore = getAverageScore(entries.map((e) => e[key]));
|
|
const avg = getAverageEmoji(entries.map((e) => e[key]));
|
|
return (
|
|
<div
|
|
key={key}
|
|
className="flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1"
|
|
>
|
|
<span className="text-lg leading-none">{avg ?? '—'}</span>
|
|
<span className="text-xs text-muted">{label}</span>
|
|
<AverageEvolutionIndicator
|
|
currentScore={currentScore}
|
|
previousScore={previousAverages?.[scoreKey]}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|