beeco design system · javaslat 02 · 2026-10-01
Adat és grafikon
A második komponenscsomag: táblázat, szűrősáv, statisztika-csempe és grafikonkártya, az admin valódi listáira és analitikájára építve. Ahol tényleg dönteni kell, 2 változatot mutatok. Válassz, és jóváhagyás után megépítem, tesztlapokkal.
Hogyan olvasd: a Javaslat jelű változatot ajánlom. A makettek állóképek (nem kattinthatók). Minden szám a makettekben mintaadat, nem valódi beeco-adat. A valódi komponens a jóváhagyás után készül el, billentyűzettel, képernyőolvasóval és tesztlappal. A lap követi a rendszered világos vagy sötét módját.
1. Adattáblázat (DataTable)
organizmusEgy komponens, kapcsolható részekkel: rendezés (fejléc-gomb, aria-sort), rögzített fejléc, sorkijelölés + tömeges sáv, lenyitható sor, oszlopszélesség-húzás, lapozás (kliens- vagy szerveroldali), sűrűség (kényelmes / sűrű). A nézet (lap, oldalméret, rendezés) a címsorban marad, mint most a Partnereknél.
1a. Telefonon (≤ 640 px)
A – vízszintes görgetés, rögzített első oszlop
Javaslat- Ugyanaz a táblázat minden méreten: rendezés, kijelölés, oszlopok összevetése megmarad.
- A név mindig látszik, a többi oszlop mellette görög; a jobb szélen jelzés, hogy van még.
- Adminhoz ez a természetes: ott összehasonlítani kell, nem egyenként olvasni.
B – soronként kártya
- Telefonon kényelmes olvasni, nincs vízszintes görgetés.
- Oszlopok nem vethetők össze, a rendezéshez külön választó kell; sok sornál hosszú görgetés.
- A partner-felület rövid listáihoz jó lehet:
mobile="cards"kapcsolóval, nem alapként.
1b. Tömeges műveletek sávja (kijelöléskor)
A – sáv a táblázat fölött, görgetéskor odatapad
Javaslat- Ahol most is van (POI-lista): a jelölőnégyzetek közelében.
- Kijelöléskor a szűrősáv helyére csúszik, nem tolja le a táblázatot.
- A darabszám élőben felolvasva (
role="status"), a POI-nál a 200-as határral („200/200 – több nem jelölhető ki”).
B – lebegő sáv a képernyő alján
- Telefonon hüvelykujjnyira van.
- Asztalon messze kerül a táblázat tetejétől, és eltakarja az utolsó sorokat meg a lapozót.
Állapotok: alap · sor rámutatás (csak egérrel) · sor fókusz · kijelölt sor · részben kijelölt fejléc (–) · lenyitott sor · rendezett oszlop (▲/▼) · töltés (csontváz-sorok, a fejléc marad) · frissítés (a régi adat látszik, felül vékony töltésjel) · üres (EmptyState teendővel) · szűrésre üres („Nincs találat – Szűrők törlése”) · hiba („Nem sikerült betölteni. Újrapróbálás”) · nincs jogosultság.
Szélső esetek a tesztlapon:
- 0 / 1 / 1000+ sor (lapozás, rögzített fejléc, görgetés sebessége)
- nagyon hosszú cella: levágás „…”-val, teljes szöveg rámutatásra és a lenyitott sorban
- hiányzó érték „–” (nem üres cella), rendezésnél a végére kerül
- egyenlő értékek rendezése (stabil sorrend)
- kijelölés lapváltáskor megmarad; kijelölés határa (POI: 200)
- oszlophúzás billentyűzettel is (nyilak), minimális szélesség
- keskeny képernyő (320 px), 200% nagyítás
2. Szűrősáv (FilterBar)
organizmusA – mindig soros, szükség szerint tördel
- Egyszerű, minden szűrő egy pillantásra látszik.
- A POI 7 szűrőjénél telefonon 5–6 sort foglal: a táblázat a képernyő alá csúszik.
B – széles képernyőn soros, keskenyen „Szűrők (2)” gomb + panel
Javaslat- Asztalon ugyanaz, mint az A. Telefonon a kereső és a táblázat marad elöl.
- Az aktív szűrők címkeként mindig látszanak, egy koppintással törölhetők.
- A panel alján a találatszám: látod, mit kapsz, mielőtt bezárod.
Állapotok: alap (nincs aktív szűrő – nincs „Szűrők törlése”) · aktív szűrők (címkék + darabszám a gombon) · keresés gépelés közben (késleltetett frissítés, a lista nem villog) · találatszám töltés közben · 0 találat (a táblázat üres állapota a szűrők törlésével) · a szűrő opciói nem töltöttek be (hiba a választóban, 01).
Szélső esetek:
- 0 / 1 / 7+ szűrő; többes szűrő sok kijelölt értékkel (címke: „Címke: bio +3”)
- a címsorban érvénytelen érték (régi link): figyelmen kívül hagyva + jelzés
- ékezet nélküli keresés („kave” → „kávé”), csak szóköz
- egymástól függő szűrők (POI: kategória → alkategória): a szülő törlése a gyereket is törli
3. Statisztika-csempe (StatTile / KPI)
molekulaA – a változás színe a jelentéstől függ
Javaslat- A csempe megkapja, melyik irány a jó (
good="up" | "down" | "none"): a több hibajegy nem zöld. - A jel nem csak szín: nyíl, előjel és szöveg („az előző 30 naphoz”).
- Az 1–4 érintettből álló érték „rejtve” (ahogy most az analitikában), a hiányzó „—”.
B – fel = zöld, le = piros (a mostani bc-stat-delta)
- Egyszerűbb, egy szabály.
- Félrevezet, ahol a növekedés rossz (hibajegy, CO₂, hulladék): a zöld „jó”-nak olvasódik.
- Nincs benne, mihez képest és mekkora mintából.
Részek: címke · súgó ⓘ (mit számol, honnan) · érték + egység (magyar formátum: 1 284; 12,5) · változás (előjel, nyíl, mihez képest) · időszak · elemszám (opcionális) · forrás és lekérdezés ideje (lábléc vagy súgó) · sparkline (opcionális). Állapotok: töltés (csontváz a szám helyén) · hiba · nincs adat „—” · rejtett (küszöb alatt) · nincs előző időszak (változás helyett „új”).
Szélső esetek:
- 0 · negatív · nagyon nagy szám (1 234 567 – nem tördel, nem lóg ki) · tizedes vesszővel
- előző időszak 0 → a % nem értelmezhető: „+37 (előtte 0)”
- becsült érték: „~” jel + „becslés” a súgóban (a beeco adatszabálya)
- hosszú címke két sorban; csempe 180 px szélesen
4. Grafikonkártya (ChartCard) és grafikontípusok
organizmusEgy teljes ChartCard – minden kötelező résszel (3/B)
- Megvan mind a 3/B rész: cím · alcím egységgel és időszakkal · tengely-számok és -feliratok · jelmagyarázat + közvetlen címke · súgó ⓘ · „Hogyan olvasd?” · adattábla · forrás.
- Nem csak szín: a két sorozat alakja is más (■ / ●), a vonalak végén a nevük áll.
- Fekete kontúr minden adatjelen (a termékbőr vonala): így a méz, a rózsa és a világos skálaszínek is elérik a 3:1 kontrasztot fehéren, és a sötét módban is kiválnak. (A mostani adatszínek önmagukban erre nem elegek – lent, a Döntésnél.)
- Telefonon a grafikon oldalra görgethető, és kevesebb tengelyfelirat jelenik meg; az adattábla mindig elérhető.
4a. Jelmagyarázat helye
A – közvetlen címke a vonal végén + jelmagyarázat felül
Javaslat- A szem nem ugrál a jelmagyarázat és a vonal között.
- A felső jelmagyarázat oszlopoknál, halmozásnál és a rejtett sávnál kell (ott nincs „vonalvég”).
- Sok sorozatnál (> 4) a közvetlen címke elmarad, csak a felső marad.
B – jelmagyarázat a grafikon alatt (a mostani admin-minta)
- Több hely a rajzolásnak, egyszerűbb építeni.
- A jelentést a grafikon után tudod meg; telefonon a jelmagyarázat gyakran a képernyő alá kerül.
4b. „Hogyan olvasd?” helye
A – lenyitható a grafikon alatt
Javaslat- Minden méreten ugyanúgy működik, a grafikon teljes szélességű marad.
- Az adattábla ugyanígy lenyitható – egy minta, két helyen.
- Az első látogatáskor nyitva, utána az eszköz megjegyzi.
B – oldalpanel a grafikon mellett
- Asztalon mindig szem előtt van.
- A grafikon harmadával keskenyebb; telefonon úgyis alá kerül.
- Egy irányítópulton 6 ilyen kártya zsúfolt.
Grafikontípusok – mit építünk, mit nem
Állapotok: töltés (csontváz a rajz helyén, a cím és a súgó már látszik) · üres („Ebben az időszakban nincs adat” + teendő: „Válassz hosszabb időszakot”) · hiba („Nem sikerült betölteni. Újrapróbálás”) · részleges (rejtett időszakok sávval) · színtévesztő-barát mód (
data-cb) · nyomtatás (fekete-fehéren is olvasható a kontúr és az alak miatt).Szélső esetek a tesztlapon (3.4):
- nincs adat · egyetlen pont · minden érték 0 · negatív érték (a 0-vonal kiemelve)
- egy óriási kiugró érték: a többi ne lapuljon el (jelzés + adattábla); oszlopnál a tengely mindig 0-tól indul
- null / rejtett érték ≠ 0 (sáv, nem leeső vonal)
- 30 / 90 / 365 nap (felirat-sűrítés), sok kategória, hosszú kategórianév
- magyar formátum (1 234,5), egység mindig kiírva, forrás a láblécben
5. A többi – változat nélkül
molekula / organizmus| Elem | Szint | Mire épül (meglévő) | Kiváltja az adminban |
|---|---|---|---|
| Pagination (lapozó) | molekula | bc-pager + Button + Select | 4 külön megoldás: Table (Előző / szám / Következő), FilterTable (5–200/oldal), Partners (számozott, 10/25/100), analitika PageControls. Egységesen: „1–25 / 312 partner”, számozott lapok „…”-tal, oldalméret 10 / 25 / 100. |
| EmptyState (üres állapot) | molekula | bc-empty (méhecske + egy mondat + egy teendő) | „Nincs megjeleníthető adat.”, „Még nincs megjeleníthető időszakos aktivitás.” és a teendő nélküli üres listák. |
| Skeleton rows (csontváz-sorok) | atom | bc-skeleton | „Betöltés…” és „POI-k betöltése…” szövegek; a fejléc marad, a sorok helyén 5 csontváz-sor. |
| DataState (töltés / hiba / újrapróbálás) | molekula | bc-alert + Button + bc-spinner | PanelState (7), a listák role="alert"-es hibaszövegei. |
| SortHeader, SelectCell, ColumnResizer, ExpandToggle | atom | bc-sort, 01 Checkbox, IconButton | a DataTable részei, külön is tesztelve (billentyűzet, aria-sort, aria-expanded). |
| DataNote (adat-megjegyzés) | molekula | bc-alert is-info | InfoWidget (6) és a analytics-scope-note: az értelmezés a ChartCard „Hogyan olvasd?”-jába kerül, az oldalszintű megjegyzés ide. |
Lapozó
Üres állapot
Csontváz-sorok
A térkép (MapWidget, POI-térkép) nem ebben a csomagban van; innen csak a hőtérkép-jelmagyarázat és a színskála kerül bele.
Döntés
Írd meg a chatben, például: „1a A, 1b A, 2B, 3A, 4a A, 4b A, fánk nincs – jóváhagyva”, vagy azt, amit másképp szeretnél. Ez kerül a docs/javaslatok/02-adat.md Döntés részébe, és utána építek.
Két kérdés a jóváhagyáshoz:
- Adatszínek sötét módban. A
--bc-data-*színek nem váltanak sötét módban, és önmagukban nem érik el a 3:1-et: a méz fehéren 1,5:1, a levél és a víz a sötét kártyán 2,8:1. Javaslatom: minden adatjel kapjonlineszínű kontúrt (ahogy a maketten) – ez megoldja tokencsere nélkül. Ha kontúr nem kell, sötét módú adatszínek kellenek (tokenmódosítás, külön javaslat). - Súgó a szűrőkön. A 3/A szerint minden beviteli mezőnek kötelező a súgó ⓘ, a tartomány és a számláló. A szűrősáv választóinál ezt túlzásnak tartom (a „Kupon: mindegy” magától érthető). Javaslat: a FilterBar mezőinél a súgó opcionális.