School Dashboard - add colours and legend to grade by gender stacked bar chart [2020:O]

[Brian Lewis]

No description provided.

[Brian Lewis]

This turns out to be a bigger issue - the 'widgets' PlottableBarChart and PlottableBarChartBase do not support a legend or specification of colour by series.

So the changes required are quite deep.

[Ghislain Hachey]

Not priority. Why is this a bug and not an enhancement?

[Brian Lewis]

This is currently how it displays stacked bar chart for Male and Female:

‌

There are two series there; the same colour. They need to be different colours, and have a legend.

Otherwise we may as well remove it from the dashboard - it communicates nothing.

As per my comment above, fixing this - ie adding this additional functionality to the widget - is not trivial.

[Ghislain Hachey]

I have to say this is not what I had in mind. This is pretty basic functionality. Is this because this is our own custom widget (done by Jeremy) which don’t yet have the functionality?

[Brian Lewis]

Looking at this again in the context of building new Financial Data Dashboard.

Data → Crossfilter → our ‘dcChart’ components → which are based on dc.js

ie we get the data via api, load it into a crossfilter, then use the custom handling in dc.js ( which is purpose built for crossfilter) to render it.

School dashbord and Exams dashboard go

Data → reshaped for chart → dashboard chart widgets → which are based on plottable.

ie the data retrieved from the api, reshape into a format for the chart (using lodash commands) and render with the dashboard widgets.

It is these dashboard widgets that have the limitations described above. Further, this approach does not allow for the interactive filtering of data. which is straightforward using crossfilter.

Now much of the power of dc.js is in its interactivity with the crossfilter, ie allow drag and the chart to select ranges of values ( e.g/ date ranges) and automatically applying that to the crossfilter. We use only a small part of this - the ability to select a dimension filter via clicking on a chart segment.

In fact, we can replicate this without too much effort in plottable-based charts, with simple click handlers, so we can use a bit more flexibility in the chart design.

As well, the 'Chart' component (rowColChart) used by Schools => Charts gives most of the bar-chart functionality we need:

• support for vertical/horizontal layouts
• support for clustered or stacked
• support for value or percentage

and supports inclusion of a legend, a tooltip, click handlers and dynamic ng-class.

Only issue is that this component consumes data in a particular format that has been provided from the SchoolTable stored proc:

{ R, RC, RName, C, CC, CName, Num} defining the “row and “column” data and the value. (RolColDatum)

So to get to this from a crossfilter, we need a simple shaping adaptor: crossfilter's group.all() return an array of key-value pairs which can be transformed into an array of RolColDatum

So going forward the simplest approach for dashboard charts is:

Data → Crossfilter → (shape adaptor to RowColDatum) → RowColChart component.

‌

In this sample clicking a bar sets the selectedYear in the options - there must always be a selected year, so the other years have slightly reduced opacity, rather than being greyed out. This is managed through applying ng-class onto the svg rect elements.

Moving to this approach means that we could consider providing the user with UI to move between the 6 formats of chart supported by the RowColChart component - the required format is a binding on this component. Perhaps a pop-out menu to select the format?

[Brian Lewis]

Resolved through introduction of echarts and development of EChart RowCol chart component.