2 |
3 | # Glucoscape
4 |
5 | ## Overview
6 |
7 | Glucoscape is a small application that helps visualize Continuous Glucose Monitoring (CGM) data quickly and intuitively. It provides a heatmap representation of time spent below range, in range, and above range, allowing for easy identification of glucose patterns.
8 |
9 | 
10 |
11 | ## Features
12 |
13 | - Loads the last 14 days of CGM data from your own Nightscout instance.
14 | - Uses the target range you have configured in Nightscout.
15 | - Displays a heatmap representation of time spent below/in/above your target range for each hour of each day.
16 | - Visually summarises time in range for each day ("what was my total time in range yesterday?")
17 | - Visually summarises time in range for each hour of day ("what's my average time in range between 9 and 10am?")
18 |
19 | ## Getting Started
20 |
21 | ### Prerequisite: Nightscout access
22 |
23 | To provide access to your Nightscout data, you need to check three things:
24 |
25 | 1. Find your Nightscout instance address (URL).
26 | 2. Create an **access token** which Glucoscape will use as a password when talking to Nightscout.
27 | - You can create a token by going to your Nightscout menu > Admin Tools > Subjects - People, Devices > Add new Subject.
28 | - Set `Name` to whatever you like, e.g. `glucoscape`.
29 | - Set `Roles` to `readable`.
30 | 3. Make sure your Nightscout instance **has CORS enabled**.
31 | - Add `cors` to the list of enabled plug-ins.
32 | - See [Nightscout docs](https://nightscout.github.io/nightscout/setup_variables/#cors-cors) for details.
33 |
34 | ### Use the app directly on GitHub
35 |
36 | This is the simplest way to use the app. It is pre-built and hosted directly by GitHub Pages.
37 |
38 | 1. Navigate to [vitawasalreadytaken.github.io/glucoscape](https://vitawasalreadytaken.github.io/glucoscape/)
39 | 2. Fill in your Nightscout address and access token and click _Connect_
40 | 3. ⭐️ Optionally bookmark the page for easier access next time (the address will look like `https://vitawasalreadytaken.github.io/glucoscape/#session=%7B%22nightscoutUrl...`)
41 |
42 | Your Nightscout address and access token are never saved by the app.
43 | A simple way to keep them (and skip the _Connect_ step next time) is to bookmark the page.
44 | Note that the address and access token will be a part of your bookmarked address.
45 |
46 | ### Build and run the app yourself
47 |
48 | 1. Clone this repository
49 | 2. `npm install`
50 | 3. `npm run build`
51 | 4. Open `build/index.html` in your browser
52 | 5. Fill in your Nightscout address and access token and click _Connect_
53 |
54 | ## See also
55 |
56 | I have also built [Koboscout](https://github.com/vitawasalreadytaken/koboscout), an 'ambient' app showing
57 | a chart of your latest CGM readings on an e-reader device or tablet.
58 |
59 | ## Contributing
60 |
61 | I welcome contributions from the community. If you have suggestions, bug reports, or would like to contribute code, please open an issue or pull request here on GitHub.
62 |
63 | ## License
64 |
65 | This project is licensed under the MIT License - see the LICENSE file for details.
66 |
--------------------------------------------------------------------------------
/src/heatmap.ts:
--------------------------------------------------------------------------------
1 | import {
2 | type GlucoseRecord,
3 | type GlucoseStatistics,
4 | type Settings,
5 | groupByDay,
6 | groupByInterval,
7 | calculateGlucoseStatistics,
8 | MMOL_TO_MGDL,
9 | } from "./data"
10 |
11 | import { RESOLUTION_SECONDS, COLOR_LOW, COLOR_ON_TARGET, COLOR_HIGH, COLOR_MISSING } from "./settings"
12 |
13 |
14 | export function renderHeatmap(settings: Settings, glucoseData: GlucoseRecord[]): string {
15 | const byDay = groupByDay(glucoseData)
16 | const rows = Object.entries(byDay).map(([day, records]) => renderRow(settings, day, records))
17 | return renderHeader(settings) + renderIntervalSummaryRow(settings, glucoseData) + rows.join("\n")
18 | }
19 |
20 | function renderHeader(settings: Settings): string {
21 | let targetRange: [number, number] | [string, string] = settings.targetRangeMgdl
22 | let units = "mg/dl"
23 | if (settings.displayUnits === "mmol") {
24 | targetRange = targetRange.map((x) => (x / MMOL_TO_MGDL).toFixed(1)) as [string, string]
25 | units = "mmol/l"
26 | }
27 | return `
28 |
50 |
51 | ${total}
52 | ${aggregates.join("")}
53 |
54 | `
55 | }
56 |
57 | function renderRow(settings: Settings, day: string, records: GlucoseRecord[]): string {
58 | const summary = renderSummary(settings, records, "day")
59 | const aggregates = renderAggregates(settings, records)
60 | return `
61 |
62 |
66 | `
67 | }
68 |
69 | function renderSummary(settings: Settings, records: GlucoseRecord[], className: string): string {
70 | const stats = calculateGlucoseStatistics(records, settings.targetRangeMgdl)
71 | const title = generateTitle(stats)
72 | const background = generateGradient(stats)
73 | return `
74 | ${day}
63 | ${summary} 64 | ${aggregates.join("")} 65 |
75 | ${stats.rangePercentages.onTarget.toFixed(0)}%
76 |
77 | `
78 | }
79 |
80 | function renderAggregates(settings: Settings, records: GlucoseRecord[]): string[] {
81 | const byInterval = groupByInterval(records, RESOLUTION_SECONDS)
82 | const aggregates = []
83 | for (let i = 0; i < (24 * 3600) / RESOLUTION_SECONDS; i++) {
84 | const recordsInInterval = byInterval[String(i)]
85 | let title = ""
86 | let background = COLOR_MISSING
87 | if (recordsInInterval != null) {
88 | const stats = calculateGlucoseStatistics(recordsInInterval, settings.targetRangeMgdl)
89 | title = generateTitle(stats)
90 | background = generateGradient(stats)
91 | }
92 | aggregates.push(`
93 |
94 |
96 | `)
97 | }
98 | return aggregates
99 | }
100 |
101 | function generateTitle(stats: GlucoseStatistics): string {
102 | return [
103 | `Low ${Math.round(stats.rangePercentages.low)}%`,
104 | `on target ${Math.round(stats.rangePercentages.onTarget)}%`,
105 | `high ${Math.round(stats.rangePercentages.high)}%`,
106 | ].join(" / ")
107 | }
108 |
109 | function generateGradient(stats: GlucoseStatistics): string {
110 | const onTargetEnd = stats.rangePercentages.low + stats.rangePercentages.onTarget
111 | const highEnd = onTargetEnd + stats.rangePercentages.high
112 | const color = [
113 | `${COLOR_LOW} 0%, ${COLOR_LOW} ${stats.rangePercentages.low}%`,
114 | `${COLOR_ON_TARGET} ${stats.rangePercentages.low}%, ${COLOR_ON_TARGET} ${onTargetEnd}%`,
115 | `${COLOR_HIGH} ${onTargetEnd}%, ${COLOR_HIGH} ${highEnd}%`,
116 | `${COLOR_MISSING} ${highEnd}%, ${COLOR_MISSING} 100%`,
117 | ].join(", ")
118 | return `linear-gradient(to top, ${color})`
119 | }
120 |
121 | function formatTime(hour: number): string {
122 | // const suffix = hour < 12 ? 'am' : 'pm'
123 | // hour %= 12
124 | // if (hour === 0) {
125 | // hour = 12
126 | // }
127 | // return `${hour}${suffix}`
128 | return String(hour)
129 | }
130 |
131 | // https://gist.github.com/mlocati/7210513
132 | // function percentageToColor(percentage: number, maxHue = 120, minHue = 0): string {
133 | // const hue = percentage * (maxHue - minHue) + minHue;
134 | // return `hsl(${hue}, 100%, 50%)`;
135 | // }
136 |
--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
1 | import { type GlucoseRecord, type Settings, MMOL_TO_MGDL } from "./data"
2 | import { DAYS_TO_LOAD, TIMEOUT_STATUS, TIMEOUT_CGM_DATA } from "./settings"
3 |
4 | import { renderHeatmap } from "./heatmap"
5 |
6 | import "./app.scss"
7 |
8 | interface Session {
9 | nightscoutUrl: string
10 | token: string
11 | }
12 |
13 | async function main(): Promise${formatTime(i)}
95 |" 99 | // Glucose data 100 | root.innerText += `Loading glucose data from ${session.nightscoutUrl}...` 101 | const toDate = new Date() 102 | toDate.setDate(toDate.getDate() + 1) 103 | const fromDate = new Date() 104 | fromDate.setDate(fromDate.getDate() - DAYS_TO_LOAD) 105 | glucoseData = await getGlucoseData(session.nightscoutUrl, session.token, fromDate, toDate) 106 | root.innerHTML += "done
" 107 | } 108 | catch (e) { 109 | console.error(e) 110 | root.innerHTML += `
Error loading data from Nightscout: ${e}
` 111 | return 112 | } 113 | // Render 114 | root.innerHTML = renderHeatmap(settings, glucoseData) 115 | } 116 | 117 | async function testConnection( 118 | nightscoutUrl: string, 119 | token: string, 120 | ): Promise