Add historic reporting for Home activity levels

[brylie]

Now that our platform supports historical reporting, we can focus on improving the visibility of home activity levels over "deeper" periods.

We will start with historic charting for the individual homes before working on visualising the whole care-system.

Goals

• Home report page should load with rendered charts in under ~2 seconds
• Charts should be easy to read and understand
• Charts should be localized
• Charts should fit within a single eye span, or page, reducing the likelihood of scrolling

Task

• Design mock-ups for historic charts @brylie
• Describe types of aggregations needed for each chart mock-up (e.g. using mode or mean calculations for daily activity levels) @brylie
• From a technical standpoint, describe how to pre-compute the aggregations if useful
• Determine if/how we might leverage the database layer directly to do aggregations
• Determine if there is a more performant JavaScript library or "standard library" approach for data aggregations (currently using D3 but may use Lodash)
• Describe how to handle different periods for reporting, e.g. monthly or yearly (e.g. there may only be a few months of data on newer deployments.
• Discuss required changes before implementing the improvements
• Add selected historical reports to Home report view

Current report view

Note: the current report view takes several seconds to populate with data in a production deployment.

Mock-ups

The following code was used to generate the "Resident activity levels over time" chart.

var xData = [ ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"], ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"], ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"], ];

var yData = [
[74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69],
[45, 42, 50, 46, 36, 36, 34, 35, 32, 31, 31, 28],
[13, 14, 20, 24, 20, 24, 24, 40, 35, 41, 43, 50],
];

var colors = ['green', 'red', 'yellow',];

var lineSize = [2, 2, 4, 2];

var labels = ['Excellent', 'Poor', 'Good',];

var data = [];

for ( var i = 0 ; i < xData.length ; i++ ) {
var result = {
x: xData[i],
y: yData[i],
type: 'scatter',
mode: 'lines',
line: {
color: colors[i],
width: lineSize[i]
}
};
var result2 = {
x: [xData[i][0], xData[i][11]],
y: [yData[i][0], yData[i][11]],
type: 'scatter',
mode: 'markers',
marker: {
color: colors[i],
size: 12
}
};
data.push(result, result2);
}

var layout = {
showlegend: false,
height: 350,
width: 1000,
xaxis: {
showline: true,
showgrid: false,
showticklabels: true,
linecolor: 'rgb(204,204,204)',
linewidth: 2,
autotick: false,
ticks: 'outside',
tickcolor: 'rgb(204,204,204)',
tickwidth: 2,
ticklen: 5,
tickfont: {
family: 'Arial',
size: 12,
color: 'rgb(82, 82, 82)'
}
},
yaxis: {
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
autosize: false,
margin: {
autoexpand: false,
l: 100,
r: 20,
t: 100
},
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.0,
y: 1.05,
xanchor: 'left',
yanchor: 'bottom',
text: 'Resident activity levels over time',
font:{
family: 'Arial',
size: 30,
color: 'rgb(37,37,37)'
},
showarrow: false
},
]
};

for( var i = 0 ; i < xData.length ; i++ ) {
var result = {
xref: 'paper',
x: 0.05,
y: yData[i][0],
xanchor: 'right',
yanchor: 'middle',
text: labels[i] + ' ' + yData[i][0] +'%',
showarrow: false,
font: {
family: 'Arial',
size: 16,
color: 'black'
}
};
var result2 = {
xref: 'paper',
x: 0.95,
y: yData[i][11],
xanchor: 'left',
yanchor: 'middle',
text: yData[i][11] +'%',
font: {
family: 'Arial',
size: 16,
color: 'black'
},
showarrow: false
};

layout.annotations.push(result, result2);
}

Plotly.newPlot('myDiv', data, layout);

[shailee-m]

So we want to add 2 new charts:

1. calendar map (for the current year?): Based on count on activities on each day
2. Activities line chart: This is possibly the count or total time spend on activities.
   How do we categorise the good bad and poor? In the code, there is the variable yData how do we calculate the three arrays.

The home activity and activity trend chart both can be viewed at following levels of time granularity:

1. year
2. month
3. week
4. day

[shailee-m]

Also, I noticed this dense chart when there is a lot of data.

We can remove the group mode. and only show stack-mode. Also, giving some dropdowns for filtering like for selecting a month or year, filtering by a home etc.

Few other reports can be helpful

1. Total activities in the past week (and list of top activities by time).
2. Most active homes this month/week whichever is more relevant.
3. Most active residents/homes (can be filtered by period of time month/year/week/day)

[brylie]

We can remove the group mode. and only show stack-mode.

Just defaulting to stack mode would be a good step.

Most active homes this month/week whichever is more relevant.

This could be useful if it were somehow normalized like activities / number of residents. That way we could highlight the most and least active homes even when they have a different number of residents.

Would you make a quick sketch of how it would look to show the most/least active homes (activity count/resident count)?

[shailee-m]

https://codepen.io/shailee-m/pen/LYGpWyJ

[brylie]

Looks good. I think the chart should be based on the following aggregation:

1. Calculate the percentage of active residents in each house for each day of the previous period (e.g. past 30 days)
2. Take the average (mean) of the daily active residents percentage for each house

The "average active residents level" can then be used to sort and compare houses of various sizes.

One nice addition would be to display the houses with the lowest average activity level, so managers can quickly identify areas for improvement.

[brylie]

Store the pre-computed "daily activity levels" percentages in the analytics cache for use in other charts such as the "activity level trends" chart on the Home view.

[shailee-m]

This average will "average active residents level" will be used to compare against the data from all the past months too?

[brylie]

Yes, it seems reasonable to compare averages across time as well as homes.

[shailee-m]

@brylie I was working on this card before the vue migration. I seem to have misunderstood this to be under the overall report page. But now that I revisited it I think it was for each home report page except for most active homes and least activity cards.

This is what I had created for the /report page.

Also, I was looking into the logic for heat map, which will basically be (active residents of all homes/total residents) of all homes for each day. It that correct?

[brylie]

But now that I revisited it I think it was for each home report page except for most active homes and least activity cards.

Yes, this is the report page for a single Home.

I was looking into the logic for heat map, which will basically be (active residents of all homes/total residents) of all homes for each day. It that correct?

Since this is the report page for a single Home, the heatmap should only show activity levels of residents who had an active residency at the Home for each calendar day.