Extension:Graph/Kılavuz

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Extension:Graph/Guide and the translation is 100% complete.
Other languages:
English • ‎Türkçe • ‎français • ‎中文 • ‎日本語 • ‎한국어

Bu sayfa, topluluğun Graph uzantısını kullanarak en iyi uygulamaları yazması içindir. Ayrıca Etkileşimli Grafik Eğitimine bakınız

Bir Vikide Grafikleri Düzenleme

Grafikleri maddelerden ayrı tutun

Grafikler maddenin içinde saklanabilse de, bunları ayrı şablonlar olarak saklamak çok daha iyi bir yaklaşımdır, ör. 'Template:Graph:<yourgraphname> eklenebilir

{{Graph:<yourgraphname>}}

Grafikleri özelleştirilebilir yapın

Grafik ayarlarını doğrudan grafiğin içine yerleştirebilseniz bile, bunu yapmak genellikle kötü bir tasarımdır. Grafikler, farklı veri ve stil kümeleriyle birden çok maddede yeniden kullanılabilen esnek şablonlar olarak yapılmalıdır. Örneğin, grafiğin genişliği ve yüksekliği sabit kodlanmış olsa bile:

"width": 400, "height": 200,   // bad design

kolay özelleştirmeye izin verecek şekilde varsayılan değerlerle şablon parametreleri olarak yapılmalıdır:

{{#tag:graph|{
    ...
    "width": {{{width|400}}}, "height": {{{height|200}}},   // good design
    ...
} }}

Verileri grafikten ayrı tutun

Yukarıdaki stil gibi, verilerin kendisi de grafikte saklanmamalıdır. Bir grafikten yararlanabilecek büyük bir tablo içeren bir sayfayı düşünelim, ör. en pahalı resimlerin listesi. Sayfa, verilerle oldukça karmaşık bir tablo içerir:
{|
! Price 
! Painting 
! Image 
! Artist 
! Year 
! ...
|-
! data-sort-value="$300"|~$300
| ''[[When Will You Marry?|Nafea Faa Ipoipo (When Will You Marry?)]]''
| [[File:Paul Gauguin, Nafea Faa Ipoipo? (When Will You Marry?) 1892, oil on canvas, 101 x 77 cm.jpg|95px]]
| {{sort|Gaugin, Paul|[[Paul Gauguin]]}}
| 1892
...
|}

Bir grafik oluşturmanın basit yaklaşımı, gerekli verileri çıkarmak ve grafiği bu verilerle tablonun yanına yerleştirmektir. Bu işe yarayacak olsa da, bu yaklaşım pek iyi değil çünkü artık aynı verinin iki kopyası var ve bir şey değiştiğinde her ikisinin de güncellenmesi gerekiyor. Ayrıca, grafik metnin içindeyse, madde daha da uzar ve grafik kodu ve verilerle dolar. Daha az kişi onu düzenleyebilir. Grafik ayrı bir şablona yerleştirilirse, editörlerin verileri değiştirirken güncellemeyi unutmaları daha olasıdır.

Doğru çözüm, başlangıçta biraz daha zor olmasına rağmen, çok daha ileriye dönük ve yönetilmesi daha kolay bir yol sağlayacaktır ve tüm bu tür listeler için yeniden kullanılabilir.

  1. Ham verilerle, tercihen JSON biçiminde ayrı bir sayfa oluşturun. Bu dosyanın yapısı, listenin ihtiyaç duyduğu verilere göre belirlenir.
  2. Bu ham verileri iyi biçimlendirilmiş bir viki tablosuna dönüştüren bir işleve sahip bir Lua modülü oluşturun.
  3. Aynı Lua modülünde, grafik için gerekli verileri çıkaran ve JSON biçimli veriler olarak çıkış veren başka bir işlev oluşturun.
  4. Yukarıdaki verileri kullanabilen ve grafiğini çizebilen grafik şablonunu oluşturun
  5. Son olarak, bu iki pasajı liste sayfasına ekleyin:

verileri içeren iyi biçimlendirilmiş tablo ekler:

