Ŝablono:Graph:Lines: Malsamoj inter versioj

[nekontrolita versio][nekontrolita versio]
Enhavo forigita Enhavo aldonita
Bouzinac (diskuto | kontribuoj)
embed.html
Bouzinac (diskuto | kontribuoj)
Neniu resumo de redakto
 
Linio 12:
"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/en-US/docs/Web/CSS/box-sizing
for references
-->
{{#switch: {{{chartSizing|}}}
|pad|plotting-box|content-box=
"padding": "auto",
|fit|padding-box=
"padding": "strict",
| "padding": "strict",
 
}}
"signals": [{"name": "rightwidth", "expr": "width + padding.right"}],
<!--
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 cuases 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", "expr": "width + padding.right", "init":"{{{width|400}}}"}],
"data": [{
"name": "chart",
{{#switch: {{{tabletype|tab}}}
 
|tab= "url": "tabular:///{{{table}}}",
{{#switch: {{{tabletype|tab}}}
|tab= |query= "url": "tabularwikidatasparql:///?query={{urlencode:{{{table}}}|PATH}}",
}}
|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", "field": "_xfield", "expr":
Linio 52 ⟶ 78:
},
{{#if:{{{series|}}}|{{#ifeq: {{{tabletype|tab}}} | tab |
// source of labels for `tabletype=tab`
{
"name": "labels",
"url": "tabular:///{{{table}}}",
"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", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
}}
{{#ifeq:{{{type|}}}|time|
// in case of `type=time` convert date string to UNIX timestamp
{"type": "formula", "field": "x", "expr": "datetime(datum.x)"},
}}
// expected item format `{"text": "...", "color": "#000", x: _ }`
{ "type": "formula", "field": "text", "expr": "datum.text {{!!}} ''" },
{ "type": "formula", "field": "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", "field": "text", "expr": "datum.text {{!!}} ''" },
{ "type": "formula", "field": "color", "expr": "datum.color {{!!}} '#54595d'" }
]
},
}}
],
"scales": [
Linio 68 ⟶ 151:
"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 -->
{{#if:{{{xMin|}}}|"domainMin": {{{xMin}}},}}
| year=
{{#if:{{{xMax|}}}|"domainMax": {{{xMax}}},}}
{{#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}}},}}
},
{
Linio 77 ⟶ 166:
"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",
"domainrange": {"data"{#if: {{{colors|}}}|[{{#invoke:String|replace|"chart{{{colors}}}|,|", "field}}":] |"{{{groupcolorscheme|keycategory10}}}"}},
"domain": {"data": "chart", "field": "{{{group|key}}}"}
"range": "category10"
},
{{#if:{{{series|}}}|
Linio 111 ⟶ 201:
}}
"axes": [
{
"scale": "x", "type": "x", "tickSizeEnd": 0,
{{#ifeq:{{{xTicks|{{{xAxisTicks|7}}}}}}|-||, "ticks": {{{xTicks|{{{xAxisTicks|7}}}}}}, }}
{{#if:{{{xAxis|{{{xAxisTitle|}}}}}}|, "title": "{{{xAxis|{{{xAxisTitle}}}}}}", }}
{{#if:{{{xAxisFormat|}}}|, "format": "{{{xAxisFormat}}}", }}
{{#if:{{{xGrid|}}}|, "grid": true, }}
"properties": {
},
{"scale": "y", "type": "y", "tickSizeEndlabels": 0{
{{#ifeqif:{{{yTicksxAxisAngle|-}}}|-|| "align": {"value": "right"}, "ticksangle": {"value": {{yTicks{xAxisAngle}}} }, }}
{{#if:{{{yAxisxAxisFontSize|}}}|, "titlefontSize": {"value": {{{yAxisxAxisFontSize}}}" }, }}
}
{{#if:{{{yAxisFormat|}}}|, "format": "{{{yAxisFormat}}}"}}
}
{{#if:{{{yGrid|}}}|, "grid": true}}
},
}
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
{{#ifeq:{{{yTicks|{{{yAxisTicks|-}}}}}}|-|| "ticks": {{{yTicks|{{{yAxisTicks}}}}}}, }}
{{#if:{{{yAxis|{{{yAxisTitle|}}}}}}| "title": "{{{yAxis|{{{yAxisTitle}}}}}}", }}
{{#if:{{{yAxisFormat|}}}| "format": "{{{yAxisFormat}}}", }}
{{#if:{{{yGrid|}}}| "grid": true, }}
"properties": {
"labels": {
{{#if:{{{yAxisAngle|}}}| "align": {"value": "right"}, "angle": {"value": {{{yAxisAngle}}} }, }}
{{#if:{{{yAxisFontSize|}}}| "fontSize": {"value": {{{yAxisFontSize}}} }, }}
}
}
}
],
 
Linio 137 ⟶ 241:
"type": "line",
"properties": {
"hover": {
"stroke": {"value": "red"}
},
"update": {
"stroke": {"scale": "color", "field": "{{{group|key}}}"}
},
"enter": {
"y": {"scale": "y", "field": "_yfield"},
Linio 142 ⟶ 252:
"stroke": {"scale": "color", "field": "{{{group|key}}}"},
"interpolate": {"value": "monotone"},
"strokeWidth": {"value": {{{linewidth|2.5}}}}
}
}
}
],
},
 
{{#if: {{{vAnnotationsTable|{{{vAnnotationsValues|}}}}}}|
// vertical annotations dashed line
{
"type": "rule",
"properties": {
"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",
"properties": {
"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",
"properties": {
"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",
"properties": {
"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",
"properties": {
"enter": {
"x": {"signal": "rightwidth", "mult": 0.5},
"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"}
Linio 173 ⟶ 363:
|query= {{#invoke:TNT|msg|I18n/Template:Graphs.tab|source_wdqs|https://query.wikidata.org/embed.html#{{urlencode:{{{table}}}|PATH}}}}.
}}</small>
</includeonly><noinclude>|lang=javascript}}<syntaxhighlight lang=html></graph></syntaxhighlight>
</noinclude>