Extension:Graph

This page is a translated version of the page Extension:Graph and the translation is 100% complete.
Other languages:
English • ‎Türkçe • ‎français • ‎occitan • ‎polski • ‎русский • ‎中文 • ‎日本語 • ‎한국어
MediaWiki manüel uzantıları
OOjs UI icon advanced.svg
Graph
Sürüm durumu: kararlı
Uygulama Etiket , ContentHandler
Açıklama Data-driven graphs
Yazar(lar) Yuri Astrakhan (Yurik mesaj), Dan Andreescu, Frédéric Bolduc
Lisans MIT Lisansı
İndir
  • $wgGraphDefaultVegaVer
  • $wgGraphImgServiceUrl
  • $wgGraphAllowedDomains
Translatewiki.net adresinde mevcutsa, Graph uzantısını çevirin
Kullanım ve sürüm matrisini kontrol edin.
Sorunlar Açık görevler · Hata bildir

Graph uzantısı, <graph> bir etiketin çubuk grafikler, pasta grafikler, zaman çizelgeleri ve histogramlar (demo) gibi veri görselleştirmelerini Vega tabanlı grafik.

Genel bilgi

Graph uzantısı, güçlü Vega tabanlı grafiklerin viki sayfalarına eklenmesini sağlar. Grafikler hem statik hem de etkileşimli olabilir.

Grafik eklemenin en kolay yolu, {{Graph:Chart}} gibi hazır bir şablon kullanmaktır. Bu şablonlar tüm Vega karmaşıklıklarını gizler. Deneyimli kullanıcılar, grafikler geliştirmek için Graph Deneme Tahtası kullanabilir. Graph deneme tahtası, JSON'a ek olarak viki şablonu sözdizimine izin verir.

Yararlı bağlantılar

Kurulum

  • Vagrant kullanıyorsanız, vagrant roles enable graph --provision ile yükleyin
Manüel kurulum
  • JsonConfig uzantısı gereklidir
  • Dosyaları indirin ve extensions/ klasörünüzdeki Graph adlı dizine yerleştirin.
  • LocalSettings.php dosyanızın altına aşağıdaki kodu ekleyin:
    wfLoadExtension( 'Graph' );
    
  •   Yapıldı – Uzantının başarıyla yüklendiğini doğrulamak için vikinizde Special:Version seçeneğine gidin.

Additional config setup

If you are looking to replicate a production environment like en.wiki you will need to complete the following steps:

Roles

  • Enable graphs role
  • Enable scribunto role
  • Enable imagemap role


Templates and Lua Modules

  • Copy Module:Graph locally
  • Copy Module:Graph/doc locally
  • Copy Template:Nowrap locally
  • Copy Module:Chart locally
  • Copy Module:Plotter/DefaultColors locally.

Grafik örnekleri

Birçok örnek ve kullanım püf noktası için Demo sayfasına bakın.

User defined fallback

When using client side rendering, it is possible to use Wikimedia Commons to provide a static fallback image to noscript users. This is a temporary solution until a new service is put in place to provide server side rendering to replace the soon to be decomissioned Graphoid service.

The user must first upload the static graph to Wikimedia Commons.

Fallback images have two variables fallback and fallbackWidth.

fallback relates to a Wikimedia Commons filename.

fallbackWidth is the fallback images width in pixels.

These variables are pass through the graph in the following way:

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

Where lua modules are used such as Module:Graph then these variables can be provided via the tag function. If Template:Graph:Chart were adapted, it would look like this:

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

It would then be utilised in a template in the following manner:

{{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}}

If a fallbackWidth isn't provided but an image is defined then the extension will derive the width from the provided graph width. The reason for this is there there is frequently a difference in the redered image width and the actual image width.

{{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}}

Dış veriler

HTTP(S) protokolü, grafik için veri almak için kullanılamaz. Bunun yerine, wikiraw:, wikiapi: ve diğerleri gibi özel viki protokollerinden birini kullanın.

Graphoid hizmeti ve Graph uzantısı, bu protokollerin nasıl çözüleceğini kontrol etmek için GraphAllowedDomains ayarını kullanır: Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph. In these cases the graph will end up empty (see phab:T168601).

$wgGraphAllowedDomains = [
    # http + https anahtarları, harici veri erişimine izin verilen tüm alanları listeler.
    # Burada listelenen herhangi bir alan adı, tüm alt alan adlarına da otomatik olarak izin verir.
    # 'wikiraw' gibi özel protokoller, hangi protokolün kullanılacağını belirlemek için onu kullanır.
    # Bu şekilde wikiraw://en.wikipedia.org/Page, https://en.wikipedia.org/w/api.php?action=query&titles=Page&... için bir api isteği olur
    'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
    'http' => [ 'wmflabs.org', ... ],
    
    # wikirawupload için izin verilen etki alanlarının listesi: protokol erişimi.
    # Yalnızca tam eşleme, alt alan adı yok.
    'wikirawupload' => [ 'upload.wikimedia.org' ],
    
    # wikirawupload ile aynı ancak Vikiveri Sparql sorguları için
    'wikidatasparql' => [ 'query.wikidata.org' ],
];

