View source for Template:Graph:Stacked/core

<includeonly>{{#tag:{{#if:{{{debug|}}}|syntaxhighlight|graph}}|</includeonly><noinclude>{{documentation}}<syntaxhighlight lang=html><graph></syntaxhighlight>{{#tag:syntaxhighlight|</noinclude>
{<noinclude>
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Stacked
  //            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:Graph:Stacked
  //
  // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
  //
</noinclude>
  "version": 2,
  "width": {{{width|550}}},
  "height": {{{height|250}}},<noinclude>
  // 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</noinclude>
{{#switch: {{{chartSizing|}}}
|pad|plotting-box|content-box=
  "padding": "auto",
|fit|padding-box=
  "padding": "strict",
}}

  "data": [
{{#if:{{{series|}}}|<noinclude>
    // dataset for capturing user defined series order (which is used to prevent alphabetical sort by field name)</noinclude>
    {
      "name": "series_fields_names",
      "values": [ {{{series}}} ],
      "transform": [<noinclude>
        // in case of Vega versions > 2.0 `transforms/identifier` need to be used instead of `_id` field</noinclude>
        {"type": "formula", "field": "orderSrc", "expr": "datum._id"},
      ]
    },
}}
    {
      "name": "chart",

{{#switch: {{{tabletype|tab}}}
|tab=    "url": "tabular:///{{{table}}}",
|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|}}}|
      {{{dataTransforms|}}},
}}
{{#if:{{{filter|}}}|<noinclude>
      // 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</noinclude>
      { "type": "filter", "test": "{{{filter}}}" },
}}
<noinclude>
      // Convert xField parameter into a field "_xfield"</noinclude>
      {"type": "formula", "field": "_xfield", "expr":
{{#switch: {{{type|}}}
| year= "datetime(datum.{{{xField|year}}}, 0, 1)"
| "datum.{{{xField}}}"
}}
      },
      {"type": "sort", "by": ["_xfield"]},
{{#if:{{{series|}}}
|     {"type": "fold", "fields": [{{{series}}}]},
      {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]},
      {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"},
}}<noinclude>
      // For non-bar graph, ensure that all missing values still present as zeros to avoid area breaks
      // We might need to allow other, non-0 values to be imputed.</noinclude>
{{#if:{{{barwidth|}}}||
      {
        "type": "impute",
        "groupby": ["{{{group|key}}}"],
        "orderby": ["_xfield"],
        "field": "{{{value|value}}}",
        "method": "value",
        "value": 0
      },
}}
    ]
  },
{{#if:{{{series|}}}|{{#ifeq: {{{tabletype|tab}}} | tab |
  {
    "name": "labels",
    "url": "tabular:///{{{table}}}",
    "format": {"type": "json", "property": "fields"},
    "transform": [
{{#if:{{{labelsTransforms|}}}|
      {{{labelsTransforms|}}},
}}
{{#if:{{{labelsFilter|}}}|<noinclude>
      // Optionally filter labels with an template expression parameter
      // e.g. `filter = datum.name != "year"`</noinclude>
      { "type": "filter", "test": "{{{labelsFilter}}}" },
}}
    ]
  },
}}}}
{{#if: {{{vAnnotationsTable|{{{vAnnotationsValues|}}}}}}|<noinclude>
    // Each vertical annotation is expected to be x-scale typed `x`, string `text`,
    // and optional string `color` (e.g. "#4d2800")</noinclude>
    {
      "name": "vAnnotations",
{{#if: {{{vAnnotationsTable|}}}
|     "url": "tabular:///{{{vAnnotationsTable}}}",
      "format": {"type": "json", "property": "data"},
|     "values": [{{{vAnnotationsValues|}}}],
}}
      "transform": [
        {{#if: {{{vAnnotationsTransforms|}}} | {{{vAnnotationsTransforms}}}, }}
{{#ifeq:{{{type|}}}|year|<noinclude>
        // in case of `type=year` convert year number to UNIX timestamp</noinclude>
        {"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
}}
{{#ifeq:{{{type|}}}|time|<noinclude>
        // in case of `type=time` convert date string to UNIX timestamp</noinclude>
        {"type": "formula", "field": "x", "expr": "datetime(datum.x)"},
}}<noinclude>
        // expected item format `{"text": "...", "color": "#000", x: _, y: 0}`</noinclude>
        { "type": "formula", "field": "text", "expr": "datum.text {{!!}} ''" },
        { "type": "formula", "field": "color", "expr": "datum.color {{!!}} '#54595d'" }
      ]
    },
}}
{{#if: {{{hAnnotationsTable|{{{hAnnotationsValues|}}}}}}|<noinclude>
    // Each horizontal annotation is expected to be numeric `y`, string `text`,
    // and optional string `color` (e.g. "#4d2800")</noinclude>
    {
      "name": "hAnnotations",
{{#if: {{{hAnnotationsTable|}}}
|     "url": "tabular:///{{{hAnnotationsTable}}}",
      "format": {"type": "json", "property": "data"},
|     "values": [{{{hAnnotationsValues|}}}],
}}
      "transform": [
        {{#if: {{{hAnnotationsTransforms|}}} | {{{hAnnotationsTransforms}}}, }}<noinclude>
        // expected item format `{"text": "...", "color": "#000", x: 0, y: 0}`</noinclude>
        { "type": "formula", "field": "text", "expr": "datum.text {{!!}} ''" },
        { "type": "formula", "field": "color", "expr": "datum.color {{!!}} '#54595d'" }
      ]
    },
}}
    {
      "name": "stats",
      "source": "chart",
      "transform": [{
        "type": "aggregate",
        "groupby": ["_xfield"],
        "summarize": [{"field": "{{{value|value}}}", "ops": ["sum"]}]
      }]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": {{#switch: {{{type|}}}
| year= "time"
| "{{{type}}}"
}},
      "domain": {"data": "chart", "field": "_xfield"},
{{#if:{{{barwidth|}}}|{{#ifeq:{{{type|}}}|ordinal|"points": true,}}}}
      "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": "linear",
      "range": "height",
      "domain": {"data": "stats", "field": "sum_{{{value|value}}}"},
      {{#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",
      "domain": {"data": "chart", "field": "{{{group|key}}}"},
      "range": 
{{#if:{{{colors|}}}
| {{#ifeq:0|{{#invoke:String|find|{{{colors|}}}|[%{%[%"%]%}]|plain=false}}
  <!-- if `colors` does NOT look like JSON then treat them as simple colors list -->
  | [{{#invoke:String|replace|"{{{colors}}}|,|","}}"] 
  <!-- if `colors` does look like JSON then embed them into resulting JSON AS-IS -->
  | {{{colors|}}}
  }}
| "{{{colorscheme|category10}}}"
}}, 

    },
{{#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|}}}
|   "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
}}
  }],
}}
  "axes": [
    {
      "scale": "x", "type": "x", "tickSizeEnd": 0,
      {{#ifeq:{{{xTicks|{{{xAxisTicks|7}}}}}}|-||"ticks": {{{xTicks|{{{xAxisTicks|7}}}}}}, }}
      {{#if:{{{xAxis|{{{xAxisTitle|}}}}}}|"title": "{{{xAxis|{{{xAxisTitle}}}}}}", }}
      {{#if:{{{xGrid|}}}|"grid": true, }}
      "properties": { 
        "labels": { 
          {{#if:{{{xAxisAngle|}}}|
          "align": {"value": "right"}, "angle": {"value": {{{xAxisAngle}}} },
          {{#ifeq:{{{barwidth|auto}}}|auto||"dy":{ "value":{{#expr:-{{{barwidth}}}/2}} }, }}
          }}
          {{#if:{{{xAxisFontSize|}}}|"fontSize": {"value": {{{xAxisFontSize}}} }, }}
        } 
      },
    },
    {
      "scale": "y", "type": "y", "tickSizeEnd": 0,<noinclude>
      // When drawing "type=year" (or "type=ordinal") bars with the given width, shift y axis left by half the width</noinclude>
      {{#switch:{{{type|}}}|ordinal|year={{#ifeq:{{{barwidth|auto}}}|auto||"offset": {{#expr:1+{{{barwidth}}}/2}}, }}}}
      {{#ifeq:{{{yTicks|{{{yAxisTicks|-}}}}}}|-||"ticks": {{{yTicks|{{{yAxisTicks}}}}}}, }}
      {{#if:{{{yAxis|{{{yAxisTitle|}}}}}}|"title": "{{{yAxis|{{{yAxisTitle}}}}}}", }}
      {{#if:{{{yGrid|}}}|"grid": true, }}
      "properties": { 
        "labels": { 
          {{#if:{{{yAxisAngle|}}}|
          "align": {"value": "right"}, "angle": {"value": {{{yAxisAngle}}} },
          }}
          {{#if:{{{yAxisFontSize|}}}|"fontSize": {"value": {{{yAxisFontSize}}} }, }}
        } 
      },
    }
  ],

  "marks": [<noinclude>
    // Group data by the "key", and draw lines, one line per key</noinclude>
    {
{{#if:{{{barwidth|}}}
|     "type": "rect",
      "from": {
        "data": "chart",
        "transform": [
          {"type": "stack", "groupby": ["_xfield"], "sortby": ["{{{group|{{#if:{{{series|}}}|-keyOrder|key}}}}}"], "field": "{{{value|value}}}"}
        ]
      },
      "properties": {
        "hover": {
          "fill": { "value": "red" }
        },
        "update": {
          "fill": {"scale": "color", "field": "{{{group|key}}}"}
        },
        "enter": {
          "x": {"scale": "x", "field": "_xfield"<noinclude>
          // When drawing "type=year" (or "type=ordinal") bars with the given width, shift them back by half the width</noinclude>
{{#switch:{{{type|}}}|ordinal|year={{#ifeq:{{{barwidth|auto}}}|auto||,"offset":{{#expr:{{{barwidth}}}/-2}}}}}}
          },
{{#ifeq:{{{barwidth|}}}|auto|
  {{#ifeq:{{{type|}}}|ordinal
  |       "width": {"scale": "x", "band": true, "offset": -1},
  |       "width": {"value": 3},
  }}
|         "width": {"value": {{{barwidth}}} },
}}
          "y": {"scale": "y", "field": "layout_start"},
          "y2": {"scale": "y", "field": "layout_end"},
          "fill": {"scale": "color", "field": "{{{group|key}}}"}
        }
      }
|     "type": "group",
      "from": {
        "data": "chart",
        "transform": [
          {"type": "stack", "groupby": ["_xfield"], "sortby": ["{{{group|{{#if:{{{series|}}}|-keyOrder|key}}}}}"], "field": "{{{value|value}}}"},
          {"type": "facet", "groupby": ["{{{group|key}}}"]}
        ]
      },
      "marks": [
        {
          "type": "area",
          "properties": {
            "hover": {
              "fill": {"value": "red"}
            },
            "update": {
              "fill": {"scale": "color", "field": "{{{group|key}}}"}
            },
            "enter": {
              "x": {"scale": "x", "field": "_xfield"},
              "y": {"scale": "y", "field": "layout_start"},
              "y2": {"scale": "y", "field": "layout_end"},
              "fill": {"scale": "color", "field": "{{{group|key}}}"},
              "interpolate": {"value": "monotone"}
            }
          }
        }
      ],
}}
    },
{{#if: {{{vAnnotationsTable|{{{vAnnotationsValues|}}}}}}|<noinclude>
    // vertical annotations dashed line</noinclude>
    {
      "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"}
    },<noinclude>
    // vertical annotations text</noinclude>
    {
      "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|}}}}}}|<noinclude>
    // horizontal annotations dashed line</noinclude>
    {
      "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"}
    },<noinclude>
    // horizontal annotations text</noinclude>
    {
      "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|}}}|<noinclude>
    // Draw title at the top of the graph</noinclude>
    {
      "type": "text",
      "properties": {
        "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": "width", "mult": 0.5, "offset": {{{titleXOffset|30}}} },
}}
          "text": {"value": "{{{title}}}"},
          "fontWeight": {"value": "bold"},
          "align": {"value": "{{{titleXAlign|center}}}"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#000"}
        }
      }
    }
}}
  ]
}
<includeonly>}}
<div><small>{{#switch: {{{tabletype|tab}}}{{{hideSource|}}}
|tab= {{#invoke:TNT|msg|Original/Template:Graphs.tab|source-table|{{#invoke:TNT|link|{{{table}}}}}}}.
|query= {{#invoke:TNT|msg|Original/Template:Graphs.tab|source-wdqs|https://query.wikidata.org/#{{urlencode:{{{table}}}|PATH}}}}.
}}</small></div></includeonly><noinclude>|lang=javascript}}<syntaxhighlight lang=html></graph></syntaxhighlight>
</noinclude>