Extension:Graph/cs

Rozšířeníení Graph umožňuje značku popisující vizualizace dat, jako jsou sloupcové grafy, koláčové grafy, časové osy a histogramy (demo) ve formátu JSON, který vykresluje Vega-základy grafu.



Základní informace
Rozšíření grafu umožňuje přidání výkonných grafů na stránkách wiki založených na Vega. Grafy mohou být interaktivní.

Nejjednodušší způsob, jak přidat graf, je použít připravenou šablonu, jako je. Tyto šablony skrývají všechny složitosti Vega. Výkonní uživatelé mohou používat k vývoji grafů pískoviště Graph Sandbox. Sandbox Graph umožňuje kromě JSON syntaxi šablon wiki. Rozšíření se integruje s VisualEditor a poskytuje jednoduchý nástroj/průvodce, který generuje základní grafy, zadáním hodnot přímo do editoru.



Užitečné odkazy

 * Dokumentace Vega 2 - obnovené stránky dokumentace Vega 2 na nyurik/vega/wiki.
 * – obecná doporučení, jak používat grafy ve wiki.
 * – pokyny, jak od začátku, krok za krokem, vytvořit komplexní interaktivní graf
 * - pro mnoho ukázek a triků k použití.
 * TechTalk Video – technická přednáška WMF pojednávající o rozšíření Graph, včetně skvělé ukázky editoru Lyra (také nainstalovaného v laboratořích).
 * Také by vás mohly zajímat některé z budoucích schopností Vega (Keynote od Jeffreyho Heera).
 * Vega pro vývojáře – nejlepší místo ze všech zdrojů Vega
 * Úvodní video do interaktivní Vega
 * Úvodní video do interaktivní Vega

Instalace


Další nastavení konfigurace
Pokud chcete replikovat produkční prostředí, jako je en.wiki, budete muset provést následující kroky:


 * Nainstalujte, a  a povolte nahrávání SVG
 * Pokud používáte Vagrant, můžete použít
 * Importovat Module:Graph, Module:Graph/doc, a Template:Nowrap/styles.css z mediawiki.org (export link)
 * Importovat Module:Chart a Module:Chart/Default colors enwiki (exportní odkaz)
 * Importujte soubor File:Circle_frame.svg

Debugging graphs (GraphSandbox)
A sandbox is provided at Special:GraphSandbox that works similar to the Vega graph editor. The MediaWiki tool includes compatibility code that maps older Vega schemas to the currently enabled version. Inserting an old schema in the main text area will print a modified and modernized schema underneath the graph where possible.

Similar to vega.github.io/editor, the Vega object can be inspected via the  Javascript global. See Vega's debugging guide on how to use it.



Příklady grafů
Viz - pro mnoho ukázek a triků k použití.



Uživatelsky definované záložní řešení
Při použití vykreslování na straně klienta je možné použít Wikimedia Commons k poskytnutí statického záložního obrázku uživatelům. Toto je dočasné řešení, dokud nebude zavedena nová služba poskytující vykreslování na straně serveru.

Uživatel musí nejprve nahrát statický graf na Wikimedia Commons.

Záložní obrázky mají dvě proměnné  a.

se vztahuje k souboru Wikimedia Commons.

je šířka záložních obrázků v pixelech.

Tyto proměnné se zadávají do grafu následujícím způsobem:

Tam, kde se používají moduly Lua, jako je Module:Graph, lze tyto proměnné poskytnout pomocí funkce značky. Pokud by byl upraven, vypadalo by to takto:

Poté by byl použit v šabloně následujícím způsobem:

Pokud není zadán fallbackWidth, ale je definován obrázek, rozšíření odvodí šířku z poskytnuté šířky grafu. Důvodem je často rozdíl v šířce vykresleného obrazu a skutečné šířce obrazu.



Externí data
Protokol HTTP(S) nelze použít k získání dat pro graf. Místo toho použijte jeden z vlastních protokolů wiki jako,   a další.

