-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
[Vega] Fix vega controls layout #130954
[Vega] Fix vega controls layout #130954
Conversation
Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall this works much better than before because we can achieve the correct state, but there are some problems when switching to 'fit-x'/'fit-y' value. After saving or resizing the window it works fine. Steps to reproduce:
- Use this code to create Vega vis:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"padding": {"bottom": 150},
"autosize": "none",
"height":3000,
"width":1000,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{ "name":"mypadding", "value": 0.05, "bind": {"input":"range", "min": 0, "max": 1, "step":0.05} },
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": {"signal":"mypadding"},
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
- Change
autosize
tofit-x
Also, switching from fit-x
to none
doesn't show scrollbar which is maybe even more troubling.
Thanks for the review @mbondyra - this was caused by setting the |
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, rechecked on Chrome and FF 🆗
* fix vega controls layout * fix the last case * adjust snapshot * make sure autoresize class is set correctly
* fix vega controls layout * fix the last case * adjust snapshot * make sure autoresize class is set correctly
This reverts commit 8e09cdc.
This reverts commit cd753c3.
* Revert "[Vega] Fix vega controls layout (elastic#130954)" This reverts commit 8e09cdc. * Revert "Revert "[Vega] Fix vega controls layout (elastic#130954)"" This reverts commit cd753c3. * fix vega problems * always make the vega view scroll * restrict maximum height
* Revert "[Vega] Fix vega controls layout (elastic#130954)" This reverts commit 8e09cdc. * Revert "Revert "[Vega] Fix vega controls layout (elastic#130954)"" This reverts commit cd753c3. * fix vega problems * always make the vega view scroll * restrict maximum height
* Revert "[Vega] Fix vega controls layout (elastic#130954)" This reverts commit 8e09cdc. * Revert "Revert "[Vega] Fix vega controls layout (elastic#130954)"" This reverts commit cd753c3. * fix vega problems * always make the vega view scroll * restrict maximum height
Fixes #130436 There were multiple problems with resizing/layouting in the presence of controls, I tried to fix them all
height: 100%
set which is not correct in case autosize isn't used - in this case it should be unbounded. This is done by the scss styles nowTest cases:
Controls should always be rendered at the specified position in the panel if there is enough space (autosize spec or smaller than available space non-autosize). In case there is not enough space (non-autosize larger than available space), the visualization should push out the controls and the whole thing should be scrollable.