# Divi 5 modulok: diagram

> A Supreme Chart modul és adathalmazai: diagramtípusok, kézi adatbevitel, CSV-import, Google Sheets, jelmagyarázat, animáció.

A **Supreme Chart** interaktív diagramokat jelenít meg a Divi 5 Visual Builderben. A szülő modul a diagram típusát, az adatforrást, a jelmagyarázatot, a tooltipeket és az animációt szabályozza. Minden **Supreme Chart Item** gyermek egy adathalmaz (sorozat), saját adatpontokkal (címke és érték). A modul a **Divi Supreme** kategóriában van, és előbb be kell kapcsolnod a **Divi Supreme Pro → Modulok beállításai** fülön. A builder feliratai angolul maradnak, ezért itt is úgy szerepelnek.

Mire jó: irányítópultok és jelentések (oszlop- és vonaldiagram több sorozattal), egyszerű arányok (fánk- és tortadiagram), élő mutatók Google Táblázatból, illetve bejegyzésekből épített sorozatok. Nagy elemző feladatra nem való: nagyjából 20 adathalmaz és sorozatonként 50 pont a felső határ, ennél nagyobb adathoz külön elemző eszköz kell. Térképhez és idővonalhoz másik modult használj.

## Hozzáadás és első lépések

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Szúrd be a **Supreme Chart** modult. Két induló adathalmazzal és mintahónapokkal érkezik, így azonnal egy csoportos oszlopdiagramot látsz.
3. A **Content → Chart** alatt a **Chart Type** alapból **Bar**, de másik típust is választhatsz.
4. Nyiss meg egy adathalmazt, add meg a **Dataset Label** értékét, és az **Edit Data** gombbal vegyél fel vagy szerkessz adatpontokat (címke és érték).
5. Opcionálisan állíts be **Title** címet a diagram fölé.
6. Opcionálisan az **Data Source** alatt a **Manual** helyett válaszd a Google Sheets vagy CSV URL forrást.
7. Mentsd el, és nézd meg az oldalt a nyilvános felületen.

Új sorozathoz az **Add Dataset** gomb való. Ha nincs adat, a diagram helyén ez az üzenet áll: „Add Datasets with Data Points (label + value) to display a chart.”

## Diagramtípusok

| Típus | Tudnivalók |
|---|---|
| Bar | Alapértelmezett. Az **Orientation** függőleges vagy vízszintes. |
| Line | Opcionális területkitöltés (**Fill Area**), görbület (**Line Tension**), pontstílus és pontméret. |
| Area | Vonaldiagram kitöltött sorozattal. A **Line Tension** és a **Stacked** itt is érvényes. |
| Pie, Doughnut, Polar Area | Minden adathalmaz egy koncentrikus gyűrű, a szeletek címkéi az első adathalmazból jönnek. Pontonként megadható szín. A Doughnutnál állítható a kivágás (**Cutout**). |
| Radar | A kategóriacímkék az első adathalmazból jönnek, több adathalmaz is használható. |
| Scatter | A címke az X, az érték az Y. Kategóriacímkék nincsenek. |
| Bubble | A címke az X, az érték az Y, a **Radius** a buborék mérete (üresen a szülő **Point Radius** értéke). |

## Adatok megadása

### Kézi adat

1. A **Content** fülön az **Data Source** legyen **Manual**.
2. Vegyél fel egy adathalmazt minden sorozathoz (**Add Dataset**).
3. Adathalmazonként add meg a **Dataset Label** nevet és a színeket, majd az **Edit Data** felületen vedd fel, rendezd és szerkeszd az adatpontokat.

### CSV-import (csak kézi adatforrásnál)

Az **Import data** részben:

1. Töltsd le a mintát, vagy használd a saját CSV-det. Az alak: az első oszlop fejléce `label` vagy `category`, a többi oszlop a sorozatok neve, a sorok a kategóriák.
2. Válaszd ki a CSV fájlt, vagy másold be a tartalmát (**Or paste CSV**).
3. A **Validate & preview** egy előnézetet mutat a vásznon (ez még nincs érvényesítve).
4. A **Confirm replace** felülírja az adathalmazokat.

