numberDisplay - filter by max key - dc.js

Question

I have a dc.js dashboard that has historical Headcount, Sickness etc information that is grouped by Month / Period. The users of the Dashboards want to see the most recent Month's data in number displays across the top (e.g Headcount, Sickness rate etc).
My data:
var data= [
{ "Month": "01/02/2014","Period": 201402,"Heads": 15123,"SchedHours":146000,"Sickness": 0,},
{ "Month": "01/03/2014","Period": 201403,"Heads": 15100,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/04/2014","Period": 201404,"Heads": 14900,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/05/2014","Period": 201405,"Heads": 14800,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/06/2014","Period": 201406,"Heads": 14750,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/07/2014","Period": 201407,"Heads": 14720,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/08/2014","Period": 201408,"Heads": 14000,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/09/2014","Period": 201409,"Heads": 13750,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/10/2014","Period": 201410,"Heads": 13500,"SchedHours": 146000,"Sickness": 0,},
{ "Month": "01/11/2014","Period": 201411,"Heads": 13200,"SchedHours": 146000,"Sickness": 0,},
....]
I can work out how to do this by default when the dashboard first loads using a variable:
maxPeriod = dimPeriod.top(1)[0].Period;
But I'm struggling to work out how to update the variable above to update the numberDisplay to always filter it to show the Heads by the max Period or Month.
I'm currently showing the latest number of "Heads" using a function Gordon kindly provided in another question:
function choose_bin(group, key) {
return {
value: function() {
return group.all().filter(kv => kv.key === key)[0].value;
}
}
}
My group is then:
var latestMonth = choose_bin(groupHeads3, maxPeriod);
and the numberDisplay:
numberChart
.group(latestMonth)
.valueAccessor(x => (x))
.formatNumber(d3.format(".0f"));
I have a basic jsfiddle that shows the problem (as soon as a filter is applied, the value is 0): https://jsfiddle.net/kevinelphick/mzpoe555/2/
What I'm aiming to do, is for the Heads value to update based on the highest period that's filtered in the line chart. I'm also looking to include the month prior to the highest period value, and provide a comparison of the two to show a trend.
Thank you in advance.

Answer 1

You're just not calculating quite enough stuff at runtime. You need to calculate maxPeriod and everything subsequent to that every time the group is queried. You'll probably want to do something like this (which works if you drop it into your JSFiddle:
var latestMonth = {
all: function() {
maxPeriod = dimPeriod.top(1)[0].Period;
return [choose_bin(groupHeads3, maxPeriod).value()]
}
}