On the vaccine card, the icon next to the weight button launches the child's growth chart. There are three statuses shown: green, orange, and red, that correspond to the child's growth chart status (i.e., green line icon goes with the good green growth chart, etc).
Vaccine card:
[x] @rowo will send trend icons to James
CG update: Waiting on alert logic from team, so we have placed the generic growth chart icon here instead.
Green:
Orange:
Red:
Growth chart:
Green:
Color codes:
Blue today line and box: #008be6
3: 222539
2: #b1312c
0: #227532
Good green background: 47b156
Notes:
[x] Z-score column is added to previous weights and the table styling gets picked up from the Stock Reports views. See bottom of this issue for how to calculate the z-score.
[x] The z-score should be color-coded according to the graph z-score lines for 0, 2 and 3, i.e., if z-score is between -2 and 2, use #227532, if it's between 2 and 3 or between -2 and -3, use #b1312c, and above 3 or below -3 use 222539.
[ ] "Today" label on chart just shows "Today" and not today's taken weight. Wanted to remove that to be more consistent.
[ ] I added an expansion icon button to this area of the card. I think this can behave where either (A) the top portion (above the done button) gets longer or (B) the entire card contents get longer
Orange:
Color code for orange background: #faa60d
Red:
Color code for red background: #d5282f
For plotting the z-score lines on the growth chart, please follow the reference table for boys and girls from WHO:
Month is the child's age in months. This is the x-axis on the chart. The y-axis is the child's weights in kg. Please note the reference tables above also include negative and plus one standard deviations. Please ignore these. We only need to show the -3, -2, 0, +2, and +3 standard deviations on the charts.
On the vaccine card, the icon next to the weight button launches the child's growth chart. There are three statuses shown: green, orange, and red, that correspond to the child's growth chart status (i.e., green line icon goes with the good green growth chart, etc).
Vaccine card:
Green:
Orange:
Red:
Growth chart: Green:
Color codes: Blue today line and box: #008be6 3: 222539 2: #b1312c 0: #227532 Good green background: 47b156
Notes:
Orange:
Color code for orange background: #faa60d
Red:
Color code for red background: #d5282f
For plotting the z-score lines on the growth chart, please follow the reference table for boys and girls from WHO:
For boys: http://www.who.int/childgrowth/standards/wfa_boys_0_5_zscores.txt For girls: http://www.who.int/childgrowth/standards/wfa_girls_0_5_zscores.txt
Month is the child's age in months. This is the x-axis on the chart. The y-axis is the child's weights in kg. Please note the reference tables above also include negative and plus one standard deviations. Please ignore these. We only need to show the -3, -2, 0, +2, and +3 standard deviations on the charts.