feat: add filter and sort support for tooltips #9148
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Oct 22, 2023
|
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 #9152? If so, please reference the issue in the description. |
domoritz
changed the title
|
I think we need a more detailed API proposal in #9152. I added comments there. Let's put this pull request on hold until we resolved the API discussion. |
…fire a schema validation warning.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: vega/vega-tooltip#820
This along with vega/vega-tooltip#820 are to fix #9152
cc: @joelostblom @jakevdp @kanitw @domoritz @arvind @jheer