Issue tracker: #Graphs

Extension:Graph/cs

From Linux Web Expert

Revision as of 01:34, 15 April 2024 by imported>FuzzyBot (Updating to match new version of source page)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Základní informace k tomuto rozšíření MediaWiki
File:OOjs UI icon advanced-invert.svg
Graph
Stav rozšíření: bez správce
Zavádění Značka , ContentHandler
Popis Grafy založené na datech
Napsal(i)
  • Yuri Astrakhan (Yurik talk),
  • Dan Andreescu,
  • Frédéric Bolduc
MediaWiki
Licence Licence nespecifikována
Zdrojový kód
<translate> Download extension</translate>
<translate> Git</translate> [?]:
Čtvrtletní stahování Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Používání veřejných wikin Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Přeložte rozšíření Graph, používá-li lokalizaci z translatewiki.net
Problémy Otevřené úkoly · Nahlásit chybu

Rozšířeníení Graph umožňuje značku ‎<graph> 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 {{Graph:Chart}}. 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

Instalace

  • Vyžaduje rozšíření JsonConfig
  • <translate> [[<tvar name=2>Special:ExtensionDistributor/Graph/cs</tvar>|Download]] and move the extracted <tvar name=name>Graph/cs</tvar> folder to your <tvar name=ext>extensions/</tvar> directory.</translate>
    <translate> Developers and code contributors should install the extension [[<tvar name=git>Special:MyLanguage/Download from Git</tvar>|from Git]] instead, using:</translate>cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph%2Fcs
  • <translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate> 
    wfLoadExtension( 'Graph/cs' );
  • File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>


<translate> Vagrant installation:</translate>

  • <translate> If using <tvar name=vagrant>Vagrant </tvar>, install with <tvar name=code>vagrant roles enable graph --provision</tvar></translate>

Další nastavení konfigurace

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

Ladění grafů a portování grafů z Vega 2 do Vega 5

Sandbox je poskytován na Special:GraphSandbox, který funguje podobně jako Grafický editor Vega. Nástroj MediaWiki obsahuje kód kompatibility, který mapuje starší schémata Vega na aktuálně povolenou verzi. Vložením starého schématu do hlavní textové oblasti se pod graf, kde je to možné, vytiskne upravené a modernizované schéma.

Podobně jako vega.github.io/editor lze objekt Vega kontrolovat prostřednictvím globálního JavaScriptu VEGA_DEBUG. Podívejte se na průvodce laděním společnosti Vega, jak jej používat.

Migrace schémat ze starších verzí Vega

Dříve Graph podporoval Vega 2. JSON grafů můžete vložit do http://vega.github.io/vega-editor/?mode=vega, abyste viděli, jak se dříve vykreslovaly pro srovnání s Vega 5.

Special:GraphSandbox (nejnovější kód viz beta clusterová verze pískoviště) lze použít k mapování starších schémat na nová schémata. Zkopírujte staré schéma do hlavní textové oblasti a aktualizované schéma se objeví v textové oblasti pod grafem. Zkopírujte nové schéma do svého kódu.

Příklady grafů

Viz Stránka ukázek - pro mnoho ukázek a triků k použití.

