Extending Deneb/Vega-Lite Toggle Switch from 2-State to 3-State (Working Day / Non-Working Day / All

y5famfnatudu Hi! I suggest you this workaround that I had implemented a time:

Setup the cycles between 3 filter modes with this code:

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"name": "dataset"},

"params": [
{
"name": "viewMode",
"value": 2,
"select": {"type": "point", "on": "click"},
"bind": {
"input": "none"
},
"update": "viewMode === 2 ? 0 : viewMode + 1"
}
],

"transform": [
{
"filter": "viewMode == 2 ? true : datum.IsWorkingDay == viewMode"
}
],

"mark": "bar",
"encoding": {
"x": {"field": "Category", "type": "nominal"},
"y": {"aggregate": "count"}
}
}

It requires a click target in your chart.

Otherwise you can use a Dropdown and a bound input param:

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"name": "dataset"},
"params": [
{
"name": "dayFilter",
"value": "All",
"bind": {
"input": "select",
"options": ["Working", "Non-working", "All"],
"labels": ["Working Days", "Non-working Days", "All Days"]
}
}
],
"transform": [
{
"filter": "dayFilter == 'All' ? true : (dayFilter == 'Working' ? datum.IsWorkingDay == 1 : datum.IsWorkingDay == 0)"
}
],
"mark": "bar",
"encoding": {
"x": {"field": "Category", "type": "nominal"},
"y": {"aggregate": "count"}
}
}

BBF

💡 Did I answer your question? Mark my post as a solution!

👍 Kudos are appreciated

🔥 Proud to be a Super User!