A színek nem kerülnek be az importba, az azonos nevű sorozatok megtartják a meglévő színüket. A CSV csak számokat és sima szöveget tartalmazhat, dinamikus tartalmat nem.

### Google Táblázat vagy CSV URL

1. Állítsd az **Data Source** értékét Google Sheets vagy CSV URL értékre.
2. Illeszd be az URL-t. Táblázatnál közzétett CSV kell: **Fájl → Megosztás → Közzététel az internetre → CSV**, külön lapfülhöz a `gid=` paraméterrel. Privát táblázat nem támogatott, és a sima megosztási link sem elég.
3. A **Fetch & preview** után a **Confirm replace** hozza létre az alap adathalmazokat.
4. Opcionálisan kapcsold be a **Live refresh** beállítást, és válaszd ki a **Refresh interval** értékét (5, 15, 30 vagy 60 perc, alapból 15). A nyilvános oldal ekkor időközönként újratölti az értékeket, a színek és stílusok az adathalmazokon maradnak. A szerveroldali gyorsítótár legalább 5 percig tart, a builderben a **Refresh now** megkerüli. Új sorozat felvételéhez újra kell **Confirm replace**-t futtatni.

## Jelmagyarázat, tooltip, animáció, adatösszegzés

- **Show Legend**: jelmagyarázat, helye és igazítása állítható, sorrendje megfordítható.
- **Show Tooltips**: tooltip egérrel fölé érve, és az interakciós módok.
- Animáció: időtartam, lassulás görbe, késleltetés, opcionális ismétlés.
- **Show Data Summary**: az adatok táblázata a diagram alatt, láthatóan vagy csak képernyőolvasónak. Az oszlopfejlécek (Series / Label / Value) átnevezhetők. Fontos diagramnál az akadálymentesség miatt érdemes bekapcsolni.

## Szülő: Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Data Source** | Manual, Google Sheets vagy CSV URL. | manual |
| **Google Sheets CSV URL / CSV URL** | A távoli CSV címe. | |
| **Live refresh** | A nyilvános oldal időközönként újratölti a távoli CSV-t. | ki |
| **Refresh interval** | 5, 15, 30 vagy 60 perc. | 15 |
| **Title** | A diagram fölötti cím. | |
| **Chart Type** | Bar, Line, Area, Pie, Doughnut, Radar, Polar Area, Scatter, Bubble. | bar |
| **Orientation** | Csak oszlopdiagramnál: függőleges vagy vízszintes. | vertical |
| **Chart Height** | A tároló magassága (120 és 800 px között). | 320px |
| **Responsive** | A diagram átméretezése az ablakkal. | be |
| **Maintain Aspect Ratio** | Ki: a **Chart Height** szabja meg a tároló méretét. | ki |
| **Border Width** | Az alap sorozatszegély vastagsága. | 1 |
| **Cutout** | A fánkdiagram lyukának mérete. | 50% |
| **Circumference** | A torta- és fánkdiagram ívhossza. | 360 |
| **Rotation** | A torta- és fánkdiagram kezdőszöge. | 0 |
| **Point Style** | Pont alakja: Circle, Cross, Cross Rotated, Dash, Line, Rectangle, Rectangle Rounded, Rectangle Rotated, Star, Triangle, None. | circle |
| **Begin at Zero** | A skála nullától indul (torta és fánk esetén rejtve). | be |
| **Stacked** | Az oszlop-, vonal- és területsorozatok egymásra rakódnak. | ki |
| **Fill Area** | Kitöltés a vonal- és radardiagram alatt (a területdiagram mindig kitöltött). | ki |
| **Line Tension** | A vonal-, terület- és radardiagram görbülete. | 0,3 |
| **Point Radius**, **Point Style** | A pontok mérete és alakja vonal-, terület-, radar-, scatter- és bubble diagramnál. | 3, circle |
| **Show Data Summary** | Táblázat a diagram alatt. | ki |
| **Summary Style** | Látható vagy csak képernyőolvasónak szóló. | visible |
| **Show Legend** | Jelmagyarázat. | be |
| **Legend Position**, **Legend Align** | A jelmagyarázat helye és igazítása. | top, center |
| **Reverse Legend** | Fordított sorrend. | ki |
| **Show Tooltips** | Tooltip egérrel fölé érve. | be |
| **Tooltip Mode**, **Intersect** | A tooltip viselkedése. | nearest, be |
| **Interaction Mode** | Az egeres interakció módja. | nearest |
| **Animate** | Bemutatkozó animáció. | be |
| **Duration (ms)** | Az animáció hossza. | 1000 |
| **Easing** | Az animáció gyorsulási görbéje. | easeOutQuart |
| **Delay (ms)**, **Loop Animation** | Késleltetés és ismétlés. | 0, ki |