<graph fallback="" fallbackWidth="">{"legends":[],"scales":[{"type":"band","name":"x","domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":{"scheme":"category10"}}],"marks":[{"encode":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect","from":{"data":"chart"}}],"data":[{"transform":[],"format":{"parse":{"y":"number","x":"number"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","index":1,"x":1},{"y":12,"series":"y","index":1,"x":2},{"y":6,"series":"y","index":1,"x":3},{"y":14,"series":"y","index":1,"x":4},{"y":2,"series":"y","index":1,"x":5},{"y":10,"series":"y","index":1,"x":6},{"y":7,"series":"y","index":1,"x":7},{"y":9,"series":"y","index":1,"x":8}]}],"height":100,"axes":[{"orient":"bottom","title":"X","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"scale":"x","format":"d","tickMinStep":1,"grid":false},{"orient":"left","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"title":"Y","tickCount":8,"scale":"y","format":"d","tickMinStep":1,"grid":false}],"$schema":"https://vega.github.io/schema/vega/v5.json","width":400} </graph> <graph fallback="" fallbackWidth="">{"legends":[{"orient":"top-right","title":"Legenda","labelColor":"#54595d","stroke":"color","titleColor":"#54595d","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":{"scheme":"category10"}},{"range":[0,50],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"marks":[{"encode":{"enter":{"y":{"value":50},"x":{"value":50},"fill":{"scale":"color","field":"x"}},"update":{"endAngle":{"field":"endAngle"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","value":50,"field":"r"},"startAngle":{"field":"startAngle"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}},"hover":{"fill":{"value":"red"}}},"type":"arc","from":{"data":"chart"}},{"encode":{"enter":{"theta":{"signal":"(datum.startAngle + datum.endAngle)/2"},"baseline":{"value":"middle"},"align":{"value":"center"},"text":{"field":"y"},"y":{"value":50},"x":{"value":50},"fontSize":{"value":5},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-15,"field":"r"},"fill":{"value":"white"}}},"type":"text","from":{"data":"chart"}}],"data":[{"transform":[{"type":"pie","field":"y"}],"format":{"parse":{"y":"number","x":"string","r":"number"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"height":100,"axes":[],"$schema":"https://vega.github.io/schema/vega/v5.json","width":200} </graph> <graph fallback="" fallbackWidth="">{"legends":[{"title":"Legenda","labelColor":"#54595d","stroke":"color","titleColor":"#54595d","fill":"color"}],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y1"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"marks":[{"type":"group","marks":[{"encode":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y1"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"y0"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area","from":{"data":"facet"}}],"from":{"facet":{"name":"facet","data":"chart","groupby":"series"}}}],"data":[{"transform":[{"field":"y","type":"stack","sort":{"field":"index"},"groupby":["x"]}],"format":{"parse":{"y":"number","x":"number"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","index":1,"x":1},{"y":12,"series":"y1","index":1,"x":2},{"y":6,"series":"y1","index":1,"x":3},{"y":14,"series":"y1","index":1,"x":4},{"y":2,"series":"y1","index":1,"x":5},{"y":10,"series":"y1","index":1,"x":6},{"y":2,"series":"y2","index":2,"x":1},{"y":4,"series":"y2","index":2,"x":2},{"y":6,"series":"y2","index":2,"x":3},{"y":8,"series":"y2","index":2,"x":4},{"y":13,"series":"y2","index":2,"x":5},{"y":11,"series":"y2","index":2,"x":6}]}],"height":100,"axes":[{"orient":"bottom","title":"X","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"scale":"x","format":"d","tickMinStep":1,"grid":false},{"orient":"left","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"title":"Y","tickCount":8,"scale":"y","format":"d","tickMinStep":1,"grid":false}],"$schema":"https://vega.github.io/schema/vega/v5.json","width":400} </graph>

<graph mode=interactive title="Historical Fertility Rates"> { 

   "$schema": "https://vega.github.io/schema/vega/v5.json",
   "description": "An interactive scatter plot of global health statistics by country and year.",
   "width": 800,
   "height": 600,
   "padding": 5,
 
   "data": [
     {
       "name": "gapminder",
       "url": "https://www.mediawiki.org/wiki/Extension:Graph/data/gapminder-json?action=raw"
     },
     {
       "name": "clusters",
       "values": [
         {"id": 0, "name": "South Asia"},
         {"id": 1, "name": "Europe & Central Asia"},
         {"id": 2, "name": "Sub-Saharan Africa"},
         {"id": 3, "name": "America"},
         {"id": 4, "name": "East Asia & Pacific"},
         {"id": 5, "name": "Middle East & North Africa"}
       ]
     },
     {
       "name": "country_timeline",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "timeline && datum.country == timeline.country"},
         {"type": "collect", "sort": {"field": "year"}}
       ]
     },
     {
       "name": "thisYear",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "datum.year == currentYear"}
       ]
     },
     {
       "name": "prevYear",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "datum.year == currentYear - stepYear"}
       ]
     },
     {
       "name": "nextYear",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "datum.year == currentYear + stepYear"}
       ]
     },
     {
       "name": "countries",
       "source": "gapminder",
       "transform": [
         {"type": "aggregate", "groupby": ["country"]}
       ]
     },
     {
       "name": "interpolate",
       "source": "countries",
       "transform": [
         {
           "type": "lookup",
           "from": "thisYear", "key": "country",
           "fields": ["country"], "as": ["this"],
           "default": {}
         },
         {
           "type": "lookup",
           "from": "prevYear", "key": "country",
           "fields": ["country"], "as": ["prev"],
           "default": {}
         },
         {
           "type": "lookup",
           "from": "nextYear", "key": "country",
           "fields": ["country"], "as": ["next"],
           "default": {}
         },
         {
           "type": "formula",
           "as": "target_fertility",
           "expr": "interYear > currentYear ? datum.next.fertility : (datum.prev.fertility||datum.this.fertility)"
         },
         {
           "type": "formula",
           "as": "target_life_expect",
           "expr": "interYear > currentYear ? datum.next.life_expect : (datum.prev.life_expect||datum.this.life_expect)"
         },
         {
           "type": "formula",
           "as": "inter_fertility",
           "expr": "interYear==2000 ? datum.this.fertility : datum.this.fertility + (datum.target_fertility-datum.this.fertility) * abs(interYear-datum.this.year)/5"
         },
         {
           "type": "formula",
           "as": "inter_life_expect",
           "expr": "interYear==2000 ? datum.this.life_expect : datum.this.life_expect + (datum.target_life_expect-datum.this.life_expect) * abs(interYear-datum.this.year)/5"
         }
       ]
     },
     {
       "name": "trackCountries",
       "on": [
         {"trigger": "active", "toggle": "{country: active.country}"}
       ]
     }
   ],
 
   "signals": [
     { "name": "minYear", "value": 1955 },
     { "name": "maxYear", "value": 2005 },
     { "name": "stepYear", "value": 5 },
     {
       "name": "active",
       "value": {},
       "on": [
         {"events": "@point:mousedown, @point:touchstart", "update": "datum"},
         {"events": "window:mouseup, window:touchend", "update": "{}"}
       ]
     },
     { "name": "isActive", "update": "active.country" },
     {
       "name": "timeline",
       "value": {},
       "on": [
         {"events": "@point:mouseover", "update": "isActive ? active : datum"},
         {"events": "@point:mouseout", "update": "active"},
         {"events": {"signal": "active"}, "update": "active"}
       ]
     },
     {
       "name": "tX",
       "on": [{
         "events": "mousemove!, touchmove!",
         "update": "isActive ? scale('x', active.this.fertility) : tX"
       }]
     },
     {
       "name": "tY",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('y', active.this.life_expect) : tY"
       }]
     },
     {
       "name": "pX",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('x', active.prev.fertility) : pX"
       }]
     },
     {
       "name": "pY",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('y', active.prev.life_expect) : pY"
       }]
     },
     {
       "name": "nX",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('x', active.next.fertility) : nX"
       }]
     },
     {
       "name": "nY",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('y', active.next.life_expect) : nY"
       }]
     },
     {
       "name": "thisDist",
       "value": 0,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? sqrt(pow(x()-tX, 2) + pow(y()-tY, 2)) : thisDist"
       }]
     },
     {
       "name": "prevDist",
       "value": 0,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? sqrt(pow(x()-pX, 2) + pow(y()-pY, 2)): prevDist"
       }]
     },
     {
       "name": "nextDist",
       "value": 0,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? sqrt(pow(x()-nX, 2) + pow(y()-nY, 2)) : nextDist"
       }]
     },
     {
       "name": "prevScore",
       "value": 0,
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? ((pX-tX) * (x()-tX) + (pY-tY) * (y()-tY))/prevDist || -999999 : prevScore"
       }]
     },
     {
       "name": "nextScore",
       "value": 0,
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? ((nX-tX) * (x()-tX) + (nY-tY) * (y()-tY))/nextDist || -999999 : nextScore"
       }]
     },
     {
       "name": "interYear",
       "value": 1980,
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? (min(maxYear, currentYear+5, max(minYear, currentYear-5, prevScore > nextScore ? (currentYear - 2.5*prevScore/sqrt(pow(pX-tX, 2) + pow(pY-tY, 2))) : (currentYear + 2.5*nextScore/sqrt(pow(nX-tX, 2) + pow(nY-tY, 2)))))) : interYear"
       }]
     },
     {
       "name": "currentYear",
       "value": 1980,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? (min(maxYear, max(minYear, prevScore > nextScore ? (thisDist < prevDist ? currentYear : currentYear-5) : (thisDist < nextDist ? currentYear : currentYear+5)))) : currentYear"
       }]
     }
   ],
 
   "scales": [
     {
       "name": "x",
       "type": "linear", "nice": true,
       "domain": {"data": "gapminder", "field": "fertility"},
       "range": "width"
     },
     {
       "name": "y",
       "type": "linear", "nice": true, "zero": false,
       "domain": {"data": "gapminder", "field": "life_expect"},
       "range": "height"
     },
     {
       "name": "color",
       "type": "ordinal",
       "domain": {"data": "gapminder", "field": "cluster"},
       "range": "category"
     },
     {
       "name": "label",
       "type": "ordinal",
       "domain": {"data": "clusters", "field": "id"},
       "range": {"data": "clusters", "field": "name"}
     }
   ],
 
   "axes": [
     {
       "title": "Fertility",
       "orient": "bottom", "scale": "x",
       "grid": true, "tickCount": 5
     },
     {
       "title": "Life Expectancy",
       "orient": "left", "scale": "y",
       "grid": true, "tickCount": 5
     }
   ],
 
   "legends": [
     {
       "fill": "color",
       "title": "Region",
       "orient": "right",
       "encode": {
         "symbols": {
           "enter": {
             "fillOpacity": {"value": 0.5}
           }
         },
         "labels": {
           "update": {
             "text": {"scale": "label", "field": "value"}
           }
         }
       }
     }
   ],
 
   "marks": [
     {
       "type": "text",
       "encode": {
         "update": {
           "text": {"signal": "currentYear"},
           "x": {"value": 300},
           "y": {"value": 300},
           "fill": {"value": "grey"},
           "fillOpacity": {"value": 0.25},
           "fontSize": {"value": 100}
         }
       }
     },
     {
       "type": "text",
       "from": {"data": "country_timeline"},
       "interactive": false,
       "encode": {
         "enter": {
           "x": {"scale": "x", "field": "fertility", "offset": 5},
           "y": {"scale": "y", "field": "life_expect"},
           "fill": {"value": "#555"},
           "fillOpacity": {"value": 0.6},
           "text": {"field": "year"}
         }
       }
     },
     {
       "type": "line",
       "from": {"data": "country_timeline"},
       "encode": {
         "update": {
           "x": {"scale": "x", "field": "fertility"},
           "y": {"scale": "y", "field": "life_expect"},
           "stroke": {"value": "#bbb"},
           "strokeWidth": {"value": 5},
           "strokeOpacity": {"value": 0.5}
         }
       }
     },
     {
       "name": "point",
       "type": "symbol",
       "from": {"data": "interpolate"},
       "encode": {
         "enter": {
           "fill": {"scale": "color", "field": "this.cluster"},
           "size": {"value": 150}
         },
         "update": {
           "x": {"scale": "x", "field": "inter_fertility"},
           "y": {"scale": "y", "field": "inter_life_expect"},
           "fillOpacity": [
             {
               "test": "datum.country==timeline.country || indata('trackCountries', 'country', datum.country)",
               "value": 1
             },
             {"value": 0.5}
           ]
         }
       }
     },
     {
       "type": "text",
       "from": {"data": "interpolate"},
       "interactive": false,
       "encode": {
         "enter": {
           "fill": {"value": "#333"},
           "fontSize": {"value": 14},
           "fontWeight": {"value": "bold"},
           "text": {"field": "country"},
           "align": {"value": "center"},
           "baseline": {"value": "bottom"}
         },
         "update": {
           "x": {"scale": "x", "field": "inter_fertility"},
           "y": {"scale": "y", "field": "inter_life_expect", "offset": -7},
           "fillOpacity": [
             {
               "test": "datum.country==timeline.country || indata('trackCountries', 'country', datum.country)",
               "value": 0.8
             },
             {"value": 0}
           ]
         }
       }
     }
 ]

} </graph>

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 noscript. 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é fallback a fallbackWidth.

