Requirements

The outcome graph is composed of two components, a radar graph and a session selector.

In general:

• The outcome graph library must be compatible with all major desktop browsers and tablets
• Should expect data to be provided in the following form:

[{
	"timestamp": "2017-02-18T14:58:54.026Z",
	"outcomes": [{
		"outcome": "Happiness",
		"value": 8,
		"notes": "I am pretty happy"
	}, {
		"outcome": "Loneliness",
		"value": 1,
		"notes": "I am isolated"
	}, {
		"outcome": "Health",
		"value": 5
	}, {
		"outcome": "Managing at Home",
		"value": 2
	}, {
		"outcome": "Finances",
		"value": 4
	}, {
		"outcome": "Work",
		"value": 10
	}],
	"notes": "Agreed the session went well"
}, {
	"timestamp": "2017-03-18T20:58:54.026Z",
	"outcomes": [{
		"outcome": "Happiness",
		"value": 10,
		"notes": "Joined social club"
	}, {
		"outcome": "Loneliness",
		"value": 3
	}, {
		"outcome": "Health",
		"value": 4
	}, {
		"outcome": "Managing at Home",
		"value": 3
	}, {
		"outcome": "Finances",
		"value": 5
	}, {
		"outcome": "Work",
		"value": 8,
		"notes": "Was late one day"
	}]
}, {
	"timestamp": "2017-04-15T08:58:54.026Z",
	"outcomes": [{
		"outcome": "Happiness",
		"value": 10
	}, {
		"outcome": "Loneliness",
		"value": 4
	}, {
		"outcome": "Health",
		"value": 5
	}, {
		"outcome": "Managing at Home",
		"value": 4
	}, {
		"outcome": "Finances",
		"value": 8,
		"notes": "Won at bingo"
	}, {
		"outcome": "Work",
		"value": 9
	}, {
		"outcome": "Relationships",
		"value": 7
	}],
	"notes": "Discharged"
}]

• The radar graph and session selector should be loosely coupled
• If possible, consider how users could alter the styling to their own tastes
• Should require as little external dependencies as possible

The radar graph:

• Must be capable of visualising up to 8 outcome session results in a radar graph visualisation
• Should expect between 3 and 10 outcomes
• By default, should display the 8 most recent outcome sessions
• Must be capable of handling situations where some outcome scores are not present in certain sessions
• For each dimension, the radar graph should present the outcome name
• For each dimension, the radar graph should present the outcome value as a point along the dimension
• A session's values should be joined together creating a polygon
• Each session's polygon should have a distinctive colour
• Hovering over a point should show a tooltip showing its value, the session date and a note (if available)

The session selector:

• Should present the list of sessions
• Each session entry in the list should indicate its colour within the radar graph (if it is displayed)
• Each session should be toggle-able, hiding or showing the session on the radar graph
• Each session entry should show the session date in a semantic form (i.e. two weeks ago) with the specific time and date being given in a tooltip
• If notes are available for the session, an icon should be shown
• A tooltip should show the session note when the note icon is hovered over