Build responsive rendering into Row Col Chart

[Brian Lewis]

EChart has some great capacities for designing responsive charts.

see https://echarts.apache.org/en/tutorial.html#Responsive%20Mobile-End

Propose that this is built in to the RowColChart component to do some subtle readjustments of charts as their size and shape changes.

Strategy:

Create media options representing:

default - squarish, reasonably big enough to fit the chart

portrait - vertical rectangle, aspectRatio < some threshhold

landscape - horizontal rectangle, aspect ratio > some (different) threshhold

thin: height < some threshold

narrow: width < some threshhold

tiny: both height and width small - hide many features

spark: for a spark line or inline test < 100 x 100

‌

These are created in this order, then layered in this order.

‌

[Brian Lewis]

Working with this responsive model poses increased complexity in “tweaking” a chart in an onChartRender callback: where, exactly, do we make the tweaks?

There are 3 places:

base option: the base option before any media options are applied. This contains structural elements, and data. Make any changes to series in here.

default option: this is executed prior to any other media option. Put in here any changes that may need to get overridden by other media options.

‘veto’ option: This is always executed AFTER every media option. Put in here any formatting changes that should always apply , regardless of the current layout.

onChartRender handlers can also adjust specific media options as well. The exam results chart render handler using different y axis label formatters to truncate text EXCEPT when in landscape mode.

‌

‌

‌

[Brian Lewis]

@ghachey first push of this to issue841 branch has an annotation on the chart to show what mode is getting rendered.

As a working example see exams dashboard - full text of benchmark appears only in landscape:

‌

[Ghislain Hachey]

No work on this for now.