-
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
[XY] [Lens] Adds opacity slider #100453
[XY] [Lens] Adds opacity slider #100453
Conversation
Pinging @elastic/kibana-app (Team:KibanaApp) |
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.
This is great, thanks for the addition! Just one minor nit-pick to make the UI smoother
value, | ||
isFillOpacityEnabled = true, | ||
}) => { | ||
return isFillOpacityEnabled ? ( |
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.
Could we use x-pack/plugins/lens/public/shared_components/debounced_value.ts
here? It's a flexible hook to debounce things like this so the chart doesn't re-render too often.
See
const { inputValue, handleInputChange } = useDebouncedValue({ value, onChange }); |
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.
Nice! Sure
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.
Tested and works just fine. Thank you so much!
💚 Build SucceededMetrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
* [XY] Add opacity slider and dots size slider * [Lens] Adds fill opacity slider * Make the new sliders to appear fullwidth * Change property name and fix unit tests * Add a comment * useDebouncedValue hook Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* [XY] Add opacity slider and dots size slider * [Lens] Adds fill opacity slider * Make the new sliders to appear fullwidth * Change property name and fix unit tests * Add a comment * useDebouncedValue hook Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
…deprecation-ilm-policy * 'master' of github.com:elastic/kibana: (101 commits) [ftr] migrate "docTable" service to FtrService class (elastic#100595) [ftr] migrate "listingTable" service to FtrService class (elastic#100606) Fixed comparing real value with formatted according to mode. (elastic#100456) [ftr] migrate "dataGrid" service to FtrService class (elastic#100593) [ftr] migrate "fieldEditor" to FtrService class (elastic#100597) [ftr] migrate "filterBar" service to FtrService class (elastic#100601) [triggersActionsUi] Reduce page load bundle to under 100kB (elastic#97770) [build] Clean jest configs (elastic#100594) refact(NA): remove extra pkg_npm target and add specific target folders for @kbn/analytics on Bazel (elastic#100569) Update dependency @elastic/charts to v29.2.0 (elastic#100587) [Maps] convert LayerPanel to typescript (elastic#100481) [Upgrade Assistant] Address copy feedback (elastic#99632) Open/Closed filter for observability alerts page (elastic#99217) One liner to expose the EQL query for debugging for users (elastic#100565) [KibanaPageLayout] Solution Nav specific styles & props (elastic#100089) [ftr] implement FtrService classes and migrate common services (elastic#99546) [XY] [Lens] Adds opacity slider (elastic#100453) [Reporting] ILM policy for managing reporting indices (elastic#100130) [Reporting] ILM policy for managing reporting indices (elastic#100130) [DOCS] Remove redundant maps attribute (elastic#100426) ... # Conflicts: # x-pack/plugins/reporting/server/lib/store/report_ilm_policy.ts # x-pack/plugins/reporting/server/lib/store/store.test.ts # x-pack/plugins/reporting/server/lib/store/store.ts
* [XY] Add opacity slider and dots size slider * [Lens] Adds fill opacity slider * Make the new sliders to appear fullwidth * Change property name and fix unit tests * Add a comment * useDebouncedValue hook Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* [XY] Add opacity slider and dots size slider * [Lens] Adds fill opacity slider * Make the new sliders to appear fullwidth * Change property name and fix unit tests * Add a comment * useDebouncedValue hook Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Summary
Closes #97226
Specifically:
Lens
Added a slider on the visual options menu. The slider is rendered only for area-specific charts
XY axis
Added a slider to control the opacity of the fill color. The slider is rendered only for area charts
Moreover, as there are users complaining about the dots that appear on the area charts I added two extra options:
(the dots size slider is disabled if the user has chosen to hide the dots)
Checklist
Delete any items that are not applicable to this PR.