{{#invoke:MyLuaModule|BuildTable|PageWithSourceData|...}}

aynı verilerle grafik ekler:

{{Graph:MyGraph | {{#invoke:MyLuaModule|ExtractGraphData|PageWithSourceData|...}} }}

Dış Veriler

Grafik verileri grafik tanımının içine gömülebilir veya bir "url" bağlantısı üzerinden sağlanabilir. Standart Vega'dan farklı olarak, grafik etiketi tüm harici bağlantıların özel viki protokollerinden birini kullanmasını gerektirir:

  • tabular:///PageWithTabularDataOnCommons.tab - Gets tabular dataset from Commons. Should be used with "format": {"type": "json", "property": "data"} (or "meta" or "fields"). The data given to the graph is already localized to the wiki language.

For example, this dataset would be given to the graph in this format:

{
  "meta": [{
    "description": "Women's weekly earnings as a percent of men's by age, annual averages",
    "license_code": "CC0-1.0+",
    "license_text": "Creative Commons Zero",
    "license_url": "https://creativecommons.org/publicdomain/zero/1.0/",
    "sources": "Copied from [https://www.bls.gov/opub/ted/2006/oct/wk1/art02.txt bls.gov] (United States Department of Labor)"
  }],

  "fields": [{
    "name": "year",
    "type": "number",
    "title": "Year"
  }, {
    "name": "age_16_24",
    "type": "number",
    "title": "16–24 y/o"
  }, ... ],

  "data": [{
    "year": 1979,
    "age_16_24": 78.5,
      ...
  }, ...]
}
  • map:///PageWithGeoJsonDataOnCommons.map - Gets map dataset from Commons. Should be used with "format": {"type": "json", "property": "data.features"} (can also use "meta" to get the same information as for tabular). The data given to the graph is already localized to the wiki language.
  • wikifile:///Einstein_1921.jpg - Gets File:Einstein_1921.jpg image from Commons for an image mark. It is always recommended to add ?width=... (and/or height) to make the image the right size and reduce server load.
  • OBSOLETE, use wikifile: instead wikirawupload:{{filepath:Albert Einstein photo 1921.jpg}} - Grafik için bir resim alın, ör. Commons'dan. Bu etiket, sorgu parametreleri olmadan uploads.* etki alanındaki herhangi bir içeriği belirtir. Dosya yolunu ve resminin isteğe bağlı boyutunu almak için dosya yolu sihirli anahtar sözcüğünü kullanın.
  • wikiraw:///Article%20title/subpage - Yolun sayfanın başlığı olduğu bir viki sayfasının ham içeriğini alın. Alan adı isteğe bağlıdır ve belirtilirse, en.wikipedia.org, commons.wikimedia.org,... gibi herhangi bir Wikimedia sunucusu olabilir.
  • wikiapi:///?action=query&list=allpages - MediaWiki API'den veri alın. Alan isteğe bağlıdır.
  • wikirest:///api/rest_v1/page/... - RESTbase API'yi çağırın. Alan isteğe bağlıdır.
  • geoshape:///?ids=408,664 or geoshape:///?query=SELECT... - Vikiveri kimliklerini veya URL kodlu bir sorguyu (SPARQL) kullanarak verilen bölgelerin geoshapeslerini (topojson olarak) alınacak geoshapes belirten "id" sütunu ile alın.
  • mapsnapshot:///?width=__&height=__&zoom=__&lat=__&lon=__ [&style=__] - Belirli bir konum/yakınlaştırma/boyut için statik bir harita çizilebilmesi için harita anlık görüntü hizmetine bir bağlantı oluşturur. Parametreler, bunu Kartotherian için anlık görüntü isteğine dönüştürülür - https://maps.wikimedia.org/img/{style},{zoom},{lat},{lon},{width}x{height}@2x.png

Sık Karşılaşılan Sorunlar

İç içe geçmiş şablon parametreleri hakkında hatırlatma

Şablonlar, iç içe geçmiş şablon parametrelerini en az bir karakterle ayırmanızı gerektirir, aksi takdirde grafik yalnızca görüntülenmez ve bir sözdizimi hatası alırsınız. Dikkatli olun!

"values": {{{1|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue"} }}}}} // will not render
"values": {{{1|{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue"} }} }}} // will render, notice the whitespace in the closing braces

Grafiklerde çift küme parantezi kullanma

Vega 2, "template": "{{indexDate | time: '%b %Y'}}" gibi şablon parametrelerini destekler, ancak MediaWiki "indexDate" şablonunu bulmaya ve onu yansıtmaya çalışacaktır. Bunu önlemek için, ilk küme ayracı yerine \u007b, son kapanış küme ayracı yerine \u007d ve boru simgesi "$pip2" yerine {{!}} kullanın: "template": "\u007b{indexDate {{!}} time: '%b %Y'}\u007d"

Hata ayıklama

  • Geliştirme ve hata ayıklama için en iyi yer Grafik Deneme Tahtası'dır. Siz yazarken grafiğin gerçek zamanlı olarak değiştiğini görmek için JSON kodunu kopyalayın. Grafik deneme tahtası, json yorumlarını anlar ve viki biçimlendirmesini genişletir. Dönüştürülmüş JSON için sağ alt panele bakın.
  • Bir şablondan JSON grafiğini almak için düzenle/sayfa önizlemesini tıklayın ve grafiği incelemek için tarayıcının hata ayıklayıcısını kullanın (gösterilmese bile) - <div class="mw-graph ... data-graph-id="834d6921e69e66a00b40d8606e39e414145f8288" ... kodu görmelisiniz. Karma değerini kopyalayın, escape tuşuna basın (Chrome'da) ve JSON'u göstermek için bu oneliner'ı kullanın. İlk ve son alıntıyı kaldırın, reklamı kopyalayın/yukarıdaki Vega düzenleyiciye yapıştırın.
JSON.stringify(mw.config.get('wgGraphSpecs')['834d6921e69e66a00b40d8606e39e414145f8288'])