A Simple Blood Pressure (Systolic vs Diastolic) scatter Plot in British Heart Foundation format

[philpownall]

An alternative to History Chart or Statistics Chart for long-term statistics.

In the format of the British Heart Foundation BP tracking Diary

Here is the yaml for the chart:

type: custom:plotly-graph
title: Blood Pressure 90d, mmHg
raw_plotly_config: true
config:
  displayModeBar: false
hours_to_show: 2160
grid_options:
  rows: 6
entities:
  - entity: sensor.my_systolic_blood_pressure
    internal: true
    statistic: mean
    period: day
    fn: $fn ({ ys, vars }) => vars.systolic = ys
  - entity: sensor.my_diastolic_blood_pressure
    internal: true
    statistic: mean
    period: day
    fn: $fn ({ ys, vars }) => vars.diastolic = ys
  - entity: ""
    x: $fn ({ ys, vars }) => vars.diastolic
    "y": $fn ({ y, vars }) => vars.systolic
    mode: markers
    text: BP ❤️
    marker:
      color: red
      size: 6
    type: scatter

Here is the layout section for the background colours and text annotations:

layout:
  margin:
    t: 10
    l: 60
    r: 30
    b: 65
  annotations:
    - x: 50
      "y": 145
      text: High
      showarrow: false
      font:
        size: 14
        color: white
    - x: 50
      "y": 125
      text: Elevated
      showarrow: false
      font:
        size: 14
        color: white
    - x: 50
      "y": 110
      text: Healthy
      showarrow: false
      font:
        size: 14
        color: white
    - x: 50
      "y": 80
      text: Low
      showarrow: false
      font:
        size: 14
        color: white
  shapes:
    - type: rect
      x0: 40
      x1: 100
      yref: "y"
      y0: 70
      y1: 150
      fillcolor: red
      opacity: 0.1
    - type: rect
      x0: 40
      x1: 80
      yref: "y"
      y0: 70
      y1: 120
      fillcolor: green
      opacity: 0.1
    - type: rect
      x0: 40
      x1: 85
      yref: "y"
      y0: 70
      y1: 135
      fillcolor: yellow
      opacity: 0.1
    - type: rect
      x0: 40
      x1: 70
      yref: "y"
      y0: 70
      y1: 90
      fillcolor: blue
      opacity: 0.1
  xaxis:
    title:
      text: Diastolic
    range:
      - 40
      - 100
    dtick: 10
    tick0: 0
  yaxis:
    title:
      text: Systolic
    range:
      - 70
      - 150
    dtick: 10
    tick0: 0