vega
feat: add filter and sort support for tooltips
Parameter signatures:
Filter - added as a parameter for each tooltip object in the tooltip array:
{"field": "type1", "type": "quantitative", "**filter**": {"operator": ">", "literal": 0}
Sort - added as a parameter for encoding:
"encoding": { "opacity": { "condition": { "empty": false, "param": "param_46", "value": 0.2 }, "value": 0 }, "size": { "value": 4 }, "tooltip": [ { "field": "Date", "type": "nominal" }, { "field": "type1", "type": "quantitative" }, { "field": "type2", "type": "quantitative" }, { "field": "type3", "type": "quantitative" }, { "field": "type4", "type": "quantitative" }, { "field": "type5", "type": "quantitative" }, { "field": "type6", "type": "quantitative" }, { "field": "type7", "type": "quantitative" }, { "field": "type8", "type": "quantitative" } ], "**sort_tooltip**": {"value": "descending"}, "x": { "field": "Date", "title": null, "type": "ordinal" } }, "mark": { "type": "rule" }, "params": [ { "name": "param_46", "select": { "clear": "mouseout", "fields": [ "Date" ], "nearest": true, "on": "mouseover", "type": "point" } } ]
Original vega-lite specification:
{
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 300
}
},
"layer": [{
"data": {
"values": [{
"Date": "2021-06-29",
"Type": "type7",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type4",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type5",
"Value": 10687
},
{
"Date": "2021-06-29",
"Type": "type1",
"Value": 11501
},
{
"Date": "2021-06-29",
"Type": "type3",
"Value": 0
},
{
"Date": "2021-06-22",
"Type": "type7",
"Value": 5735
},
{
"Date": "2021-06-22",
"Type": "type8",
"Value": 7486
},
{
"Date": "2021-06-22",
"Type": "type1",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type4",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type6",
"Value": 8917
},
{
"Date": "2021-06-22",
"Type": "type2",
"Value": 9856
}
]
},
"encoding": {
"color": {
"field": "Type",
"type": "nominal"
},
"order": {
"field": "Value",
"sort": "ascending",
"type": "quantitative"
},
"x": {
"field": "Date",
"type": "ordinal"
},
"y": {
"field": "Value",
"type": "quantitative"
}
},
"mark": {
"type": "bar"
}
},
{
"data": {
"values": [{
"Date": "2021-06-22",
"type1": 8283,
"type2": 9856,
"type3": 0,
"type4": 8283,
"type5": 0,
"type6": 8917,
"type7": 5735,
"type8": 7486
},
{
"Date": "2021-06-29",
"type1": 11501,
"type2": 0,
"type3": 0,
"type4": 0,
"type5": 10687,
"type6": 0,
"type7": 0,
"type8": 0
}
]
},
"encoding": {
"opacity": {
"condition": {
"empty": false,
"param": "param_46",
"value": 0.2
},
"value": 0
},
"size": {
"value": 4
},
"tooltip": [{
"field": "Date",
"type": "nominal"
}, {
"field": "type1",
"type": "quantitative"
}, {
"field": "type2",
"type": "quantitative"
}, {
"field": "type3",
"type": "quantitative"
}, {
"field": "type4",
"type": "quantitative"
}, {
"field": "type5",
"type": "quantitative"
}, {
"field": "type6",
"type": "quantitative"
}, {
"field": "type7",
"type": "quantitative"
}, {
"field": "type8",
"type": "quantitative"
}],
"x": {
"field": "Date",
"title": null,
"type": "ordinal"
}
},
"mark": {
"type": "rule"
},
"params": [{
"name": "param_46",
"select": {
"clear": "mouseout",
"fields": ["Date"],
"nearest": true,
"on": "mouseover",
"type": "point"
}
}]
}
]
}
With filter:
{
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 300
}
},
"layer": [{
"data": {
"values": [{
"Date": "2021-06-29",
"Type": "type7",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type4",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type5",
"Value": 10687
},
{
"Date": "2021-06-29",
"Type": "type1",
"Value": 11501
},
{
"Date": "2021-06-29",
"Type": "type3",
"Value": 0
},
{
"Date": "2021-06-22",
"Type": "type7",
"Value": 5735
},
{
"Date": "2021-06-22",
"Type": "type8",
"Value": 7486
},
{
"Date": "2021-06-22",
"Type": "type1",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type4",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type6",
"Value": 8917
},
{
"Date": "2021-06-22",
"Type": "type2",
"Value": 9856
}
]
},
"encoding": {
"color": {
"field": "Type",
"type": "nominal"
},
"order": {
"field": "Value",
"sort": "ascending",
"type": "quantitative"
},
"x": {
"field": "Date",
"type": "ordinal"
},
"y": {
"field": "Value",
"type": "quantitative"
}
},
"mark": {
"type": "bar"
}
},
{
"data": {
"values": [{
"Date": "2021-06-22",
"type1": 8283,
"type2": 9856,
"type3": 0,
"type4": 8283,
"type5": 0,
"type6": 8917,
"type7": 5735,
"type8": 7486
},
{
"Date": "2021-06-29",
"type1": 11501,
"type2": 0,
"type3": 0,
"type4": 0,
"type5": 10687,
"type6": 0,
"type7": 0,
"type8": 0
}
]
},
"encoding": {
"opacity": {
"condition": {
"empty": false,
"param": "param_46",
"value": 0.2
},
"value": 0
},
"size": {
"value": 4
},
"tooltip": [{
"field": "Date",
"type": "nominal"
}, {
"field": "type1",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type2",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type3",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type4",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type5",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type6",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type7",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type8",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}],
"x": {
"field": "Date",
"title": null,
"type": "ordinal"
}
},
"mark": {
"type": "rule"
},
"params": [{
"name": "param_46",
"select": {
"clear": "mouseout",
"fields": ["Date"],
"nearest": true,
"on": "mouseover",
"type": "point"
}
}]
}
]
}
With sort:
{
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 300
}
},
"layer": [{
"data": {
"values": [{
"Date": "2021-06-29",
"Type": "type7",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type4",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type5",
"Value": 10687
},
{
"Date": "2021-06-29",
"Type": "type1",
"Value": 11501
},
{
"Date": "2021-06-29",
"Type": "type3",
"Value": 0
},
{
"Date": "2021-06-22",
"Type": "type7",
"Value": 5735
},
{
"Date": "2021-06-22",
"Type": "type8",
"Value": 7486
},
{
"Date": "2021-06-22",
"Type": "type1",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type4",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type6",
"Value": 8917
},
{
"Date": "2021-06-22",
"Type": "type2",
"Value": 9856
}
]
},
"encoding": {
"color": {
"field": "Type",
"type": "nominal"
},
"order": {
"field": "Value",
"sort": "ascending",
"type": "quantitative"
},
"x": {
"field": "Date",
"type": "ordinal"
},
"y": {
"field": "Value",
"type": "quantitative"
}
},
"mark": {
"type": "bar"
}
},
{
"data": {
"values": [{
"Date": "2021-06-22",
"type1": 8283,
"type2": 9856,
"type3": 0,
"type4": 8283,
"type5": 0,
"type6": 8917,
"type7": 5735,
"type8": 7486
},
{
"Date": "2021-06-29",
"type1": 11501,
"type2": 0,
"type3": 0,
"type4": 0,
"type5": 10687,
"type6": 0,
"type7": 0,
"type8": 0
}
]
},
"encoding": {
"opacity": {
"condition": {
"empty": false,
"param": "param_46",
"value": 0.2
},
"value": 0
},
"size": {
"value": 4
},
"tooltip": [{
"field": "Date",
"type": "nominal"
}, {
"field": "type1",
"type": "quantitative"
}, {
"field": "type2",
"type": "quantitative"
}, {
"field": "type3",
"type": "quantitative"
}, {
"field": "type4",
"type": "quantitative"
}, {
"field": "type5",
"type": "quantitative"
}, {
"field": "type6",
"type": "quantitative"
}, {
"field": "type7",
"type": "quantitative"
}, {
"field": "type8",
"type": "quantitative"
}],
"**sort_tooltip**": {
"value": "ascending"
},
"x": {
"field": "Date",
"title": null,
"type": "ordinal"
}
},
"mark": {
"type": "rule"
},
"params": [{
"name": "param_46",
"select": {
"clear": "mouseout",
"fields": ["Date"],
"nearest": true,
"on": "mouseover",
"type": "point"
}
}]
}
]
}
With filter & sort:
{
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 300
}
},
"layer": [{
"data": {
"values": [{
"Date": "2021-06-29",
"Type": "type7",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type4",
"Value": 0
},
{
"Date": "2021-06-29",
"Type": "type5",
"Value": 10687
},
{
"Date": "2021-06-29",
"Type": "type1",
"Value": 11501
},
{
"Date": "2021-06-29",
"Type": "type3",
"Value": 0
},
{
"Date": "2021-06-22",
"Type": "type7",
"Value": 5735
},
{
"Date": "2021-06-22",
"Type": "type8",
"Value": 7486
},
{
"Date": "2021-06-22",
"Type": "type1",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type4",
"Value": 8283
},
{
"Date": "2021-06-22",
"Type": "type6",
"Value": 8917
},
{
"Date": "2021-06-22",
"Type": "type2",
"Value": 9856
}
]
},
"encoding": {
"color": {
"field": "Type",
"type": "nominal"
},
"order": {
"field": "Value",
"sort": "ascending",
"type": "quantitative"
},
"x": {
"field": "Date",
"type": "ordinal"
},
"y": {
"field": "Value",
"type": "quantitative"
}
},
"mark": {
"type": "bar"
}
},
{
"data": {
"values": [{
"Date": "2021-06-22",
"type1": 8283,
"type2": 9856,
"type3": 0,
"type4": 8283,
"type5": 0,
"type6": 8917,
"type7": 5735,
"type8": 7486
},
{
"Date": "2021-06-29",
"type1": 11501,
"type2": 0,
"type3": 0,
"type4": 0,
"type5": 10687,
"type6": 0,
"type7": 0,
"type8": 0
}
]
},
"encoding": {
"opacity": {
"condition": {
"empty": false,
"param": "param_46",
"value": 0.2
},
"value": 0
},
"size": {
"value": 4
},
"tooltip": [{
"field": "Date",
"type": "nominal"
}, {
"field": "type1",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type2",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type3",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type4",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type5",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type6",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type7",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}, {
"field": "type8",
"type": "quantitative",
"**filter**": {
"operator": ">",
"literal": 0
}
}],
"**sort_tooltip**": {
"value": "descending"
},
"x": {
"field": "Date",
"title": null,
"type": "ordinal"
}
},
"mark": {
"type": "rule"
},
"params": [{
"name": "param_46",
"select": {
"clear": "mouseout",
"fields": ["Date"],
"nearest": true,
"on": "mouseover",
"type": "point"
}
}]
}
]
}
To make the new parameters robust, both filter & sort_tooltip can only be some enum values.
filter.operator: one of '==', '!=', '<', '<=', '>', '>='
filter.literal: one of type string, number or boolean.
"filter": {"operator": "><", "literal": 0}:
sort_tooltip.value: 'ascending' or 'descending' only:
"sort_tooltip": {"value": "whatever"}
PR to vega-tooltip: https://github.com/vega/vega-tooltip/pull/820
This along with https://github.com/vega/vega-tooltip/pull/820 are to fix https://github.com/vega/vega-lite/issues/9152
cc: @joelostblom @jakevdp @kanitw @domoritz @arvind @jheer
Thanks for the pull request. Can you explain the reasoning for his change and the proposed API changes in the description of the pull request? Please also highlight the changes in the specs and format them to be readable. I don't think I can quite follow the suggestion here.
Once we have reviewed the API proposal, please make sure the tests and CI runs pass.
Is this supposed to fix https://github.com/vega/vega-lite/issues/9152? If so, please reference the issue in the description.
I think we need a more detailed API proposal in https://github.com/vega/vega-lite/issues/9152. I added comments there. Let's put this pull request on hold until we resolved the API discussion.