Vorlage:Graph:Lines: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung Markierungen: Manuelle Zurücksetzung Zurückgesetzt |
KKeine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
||
Zeile 1: | Zeile 1: | ||
{{# | <includeonly>{{#tag:{{#if:{{{debug|}}}|syntaxhighlight|graph}}|</includeonly> | ||
{ | |||
| | // | ||
// ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines | |||
}} | // Please do not modify it anywhere else, as it may get copied and override your changes. | ||
// Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines | |||
// | |||
// Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab | |||
// | |||
"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> |
Version vom 1. Oktober 2024, 06:17 Uhr
{
// // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab //
"version": 5, "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 400, "height": 300,
"padding": "strict",
"signals": [{"name": "rightwidth", "update": "width + padding.right", "value":"400" }], "data": [{ "name": "chart", "url": "https://commons.wikimedia.org/w/api.php?action=jsondata&formatversion=2&title=%7B%7B%7Btable%7D%7D%7D&format=json&origin=*", "format": {"type": "json" , "property": "data" }, "transform": [
// Convert xField parameter into a field "_xfield" {"type": "formula", "as": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
}, {"type": "collect", "sort": {"field": ["_xfield"]} }
, {"type": "formula", "as": "_yfield", "expr": "datum.value" }
] },
], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width",
}, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "chart", "field": "_yfield"}, }, { "name": "color", "type": "ordinal", "range": {"scheme": "category10"}, "domain": {"data": "chart", "field": "key"} },
],
"axes": [ { "scale": "x", "orient": "bottom", "tickSize": 0, "tickCount": 7, "encode": { "update": { "labels": { } } } }, { "scale": "y", "orient": "left", "tickSize": 0, "encode": { "labels": { } } } ],
"marks": [ // Group data by the group parameter or "key", and draw lines, one line per group { "type": "group", "from": { "facet": { "name": ["key"], "data": "chart", "groupby": ["key"] } }, "marks": [ { "type": "line", "from": {"data": ["key"]}, "encode": { "hover": { "stroke": {"value": "red"} }, "update": { "stroke": {"scale": "color", "field": "key"} }, "enter": { "y": {"scale": "y", "field": "_yfield"}, "x": {"scale": "x", "field": "_xfield"}, "stroke": {"scale": "color", "field": "key"}, "interpolate": {"value": "linear"}, "strokeWidth": {"value": 2.5} } } } ], },
]
}