fallback se vztahuje k souboru Wikimedia Commons.

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

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

<graph fallback="Graph test seddon.png" fallbackWidth=450>

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

{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} |  fallbackWidth= {{{fallbackWidth|''}}} }}

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

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}

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. 

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png}}

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 wikiraw:, wikiapi: a další.

Rozšíření Graph používá nastavení GraphAllowedDomains 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 phab:T168601). 

$wgGraphAllowedDomains = [
    # Klíče http + https uvádí všechny domény povolené pro externí přístup k datům.
    # Jakákoli zde uvedená doména automaticky povoluje také všechny subdomény.
    # Vlastní protokoly jako 'wikiraw' jej používají k určení, který protokol použít.
    # Tímto způsobem bude wikiraw://en.wikipedia.org/Page požadavkem API na https://en.wikipedia.org/w/api.php?action=query&titles=Page&...
    'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
    'http' => [ 'wmflabs.org', ... ],
    
    # Seznam domén povolených pro wikirawupload: Protokolový přístup.
    # Pouze přesná shoda, žádné subdomény.
    'wikirawupload' => [ 'upload.wikimedia.org' ],
    
    # Stejné jako wikirawupload, ale pro dotazy Wikidata Sparql
    'wikidatasparql' => [ 'query.wikidata.org' ],
];

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, ‎<div> s graph-id jako atributem. Ukázka: 

<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>

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

Bezpečnostní prvky

‎<graph> 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. ”

—Stephen LaPorte

Konfigurace

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 phab:T89287.

File:Ve-graph-showcase.png

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 (phab: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.

Související odkazy

Retrieved from "https://www.linuxwebexpert.com/wiki/index.php?title=Extension:Graph/cs&oldid=47772"