Jump to content

Template:Graph:PageViews: Difference between revisions

From mediawiki.org
Content deleted Content added
Axes no longer have a type parameter. Instead, the orient parameter is now required. Instead of {"type": "x"} use {"orient": "bottom"}, and instead of {"type": "y"} use {"orient": "left"}. [https://vega.github.io/vega/docs/porting-guide/#axes-and-legends reference].
Tag: 2017 source edit
The "properties" block of visual encodings has been renamed "encode". [https://vega.github.io/vega/docs/porting-guide/#marks reference].
Tag: 2017 source edit
Line 93: Line 93:
"type": "line",
"type": "line",
"from": {"data": "pageviews"},
"from": {"data": "pageviews"},
"properties": {
"encode": {
"enter": {
"enter": {
"x": {"scale": "x","field": "date"},
"x": {"scale": "x","field": "date"},

Revision as of 00:24, 4 May 2023

Template documentation


This graph's main version resides at mediawiki Template:Graph:PageViews. Please make all the changes there and copy it everywhere else (until the copying is automated)

  • {{ Graph:PageViews }}
    30 days for the current page (if there is data)
  • {{ Graph:PageViews | 90 | Main Page | en.wikipedia.org }}
    90 days for Main Page on English Wikipedia
  • {{ Graph:PageViews | 180 | _ }}
    Monthly visitors to the current wiki (last 6 months)
  • {{ Graph:PageViews | 180 | _ | all-projects | granularity = daily }}
    Daily visitors to all worldwide wikis (last 6 months)
  • {{ Graph:PageViews | 30 | Main Page | en.wikipedia.org}}
    30 days for Main Page on English Wikipedia
  • {{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | platform = desktop}}
    30 days for Main Page on English Wikipedia - desktop computer browsers
  • {{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | platform = mobile-web}}
    30 days for Main Page on English Wikipedia - mobile browsers
  • {{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | platform = mobile-app}}
    30 days for Main Page on English Wikipedia - mobile applications
  • {{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | agent = spider}}
    30 days for Main Page on English Wikipedia - 'spider' agent


Template may be used with different parameter order. For example, in English Wikipedia

  • {{Graph:PageViews|90|Main Page}}
  • {{Graph:PageViews|Main Page|90}}
  • {{Graph:PageViews|Main Page|en.wikipedia.org|90}}

will give the same output.

TemplateData

Inserts a graph with the page views statistics for the past N days of a page.

Template parameters[Edit template data]

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Number of days back1

Number of days back to show in the chart

Default
30
Numberoptional
Page Title2

Title of the page, with namespace, including needed spaces. If '_' is given, shows the total for the whole site

Default
Name of the current article page (even if on talk page)
Example
Main Page
Page nameoptional
Domain3

Domain from which to find page views for the given title, if not this wiki. If '_' is given as parameter 2, 'all-projects' can be used here for all wiki sites summary data

Default
Current wiki
Example
en.wikipedia.org
Lineoptional
Agentagent

If you want to filter by agent type, use one of user, automated or spider. If you are interested in pageviews regardless of agent type, use all-agents.

Suggested values
user spider automated all-agents
Default
user
Lineoptional
Graph colorcolor

Shade with which to highlight the data in the chart

Default
#00f
Example
#f00
Lineoptional
Graph scalescale

Scaling could be one of these: linear, log, pow, sqrt, quantile, quantize, and threshold

Default
linear
Example
log
Lineoptional
Maximum Y value axismax

This optional value might be useful to align multiple graphs side-by-side

Default
Automatically scaled to the data.
Example
10000
Numberoptional
Widthwidth

Width for the chart in pixels, if different from the default.

Default
800
Numberoptional
Heightheight

Height for the chart in pixels, if different from the default.

Default
200
Numberoptional
Platformplatform

Computer platform could be one of these: all-access (all platforms together), desktop (regular browsers), mobile-web (mobile browsers), mobile-app (mobile wiki applications)

Default
all-access
Lineoptional
Granularitygranularity

If the 2nd parameter is '_' (shows site stats), set data granularity monthly, daily, or hourly

Default
monthly
Lineoptional
Interpolateinterpolate

Type of line interpolation. See https://vega.github.io/vega/docs/marks/line/

Suggested values
linear monotone basis bundle cardinal catmull-rom natural step step-before step-after
Default
monotone
Lineoptional
<graph>
{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:PageViews
  //            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:PageViews
  //            The graph uses PageViews API https://wikitech.wikimedia.org/wiki/Analytics/PageviewAPI
  //

  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 800,
  "height": 200,
  "autosize": {
    "type": "fit",
    "resize": false,
    "contains": "padding"
  },
  // The data for this graph comes from the PageView API.  The request is made for N days back up to now.
  "data": [
    {
      "name": "pageviews",
      "url": "https://wikimedia.org/api/rest_v1/metrics/pageviews/per-article/mediawiki.org/all-access/user/Template%3AGraph%3APageViews/daily/2024101200/2024111100",
      "format": {
        "type": "json",
        "property": "items"
      },

      // The response is parsed here, converting date strings of form "20160223" into date 2016-02-23
      "transform": [
        { "type": "formula", "as": "year", "expr": "parseInt(substring(datum.timestamp,0,4))" },
        { "type": "formula", "as": "month", "expr": "parseInt(substring(datum.timestamp,4,6))" },
        { "type": "formula", "as": "day", "expr": "parseInt(substring(datum.timestamp,6,8))" },
        { "type": "formula", "as": "date", "expr": "datetime(datum.year,datum.month-1,datum.day)" }
      ]
    }
  ],

  "scales": [
    // The dates are scaled to the "x" axis - the width of the graph
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "pageviews","fields": ["date"]}
    },
    // The pageviews are scaled to the "y" axis - the height of the graph
    // Optional scale parameter can change "linear" to other scales like log
    // Optional max parameter can fix the upper bound of the graph
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "pageviews","fields": ["views"]},
      "clamp": true,

      "nice": true
    }
  ],

  // Simple axis with horizontal grid lines
  "axes": [
    {
      "orient": "bottom",
      "scale": "x",
      "ticks": 5,
      "encode": {
        "ticks": { "update": {"stroke": {"value": "#54595d"} } },
        "labels": { "update": {"fill": {"value": "#54595d"} } },
        "axis": { "update": {"stroke": {"value": "#54595d"}, "strokeWidth": {"value": 2} } }
      }
    },
    {
      "orient": "left",
      "scale": "y",
      "grid": true,
      "encode": {
        "ticks": { "update": {"stroke": {"value": "#54595d"} } },
        "labels": { "update": {"fill": {"value": "#54595d"} } },
        "grid": { "update": {"stroke": {"value": "#54595d"}, "strokeWidth": {"value": 2} } },
        "axis": { "update": {"stroke": {"value": "#54595d"}, "strokeWidth": {"value": 2} } }
      }
    }
  ],

  // The graph is drawn with two elements a thick line at the top, and a semi-transparent area below
  "marks": [
    {
      "type": "line",
      "from": {"data": "pageviews"},
      "encode": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","field": "views"},
          "stroke": {"value": "#36c"},
          "strokeWidth": {"value": 3},
          "interpolate": {"value": "monotone"}
        }
      }
    },
    {
      "type": "area",
      "from": {"data": "pageviews"},
      "properties": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","value": 0},
          "y2": {"scale": "y","field": "views"},
          "fill": {"value": "#36c"},
          "fillOpacity": {"value": 0.35},
          "interpolate": {"value": "monotone"}
        }
      }
    }
  ]
}
</graph>