-
Notifications
You must be signed in to change notification settings - Fork 19
Add month view events calendar example with Vega data shaping #121
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
danmarshall
commented
Oct 18, 2025
@copilot QQ: If this repo contained an MCP server, would you be able to use it in your agent context?
@copilot QQ: If this repo contained an MCP server, would you be able to use it in your agent context?
Yes, I can use MCP servers that are available in my context. I already have access to several MCP servers including the github-mcp-server which I use to interact with GitHub repositories. If this repo contained an MCP server definition (e.g., in a configuration file or as a tool), I could potentially use it depending on how it's set up and what capabilities it exposes.
danmarshall
commented
Oct 18, 2025
@copilot nice start. can you add some tabulators so we can see whats going on. See the "movie picker basic" for an example of using multiple tabulators to inspect a flow,
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
@copilot nice start. can you add some tabulators so we can see whats going on. See the "movie picker basic" for an example of using multiple tabulators to inspect a flow,
Added tabulators to show the data transformation pipeline at each step (commit TBD). The calendar now includes 5 inspection steps showing:
- Raw events data (flat list)
- Events grouped by date (aggregated arrays)
- All days of month (sequence-generated)
- Days with events joined (lookup result)
- Padded calendar grid (final 42 cells)
Each step displays a tabulator table so you can see exactly how the data is shaped from a flat event list into the 7-column calendar structure.
danmarshall
commented
Oct 18, 2025
@copilot Error
Invalid interactive document
Please fix the following errors: - Tabulator element must have a dataSourceName property - Tabulator variableId eventsGrouped collides with existing variable name, the variable should be renamed or removed. - Tabulator element must have a dataSourceName property - Tabulator variableId allDaysOfMonth collides with existing variable name, the variable should be renamed or removed. - Tabulator element must have a dataSourceName property - Tabulator variableId daysWithEvents collides with existing variable name, the variable should be renamed or removed. - Tabulator element must have a dataSourceName property - Tabulator variableId paddedDays collides with existing variable name, the variable should be renamed or removed.
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
@copilot Error
Invalid interactive document
...
Fixed in commit that changed all tabulator elements from variableId to dataSourceName. The schema requires tabulators to use dataSourceName for their input data source, not variableId.
danmarshall
commented
Oct 18, 2025
@copilot can you provide a link to the fixed doc?
@copilot can you provide a link to the fixed doc?
Here's the link to the fixed calendar with working tabulators:
The document now has 5 tabulator views showing the data transformation pipeline from raw events to the final calendar grid.
danmarshall
commented
Oct 18, 2025
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
danmarshall
commented
Oct 18, 2025
@copilot Ok all NaNs are gone and all tables have stuff! Lets make a copy of this for a backup and then keep going. So the last table has numbers only but not our events. And we need to rewrite the treebark now
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
@copilot Ok all NaNs are gone and all tables have stuff! Lets make a copy of this for a backup and then keep going. So the last table has numbers only but not our events. And we need to rewrite the tr...
Created backup and updated the Treebark template to use calendarWeeks pivoted data. The template now properly iterates over week rows and displays day numbers in a 7-column grid structure.
Next: Need to add event rendering back to each cell with the formatted event data.
Commit: [PENDING]
danmarshall
commented
Oct 18, 2025
@copilot Link says commit pending
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
danmarshall
commented
Oct 18, 2025
@copilot heres example treebark for a simple calendar:
{
"table": {
"class": "calendar-table",
"$children": [
{
"thead": [
{
"tr": [
{
"th": "Sun"
},
{
"th": "Mon"
},
{
"th": "Tue"
},
{
"th": "Wed"
},
{
"th": "Thu"
},
{
"th": "Fri"
},
{
"th": "Sat"
}
]
}
]
},
{
"tbody": {
"$bind": ".",
"$children": [
{
"tr": [
{
"td": "{{sun}}"
},
{
"td": "{{mon}}"
},
{
"td": "{{tue}}"
},
{
"td": "{{wed}}"
},
{
"td": "{{thu}}"
},
{
"td": "{{fri}}"
},
{
"td": "{{sat}}"
}
]
}
]
}
}
]
}
}This example works for this data:
[
{
"rowId": 1,
"sun": "",
"mon": "",
"tue": 1,
"wed": 2,
"thu": 3,
"fri": 4,
"sat": 5
},
{
"rowId": 2,
"sun": 6,
"mon": 7,
"tue": 8,
"wed": 9,
"thu": 10,
"fri": 11,
"sat": 12
},
{
"rowId": 3,
"sun": 13,
"mon": 14,
"tue": 15,
"wed": 16,
"thu": 17,
"fri": 18,
"sat": 19
},
{
"rowId": 4,
"sun": 20,
"mon": 21,
"tue": 22,
"wed": 23,
"thu": 24,
"fri": 25,
"sat": 26
},
{
"rowId": 5,
"sun": 27,
"mon": 28,
"tue": 29,
"wed": 30,
"thu": 31,
"fri": "",
"sat": ""
}
]Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
danmarshall
commented
Oct 18, 2025
@copilot i think in step 3 we need to have the sequence start one week earlier and end one week later. Then add some formula columns for the day of week to get Sunday -Saturday.
...onth Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
@copilot i think in step 3 we need to have the sequence start one week earlier and end one week later. Then add some formula columns for the day of week to get Sunday -Saturday.
Modified Step 3 to start the sequence one week earlier (-7) and end one week later (39), generating ~45 days total. Added formulas for day-of-week names (sun-sat) and an isCurrentMonth flag to distinguish padding days.
Commit: bde9e5e
danmarshall
commented
Oct 18, 2025
@copilot Good. Step 3 has one invalid row that has a count property, but looks good otherwise and so does step 4: i can see the empty days and days with events and multiple events. Our current step 4b doesnt show these, so lets drop it and step 5, and create a new step 5 that pivots step 4 into days of week so that we have 7 columns.
danmarshall
commented
Oct 20, 2025
@copilot I added a simple working example: packages/web-deploy/json/month-calendar-core.idoc.json - perhaps you can start with this, and fold in your events with a lookup
Uh oh!
There was an error while loading. Please reload this page.
🔗 https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/[COMMIT_HASH]/packages/web-deploy/json/month-calendar.idoc.json
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.