Bilinen hatalar ve sınırlamalar

  • Graph uzantı hataları
  • Graphoid hizmet hataları
  • ISO 8601 zaman ölçekleri uygulanamadığından zaman çizelgelerinde yalnızca Miladi takvimler kullanılabilir
  • Çoğu tarayıcıda resim yükseltme varsayılan olarak bulanık olabilir. Çözülecek uygun image-rendering özelliğini ayarlayın.

Dahili

Ayrıştırırken, Graph uzantısı tüm şablon parametrelerini/ifadelerini genişletir ve kimlikler için grafik karmaları kullanarak tüm grafik tanımlarını graph_specs sayfa özelliğinde saklar. Bu, bir vikinin grafiklerini Special:PageWithProps veya eylem API ile kolayca bulabileceğiniz anlamına gelir.

Graph uzantısı, grafiklerin gitmesi gereken sayfaya HTML ekler, <img> etiketi içeren bir <div>. Örnek:

<div class="mw-wiki-graph-container">
  <img class="mw-wiki-graph-img"
    src="/api/rest_v1/page/graph/png/Extension%3AGraph%2FDemo/1686336/d243aa924db2f82926e0f317217fcce591fe8cd4.png" />
</div>

<img> etiketinin href özniteliği, statik bir resminin sağlayan #Graphoid hizmetini işaret eder.

Graph uzantısı etkileşim için yapılandırılmışsa ve istemci tarayıcısında JavaScript etkinse ve ResourceLoader'ın JavaScript göndermediği eski bir tarayıcı değilse, istemci tarayıcısı anında grafikleri oluşturur. Graph uzantısı, Vega kitaplığını içeren sayfaya bir ext.graph ResourceLoader JavaScript modülü ekler ve grafik tanımlarının JSON'unu bir JavaScript mediaWiki.config adlı değişkene wgGraphSpecs koyar. İstemci bu modülü yükledikten sonra, Vega JavaScript kitaplığı her <div> bir HTML tuvali ile doldurur ve statik resminin yerini alarak grafiği içine çizer. Kasım 2015, Wikimedia vikileri bu etkileşimli oluşturmayı yalnızca düzenleme önizlemesi için etkinleştirir.

Graph uzantısını her zaman yalnızca <img> etiketini kullanacak şekilde yapılandırabilir ve Vega kitaplıklarını veya grafik tanımı JSON'sunu eklemeyebilirsiniz. page_props kaydetme sonrasına kadar güncellenmeyeceği için bu mod düzenleme sırasında çalışmayacaktır. Kaydedildikten sonra, Graphoid hizmeti yeni grafik tanımına eylem API'si üzerinden erişebilecektir.

Güvenlik Özellikleri

<graph>, güvenilmeyen veri kaynaklarına başvurmaya izin vermeyecek şekilde yapılandırılabilir (örneğin, Wikimedia yalnızca Wikimedia sitelerinden gelen verilere izin verir). Ayrıca harici verilere her erişildiğinde ekstra başlıklar gönderebilir, örn. MediaWiki'nin CSRF saldırılarını önlemek için kullandığı Treat-as-Untrusted başlığı.

Lisans

Vega kitaplığı, kullanmamız için kabul edilebilir [$url BSD lisansla değiştirilmiş] altında dağıtılmaktadır.

Bu, bazı küçük (kabul edilebilir) değişikliklerle birlikte BSD lisansının bir kopyası gibi görünüyor. İdeal olarak lisansta böyle değişiklikler yapmasalar da, onu kullanmak bizim için bir sorun değil. İnsanların lisanslarında bu değişiklikleri yapmaması, lisansın açık kaynak kullanımı için güvenli olup olmadığı konusunda kafa karışıklığını (bunun gibi) önlemek için daha iyidir.

—Stephen LaPorte

Yapılandırma

wgGraphIsTrusted

false (varsayılan) ise, tüm grafik verisi istekleriyle Treat-as-Untrusted:1 üstbilgisini iletir

wgGraphImgServiceUrl

<img> etiketi için bir arka uç hizmeti istek URL'si oluşturmak için bir biçim dizesi. Örneğin:

$wgGraphImgServiceUrl = "//graphoid.wikimedia.org/%1\$s/v1/png/%2\$s/%3\$s/%4\$s.png";

Bu URL'yi üretir:

//graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png
/{domain}/v1/png/{title}/{revid}/{hash}.png

Parametreler şu sırayla sağlanacaktır: 1=server, 2=title, 3=revid, 4=graph-hash-id. Tüm parametrelerden rawurlencode() ile çıkış yapılacaktır. Değer false (varsayılan) ise, hiçbir <noscript> url oluşturulmaz

Diğer değişkenler

wgGraphUrlBlacklist değişkeni 787d64a11 içinde kaldırıldı (7 Aralık 2015).

e0813f85a (28 Ocak 2016) içinde wgGraphDataDomains kaldırıldı. Bunun yerine wgGraphAllowedDomains kullanın.

