Erweiterung:Graph
Warnung: Folgende Textstelle oder Konfiguration stellt eine kritische Sicherheitslücke dar. Site-Administratoren: Von der Verwendung wird dringend abgeraten, bis dieses Sicherheitsproblem behoben ist. Problem: Vulnerable to Cross-site scripting attacks, because it passes user input directly to the browser. This may lead to user accounts being hijacked, among other things. Siehe task T336556 für weitere Informationen. Lösung: strictly validate user input and/or apply escaping to all characters that have a special meaning in HTML |
Diese Erweiterung wird derzeit nicht aktiv gepflegt! Obwohl sie möglicherweise immer noch funktioniert, werden Fehlerberichte oder Featureanfragen höchstwahrscheinlich ignoriert. Wenn Du die Aufgabe übernehmen möchtest, diese Erweiterung zu entwickeln und zu verwalten, kannst Du Du kannst den Besitz der Quelle anfordern. Du kannst höflichkeitshalber den Autor kontaktieren. Du solltest auch diese Vorlage entfernen und angeben, dass die Erweiterung in der Infobox {{Erweiterung }} der Seite beibehalten werden soll. |
Graph Freigabestatus: ohne Wartung |
|
---|---|
Einbindung | Tag , ContentHandler |
Beschreibung | Datenvisualisierung |
Autor(en) |
|
MediaWiki | >= 1.43 |
Lizenz | MIT-Lizenz |
Herunterladen | |
|
|
Quarterly downloads | 25 (Ranked 106th) |
Public wikis using | 884 (Ranked 281st) |
Übersetze die Graph-Erweiterung, wenn sie auf translatewiki.net verfügbar ist | |
Probleme | Offene Aufgaben · Einen Fehler melden |
Mit der Graph-Erweiterung kann ein <graph>
-Tag Datenvisualisierungen wie Balken- oder Tortendiagramme sowie Zeitleisten und Histogramme (demo) in einem JSON-Format beschreiben, welches ein Vega-basiertes Diagramm wiedergibt.
Allgemeine Information
Die Graph Erweiterung ermöglicht es, Vega-basierte Graphen zu Wiki-Seiten hinzugefügt zu werden. Graphen können interaktiv sein.
Die einfachste Möglichkeit, einen Graphen hinzuzufügen, ist eine bereitgestellte Vorlage, wie beispielsweise {{Graph:Chart}} zu nutzen. Diese Vorlagen verstecken alle Vega-Komplexitäten. Power-Nutzer können die Graph Sandbox benutzen, um Graphen zu entwickeln. Die Graph Sandbox gestattet Wiki-Vorlagen-Syntax sowie JSON. Durch die integration der Erweiterung mit VisualEditor wird ein simples Tool bereitgestellt, welches simple Graphen durch Eingabe der Werte direkt im Editor generiert.
Nützliche Links
- Vega 2-Dokumentation – Vega 2 Dokumentationsseiten auf nyurik/vega/wiki wiederhergestellt.
- Guide - Allgemeine Empfehlungen zur Nutzung von Graphen im Wiki
- Interactive Tutorial - Schritt-für-Schritt-Anleitung zur Gestaltung eines interaktiven Graphen
- Demo page - Für viele Beispiele und Nutzungstricks.
- TechTalk Video - eine Diskussion bei einem WMF Tech-Talk über die Graph Erweiterung, inklusive einer großartigen Demonstration des Lyra editor (zusätchlich on labs installiert).
- Möglicherweise fänden Sie folgende Informationen über einige der Vega future capabilities nützlich (Schlüsselpunkt von Jeffrey Heer).
- Vega for devs - Der bester Ort für alle Vega-Ressourcen
Installation
- Benötigt die Erweiterung JsonConfig
- Die Erweiterung herunterladen und die Datei(en) in ein Verzeichnis namens
Graph
im Ordnerextensions/
ablegen.
Entwickler und Code-Beitragende sollten stattdessen die Erweiterung von Git installieren, mit:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph - Folgenden Code am Ende deiner LocalSettings.php -Datei einfügen:
wfLoadExtension( 'Graph' );
- Erledigt – Navigiere zu Special:Version in deinem Wiki, um zu überprüfen, ob die Erweiterung erfolgreich installiert wurde.
Vagrant-Installation:
- Wird Vagrant benutzt, ist mit
vagrant roles enable graph --provision
zu installieren
Zusätzliche Konfigurationseinstellungen
Falls Sie eine Produktionsumgebung wie de.wiki replizieren möchten, müssen sie folgenden Schritten folgen:
- Installieren Sie Scribunto , Imagemap sowie TemplateStyles , und SVG-Uploads aktivieren
- Falls Sie vagrant nutzen, können sie
vagrant roles enable --provision scribunto imagemap templatestyles svg
nutzen
- Falls Sie vagrant nutzen, können sie
- Importieren Sie mediawiki.org's Module:Graph, Module:Graph/doc, Template:Nowrap und Template:Nowrap/styles.css (export link)
- Importieren sie enwiki's Module:Chart und Module:Chart/Default colors (export link)
- Importieren Sie die Datei File:Circle_frame.svg
Debuggen von Graphen und Übersetzen von Graphen von Vega 2 nach Vega 5
Eine Sandbox, ähnlich dem Vega graph editor in der Funktionsweise, wird bei Special:GraphSandbox bereitgestellt. Das MediaWiki-Tool enthält Kompatibilitätscode der ältere Vega-Schemata auf die zurzeit Aktivierte Version abbildet. Das Einfügen eines alten Schemas im Haupttextbereich gibt ein modifiziertes und modernisiertes Schema unterhalb des Graphen überall wo möglich wieder.
Ähnlich wie bei vega.github.io/editor, ist es möglich das Vega-Objekt über die VEGA_DEBUG
JavaScript-Globale zu inspizieren.
Besuchen Sie Vega's Debugging-Anweisung für weitere Nutzungsinformationen.
Migrieren von Schemata von älteren Vega-Versionen
Früher unterstützte die Graph Erweiterung Vega 2. Sie können den JSON-Code Ihrer Graphen in http://vega.github.io/vega-editor/?mode=vega einfügen, um zu sehen wie sie früher gerendert wurden, im Vergleich mit Vega 5.
Special:GraphSandbox (für den neuesten Code, siehe die Beta-Cluster Version der Sandbox) kann benutzt werden um alte Schemata auf neue abzubilden. Kopieren Sie das alte Schema in den Haupttextbereich und das überarbeitete Schema wird im Textbereich unterhalb des Graphen erscheinen. Kopieren Sie das neue Schema in Ihren Code.
Graphenbeispiele
Siehe Demo page für viele Beispiele und Nutzungstricks.
Nutzerdefinierter Fallback
Wenn client-side Rendering genutzt wird, ist es möglich, Wikimedia Commons zu nutzen um ein statisches Fallback-Bild den noscript
-Nutzern zu bieten.
Dies ist eine temporäre Lösung bis ein neuer Service aufgesetzt wird um server-side Rendering zu ermöglichen.
Der Nutzer muss zuvor seinen statischen Graphen auf Wikimedia Commons hochladen.
Fallback-Illustrationen haben zwei Variablen, fallback
und fallbackWidth
.
fallback
ist abhängig von einem Wikimedia Commons Dateinamen.
fallbackWidth
ist die Breite der Fallback-Illustration in Pixeln.
Diese Variablen passieren den Graphen auf die folgene Art und Weise:
<graph fallback="Graph test seddon.png" fallbackWidth=450>
Wo Lua-Module wie Module:Graph genutzt werden, dann können diese Variablen über die Tag-Funktion bereitgestellt werden. Falls Template:Graph:Chart adaptiert würde, sähe es so aus:
{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} | fallbackWidth= {{{fallbackWidth|''}}} }}
Es würde dann in einer Vorlage wie folgt genutzt:
{{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}}
Falls eine fallbackWidth (Fallbackbreite) nicht angegeben wird, aber ein Bild definiert ist, extrahiert die Erweiterung die Breite aus der angegeben Graphenbreite. Der Grund hierfür ist, dass es oft einen Unterschied in der Breite des gerenderten Bildes und der Breite des tatsächlichen Bildes gibt.
{{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}}
Externe Daten
Das HTTP(S)-Protokoll kann nicht genutzt werden um Daten für den Graphen einzuholen.
Stattdessen, nutzen Sie eines der benutzerdefinierten Wiki-Protokolle wie wikiraw:
, wikiapi:
und andere.
Die Graph Erweiterung nutzt die Einstellung GraphAllowedDomains
um zu kontrollieren wie diese Protokolle aufgelöst werden:
Da Abfragen auf der Struktur von Wikibase-Artikeln basieren, können sie möglicherweise plötzlich aufhören zu funktionieren, falls die darunterliegenden Daten bearbeitet und verändert werden, da diese nun unvollständige, leere oder ungültige Daten, die nicht zur Erstellung eines Graphen geeignet sind, zurückgeben könnten.
In solchen Fällen wird der Graph leer enden. (Siehe phab:T168601).
$wgGraphAllowedDomains = [
# Http + Https Schlüssel listet alle der für externen Datenzugriff zugelassenen Domänen auf.
# Jede hier aufgezählte Domäne qualifiziert automatisch auch alle Unterdomänen.
# Benutzerdefinierte Protokolle wie 'wikiraw', nutzen Sie es um festzustellen welches Protokoll Sie nutzen sollten.
# So wird wikiraw://en.wikipedia.org/Page eine API-Anfrage an https://en.wikipedia.org/w/api.php?action=query&titles=Page&...
'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
'http' => [ 'wmflabs.org', ... ],
# Liste der für wikirawupload zugelassenen Domänen: Protokollzugriff.
# Nur exakte Treffer, keine Unterdomänen.
'wikirawupload' => [ 'upload.wikimedia.org' ],
# gleich wie wikirawupload, aber für Wikidata Sparql-Abfragen
'wikidatasparql' => [ 'query.wikidata.org' ],
];
Inneres
Während dem Parsing expandiert alle Parameter/Ausdrücke der Vorlage, und speichert die kompletten Graphdefinitionen in der ParserOutput, für IDs werden Graphhashes verwendet.
Die Graph Erweiterung fügt HTML der Seite bei, auf der Graphen erscheinen sollen, ein <div>
mit einem graph-id als Attribut.
Beispiel:
<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>
Die Graph Erweiterung ergänzt zur Seite ein ext.graph
ResourceLoader JavaScript-Modul, welches die Vega Library umfängt, und den JSON-Code der Graphdefinitionen in eine JavaScript mediawiki.config
Variable namens wgGraphSpecs
packt.
Sobald der Client dieses Modul geladen hat, ersetzt die Vega JavaScript Library das statische Bild in allen <div>
s mit einem HTML canvas und zeichnet auf diesen dann die Graphen ab.
Sicherheitsfeatures
<graph>
kann konfiguriert werden sodass unbeglaubigte Datenquellen verboten werden (Bsp. erlaubt Wikimedia nur Daten aus den Wikimedia-Seiten).
Lizenz
Die Vega Library wird under einer modified BSD license verbreitet, unter uns akzeptabel zur Nutzung.
“ | Dies erscheint eine Kopie der BSD license zu sein, mit kleinen (akzeptablen) Modifikationen. Für uns ist es kein Problem sie zu nutzen, allerdings würden sie idealerweise keine derartigen veränderungen an der Lizenz vornehmen. Es ist besser, wenn man solche Änderungen an seiner Lizenz nicht vornimmt, um Verwirrung (wie hier) über die Sicherheit der Lizenz für Open-Source-Nutzung vorzubeugen. | ” |
—Stephen LaPorte |
Konfiguration
wgGraphAllowedDomains
Siehe den Abschnitt zu externen Daten.
VisualEditor-Modul
Seit Sommer 2015 bringt die Graph Erweiterung auch ein Modul (ext.graph.VisualEditor) mit sich, welches Graphenbearbeitung innerhalb des VisualEditors ermöglicht.
Dieses Modul war ein Resultat eines Google Summer of Code 2015 Projekts. Siehe phab:T89287 für weitere Details.
Dieses Modul ermöglicht es Nutzern Graphen innerhalb des VisualEditors zu sehen, im Gegensatz zu Alien Extension Nodes. Ferner können Nutzer einen Dialog aufrufen um den Typ eines Graphen zu verändern, sowie Daten und Padding. Das User-Interface (UI) bietet eine Möglichkeit die rohen JSON Spezifikationen eines Graphen innerhalb des VEs zu bearbeiten ohne zum klassischen Wikitext-Editor wechseln zu müssen, falls weiter fortgeschrittene Nutzer Einstellungen die nicht von der UI unterstützt werden verändern möchten.
Der erste Schritt dient als Anfang für viele Möglichkeiten mit Graphbearbeitung innerhalb des VisualEditors und es gibt viele Möglichkeiten um das Modul zu verbessern und zu erweitern.
Problembehandlung dysfunktionaler Graphen
Errata mit Graphen werden in der Entwicklerkonsole geloggt.
Fehler: Bad constructor arguments (phab:T277906)
Lösung: Ersetzen SIe filepath:Earthmap1000x500compac.jpg durch filepath:Earthmap1000x500.jpg.
TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
Lösung: Stellen Sie sicher, dass sie nicht default als null gesetzt haben.
Siehe auch
- Diagram extensions
- Plotly — Die open-source JavaScript Graphing Library (mit 3D-Grafikfunktionen)
- D3 — Datengesteuerte Dokumente
Diese Erweiterung ist in den folgenden Softwarepaketen enthalten und/oder wird von den folgenden Wiki-Farmen, bzw. Wiki-Hostern verwendet: Dies ist keine maßgebliche Liste. Softwarepakete und/oder Wiki-Farmen, bzw. Wiki-Hoster nutzen diese Erweiterung ggf., obwohl sie nicht in dieser Liste enthalten sind. Prüfe daher stets die Nutzung im verwendeten Softwarepaket und/oder bei der Wiki-Farm, bzw. dem Wiki-Hoster. |
- Pages with disabled graphs
- Extensions with XSS vulnerabilities/de
- Unmaintained extensions/de
- Tag extensions/de
- ContentHandler extensions/de
- MIT licensed extensions/de
- Extensions in Wikimedia version control/de
- OutputPageParserOutput extensions/de
- ParserFirstCallInit extensions/de
- All extensions/de
- Extensions included in Canasta/de
- Extensions included in WikiForge/de
- Graph extensions/de
- Extensions with VisualEditor support/de
- Discovery/de