Background

In T376971 we considered options for optimizing our charts for different platforms/screen resolutions. The conclusion was to load the echarts library on the client. This will require some changes to the extension.

Blockers

• The charts service provides the information needed to render charts on the client: T378206
• The ADR patch has been merged: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Chart/+/1082867?usp=search

Requirements

• Users who are not running JavaScript will see an SVG. The SVG will be optimized for mobile and horizontally centered.
• For users with capable browsers, charts will appear blurred initially until the echarts library has loaded and progressively enhanced the chart.
• The echarts library will be loaded when a chart is scrolled into view using IntersectionObserver
• The chart rendered via the JS library initially will look identical to the non-JS rendered chart but will have more interactivity (e.g. hovering over links will show)
• The chart will be optimized for the user's language, for example numbers in Hebrew will be localized.
• The initial CSS and JS bundles loaded on page load for Charts will be less than 1kb.
• Charts will make use of custom elements so should be progressively enhanced using standard web technologies
• For security reasons, the echarts library is private, it should not be possible for gadgets or user scripts to access it (yet) e.g. window.echarts is undefined. (We will add API abstractions to it at a later date)
• For security reasons, it should not be possible to progressively enhance rendered via gadgets or via templates (for now). To do this custom elements will check that 1) the wiki-chart is in the code on page load and is trusted e.g. is marked up with the data-mw attribute.