wgGraphUserServiceAlways değişkeni b735f63ff4b içinde kaldırıldı (30 Eylül 2015).

Graph ad alanını etkinleştirme

Grafik tanımlarını bağımsız sayfalar olarak kendi ad alanlarında saklamak için JsonConfig yapılandırın.

// See https://www.mediawiki.org/wiki/Extension:JsonConfig
$wgJsonConfigModels['graph.jsonconfig'] = 'graph\Content';
$wgJsonConfigs['graph.jsonconfig'] = array(
	'namespace' => <PICK-A-NS-NUMBER>,
	'nsName' => 'Graph',
	'isLocal' => true,
);

Graphoid hizmeti

  Uyarı: WMF artık Graphoid ve Graphoid'i Wikimedia vikilerinden dağıtımı korumayacak.
Bu bölüm wikitech:Graphoid ile kaynaklanmalıdır/eşitlenmelidir

Graphoid (git repo) bir node.js hizmeti, gelişmiş tarayıcılarda çalışan aynı Vega kitaplık kodunu kullanarak bir grafik tanımını statik bir PNG resmine dönüştürür. Graphoid'in başlangıçta geliştirilmesinin nedeni statik bir resim sağlamaktı, böylece Vega ve d3 kaynak yükleyici modüllerini her sayfa yanıtıyla bir araya getirmek zorunda kalmayacağız. Ayrıntılar için phab:T211881 sayfasına bakın. Hizmet, https://www.mediawiki.org/api/rest_v1/#/Page%20content/get_page_graph_png__title___revision___graph_id_ üzerindeki Wikimedia kümesinde mevcuttur.

Kendiniz kurabilirsiniz:

$ sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
$ git clone https://gerrit.wikimedia.org/r/mediawiki/services/graphoid
$ cd graphoid
$ npm install
$ npm start

(not: bu paket korunmuyor (phab:T211881 ve kurulum başarısız olabilir, phab:T196001, phab:T239100 bakınız. npm i --build-from-source yardım edebilir.)

Hizmet URL'leri sayfanın etki alanını (örneğin mediawiki.org), hizmet sürümünü (v1), grafiğin bulunduğu sayfanın başlığını (PageTitle), sayfanın revizyon kimliğini (12345, ancak mevcut için 0 olabilir) içerir ve grafiğin kendi karma kimliği (grafik tanımını tanımlamak için HTML sayfasında da kullanılır), örneğin:

http://localhost:6927/mediawiki.org/v1/PageTitle/12345/a64b022a8fa5b7fc5e40a2c95cd0a114b2ae1174.png (deprecated url)

https://www.mediawiki.org/api/rest_v1/page/graph/png/Extension%3AGraph/3420825/72edc224f0a10b343c1e84f63dbfc97cac9bc957.png

Graph uzantısını LocalSettings.php'deki Graphoid hizmetini aşağıdaki gibi bir satırla kullanacak şekilde yapılandırırsınız:

$wgGraphImgServiceUrl = "//localhost:6927/%1\$s/v1/%2\$s/%3\$s/%4\$s.png"; //deprecated path, older versions only
$wgGraphImgServiceUrl = "//graphoid.wikimedia.org/%1\$s/v1/png/%2\$s/%3\$s/%4\$s.png"; //deprecated path, older versions only

Graphoid hizmetlerini yapılandırın

 
Graph uzantısı iş akışı

Hizmeti kendi yapılandırma dosyası üzerinden daha fazla yapılandırabilirsiniz.

Görsel Düzenleyici modülü

Graph uzantısı, 2015 yazından bu yana, VisualEditor içinde grafik düzenlemeyi sağlayan bir modül (ext.graph.VisualEditor) ile birlikte gelir.

Bu modül, bir Google Summer of Code 2015 projesinin sonucudur. Ayrıntılar için phab:T89287 sayfasına bakın.

Bu modül, kullanıcıların yabancı uzantı düğümlerinin aksine, Görsel Düzenleyici içindeki grafikleri görmelerine olanak tanır. Ayrıca, kullanıcılar bir grafiğin türünü, verilerini ve dolgusunu düzenlemek için bir iletişim kutusu açabilir. Kullanıcı arabirimi ayrıca, daha ileri düzey kullanıcıların kullanıcı arabirimi tarafından desteklenmeyen ayarları değiştirmek istemesi durumunda klasik vikimetin düzenleyiciye geçmek zorunda kalmadan VE içinde bir grafiğin ham JSON belirtimini düzenlemenin bir yolunu sunar.

Bu ilk adım, Görsel Düzenleyici içinde grafik düzenleme ile birçok olasılık için bir atlama taşı görevi görür ve modülün geliştirilip genişletilebileceği birçok yol vardır.

Ayrıca bakınız

  • Extension:GraphViz — kenarlarla birbirine bağlanmış köşe kümelerinin grafikler görüntülemek için (yani, bu uzantı gibi grafikler değil)
  • Plotly — Açık kaynak JavaScript grafik kitaplığı (3 boyutlu grafik yetenekleri ile)
  • D3 — Data-Driven Belgeleri