diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index d60b5441..0ac5f168 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -42,7 +42,23 @@ Chartifact consists of several interoperating modules: 4. **Security**: - Documents are rendered in sandboxed iframes. + - **NO HTML elements are allowed** - use only Markdown formatting. - No custom JavaScript execution or raw HTML in Markdown. + - For layouts and styling, use only CSS classes applied to groups and standard Markdown elements. + +## Component Capabilities and Constraints + +1. **Dropdown Components**: + - Dropdown options must be strings only - no objects with value/label properties + - Use simple string arrays for options: `"options": ["Option1", "Option2"]` + - For data-driven options, use `dynamicOptions` with a data source + - Objects in dropdown options will display as "[object Object]" + +2. **Chart Components**: + - Heatmaps and complex visualizations should use the `chart` type with `chartKey` + - Place chart specifications in the `resources.charts` section + - Reference charts using `{"type": "chart", "chartKey": "yourChartKey"}` + - Direct `vega-lite` type elements may not render properly for complex charts ## Examples @@ -50,9 +66,10 @@ Chartifact consists of several interoperating modules: - Examples in this repo use the json format and are compiled to markdown. - If you are asked to create an example, do it in the packages/web-deploy/json folder, do not modify the destination folder docs/assets/examples - this will be populated by a build. - The examples are built manually for now. +- **IMPORTANT**: When creating examples, use only Markdown formatting - NO HTML elements are allowed. Use plain text, Markdown headers, bold/italic formatting, and CSS styling for visual presentation. ## Runtime host - There is a sandboxed runtime that securely renders documents available at https://microsoft.github.io/chartifact/view - The url above can accept a `load` parameter to specify the document to render, for example https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/562d086/packages/web-deploy/json/sales-dashboard.idoc.json -- If you are asked to create an example, please provide a link in the PR comments so it can be previewed. +- **ALWAYS provide a preview link when creating or modifying examples** - include the preview link in PR comments and descriptions automatically so examples can be tested immediately without being asked. diff --git a/packages/web-deploy/json/habit-tracker.idoc.json b/packages/web-deploy/json/habit-tracker.idoc.json new file mode 100644 index 00000000..ab42dde3 --- /dev/null +++ b/packages/web-deploy/json/habit-tracker.idoc.json @@ -0,0 +1,780 @@ +{ + "$schema": "../../../docs/schema/idoc_v1.json", + "title": "Habit Tracker", + "style": { + "css": [ + "body { font-family: sans-serif; margin: 0; padding: 20px; background: #f8fafc; max-width: 1200px; margin: 0 auto; }", + "#header, #habits, #table, #monthly, #annual { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; }", + "#header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white; text-align: center; }", + "h1 { margin: 0; padding: 20px 0; font-size: 2em; font-weight: 600; }", + "h2 { margin: 0 0 15px 0; font-size: 1.4em; color: #2d3748; font-weight: 600; }", + ".tabulator { max-width: 100%; overflow: auto; }", + ".tabulator .tabulator-table { min-width: fit-content; }", + "#heatmap .vega-embed .vega-actions { display: none; }", + "body { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; grid-template-areas: 'header header' 'habits table' 'monthly monthly' 'annual annual'; }", + "#header { grid-area: header; }", + "#habits { grid-area: habits; min-width: 0; }", + "#table { grid-area: table; min-width: 0; }", + + "#monthly { grid-area: monthly; min-width: 0; overflow: hidden; }", + "#annual { grid-area: annual; min-width: 0; overflow: hidden; }", + "@media (max-width: 768px) { body { grid-template-columns: 1fr; grid-template-areas: 'header' 'habits' 'table' 'monthly' 'annual'; } }" + ] + }, + "dataLoaders": [ + { + "dataSourceName": "monthOptions", + "type": "inline", + "format": "json", + "content": [ + {"value": "2024-01", "label": "January 2024"}, + {"value": "2024-02", "label": "February 2024"}, + {"value": "2024-03", "label": "March 2024"}, + {"value": "2024-04", "label": "April 2024"} + ] + }, + { + "dataSourceName": "habitsData", + "type": "inline", + "format": "json", + "content": [ + { + "habit_name": "Exercise", + "category": "Health", + "target_frequency": "Daily" + }, + { + "habit_name": "Water Intake", + "category": "Health", + "target_frequency": "Daily" + }, + { + "habit_name": "Sleep 8 Hours", + "category": "Health", + "target_frequency": "Daily" + }, + { + "habit_name": "Read", + "category": "Learning", + "target_frequency": "Daily" + }, + { + "habit_name": "Language Learning", + "category": "Learning", + "target_frequency": "Daily" + }, + { + "habit_name": "Online Course", + "category": "Learning", + "target_frequency": "3x/week" + }, + { + "habit_name": "Call Family", + "category": "Social", + "target_frequency": "2x/week" + }, + { + "habit_name": "Social Activity", + "category": "Social", + "target_frequency": "Weekly" + }, + { + "habit_name": "Meditation", + "category": "Wellness", + "target_frequency": "Daily" + }, + { + "habit_name": "Gratitude Journal", + "category": "Wellness", + "target_frequency": "Daily" + }, + { + "habit_name": "Deep Work Session", + "category": "Work", + "target_frequency": "Daily" + }, + { + "habit_name": "Planning", + "category": "Work", + "target_frequency": "Daily" + } + ] + }, + { + "dataSourceName": "habitData", + "type": "inline", + "format": "json", + "content": [ + {"date": "2024-01-01", "habit": "Exercise", "completed": true}, + {"date": "2024-01-01", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-01", "habit": "Sleep 8 Hours", "completed": false}, + {"date": "2024-01-01", "habit": "Read", "completed": true}, + {"date": "2024-01-01", "habit": "Meditation", "completed": true}, + {"date": "2024-01-01", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-01-02", "habit": "Exercise", "completed": true}, + {"date": "2024-01-02", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-02", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-02", "habit": "Read", "completed": true}, + {"date": "2024-01-02", "habit": "Meditation", "completed": true}, + {"date": "2024-01-02", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-01-03", "habit": "Exercise", "completed": true}, + {"date": "2024-01-03", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-03", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-03", "habit": "Read", "completed": true}, + {"date": "2024-01-03", "habit": "Meditation", "completed": false}, + {"date": "2024-01-03", "habit": "Online Course", "completed": true}, + {"date": "2024-01-03", "habit": "Call Family", "completed": true}, + + {"date": "2024-01-04", "habit": "Exercise", "completed": true}, + {"date": "2024-01-04", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-04", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-04", "habit": "Read", "completed": false}, + {"date": "2024-01-04", "habit": "Meditation", "completed": true}, + {"date": "2024-01-04", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-01-05", "habit": "Exercise", "completed": true}, + {"date": "2024-01-05", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-05", "habit": "Sleep 8 Hours", "completed": false}, + {"date": "2024-01-05", "habit": "Read", "completed": true}, + {"date": "2024-01-05", "habit": "Language Learning", "completed": true}, + {"date": "2024-01-05", "habit": "Online Course", "completed": true}, + {"date": "2024-01-05", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-01-06", "habit": "Exercise", "completed": true}, + {"date": "2024-01-06", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-06", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-06", "habit": "Read", "completed": true}, + {"date": "2024-01-06", "habit": "Meditation", "completed": true}, + {"date": "2024-01-06", "habit": "Social Activity", "completed": true}, + + {"date": "2024-01-07", "habit": "Exercise", "completed": true}, + {"date": "2024-01-07", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-07", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-07", "habit": "Read", "completed": false}, + {"date": "2024-01-07", "habit": "Meditation", "completed": true}, + {"date": "2024-01-07", "habit": "Planning", "completed": true}, + + {"date": "2024-01-08", "habit": "Exercise", "completed": false}, + {"date": "2024-01-08", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-08", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-08", "habit": "Read", "completed": true}, + {"date": "2024-01-08", "habit": "Language Learning", "completed": true}, + + {"date": "2024-01-10", "habit": "Exercise", "completed": true}, + {"date": "2024-01-10", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-10", "habit": "Read", "completed": true}, + {"date": "2024-01-10", "habit": "Call Family", "completed": true}, + {"date": "2024-01-10", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-01-12", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-12", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-12", "habit": "Read", "completed": true}, + {"date": "2024-01-12", "habit": "Online Course", "completed": true}, + {"date": "2024-01-12", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-01-15", "habit": "Exercise", "completed": true}, + {"date": "2024-01-15", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-15", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-01-15", "habit": "Read", "completed": true}, + {"date": "2024-01-15", "habit": "Language Learning", "completed": true}, + {"date": "2024-01-15", "habit": "Meditation", "completed": true}, + + {"date": "2024-01-20", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-20", "habit": "Read", "completed": false}, + {"date": "2024-01-20", "habit": "Deep Work Session", "completed": true}, + {"date": "2024-01-20", "habit": "Planning", "completed": true}, + + {"date": "2024-01-25", "habit": "Exercise", "completed": true}, + {"date": "2024-01-25", "habit": "Water Intake", "completed": true}, + {"date": "2024-01-25", "habit": "Sleep 8 Hours", "completed": false}, + {"date": "2024-01-25", "habit": "Read", "completed": true}, + {"date": "2024-01-25", "habit": "Social Activity", "completed": true}, + + {"date": "2024-02-01", "habit": "Exercise", "completed": false}, + {"date": "2024-02-01", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-01", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-01", "habit": "Read", "completed": true}, + {"date": "2024-02-01", "habit": "Meditation", "completed": true}, + {"date": "2024-02-01", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-02-02", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-02", "habit": "Read", "completed": true}, + {"date": "2024-02-02", "habit": "Meditation", "completed": true}, + {"date": "2024-02-02", "habit": "Language Learning", "completed": true}, + + {"date": "2024-02-03", "habit": "Exercise", "completed": true}, + {"date": "2024-02-03", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-03", "habit": "Read", "completed": true}, + {"date": "2024-02-03", "habit": "Meditation", "completed": true}, + {"date": "2024-02-03", "habit": "Call Family", "completed": true}, + + {"date": "2024-02-04", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-04", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-04", "habit": "Read", "completed": false}, + {"date": "2024-02-04", "habit": "Meditation", "completed": true}, + {"date": "2024-02-04", "habit": "Online Course", "completed": true}, + + {"date": "2024-02-05", "habit": "Exercise", "completed": true}, + {"date": "2024-02-05", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-05", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-05", "habit": "Read", "completed": true}, + {"date": "2024-02-05", "habit": "Meditation", "completed": true}, + {"date": "2024-02-05", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-02-06", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-06", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-06", "habit": "Read", "completed": true}, + {"date": "2024-02-06", "habit": "Meditation", "completed": true}, + {"date": "2024-02-06", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-02-07", "habit": "Exercise", "completed": true}, + {"date": "2024-02-07", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-07", "habit": "Read", "completed": true}, + {"date": "2024-02-07", "habit": "Meditation", "completed": true}, + {"date": "2024-02-07", "habit": "Language Learning", "completed": true}, + + {"date": "2024-02-08", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-08", "habit": "Sleep 8 Hours", "completed": false}, + {"date": "2024-02-08", "habit": "Read", "completed": true}, + {"date": "2024-02-08", "habit": "Meditation", "completed": true}, + {"date": "2024-02-08", "habit": "Online Course", "completed": true}, + + {"date": "2024-02-09", "habit": "Exercise", "completed": true}, + {"date": "2024-02-09", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-09", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-09", "habit": "Read", "completed": false}, + {"date": "2024-02-09", "habit": "Meditation", "completed": true}, + {"date": "2024-02-09", "habit": "Planning", "completed": true}, + + {"date": "2024-02-10", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-10", "habit": "Read", "completed": true}, + {"date": "2024-02-10", "habit": "Meditation", "completed": true}, + {"date": "2024-02-10", "habit": "Social Activity", "completed": true}, + + {"date": "2024-02-14", "habit": "Exercise", "completed": true}, + {"date": "2024-02-14", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-14", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-14", "habit": "Read", "completed": false}, + {"date": "2024-02-14", "habit": "Call Family", "completed": true}, + {"date": "2024-02-14", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-02-20", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-20", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-20", "habit": "Read", "completed": true}, + {"date": "2024-02-20", "habit": "Language Learning", "completed": true}, + {"date": "2024-02-20", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-02-25", "habit": "Exercise", "completed": true}, + {"date": "2024-02-25", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-25", "habit": "Read", "completed": true}, + {"date": "2024-02-25", "habit": "Online Course", "completed": true}, + {"date": "2024-02-25", "habit": "Planning", "completed": true}, + + {"date": "2024-02-29", "habit": "Exercise", "completed": true}, + {"date": "2024-02-29", "habit": "Water Intake", "completed": true}, + {"date": "2024-02-29", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-02-29", "habit": "Read", "completed": true}, + {"date": "2024-02-29", "habit": "Meditation", "completed": false}, + + {"date": "2024-03-01", "habit": "Exercise", "completed": true}, + {"date": "2024-03-01", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-01", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-03-01", "habit": "Read", "completed": true}, + {"date": "2024-03-01", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-03-02", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-02", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-03-02", "habit": "Read", "completed": true}, + {"date": "2024-03-02", "habit": "Language Learning", "completed": true}, + {"date": "2024-03-02", "habit": "Call Family", "completed": true}, + + {"date": "2024-03-03", "habit": "Exercise", "completed": true}, + {"date": "2024-03-03", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-03", "habit": "Read", "completed": true}, + {"date": "2024-03-03", "habit": "Meditation", "completed": true}, + {"date": "2024-03-03", "habit": "Online Course", "completed": true}, + + {"date": "2024-03-04", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-04", "habit": "Sleep 8 Hours", "completed": false}, + {"date": "2024-03-04", "habit": "Read", "completed": true}, + {"date": "2024-03-04", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-03-05", "habit": "Exercise", "completed": false}, + {"date": "2024-03-05", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-05", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-03-05", "habit": "Read", "completed": true}, + {"date": "2024-03-05", "habit": "Planning", "completed": true}, + + {"date": "2024-03-10", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-10", "habit": "Read", "completed": false}, + {"date": "2024-03-10", "habit": "Language Learning", "completed": true}, + {"date": "2024-03-10", "habit": "Social Activity", "completed": true}, + + {"date": "2024-03-15", "habit": "Exercise", "completed": true}, + {"date": "2024-03-15", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-15", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-03-15", "habit": "Read", "completed": true}, + {"date": "2024-03-15", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-03-17", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-17", "habit": "Read", "completed": false}, + {"date": "2024-03-17", "habit": "Call Family", "completed": true}, + {"date": "2024-03-17", "habit": "Meditation", "completed": true}, + + {"date": "2024-03-20", "habit": "Exercise", "completed": true}, + {"date": "2024-03-20", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-20", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-03-20", "habit": "Read", "completed": true}, + {"date": "2024-03-20", "habit": "Online Course", "completed": true}, + + {"date": "2024-03-25", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-25", "habit": "Read", "completed": true}, + {"date": "2024-03-25", "habit": "Language Learning", "completed": true}, + {"date": "2024-03-25", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-03-31", "habit": "Exercise", "completed": false}, + {"date": "2024-03-31", "habit": "Water Intake", "completed": true}, + {"date": "2024-03-31", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-03-31", "habit": "Read", "completed": true}, + {"date": "2024-03-31", "habit": "Planning", "completed": true}, + + {"date": "2024-04-01", "habit": "Exercise", "completed": true}, + {"date": "2024-04-01", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-01", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-04-01", "habit": "Read", "completed": true}, + {"date": "2024-04-01", "habit": "Deep Work Session", "completed": true}, + + {"date": "2024-04-02", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-02", "habit": "Read", "completed": true}, + {"date": "2024-04-02", "habit": "Language Learning", "completed": true}, + {"date": "2024-04-02", "habit": "Meditation", "completed": true}, + + {"date": "2024-04-05", "habit": "Exercise", "completed": true}, + {"date": "2024-04-05", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-05", "habit": "Sleep 8 Hours", "completed": false}, + {"date": "2024-04-05", "habit": "Read", "completed": true}, + {"date": "2024-04-05", "habit": "Call Family", "completed": true}, + + {"date": "2024-04-10", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-10", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-04-10", "habit": "Read", "completed": true}, + {"date": "2024-04-10", "habit": "Online Course", "completed": true}, + {"date": "2024-04-10", "habit": "Gratitude Journal", "completed": true}, + + {"date": "2024-04-15", "habit": "Exercise", "completed": true}, + {"date": "2024-04-15", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-15", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-04-15", "habit": "Read", "completed": true}, + {"date": "2024-04-15", "habit": "Language Learning", "completed": true}, + {"date": "2024-04-15", "habit": "Social Activity", "completed": true}, + + {"date": "2024-04-20", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-20", "habit": "Read", "completed": false}, + {"date": "2024-04-20", "habit": "Deep Work Session", "completed": true}, + {"date": "2024-04-20", "habit": "Planning", "completed": true}, + + {"date": "2024-04-25", "habit": "Exercise", "completed": true}, + {"date": "2024-04-25", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-25", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-04-25", "habit": "Read", "completed": true}, + {"date": "2024-04-25", "habit": "Meditation", "completed": true}, + + {"date": "2024-04-30", "habit": "Exercise", "completed": true}, + {"date": "2024-04-30", "habit": "Water Intake", "completed": true}, + {"date": "2024-04-30", "habit": "Sleep 8 Hours", "completed": true}, + {"date": "2024-04-30", "habit": "Read", "completed": false}, + {"date": "2024-04-30", "habit": "Call Family", "completed": true} + ] + } + ], + "variables": [ + { + "variableId": "selectedMonth", + "type": "string", + "initialValue": "2024-01" + }, + { + "variableId": "enrichedHabitData", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": [ + "habitDataTable" + ], + "dataFrameTransformations": [ + { + "type": "lookup", + "from": "habitsDataTable", + "key": "habit_name", + "fields": [ + "habit" + ], + "values": ["category", "target_frequency"] + }, + { + "type": "formula", + "expr": "datum.category || 'Unknown'", + "as": "category" + } + ] + } + }, + { + "variableId": "filteredEnrichedData", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": ["enrichedHabitData"], + "variableDependencies": ["selectedMonth"], + "dataFrameTransformations": [ + { + "type": "filter", + "expr": "slice(datum.date, 0, 7) === selectedMonth" + } + ] + } + }, + { + "variableId": "dailyCompletionData", + "type": "object", + "isArray": true, + "initialValue": [], + "calculation": { + "dataSourceNames": [ + "habitDataTable" + ], + "dataFrameTransformations": [ + { + "type": "formula", + "expr": "parseInt(slice(datum.date, 8, 10))", + "as": "day_of_month" + }, + { + "type": "formula", + "expr": "parseInt(slice(datum.date, 5, 7))", + "as": "month_number" + }, + { + "type": "formula", + "expr": "datum.completed ? 1 : 0", + "as": "completed_numeric" + }, + { + "type": "aggregate", + "groupby": [ + "date", + "day_of_month", + "month_number" + ], + "ops": [ + "sum", + "count" + ], + "fields": [ + "completed_numeric", + "completed_numeric" + ], + "as": [ + "completed_count", + "total_habits" + ] + }, + { + "type": "formula", + "expr": "datum.completed_count / datum.total_habits", + "as": "completion_rate" + } + ] + } + } + ], + "groups": [ + { + "groupId": "header", + "elements": [ + "# 🎯 Habit Tracker", + "A minimal habit tracker with editable data and heatmap visualization." + ] + }, + { + "groupId": "habits", + "elements": [ + "## 🎯 Habits Configuration", + { + "type": "tabulator", + "dataSourceName": "habitsData", + "variableId": "habitsDataTable", + "editable": true, + "tabulatorOptions": { + "maxHeight": "180px", + "autoColumns": true, + "layout": "fitColumns" + } + } + ] + }, + { + "groupId": "table", + "elements": [ + "## 📋 Daily Progress", + { + "type": "tabulator", + "dataSourceName": "habitData", + "variableId": "habitDataTable", + "editable": true, + "tabulatorOptions": { + "maxHeight": "210px", + "autoColumns": true, + "layout": "fitColumns" + } + } + ] + }, + + { + "groupId": "monthly", + "elements": [ + "## 📊 Monthly Heatmap by Category", + { + "type": "dropdown", + "variableId": "selectedMonth", + "label": "Select Month:", + "dynamicOptions": { + "dataSourceName": "monthOptions", + "fieldName": "value" + } + }, + { + "type": "chart", + "chartKey": "monthlyHeatmap" + } + ] + }, + { + "groupId": "annual", + "elements": [ + "## 🗓️ Annual Calendar View", + { + "type": "chart", + "chartKey": "completionHeatmap" + } + ] + } + ], + "resources": { + "charts": { + "monthlyHeatmap": { + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "data": { + "name": "filteredEnrichedData" + }, + "title": "Monthly progress by category", + "config": { + "view": { + "strokeWidth": 0, + "step": 13, + "fill": "transparent" + }, + "axis": { + "domain": false + }, + "background": "transparent" + }, + "transform": [ + { + "calculate": "parseInt(slice(datum.date, 8, 10))", + "as": "day_of_month" + }, + { + "calculate": "datum.completed ? 1 : 0", + "as": "completed_numeric" + } + ], + "mark": "rect", + "encoding": { + "x": { + "field": "day_of_month", + "type": "ordinal", + "title": "Day of Month", + "scale": { + "domain": [ + 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 + ] + } + }, + "y": { + "field": "category", + "type": "nominal", + "title": "Category", + "scale": { + "domain": ["Health", "Learning", "Social", "Wellness", "Work"] + } + }, + "color": { + "aggregate": "mean", + "field": "completed_numeric", + "type": "quantitative", + "scale": { + "scheme": "blues", + "domain": [0, 1] + }, + "legend": { + "title": "% complete", + "format": ".0%" + } + }, + "tooltip": [ + { + "field": "category", + "type": "nominal", + "title": "Category" + }, + { + "field": "day_of_month", + "type": "ordinal", + "title": "Day" + }, + { + "aggregate": "mean", + "field": "completed_numeric", + "type": "quantitative", + "title": "Completion Rate", + "format": ".1%" + } + ] + }, + "width": "container", + "height": 120 + }, + "completionHeatmap": { + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "data": { + "name": "dailyCompletionData" + }, + "title": "Annual progress", + "config": { + "view": { + "strokeWidth": 0, + "step": 13, + "fill": "transparent" + }, + "axis": { + "domain": false + }, + "background": "transparent" + }, + "mark": "rect", + "encoding": { + "x": { + "field": "day_of_month", + "type": "ordinal", + "title": "Day", + "scale": { + "domain": [ + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 10, + 11, + 12, + 13, + 14, + 15, + 16, + 17, + 18, + 19, + 20, + 21, + 22, + 23, + 24, + 25, + 26, + 27, + 28, + 29, + 30, + 31 + ] + } + }, + "y": { + "field": "month_number", + "type": "ordinal", + "title": "Month", + "scale": { + "domain": [ + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 10, + 11, + 12 + ] + }, + "axis": { + "labelExpr": "['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][datum.value]" + } + }, + "color": { + "field": "completion_rate", + "type": "quantitative", + "scale": { + "scheme": "greens", + "domain": [ + 0, + 1 + ] + }, + "legend": { + "title": "% complete", + "format": ".0%" + } + }, + "tooltip": [ + { + "field": "date", + "type": "temporal", + "title": "Date" + }, + { + "field": "completed_count", + "type": "quantitative", + "title": "Completed Habits" + }, + { + "field": "total_habits", + "type": "quantitative", + "title": "Total Habits" + }, + { + "field": "completion_rate", + "type": "quantitative", + "title": "Completion Rate", + "format": ".1%" + } + ] + }, + "width": "container", + "height": 150 + } + } + } +} \ No newline at end of file