Charts
More actions
A chart on a Wikven site is drawn once, while the site is being built, and what the reader gets is the drawing. Chart is the extension for it, and it is the first of a kind: an extension that wants a program of its own beside MediaWiki. Setting it up is fetching an extension, plus an address.
This page draws one. Everything below is what this site does to make it appear.
The numbers are the sample chart-renderer ships with, which is why they are about an election in Canada rather than about Wikven. What is worth looking at is the drawing itself: view the source of this page and it is an <svg>, sitting in the HTML with no request to make. It is what a reader sees before anything runs, and what they are left with if nothing does.
Then Chart hands that drawing to ECharts in the browser, which is what makes the legend answer: click a party and its line goes. So a site with a chart on any page carries ECharts in its script bundle — around 830 KB, on every page of it, since the bundle is one file the whole site shares. A site that draws no chart carries none of it.
What a site declares
Chart wants JsonConfig beside it, and both want telling which pages they own:
extensions:
- JsonConfig
- Chart
config:
WikvenRepositories:
JsonConfig:
repository: https://github.com/wikimedia/mediawiki-extensions-JsonConfig.git
reference: REL1_46
Chart:
repository: https://github.com/wikimedia/mediawiki-extensions-Chart.git
reference: REL1_46
JsonConfigModels:
Tabular.JsonConfig: JsonConfig\JCTabularContent
Chart.JsonConfig: MediaWiki\Extension\Chart\JCChartContent
JsonConfigs:
Tabular.JsonConfig:
namespace: 486
nsName: Data
pattern: '/.\.tab$/'
license: CC0-1.0
isLocal: true
Chart.JsonConfig:
namespace: 486
nsName: Data
pattern: '/.\.chart$/'
license: CC0-1.0
isLocal: true
ChartServiceUrl: http://host.docker.internal:6284/v1/chart/render
Neither extension publishes a release tag for this branch, so those two entries follow a branch rather than pin a commit; two builds of your source can therefore fetch different code. This site pins both to a commit instead — see the WikvenRepositories map for why, and how.
Where the renderer is
The renderer is a service you run, and ChartServiceUrl is wherever it answers. Clone chart-renderer, npm install, npm start, and it listens on port 6284. Which address to write down depends on what does the baking:
- a renderer with an address of its own
- Use that address. This is the answer that keeps working wherever you move the build, and the only one that needs no explanation.
- the standalone binary
- The build runs on your machine, so the renderer is at
http://localhost:6284/v1/chart/render. - the image, or the bake action
- The build runs inside a container and your machine is outside it, by the name
host.docker.internal. That is what this site uses, and what the example above shows.
A self-hosted runner whose Docker lives in a sidecar container is the case none of those covers: a bake reaches that sidecar's daemon, so neither name finds the runner. Give the renderer an address of its own there.
The published site never talks to the renderer. It is asked once per chart while the page is being written, and what it answers is baked in — so the site you deploy has no dependency on it, and neither does the reader.
Where the data is
Chart reads two pages out of the Data: namespace, and both are source files like any other. They take no .wikitext suffix, because their own names already say what they hold:
docs/
Data/
Election.tab the numbers
Election.chart what to draw with them
The .tab page is tabular data: a schema naming the fields, and the rows. The .chart page says which of them to draw and how, and names its .tab page in source. Then, on any page that should show it:
{{#chart:Election.chart}}
Which is the line above the chart at the top of this page.