AdrianoDev
510d7ca4ec
Primo passo della separazione sito / piattaforme decisa da Adriano il 03/09: due applicazioni autosufficienti, senza workspace di root, cosi' che ognuna resti un progetto Astro completo ed estraibile. Qui non cambia niente del codice: solo la radice. I pattern del .gitignore che avevano una barra erano ancorati alla radice e dopo lo spostamento non avrebbero piu' coperto niente (data/*.db*, uploads/*): resi validi a qualunque profondita'. Suite: 45 file, 347 test verdi prima e dopo lo spostamento. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EndnceRA5WnA6rvA5iV9WL
38 lines
1.7 KiB
Plaintext
38 lines
1.7 KiB
Plaintext
---
|
|
// La carta di un macro-score (Performance/Energy/Recovery). Stesso principio del radar:
|
|
// il numero se il dato basta, un trattino se no — MAI uno zero, che si leggerebbe come
|
|
// "hai zero" invece di "non lo sappiamo ancora". Il bordo tratteggiato (.lg-card--incompleto,
|
|
// dal Task 1) è lo stesso linguaggio visivo del radar: non una convenzione nuova per le carte.
|
|
// L'etichetta si deriva dal nome del contenitore (dato, letto da vista.ts), non da un
|
|
// elenco scritto qui: PERFORMANCE/ENERGY/RECOVERY diventano Performance/Energy/Recovery
|
|
// con una trasformazione, non con un dizionario da tenere allineato a mano.
|
|
import { formattaNumero } from '../../lib/longevity/formato';
|
|
|
|
interface Props {
|
|
nome: string;
|
|
valore: number | null;
|
|
copertura: number;
|
|
}
|
|
const { nome, valore, copertura } = Astro.props;
|
|
const etichetta = nome.charAt(0) + nome.slice(1).toLowerCase();
|
|
// L'intensità dell'accento (mai un colore diverso, Task 1): minimo 0.15 così una carta
|
|
// nota ma bassa resta comunque leggibile, non sparisce nello sfondo.
|
|
const intensita = valore !== null ? Math.max(valore / 100, 0.15) : 0;
|
|
---
|
|
<div class:list={['lg-card', 'lg-macro__card', { 'lg-card--incompleto': valore === null }]}>
|
|
<p class="lg-score__label">{etichetta}</p>
|
|
<div class="lg-score">
|
|
<span class="lg-score__value lg-num">{valore !== null ? formattaNumero(valore) : '—'}</span>
|
|
<span class="lg-score__max">/ 100</span>
|
|
</div>
|
|
<div class="lg-score__bar">
|
|
<span
|
|
class="lg-score__bar-fill"
|
|
style={`width:${valore !== null ? valore : 0}%; --lg-intensita:${intensita}`}
|
|
></span>
|
|
</div>
|
|
<p class="lg-muted lg-macro__nota">
|
|
Copertura dati: {Math.round(copertura * 100)}%{valore === null && ' — non ancora sufficiente per un numero.'}
|
|
</p>
|
|
</div>
|