Skip to content

Commit

Permalink
add timeslider support for date fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@spencerwahl
spencerwahl committed Jan 17, 2025
1 parent d8462a7 commit 7ad199c
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 90 deletions.
24 changes: 24 additions & 0 deletions StoryRampSchema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,11 @@
"type": "string",
"description": "The layer attribute that should be queried based on the slider values."
},
"arcgisDate": {
"type": "boolean",
"description": "Whether the slider value should be converted into an arcGIS date/time format for the query",
"default": "false"
},
"layers": {
"type": "array",
"description": "An optional array of layer IDs for the slider to affect.",
Expand Down Expand Up @@ -467,6 +472,9 @@
"type": "object",
"description": "A formatter for use in the timeslider. Used to alias slider values into user readable versions.",
"oneOf": [
{
"$ref": "#/$defs/timeSliderDateFormatter"
},
{
"$ref": "#/$defs/timeSliderValuesFormatter"
},
Expand All @@ -476,6 +484,22 @@
]
},

"timeSliderDateFormatter": {
"type": "object",
"description": "A formatter that uses slider values as JS timestamps and converts them to readable formats",
"properties": {
"mode": {
"type": "string",
"enum": ["date"]
},
"format": {
"type": "string",
"description": "A format string describing the output of the formatter. 'Y' - year, 'M' - month, 'D' - day, 'h' - hour, 'm' - minute, 's' - second. Number of the same letter in a row is the length of the output (YY = 05, YYYY = 2025)."
}
},
"required": ["mode", "format"]
},

"timeSliderValuesFormatter": {
"type": "object",
"description": "A formatter which maps slider values to the element at that index in the 'values' array.",
Expand Down
31 changes: 25 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"nouislider": "^15.5.0",
"ramp-pcar": "^4.10.2",
"scrollama": "^3.2.0",
"throttle-debounce": "^5.0.2",
"vue": "^3.4.37",
"vue-class-component": "^8.0.0-rc.1",
"vue-fullscreen": "^3.1.1",
Expand All @@ -47,8 +48,9 @@
},
"devDependencies": {
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.9.3",
"@types/markdown-it": "^12.0.1",
"@types/node": "^22.9.3",
"@types/throttle-debounce": "^5.0.2",
"@vitejs/plugin-vue": "^5.1.2",
"@vue/eslint-config-prettier": "^10.1.0",
"@vue/eslint-config-typescript": "^14.1.3",
Expand Down
65 changes: 45 additions & 20 deletions public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,14 @@
"title": "Interactive Image test",
"defaultImage": {
"id": "default",
"src":"00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg"
"src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg"
},
"images": [{
"id": "image-1",
"src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg"
}],
"images": [
{
"id": "image-1",
"src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg"
}
],
"panels": [
{
"id": "panel-1",
Expand Down Expand Up @@ -228,7 +230,7 @@
{
"type": "chart",
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json",
"caption": "caption for a chart"
"caption": "caption for a chart"
},
{
"type": "chart",
Expand All @@ -237,7 +239,7 @@
"title": "Selenium releases and disposals in 2019",
"subtitle": "",
"type": "pie"
},
},
"caption": "caption for another chart"
}
]
Expand Down Expand Up @@ -352,7 +354,6 @@
{
"title": "In-situ extraction",
"backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",

"panel": [
{
"title": "In-situ extraction",
Expand Down Expand Up @@ -494,11 +495,34 @@
{
"config": "00000000-0000-0000-0000-000000000000/ramp-config/TailingsfromMiningFacilities2010to2019(timeslider).json",
"timeSlider": {
"range": [2010, 2019],
"start": [2010, 2010],
"range": [
1650412800000,
1704067200000
],
"start": [
1650412800000,
1650412800000
],
"formatters": [
{
"mode": "date",
"format": "MM DD, YYYY hh:mm UTC"
},
{
"mode": "date",
"pips": true,
"format": "YY-M-DD"
}
],
"animation": {
"playMode": "append",
"interval": 500
"playMode": "append"
},
"sliderConfig": {
"step": 604800000,
"pips": {
"mode": "range",
"density": 4
}
},
"attribute": "Reporting_Year___Année"
},
Expand Down Expand Up @@ -550,7 +574,7 @@
"items": [
{
"type": "chart",
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json",
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json",
"caption": "Caption for first chart"
},
{
Expand All @@ -561,7 +585,7 @@
"xAxisLabel": "Quantity (tonnes)",
"subtitle": "",
"type": "bar"
},
},
"caption": "caption for second chart"
},
{
Expand All @@ -571,7 +595,7 @@
"title": "Figure 1: Percentage of total ethylene glycol releases for 2019, by sector",
"subtitle": "",
"type": "pie"
},
},
"caption": "caption for third chart"
}
]
Expand Down Expand Up @@ -628,21 +652,20 @@
}
],
"includeInToc": false
},
},
{
"title": "another chart slide",
"backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
"panel": [
{
"type": "chart",
"src": "00000000-0000-0000-0000-000000000000/charts/en/hybridChartConfig.json",
"caption": "Caption for chart"
"caption": "Caption for chart"
},
{
"src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
"type": "image"
}

]
}
],
Expand Down Expand Up @@ -728,7 +751,9 @@
],
"tocOrientation": "horizontal",
"returnTop": false,
"stylesheets": ["00000000-0000-0000-0000-000000000000/styles/main.css"],
"stylesheets": [
"00000000-0000-0000-0000-000000000000/styles/main.css"
],
"contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
"contextLabel": "Explore National Pollutant Release Inventory data",
"lang": "en",
Expand All @@ -744,4 +769,4 @@
}
],
"dateModified": "2024-09-09"
}
}
Loading

0 comments on commit 7ad199c

Please sign in to comment.