-
Notifications
You must be signed in to change notification settings - Fork 122
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
feat(xy): add onPointerUpdate debounce and trigger options #1194
Conversation
src/chart_types/xy_chart/state/selectors/on_pointer_move_caller.ts
Outdated
Show resolved
Hide resolved
34d9a3b
to
818af54
Compare
if (onPointerUpdate && hasPointerEventChanged(tempPrev, nextPointerEvent, true)) | ||
onPointerUpdate(nextPointerEvent); | ||
|
||
if (onProjectionUpdate && values && hasPointerEventChanged(tempPrev, nextPointerEvent, false)) { | ||
const oldYValues = yValuesString; | ||
yValuesString = values.y.map(({ value }) => value).join(','); | ||
|
||
if (oldYValues !== yValuesString) onProjectionUpdate(values); |
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.
@markov00 I'm not sure about this logic. I want to only run this listener when the y values change but the PointerEvent
only includes the x values. Should I add the yValues
as optional to the PointerEvent
or do you think this is ok?
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.
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.
Yep, I think we could just reuse the onPointerUpdate?: PointerUpdateListener;
You can merge the definitions of PointerOverEvent
and ProjectedValues
to have a global and more intuitive pointer position like:
interface PointerOverEvent extends BasePointerEvent, ProjectedValues{
type: typeof PointerEventType.Over;
scale: ScaleContinuousType | ScaleOrdinalType;
/**
* Unit for event (i.e. `time`, `feet`, `count`, etc.) Not currently used/implemented
* @alpha
*/
unit?: string;
// value removed in favour of ProjectedValues x
};
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.
Ok thanks, Do you think I should debouce the listener? I'm not really sure how given how the listener is called in the selector.
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.
I haven't used a debounce for the current onPointerUpdate used to sync charts together.
we can try but adding a way to disable/configure the debounce time
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.
let default to 16ms debounce to have 1 event per frame max at 60FPS
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.
See 232f929 for updates the pointer logic. I'll add the debounce in another commit.
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.
Ok debouncing changes are done here 5f085b5
return { pos: relativePos, value: panelScale.domain[relativePosIndex] ?? null }; | ||
} | ||
return { | ||
pos: posWOInitialOuterPadding - panelScale.step * (numOfDomainSteps - 1), | ||
value: panelScale.domain[numOfDomainSteps - 1], | ||
value: panelScale.domain[numOfDomainSteps - 1] ?? null, |
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.
These values could be undefined which does not match the expected PrimativeType
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.
I don't see much difference between the onPointerUpdate
and the onProjectionUpdate
if not the logic of checking the y
values.
I think we can easily get rid of the onProjectionUpdate
, keeping only the onPointerUpdate
.
We can probably improve the code if the user can specify what to listen to:
- changes to the x position
- changes to the y position
- both
In this way, if the users are interested in the x movements, they receive updates only when the x position changed (in particular useful when using large bars where the x only change between bars and large movements). If someone is just interested in the Y space, then they can listen just to y changes.
Finally they can listen for both changes and use the debounce to limit the amount of data received
# [31.0.0](v30.2.0...v31.0.0) (2021-06-29) ### Bug Fixes * **xy:** render gridlines behind axis ([#1204](#1204)) ([38ebe2d](38ebe2d)), closes [#1203](#1203) * memory leak related to re-reselect cache ([#1201](#1201)) ([02025cf](02025cf)) * **partition:** getLegendItemsExtra no longer assumes a singleton ([#1199](#1199)) ([100145b](100145b)) ### Features * **annotations:** option to render rect annotations outside chart ([#1207](#1207)) ([4eda382](4eda382)) * **heatmap:** enable brushing on categorical charts ([#1212](#1212)) ([10c3493](10c3493)), closes [#1170](#1170) [#1171](#1171) * **xy:** add onPointerUpdate debounce and trigger options ([#1194](#1194)) ([a9a9b25](a9a9b25)) ### BREAKING CHANGES * **xy:** the `PointerOverEvent` type now extends `ProjectedValues` and drops value. This effectively replaces value with `x`, `y`, `smVerticalValue` and `smHorizontalValue`.
🎉 This PR is included in version 31.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [31.0.0](elastic/elastic-charts@v30.2.0...v31.0.0) (2021-06-29) ### Bug Fixes * **xy:** render gridlines behind axis ([opensearch-project#1204](elastic/elastic-charts#1204)) ([bf9ccbd](elastic/elastic-charts@bf9ccbd)), closes [#1203](elastic/elastic-charts#1203) * memory leak related to re-reselect cache ([opensearch-project#1201](elastic/elastic-charts#1201)) ([8cb6876](elastic/elastic-charts@8cb6876)) * **partition:** getLegendItemsExtra no longer assumes a singleton ([opensearch-project#1199](elastic/elastic-charts#1199)) ([ecbcc1e](elastic/elastic-charts@ecbcc1e)) ### Features * **annotations:** option to render rect annotations outside chart ([opensearch-project#1207](elastic/elastic-charts#1207)) ([ddffc00](elastic/elastic-charts@ddffc00)) * **heatmap:** enable brushing on categorical charts ([opensearch-project#1212](elastic/elastic-charts#1212)) ([5c426b3](elastic/elastic-charts@5c426b3)), closes [opensearch-project#1170](elastic/elastic-charts#1170) [opensearch-project#1171](elastic/elastic-charts#1171) * **xy:** add onPointerUpdate debounce and trigger options ([opensearch-project#1194](elastic/elastic-charts#1194)) ([aa068f6](elastic/elastic-charts@aa068f6)) ### BREAKING CHANGES * **xy:** the `PointerOverEvent` type now extends `ProjectedValues` and drops value. This effectively replaces value with `x`, `y`, `smVerticalValue` and `smHorizontalValue`.
Summary
Adds
onProjectionUpdate
listener toSettings
spec to listen for changes to projected cursor values.BREAKING CHANGE
PointerOverEvent
type now extendsProjectedValues
and dropsvalue
. This effectively replacesvalue
withx
,y
,smVerticalValue
andsmHorizontalValue
Issues
Adds feature desired by logs to listen to cursor updated with projected values
closes #906
Checklist
src/index.ts
(and stories only import from../src
except for test data & storybook)