Rozšíření Graph používá nastavení  k ovládání způsobu řešení těchto protokolů: Všimněte si, že vzhledem k závislosti dotazů na struktuře položek wikibase, mohou náhle přestat fungovat, pokud jsou podkladová data upravena a změněna, protože mohou poskytnout neúplná, prázdná nebo neplatná data, která nelze použít k vytvoření grafu. V těchto případech bude graf prázdný (viz T168601).

Vnitřní části
Při analýze rozšiřuje rozšíření Graph všechny parametry/výrazy šablony a ukládá úplné definice grafu do ParserOutput pomocí hash grafů pro ID.

Rozšíření Graph přidá HTML na stránku, kde by měly být grafy, s graph-id jako atributem. Ukázka:

Rozšíření Graph přidá na stránku modul JavaScriptu  ResourceLoader, který obsahuje knihovnu Vega, a vloží JSON definic grafů do proměnné JavaScriptu   s názvem. Jakmile klient nahraje tento modul, knihovna Vega JavaScript naplní každý plátnem HTML a nakreslí do něj graf, čímž nahradí statický obrázek.



Bezpečnostní prvky
lze nakonfigurovat tak, aby zakázal odkazování na nedůvěryhodné zdroje dat (např. Wikimedie povoluje pouze data ze stránek Wikimedie).

Licence
Knihovna Vega je distribuována pod licencí upravené licence BSD, která je pro nás přijatelná k použití.

Zdá se, že se jedná o kopii BSD licence s některými menšími (přijatelnými) úpravami. Není pro nás problém toto použít, i když v ideálním případě bychom takové změny v licenci neprováděli. Je lepší, když lidé tyto změny ve své licenci neprovádějí, aby se předešlo nejasnostem (jako je tato), zda je licence bezpečná pro použití s otevřeným zdrojovým kódem.

wgGraphAllowedDomains
Viz část o externích datech.



Modul VisualEditoru
Od léta 2015 přichází rozšíření Graph také s modulem (ext.graph.VisualEditor), který umožňuje editaci grafů v rámci VisualEditoru.

Tento modul byl výsledkem projektu Google Summer of Code 2015. Další podrobnosti najdete na stránce T89287.

Tento modul umožňuje uživatelům vidět grafy ve VisualEditoru, na rozdíl od cizích uzlů rozšíření. Kromě toho mohou uživatelé otevřít dialog pro úpravu typu grafu, dat a výplně. Uživatelské rozhraní také nabízí způsob, jak upravit nezpracovanou specifikaci JSON grafu v rámci VE, aniž byste museli přepínat do klasického editoru wikitextu, v případě, že by pokročilejší uživatelé chtěli upravit nastavení, která uživatelské rozhraní nepodporuje.

Tento první krok slouží jako odrazový můstek pro mnoho možností úprav grafů v rámci VisualEditoru a existuje mnoho způsobů, jak modul vylepšit a rozšířit.



Odstraňování problémů s nefunkčními grafy
Chyby s grafy budou zaznamenány do vývojářské konzoly.



Chyba: Chybné argumenty konstruktoru (T277906)
Oprava: Nahraďte filepath:Earthmap1000x500compac.jpg za filepath:Earthmap1000x500.jpg

[příklad https://eu.wikipedia.org/w/index.php?title=Txantiloi:Graph:Street_map_with_marks&diff=prev&oldid=8482294].

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
Oprava: Ujistěte se, že jste nenastavili výchozí hodnotu null

[příklad https://sv.m.wikipedia.org/w/index.php?title=Special:Mobil_diff/49114054&type=revision].



Související odkazy

 * — pro zobrazení grafů množin vrcholů spojených hranami (tedy ne grafů, jako je toto rozšíření)
 * Plotly — grafická knihovna JavaScriptu Open source (s možností 3D grafů)
 * D3 — dokumenty řízené daty