Bug Tracker Active
Chart
Chart je komponenta, která umožňuje uživatelům zobrazit různé grafy.
WCAG 2.2Klávesnice
Pokud se komponenta vkládá do existujícího návrhu, je třeba počítat s tím že popisky pro osu x a y jsou pozicované mimo autolayout. Komponentu v tom případě je doporučené umístit do dalšího framu s minimálním horizontálním paddingem 64 a se spodním paddingem 36.
U grafu typu pie je možné popisky pro osy x a y vypnout protože tento typ grafu je nepoužívá. Potom není uzavírání komponenty dalšího framu potřeba.
Pokud chce designer dosáhnout podrobnějšího výsledku, komponentu je možné detachnout a zvyšovat počty např. sloupců v grafu, záznamů datasetu, umístění tooltipů.
Komponenta umožňuje vypsat hodnotu do tooltipu.
Designer pro obsah komponenty chart může používat pouze core barvy z následujícího seznamu. Pro vytvoření efektu průhlednosti může použít token chart.opacity. Pro nastavení barvy borderu musí použít vždy plný odstín core.xxx.600.
Vývojář může použít název tokenu pro identifikaci barvy, ale pro vlastní barevné stylování grafů musí použít enum ChartColors z @neuron/ui/data/chart/Chart.helpers.ts. Kód pro plné barvy i barvy s nastavenou opacitou je na storybooku.
| Název barvy | Hodnota | |
|---|---|---|
| color.life.600 | #FF0000 | |
| color.vehicles.600 | #FF0000 | |
| color.property.600 | #FF0000 | |
| color.travel.600 | #FF0000 | |
| color.business.600 | #FF0000 | |
| color.applegreen.600 | #FF0000 | |
| color.emeraldgreen.600 | #FF0000 | |
| color.celestialblue.600 | #FF0000 | |
| color.majorelleblue.600 | #FF0000 | |
| color.electricpurple.600 | #FF0000 | |
| color.indianred.600 | #FF0000 | |
| color.sandybrown.600 | #FF0000 | |
| color.citrine.600 | #FF0000 | |
| color.red.600 | #FF0000 | |
| color.blue.600 | #FF0000 | |
| color.green.600 | #FF0000 | |
| color.orange.600 | #FF0000 |
Chart nemá mobilní varianty. Pokud je obsah chart důležité zobrazit, je možné použít komponentu modal, variantu window s vlastností rotate, tak jak je popsáno v dokumentaci komponenty Modal.
https://www.loom.com/share/b0ad6c11464f44a8b994a7d76ccde0f9?sid=b4107f37-8f2d-441a-a149-119332e5b6cc