Add Chart tab with sensor temperature chart in Monitoring page

[roxy-dao]

Describe the solution you'd like 🎁

• Top
  • Chart of min/max threshold data from sensor
  • Colours will be associated with cards at the bottom
  • Hovering over lines will display a bubble with following information:
    • Sensor name and breach hot/cold icon
    • Location
    • Breach start
    • Breach end

Mock up:

Estimate

2 days

Moneyworks Jobcode 🧰

OMS:COLC

[adamdewey]

Observations:

• We're using the same icon here for 'malfunctioning' as we're using for 'unacknowledged' in the breaches tab - I think this could get confusing - suggest a different icon for each?
• @richardmoizeau - did we decided to combine the graph and card views? I think I missed that... (I mean, if we can do it well then great! But 1 day seems a bit conservative to me.. 🤔)

[richardmoizeau]

• We're using the same icon here for 'malfunctioning' as we're using for 'unacknowledged' in the breaches tab - I think this could get confusing - suggest a different icon for each?

yes, that's something that was brought up by @louisaw123 during the user testing so definitely to be discussed during the "final final design review"

@richardmoizeau - did we decided to combine the graph and card views? I think I missed that... (I mean, if we can do it well then great! But 1 day seems a bit conservative to me.. 🤔)

We are probably going to only focus on the charts but once again, to be decided in the same meeting as above. 1 day seems conservative even for charts only.

[adamdewey]

Comments from meeting today:

• Cards are not for MVP
• Only show icon for breaches, not excursions
• Bubble to be shown when click on breach icon
• Palette of 6 colours to be determined for sensor lines
• Fixed axes of 0C to 10C with thresholds shown at 2C and 8C

Anything else @richardmoizeau , @mark-prins , @andreievg , @roxy-dao , @anisha-msupply ?

[richardmoizeau]

following meeting on Oct 4th (Final Final Requirements):

• Remove the cards (we only keep the chart)
• boundaries of chart foccussed on 2-8°C (-/+ 2°C)
• On the mockup, these are just sensor's names:

• Click on a the breach icon (warning icon) and will show a popup/bubble that display details about the breach and a link to the breach view
• colours for the charts lines: pre-defined set of colours (up 6 colours)
• when hovering over a datapoint, see details (date, value, sensor name)

[mark-prins]

Additional notes, after looking into the data aggregation currently implemented. Both mobile and CCA are plotting single sensors at a time only. The colouring of the lines can therefore be tied to temperature and there is more scope when adding breach icons.

CCA

• y axis limits are the min and max temperatures +/- 5
• x axis limits are simply the min / max timestamps
• all data is plotted
• no breach indication is shown
• the line colour is a gradient showing red when in the top 40% of the plot region, which in the middle and blue in the lower 20%

Mobile

• y axis limits simply the max temp
• x axis limits the min temp
• the chart has a date range selection which defaults to the current day. For the given range, the chart shows a max of 30 data points, unless the range is a day or less (note: there's no time selection on the range, so less than a day isn't actually possible!) then it shows a max of 24 data points
• the number of data points is the minimum of the value above (24 or 30) and the number of actual log entries
• the max and min temperatures within the period are plotted; giving different lines for max and min values across the chart
• all breaches within the range are plotted as clickable icons. the time value is the timestamp of the breach start time

[adamdewey]

Anecdotally, I and several others, found the Mobile graphs hard to read.

The CCA graph is better but not really granular / big enough to be very useful.

Here are some examples of graphs that were on display in various places at the TechNet 2023 conference, I find them easy to read (also I find Grafana graphs easy to read)

[roxy-dao]

Those graphs are all with just one sensor, no?

[louisaw123]

Those graphs are all with just one sensor, no?

yes looks like one sensor to me

[adamdewey]

Yep, one sensor 👍