Skip to content

Commit af42e92

Browse files
Copilotdanmarshall
Copilot
and
danmarshall
committed
Add month filter dropdown and heatmap visualization to habit tracker
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
1 parent eb88f6c commit af42e92

1 file changed

Lines changed: 152 additions & 6 deletions

File tree

‎packages/web-deploy/json/habit-tracker.idoc.json‎

Lines changed: 152 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
"style": {
55
"css": [
66
"body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background: #f8fafc; }",
7-
"body { display: grid; grid-template-areas: 'header header' 'habits progress' 'stats stats'; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; }",
7+
"body { display: grid; grid-template-areas: 'header header' 'controls controls' 'heatmap heatmap' 'habits progress' 'stats stats'; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; }",
88
".group { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; }",
99
"#header { grid-area: header; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; border-radius: 12px; }",
10+
"#controls { grid-area: controls; }",
11+
"#heatmap { grid-area: heatmap; }",
1012
"#habits { grid-area: habits; }",
1113
"#progress { grid-area: progress; }",
1214
"#stats { grid-area: stats; }",
@@ -94,11 +96,98 @@
9496
{"date": "2024-01-20", "habit_id": 2, "habit_name": "Read for 30min", "completed": false},
9597
{"date": "2024-01-20", "habit_id": 3, "habit_name": "Meditate", "completed": true},
9698
{"date": "2024-01-21", "habit_id": 3, "habit_name": "Meditate", "completed": true},
97-
{"date": "2024-01-22", "habit_id": 3, "habit_name": "Meditate", "completed": true}
99+
{"date": "2024-01-22", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
100+
{"date": "2024-01-22", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
101+
{"date": "2024-01-22", "habit_id": 3, "habit_name": "Meditate", "completed": true},
102+
{"date": "2024-01-23", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
103+
{"date": "2024-01-23", "habit_id": 4, "habit_name": "Write Journal", "completed": true},
104+
{"date": "2024-01-24", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
105+
{"date": "2024-01-24", "habit_id": 3, "habit_name": "Meditate", "completed": false},
106+
{"date": "2024-01-25", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
107+
{"date": "2024-01-25", "habit_id": 5, "habit_name": "Learn New Language", "completed": true},
108+
{"date": "2024-01-26", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
109+
{"date": "2024-01-26", "habit_id": 3, "habit_name": "Meditate", "completed": true},
110+
{"date": "2024-01-27", "habit_id": 1, "habit_name": "Morning Exercise", "completed": false},
111+
{"date": "2024-01-27", "habit_id": 4, "habit_name": "Write Journal", "completed": true},
112+
{"date": "2024-01-28", "habit_id": 3, "habit_name": "Meditate", "completed": true},
113+
{"date": "2024-01-28", "habit_id": 6, "habit_name": "Call Family", "completed": true},
114+
{"date": "2024-02-01", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
115+
{"date": "2024-02-01", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
116+
{"date": "2024-02-01", "habit_id": 3, "habit_name": "Meditate", "completed": true},
117+
{"date": "2024-02-02", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
118+
{"date": "2024-02-02", "habit_id": 4, "habit_name": "Write Journal", "completed": true},
119+
{"date": "2024-02-02", "habit_id": 5, "habit_name": "Learn New Language", "completed": true},
120+
{"date": "2024-02-03", "habit_id": 2, "habit_name": "Read for 30min", "completed": false},
121+
{"date": "2024-02-03", "habit_id": 3, "habit_name": "Meditate", "completed": true},
122+
{"date": "2024-02-04", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
123+
{"date": "2024-02-04", "habit_id": 6, "habit_name": "Call Family", "completed": true},
124+
{"date": "2024-02-05", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
125+
{"date": "2024-02-05", "habit_id": 3, "habit_name": "Meditate", "completed": true},
126+
{"date": "2024-02-05", "habit_id": 4, "habit_name": "Write Journal", "completed": false},
127+
{"date": "2024-02-06", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
128+
{"date": "2024-02-06", "habit_id": 5, "habit_name": "Learn New Language", "completed": true},
129+
{"date": "2024-02-07", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
130+
{"date": "2024-02-07", "habit_id": 3, "habit_name": "Meditate", "completed": true},
131+
{"date": "2024-02-08", "habit_id": 1, "habit_name": "Morning Exercise", "completed": false},
132+
{"date": "2024-02-08", "habit_id": 4, "habit_name": "Write Journal", "completed": true},
133+
{"date": "2024-02-09", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
134+
{"date": "2024-02-09", "habit_id": 3, "habit_name": "Meditate", "completed": true},
135+
{"date": "2024-02-10", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
136+
{"date": "2024-02-10", "habit_id": 5, "habit_name": "Learn New Language", "completed": false},
137+
{"date": "2024-03-01", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
138+
{"date": "2024-03-01", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
139+
{"date": "2024-03-02", "habit_id": 3, "habit_name": "Meditate", "completed": true},
140+
{"date": "2024-03-02", "habit_id": 4, "habit_name": "Write Journal", "completed": true},
141+
{"date": "2024-03-03", "habit_id": 1, "habit_name": "Morning Exercise", "completed": false},
142+
{"date": "2024-03-03", "habit_id": 5, "habit_name": "Learn New Language", "completed": true},
143+
{"date": "2024-03-04", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
144+
{"date": "2024-03-04", "habit_id": 3, "habit_name": "Meditate", "completed": true},
145+
{"date": "2024-03-04", "habit_id": 6, "habit_name": "Call Family", "completed": true},
146+
{"date": "2024-03-05", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
147+
{"date": "2024-03-05", "habit_id": 4, "habit_name": "Write Journal", "completed": false},
148+
{"date": "2024-03-06", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
149+
{"date": "2024-03-06", "habit_id": 3, "habit_name": "Meditate", "completed": true},
150+
{"date": "2024-03-07", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
151+
{"date": "2024-03-07", "habit_id": 5, "habit_name": "Learn New Language", "completed": true},
152+
{"date": "2024-03-08", "habit_id": 2, "habit_name": "Read for 30min", "completed": false},
153+
{"date": "2024-03-08", "habit_id": 4, "habit_name": "Write Journal", "completed": true},
154+
{"date": "2024-03-09", "habit_id": 1, "habit_name": "Morning Exercise", "completed": true},
155+
{"date": "2024-03-09", "habit_id": 3, "habit_name": "Meditate", "completed": true},
156+
{"date": "2024-03-10", "habit_id": 2, "habit_name": "Read for 30min", "completed": true},
157+
{"date": "2024-03-10", "habit_id": 6, "habit_name": "Call Family", "completed": true}
98158
]
99159
}
100160
],
101161
"variables": [
162+
{
163+
"variableId": "selectedMonth",
164+
"type": "string",
165+
"initialValue": "2024-01",
166+
"input": {
167+
"type": "dropdown",
168+
"options": [
169+
{"value": "All", "label": "All Months"},
170+
{"value": "2024-01", "label": "January 2024"},
171+
{"value": "2024-02", "label": "February 2024"},
172+
{"value": "2024-03", "label": "March 2024"}
173+
]
174+
}
175+
},
176+
{
177+
"variableId": "filteredProgressData",
178+
"type": "object",
179+
"isArray": true,
180+
"initialValue": [],
181+
"calculation": {
182+
"dataSourceNames": ["progressDataTable"],
183+
"dataFrameTransformations": [
184+
{
185+
"type": "filter",
186+
"expr": "selectedMonth === 'All' || slice(datum.date, 0, 7) === selectedMonth"
187+
}
188+
]
189+
}
190+
},
102191
{
103192
"variableId": "totalHabits",
104193
"type": "number",
@@ -113,7 +202,7 @@
113202
"isArray": true,
114203
"initialValue": [],
115204
"calculation": {
116-
"dataSourceNames": ["progressDataTable"],
205+
"dataSourceNames": ["filteredProgressData"],
117206
"dataFrameTransformations": [
118207
{
119208
"type": "aggregate",
@@ -143,7 +232,7 @@
143232
"isArray": true,
144233
"initialValue": [],
145234
"calculation": {
146-
"dataSourceNames": ["progressDataTable"],
235+
"dataSourceNames": ["filteredProgressData"],
147236
"dataFrameTransformations": [
148237
{
149238
"type": "aggregate",
@@ -169,7 +258,7 @@
169258
"isArray": true,
170259
"initialValue": [],
171260
"calculation": {
172-
"dataSourceNames": ["progressDataTable"],
261+
"dataSourceNames": ["filteredProgressData"],
173262
"dataFrameTransformations": [
174263
{
175264
"type": "filter",
@@ -201,6 +290,63 @@
201290
"Track your daily habits and build consistent routines for personal growth."
202291
]
203292
},
293+
{
294+
"groupId": "controls",
295+
"elements": [
296+
"## 🎛️ Filters",
297+
"",
298+
"**Month:** {{selectedMonth}}"
299+
]
300+
},
301+
{
302+
"groupId": "heatmap",
303+
"elements": [
304+
"## 🗓️ Habit Completion Heatmap",
305+
{
306+
"type": "vega-lite",
307+
"spec": {
308+
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
309+
"data": {"name": "filteredProgressData"},
310+
"mark": {"type": "rect", "stroke": "#f1f5f9", "strokeWidth": 1},
311+
"encoding": {
312+
"x": {
313+
"field": "date",
314+
"type": "temporal",
315+
"title": "Date",
316+
"axis": {"format": "%b %d", "labelAngle": -45}
317+
},
318+
"y": {
319+
"field": "habit_name",
320+
"type": "nominal",
321+
"title": "Habit",
322+
"sort": null
323+
},
324+
"color": {
325+
"field": "completed",
326+
"type": "nominal",
327+
"scale": {
328+
"domain": [true, false],
329+
"range": ["#22c55e", "#ef4444"]
330+
},
331+
"legend": {
332+
"title": "Completed",
333+
"values": [true, false],
334+
"labelExpr": "datum.value ? 'Yes' : 'No'"
335+
}
336+
},
337+
"tooltip": [
338+
{"field": "date", "type": "temporal", "title": "Date"},
339+
{"field": "habit_name", "type": "nominal", "title": "Habit"},
340+
{"field": "completed", "type": "nominal", "title": "Completed"}
341+
]
342+
},
343+
"width": "container",
344+
"height": 200,
345+
"background": "transparent"
346+
}
347+
}
348+
]
349+
},
204350
{
205351
"groupId": "habits",
206352
"elements": [
@@ -230,7 +376,7 @@
230376
{
231377
"groupId": "progress",
232378
"elements": [
233-
"## 📈 Recent Progress",
379+
"## 📈 Progress (Filtered by Month)",
234380
{
235381
"type": "tabulator",
236382
"dataSourceName": "progressData",

0 commit comments

Comments
 (0)