## Szülő: Design

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Title Font** | A diagram fölötti cím betűtípusa. | |
| **Legend Font** | A jelmagyarázat betűtípusa. | 12px, #666666 |
| **Show X/Y Grid** | Rácsvonalak (radar és polar esetén szög és sugár). | be |
| **Grid Color**, **Tick Color** | A rács és a skálajelek színe. | rgba(0,0,0,0.1), #666666 |
| **Chart Color**, **Border Color** | Az alap sorozatszínek, ha az adathalmazon nincs szín. | beépített paletta |
| **Border Radius** | Az oszlopok sarkának lekerekítése. | 0 |
| **Hover Background / Border Color / Width** | Az alap hover stílus. | |
| **Data Summary** | Az összegző táblázat betűi, háttere, térközei és szegélyei (fejléc és sorok külön fülön, páros és páratlan sor háttere külön). | |

Az alap sorozatpaletta lila, kék, rózsaszín, narancs, zöld és sárga tónusokat tartalmaz.

## Adathalmaz (Supreme Chart Item)

Az adathalmaz a szülőből az **Add Dataset** gombbal vehető fel, önállóan nem tehető az oldalra.

| Beállítás | Mit csinál |
|---|---|
| **Dataset Label** | A sorozat neve a jelmagyarázatban. Legyen rövid. |
| **Chart Color** | A sorozat kitöltése. Üresen a szülő, majd a paletta színe. |
| **Border Color** | A sorozat szegélye. Torta- és fánkdiagramnál üresen fehér. |
| **Border Width** | A szegély vastagsága, üresen a szülő értéke. |
| **Data Points** | Kis előnézet. Az **Edit Data** nyitja a szerkesztőt, ahol felveheted, rendezheted és szerkesztheted a pontokat. |
| **Label / X** | Kategóriacímke vagy numerikus X érték (dinamikus tartalom is lehet). |
| **Value / Y** | Szám vagy Y érték (dinamikus tartalom is lehet). |
| **Radius** | Bubble diagramnál a buborék mérete. |
| **Color** | Torta-, fánk- és polar diagramnál szeletenkénti szín. Üresen az adathalmaz színe. |
| **Admin Label** | A builder listában látható név. |

A **Design → Dataset Style** alatt: **Hover Background Color**, **Hover Border Color**, **Hover Border Width**, **Border Radius**. Üresen a szülő diagram értékei érvényesek.

Ha nincs adatpont, ezt az üzenetet látod: „No data points yet. Click Edit Data to add points.” A felvétel, a rendezés és a dinamikus tartalom kötése az **Edit Data** felületen történik, az oldalsó lista csak előnézet. Torta jellegű diagramoknál a közös szeletcímkéket az első adathalmazra írd.

## Tippek

- Összesítésnél ne a Chart szülőt tedd Divi Loopba. A **Loop** az adathalmazon (Chart Item) legyen bekapcsolva, a **Dataset Label** és az adatpontmezők pedig dinamikus tartalommal legyenek kötve.
- CSV-importnál a **Confirm replace** után nézd át a színeket, mert csak az azonos nevű sorozatok őrzik meg az előzőt.
- Régi, Divi 4-es diagramból átalakítva a kategórialisták és a vesszővel elválasztott értékek az adatpontok mellett továbbra is működnek, ezért az átalakítás után ellenőrizd az adatokat.
- Az első 20 adathalmaz számít, és a teljesítmény miatt tartsd mérsékelt számon a pontokat.