Catalog · Conținut și date
Grafic cu bare
Vizualizează un tabel de date ca bare, prin CSS pur — nu o reprezentare separată de sincronizat.
Prezentare
Afișează o comparație vizuală rapidă între valori numerice asociate unor categorii, direct dintr-un tabel de date real — fără o bibliotecă de grafice și fără canvas/SVG generat din JavaScript.
Când se folosește
- când datele există deja ca tabel accesibil, iar bara vizuală e un plus, nu singura sursă de informație;
- când numărul de categorii e mic (sub 10–12), astfel încât barele rămân lizibile fără zoom sau derulare orizontală;
- când comparația relativă (mai mare/mai mic) contează mai mult decât citirea unei valori exacte.
Când nu se folosește
- pentru serii temporale lungi sau relații multi-variabilă — un grafic cu bare simplu nu le poate reda corect;
- când tabelul de date nu poate fi public sau accesibil — bar-chart-ul depinde de un tabel real, nu îl înlocuiește;
- ca unică sursă de informație — tabelul cu valorile exacte rămâne obligatoriu, bara e un supliment vizual (progressive enhancement).
Anatomie
Un `<figure class="sd-chart">` cu `<figcaption>`, care conține un `<table>` HTML standard cu `<caption>` și antete `<th>`. Fiecare celulă de valoare are un `<span class="sd-chart__bar-track">` (decorativ, `aria-hidden`) cu un `<span class="sd-chart__bar">` a cărui lățime e controlată prin custom property CSS `--sd-chart-value`, plus un `<span class="sd-chart__value">` cu valoarea text reală.
Variante
- bară orizontală (singura variantă publicată azi)
Stări
- implicit — nu are stări interactive (hover/focus), nu e un control
Comportament
Fără CSS: tabelul rămâne complet funcțional și citibil ca tabel simplu, fără elementele decorative de bară. Cu CSS: `--sd-chart-value` (procent, calculat manual la generarea markup-ului) controlează lățimea barei; nu există recalculare sau animație în JavaScript.
Reguli de conținut
- figcaption-ul descrie ce reprezintă datele, nu doar „Grafic";
- caption-ul tabelului (vizual ascuns) rămâne descriptiv independent de figcaption, pentru context complet la navigare cu cititor de ecran;
- valorile numerice includ unitatea (ex. „cereri") și folosesc formatul românesc de numere, conform ghidului de content design.
Responsabilitățile implementatorului
- calcularea corectă a `--sd-chart-value` (procent relativ la valoarea maximă din serie) la generarea markup-ului;
- furnizarea valorii text reale în `.sd-chart__value`, nu doar a barei vizuale — bara singură nu e suficientă pentru utilizatorii cititoarelor de ecran sau ai zoom-ului mare;
- verificarea contrastului barei față de fundal atunci când componenta e personalizată printr-o temă nouă.
Cercetare
Istoric
| Versiune | Dată | Modificare |
|---|---|---|
| 0.1.0-alpha.4 | Publicare inițială în @sistem-digital/components, stadiu alpha. |
Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.
Preview și markup canonic
Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.
| Instituție | Cereri |
|---|---|
| Alba Iulia | 1.248 cereri |
| Cluj-Napoca | 3.986 cereri |
Instalare și importuri
pnpm add @sistem-digital/tokens @sistem-digital/components@import '@sistem-digital/components/content.css';<figure class="sd-chart" aria-labelledby="catalog-chart-title"><figcaption class="sd-chart__title" id="catalog-chart-title">Cereri per instituție</figcaption><table class="sd-chart__table"><caption class="sd-visually-hidden">Numărul de cereri înregistrate, per instituție</caption><thead><tr><th scope="col" class="sd-visually-hidden">Instituție</th><th scope="col" class="sd-visually-hidden">Cereri</th></tr></thead><tbody><tr><th scope="row">Alba Iulia</th><td><span class="sd-chart__cell"><span class="sd-chart__bar-track" aria-hidden="true"><span class="sd-chart__bar" style="--sd-chart-value: 31%"></span></span><span class="sd-chart__value">1.248 cereri</span></span></td></tr><tr><th scope="row">Cluj-Napoca</th><td><span class="sd-chart__cell"><span class="sd-chart__bar-track" aria-hidden="true"><span class="sd-chart__bar" style="--sd-chart-value: 100%"></span></span><span class="sd-chart__value">3.986 cereri</span></span></td></tr></tbody></table></figure>Contract și surse
Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.
Matricea design–cod
Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).
| Canal | Disponibilitate |
|---|---|
| Figma | Indisponibil |
| HTML/CSS | Disponibil |
| Web Components | Indisponibil |
| React | Indisponibil |
| Documentație | Disponibil |
| Teste automate | Disponibil |
| Testare cu tastatura | Indisponibil |
| Testare cu cititor de ecran | Indisponibil |
Maturitate
Guvernanța acestei componente, conform modelului de maturitate pe șase stări. Acest câmp este independent de stadiul de distribuție (Alpha) de mai sus.
Dovezi
A fost utilă această pagină?
Linkul deschide un formular GitHub precompletat. Nu transmitem nimic până când alegi să publici feedback-ul și îți recomandăm să nu incluzi date personale.