|
|
| Zeile 1: |
Zeile 1: |
| <includeonly>{{#tag:{{#if:{{{debug|}}}|syntaxhighlight|graph}}|</includeonly>
| | {{#ifeq:{{{align|{{{2|}}}}}}|center|<div class="center">}}{{#if:{{{thumb|{{{1|}}}}}}|<div class="thumb {{#switch:{{{align|{{{2|}}}}}}|center|none=tnone|left=tleft|right|#default=tright}}"><div class="thumbinner" style="width: fit-content;"><div class="thumbimage">|<div class="{{#switch:{{{align|{{{2|}}}}}}|right=floatright|left=floatleft|#default=floatnone}}">}}<includeonly>{{#invoke:Template wrapper|wrap|_template=Graph:Lines/core|_exclude=thumb, align, caption, 1, 2, 3|hideSource=true}}</includeonly><noinclude>[[File:Template-Graph-Lines example.png]]</noinclude>{{#if:{{{thumb|{{{1|}}}}}}|</div><div class="thumbcaption">|<div><small>}}{{{caption|{{{3|{{#if:{{{title|}}}|{{{title}}}.}}}}}}}} |
| { | | {{#switch: {{{tabletype|tab}}}{{{hideSource|}}} |
| //
| | |tab= {{#invoke:TNT|msg|Original/Template:Graphs.tab|source-table|{{#invoke:TNT|link|{{{table}}}}}}}. |
| // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
| | |query= {{#invoke:TNT|msg|Original/Template:Graphs.tab|source-wdqs|https://query.wikidata.org/embed.html#{{urlencode:{{{table}}}|PATH}}}}. |
| // Please do not modify it anywhere else, as it may get copied and override your changes.
| | }}{{#if:{{{thumb|{{{1|}}}}}}|</div>|</small>}}</div></div>{{#ifeq:{{{align|{{{2|}}}}}}|center|</div>}}<noinclude> |
| // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
| | {{clear}} |
| //
| | {{ombox| type = content | image = [[File:Test Template Info-Icon - Version (2).svg|40px]] |
| // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
| | | text = This is a wrapper template for [[Template:Graph:Lines/core]], whose source is maintained at [[:mw:Template:Graph:Lines]]. This wrapper implements Wikipedia-specific styles on top of the original template.}} |
| //
| | {{documentation}} |
| | | </noinclude> |
| "version": 5,
| |
| "$schema": "https://vega.github.io/schema/vega/v5.json",
| |
| "width": {{{width|400}}},
| |
| "height": {{{height|300}}},
| |
| <!--
| |
| Parameter to controls how width/height should be interpreted.
| |
| See Vega 2.x "padding" https://vega.github.io/vega/docs/porting-guide/#layout
| |
| and Vega x.x "autosize" https://vega.github.io/vega-lite/docs/size.html#autosize
| |
| and CSS attribute "box-sizing" https://developer.mozilla.org/docs/Web/CSS/box-sizing
| |
| for references
| |
| -->
| |
| {{#switch: {{{chartSizing|}}} | |
| |pad|plotting-box|content-box= | |
| "padding": "auto",
| |
| |fit|padding-box= | |
| "padding": "strict",
| |
| | "padding": "strict", | |
| }} | |
| <!--
| |
| under Vega 2 without "init" this signal does not work as expected with legend positioning
| |
| specifically when using "rightwidth" without "init" for chart title positioning
| |
| it causes extra blank space appearing at the left of chart plotting
| |
| "init" description: https://vega.github.io/vega/docs/porting-guide/#:~:text=%22init%22
| |
| -->
| |
| "signals": [{"name": "rightwidth", "update": "width + padding.right", "value":"{{{width|400}}}" }],
| |
| "data": [{
| |
| "name": "chart",
| |
| {{#switch: {{{tabletype|tab}}}
| |
| |tab= "url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title={{urlencode:{{{table}}}}}&format=json&origin=*",
| |
| |query= "url": "wikidatasparql:///?query={{urlencode:{{{table}}}|PATH}}",
| |
| }}
| |
| "format": {"type": "json"
| |
| {{#ifeq:{{{tabletype|tab}}}|tab|
| |
| , "property": "data"
| |
| }}
| |
| {{#ifeq:{{{type|}}}|time|
| |
| , "parse": {"{{{xField}}}": "date"}
| |
| }}
| |
| },
| |
| "transform": [
| |
| {{#if:{{{dataTransforms|}}}|
| |
| // chart data custom transforms
| |
| {{{dataTransforms|}}},
| |
| }}
| |
| {{#if:{{{filter|}}}|
| |
| // Optionally filter data with an template expression parameter
| |
| // e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
| |
| { "type": "filter", "test": "{{{filter}}}" },
| |
| }}
| |
| // Convert xField parameter into a field "_xfield"
| |
| {"type": "formula", "as": "_xfield", "expr":
| |
| {{#switch: {{{type|year}}}
| |
| | year= "datetime(datum.{{{xField|year}}}, 0, 1)"
| |
| | "datum.{{{xField}}}"
| |
| }}
| |
| },
| |
| {"type": "collect", "sort": {"field": ["_xfield"]} }
| |
| {{#if:{{{series|}}}
| |
| | , {"type": "fold", "fields": [{{{series}}}]}
| |
| }}
| |
| {{#if:{{{replaceZerosWith|}}}
| |
| | , {"type": "formula", "as": "_yfield", "expr": "max(datum.{{#if:{{{series|}}}|value|{{{value|value}}}}}, {{{replaceZerosWith}}})" }
| |
| | , {"type": "formula", "as": "_yfield", "expr": "datum.{{#if:{{{series|}}}|value|{{{value|value}}}}}" }
| |
| }}
| |
| {{#ifeq:{{{yScale|}}}|log
| |
| | , {"type": "filter", "test": "datum._yfield != 0"}
| |
| }}
| |
| ]
| |
| },
| |
| {{#if:{{{series|}}}|{{#ifeq: {{{tabletype|tab}}} | tab |
| |
| // source of labels for `tabletype=tab`
| |
| {
| |
| "name": "labels",
| |
| "url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title={{urlencode:{{{table}}}}}&format=json&origin=*",
| |
| "format": {"type": "json", "property": "fields"},
| |
| "transform": [
| |
| {{#if:{{{labelsTransforms|}}}|
| |
| // labels custom transforms
| |
| {{{labelsTransforms|}}},
| |
| }}
| |
| {{#if:{{{labelsFilter|}}}|
| |
| // Optionally filter labels with an template expression parameter
| |
| // e.g. `filter = 'year' != datum.name`
| |
| { "type": "filter", "test": "{{{labelsFilter}}}" },
| |
| }}
| |
| ]
| |
| },
| |
| }}}}
| |
| | |
| {{#if: {{{vAnnotationsTable|{{{vAnnotationsValues|}}}}}}|
| |
| // Each vertical annotation is expected to be x-scale typed `x`, string `text`,
| |
| // and optional string `color` (e.g. "#4d2800")
| |
| {
| |
| "name": "vAnnotations",
| |
| {{#if: {{{vAnnotationsTable|}}}
| |
| | "url": "tabular:///{{{vAnnotationsTable}}}",
| |
| "format": {"type": "json", "property": "data"},
| |
| | "values": [{{{vAnnotationsValues|}}}],
| |
| }}
| |
| "transform": [
| |
| {{#if: {{{vAnnotationsTransforms|}}} | {{{vAnnotationsTransforms}}}, }}
| |
| {{#ifeq:{{{type|}}}|year|
| |
| // in case of `type=year` convert year number to UNIX timestamp
| |
| {"type": "formula", "as": "x", "expr": "datetime(datum.x, 0, 1)"},
| |
| }}
| |
| {{#ifeq:{{{type|}}}|time|
| |
| // in case of `type=time` convert date string to UNIX timestamp
| |
| {"type": "formula", "as": "x", "expr": "datetime(datum.x)"},
| |
| }}
| |
| // expected item format `{"text": "...", "color": "#000", x: _ }`
| |
| { "type": "formula", "as": "text", "expr": "datum.text {{!!}} ''" },
| |
| { "type": "formula", "as": "color", "expr": "datum.color {{!!}} '#54595d'" }
| |
| ]
| |
| },
| |
| }}
| |
| {{#if: {{{hAnnotationsTable|{{{hAnnotationsValues|}}}}}}|
| |
| // Each horizontal annotation is expected to be numeric `y`, string `text`,
| |
| // and optional string `color` (e.g. "#4d2800")
| |
| {
| |
| "name": "hAnnotations",
| |
| {{#if: {{{hAnnotationsTable|}}}
| |
| | "url": "tabular:///{{{hAnnotationsTable}}}",
| |
| "format": {"type": "json", "property": "data"},
| |
| | "values": [{{{hAnnotationsValues|}}}],
| |
| }}
| |
| "transform": [
| |
| {{#if: {{{hAnnotationsTransforms|}}} | {{{hAnnotationsTransforms}}}, }}
| |
| // expected item format `{"text": "...", "color": "#000", y: 0}`
| |
| { "type": "formula", "as": "text", "expr": "datum.text {{!!}} ''" },
| |
| { "type": "formula", "as": "color", "expr": "datum.color {{!!}} '#54595d'" }
| |
| ]
| |
| },
| |
| }}
| |
| ],
| |
| "scales": [
| |
| {
| |
| "name": "x",
| |
| "type": {{#switch: {{{type|year}}}
| |
| | year= "time"
| |
| | "{{{type}}}"
| |
| }},
| |
| "domain": {"data": "chart", "field": "_xfield"},
| |
| "range": "width",
| |
| {{#if:{{{xZero|{{{xAxisZero|}}}}}}|"zero": {{{xZero|{{{xAxisZero|}}}}}},}}
| |
| {{#switch: {{{type|year}}} <!-- convert year to UNIX milliseconds with the means of `#time:` and `#expr:` by parsing '{year}-01-01Z' date string -->
| |
| | year=
| |
| {{#if:{{{xMin|{{{xAxisMin|}}}}}}|"domainMin": {{#expr: {{#time: U | {{{xMin|{{{xAxisMin}}}}}}-01-01Z }} * 1000 }},}}
| |
| {{#if:{{{xMax|{{{xAxisMax|}}}}}}|"domainMax": {{#expr: {{#time: U | {{{xMax|{{{xAxisMax}}}}}}-01-01Z }} * 1000 }},}}
| |
| | {{#if:{{{xMin|{{{xAxisMin|}}}}}}|"domainMin": {{{xMin|{{{xAxisMin}}}}}},}}
| |
| {{#if:{{{xMax|{{{xAxisMax|}}}}}}|"domainMax": {{{xMax|{{{xAxisMax}}}}}},}}
| |
| }}
| |
| {{#if:{{{xAxisClamp|}}}|"clamp": {{{xAxisClamp}}},}}
| |
| },
| |
| {
| |
| "name": "y",
| |
| "type": "{{{yScale|linear}}}",
| |
| "range": "height",
| |
| "domain": {"data": "chart", "field": "_yfield"},
| |
| {{#if:{{{yZero|{{{yAxisZero|}}}}}}|"zero": {{{yZero|{{{yAxisZero|}}}}}},}}
| |
| {{#if:{{{yMin|{{{yAxisMin|}}}}}}|"domainMin": {{{yMin|{{{yAxisMin}}}}}},}}
| |
| {{#if:{{{yMax|{{{yAxisMax|}}}}}}|"domainMax": {{{yMax|{{{yAxisMax}}}}}},}}
| |
| {{#if:{{{yAxisClamp|}}}|"clamp": {{{yAxisClamp}}},}}
| |
| },
| |
| {
| |
| "name": "color",
| |
| "type": "ordinal",
| |
| "range": {{#if:{{{colors|}}}|[{{#invoke:String|replace|"{{{colors}}}|,|","}}"] |{"scheme": "{{{colorscheme|category10}}}"} }},
| |
| "domain": {"data": "chart", "field": "{{{group|key}}}"}
| |
| },
| |
| {{#if:{{{series|}}}|
| |
| {
| |
| "name": "labels",
| |
| "type": "ordinal",
| |
| {{#ifeq: {{{tabletype|tab}}} | tab
| |
| | "domain": {"data": "labels", "field": "name"},
| |
| "range": {"data": "labels", "field": "title"},
| |
| | "domain": [{{{series|}}}],
| |
| "range": [{{{series|}}}],
| |
| }}
| |
| }
| |
| }}
| |
| ],
| |
| {{#if:{{{legend|}}}|
| |
| "legends": [{
| |
| "fill": "color",
| |
| "stroke": "color",
| |
| {{#ifeq: {{{legend|}}}|-|| "title": "{{{legend|}}}", }}
| |
| {{#if:{{{series|}}}
| |
| | "encode": { "update": { "labels": { "text": {"scale": "labels", "field": "data"} } } }
| |
| }}
| |
| }],
| |
| }}
| |
| "axes": [
| |
| {
| |
| "scale": "x", "orient": "bottom", "tickSize": 0,
| |
| {{#ifeq:{{{xTicks|{{{xAxisTicks|7}}}}}}|-|| "tickCount": {{{xTicks|{{{xAxisTicks|7}}}}}}, }}
| |
| {{#if:{{{xAxis|{{{xAxisTitle|}}}}}}| "title": "{{{xAxis|{{{xAxisTitle}}}}}}", }}
| |
| {{#if:{{{xAxisFormat|}}}| "format": "{{{xAxisFormat}}}", }}
| |
| {{#if:{{{xGrid|}}}| "grid": true, }}
| |
| "encode": {
| |
| "update": { "labels": {
| |
| {{#if:{{{xAxisAngle|}}}| "align": {"value": "right"}, "angle": {"value": {{{xAxisAngle}}} }, }}
| |
| {{#if:{{{xAxisFontSize|}}}| "fontSize": {"value": {{{xAxisFontSize}}} }, }}
| |
| } }
| |
| }
| |
| },
| |
| {
| |
| "scale": "y", "orient": "left", "tickSize": 0,
| |
| {{#ifeq:{{{yTicks|{{{yAxisTicks|-}}}}}}|-|| "tickCount": {{{yTicks|{{{yAxisTicks}}}}}}, }}
| |
| {{#if:{{{yAxis|{{{yAxisTitle|}}}}}}| "title": "{{{yAxis|{{{yAxisTitle}}}}}}", }}
| |
| {{#if:{{{yAxisFormat|}}}| "format": "{{{yAxisFormat}}}", }}
| |
| {{#if:{{{yGrid|}}}| "grid": true, }}
| |
| "encode": {
| |
| "labels": {
| |
| {{#if:{{{yAxisAngle|}}}| "align": {"value": "right"}, "angle": {"value": {{{yAxisAngle}}} }, }}
| |
| {{#if:{{{yAxisFontSize|}}}| "fontSize": {"value": {{{yAxisFontSize}}} }, }}
| |
| }
| |
| }
| |
| }
| |
| ],
| |
| | |
| "marks": [
| |
| // Group data by the group parameter or "key", and draw lines, one line per group
| |
| {
| |
| "type": "group",
| |
| "from": {
| |
| "facet": {
| |
| "name": ["{{{group|key}}}"],
| |
| "data": "chart",
| |
| "groupby": ["{{{group|key}}}"]
| |
| }
| |
| },
| |
| "marks": [
| |
| {
| |
| "type": "line",
| |
| "from": {"data": ["{{{group|key}}}"]},
| |
| "encode": {
| |
| "hover": {
| |
| "stroke": {"value": "red"}
| |
| },
| |
| "update": {
| |
| "stroke": {"scale": "color", "field": "{{{group|key}}}"}
| |
| },
| |
| "enter": {
| |
| "y": {"scale": "y", "field": "_yfield"},
| |
| "x": {"scale": "x", "field": "_xfield"},
| |
| "stroke": {"scale": "color", "field": "{{{group|key}}}"},
| |
| "interpolate": {"value": "{{{interpolate|linear}}}"},
| |
| "strokeWidth": {"value": {{{linewidth|2.5}}}}
| |
| }
| |
| }
| |
| }
| |
| {{#if:{{{symbols|}}}|
| |
| ,
| |
| {
| |
| "type": "symbol",
| |
| "encode": {
| |
| "hover": {
| |
| "fill": {"value": "red"}
| |
| },
| |
| "update": {
| |
| "fill": {"scale": "color", "field": "{{{group|key}}}"}
| |
| },
| |
| "enter": {
| |
| "y": {"scale": "y", "field": "_yfield"},
| |
| "x": {"scale": "x", "field": "_xfield"},
| |
| "size" : {"value": {{{symbolsize|35}}}},
| |
| "fill": {"scale": "color", "field": "{{{group|key}}}"}
| |
| }
| |
| }
| |
| }
| |
| }}
| |
| ],
| |
| },
| |
| | |
| {{#if: {{{vAnnotationsTable|{{{vAnnotationsValues|}}}}}}|
| |
| // vertical annotations dashed line
| |
| {
| |
| "type": "rule",
| |
| "encode": {
| |
| "update": {
| |
| "x": {"scale": "x", "field": "x"},
| |
| "y": {"value": 0},
| |
| "y2": {"field": {"group": "height"} },
| |
| "stroke": {"field": "color"},
| |
| "opacity": {"value": 0.75},
| |
| "strokeWidth": {"value": 1},
| |
| "strokeDash": {"value": [6,1]}
| |
| }
| |
| },
| |
| "from": {"data": "vAnnotations"}
| |
| },
| |
| // vertical annotations text
| |
| {
| |
| "type": "text",
| |
| "encode": {
| |
| "update": {
| |
| "x": {"scale": "x", "field": "x"},
| |
| "y": {"value": 0},
| |
| "align": {"value": "right"},
| |
| "dx": {"value": -3},
| |
| "dy": {"value": 3},
| |
| "baseline": {"value": "top"},
| |
| "text": {"field": "text"},
| |
| "angle": {"value": -90},
| |
| "opacity": {"value": 0.75},
| |
| "fill": {"field": "color"}
| |
| }
| |
| },
| |
| "from": {"data": "vAnnotations"}
| |
| },
| |
| }}
| |
| {{#if: {{{hAnnotationsTable|{{{hAnnotationsValues|}}}}}}|
| |
| // horizontal annotations dashed line
| |
| {
| |
| "type": "rule",
| |
| "encode": {
| |
| "update": {
| |
| "y": {"scale": "y", "field": "y"},
| |
| "x": {"value": 0 },
| |
| "x2": {"field": {"group": "width"} },
| |
| "stroke": {"field": "color"},
| |
| "opacity": {"value": 0.75},
| |
| "strokeWidth": {"value": 1},
| |
| "strokeDash": {"value": [6,1]}
| |
| }
| |
| },
| |
| "from": {"data": "hAnnotations"}
| |
| },
| |
| // horizontal annotations text
| |
| {
| |
| "type": "text",
| |
| "encode": {
| |
| "update": {
| |
| "y": {"scale": "y", "field": "y", "offset": 3},
| |
| "x": {"value": 0, "offset": 3},
| |
| "baseline": {"value": "top"},
| |
| "text": {"field": "text"},
| |
| "angle": {"value": 0},
| |
| "opacity": {"value": 0.75},
| |
| "fill": {"field": "color"}
| |
| }
| |
| },
| |
| "from": {"data": "hAnnotations"}
| |
| },
| |
| }}
| |
| | |
| {{#if:{{{title|}}}|
| |
| // Draw title at the top of the graph
| |
| {
| |
| "type": "text",
| |
| "encode": {
| |
| "enter": {
| |
| "y": {"value": -15},
| |
| {{#switch: {{{titleXAlign|}}}
| |
| | left =
| |
| "x": {"value": {{{titleXOffset|0}}} },
| |
| | right =
| |
| "x2": {"signal": "width", "mult": 1.0, "offset": {{{titleXOffset|0}}} },
| |
| | center =
| |
| "xc": {"signal": "width", "mult": 0.5, "offset": {{{titleXOffset|0}}} },
| |
| | "x": {"signal": "rightwidth", "mult": 0.5, "offset": {{{titleXOffset|0}}} },
| |
| }}
| |
| "text": {"value": "{{{title}}}"},
| |
| "fontWeight": {"value": "bold"},
| |
| "align": {"value": "{{{titleXAlign|center}}}"},
| |
| "baseline": {"value": "bottom"},
| |
| "fill": {"value": "#000"}
| |
| }
| |
| }
| |
| }
| |
| }}
| |
| ]
| |
| }
| |
| <includeonly>|lang=json}}
| |
| <div><small>{{#switch: {{{tabletype|tab}}}{{{hideSource|}}}
| |
| |tab= {{#invoke:TNT|msg|I18n/Template:Graphs.tab|source_table|{{#invoke:TNT|link|{{{table}}}}}}}.
| |
| |query= {{#invoke:TNT|msg|I18n/Template:Graphs.tab|source_wdqs|https://query.wikidata.org/embed.html#{{urlencode:{{{table}}}|PATH}}}}.
| |
| }}</small></div>
| |
| </includeonly>
| |
.svg){kind=link}