feat(xy): add onPointerUpdate debounce and trigger options (#1194)

adds `pointerUpdateDebounce` and `pointerUpdateTrigger` to `Settings` spec to control debounce timing and what value changes trigger the listener. Adds projected values to all `onPointerUpdate` events.

BREAKING CHANGE: the `PointerOverEvent` type now extends `ProjectedValues` and drops value. This effectively replaces value with `x`, `y`, `smVerticalValue` and `smHorizontalValue`.

integration/tests/interactions.test.ts

@@ -240,7 +240,7 @@ describe('Interactions', () => {
   describe('Tooltip sync', () => {
     it('show synced tooltips', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=true&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left',
+        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=true&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left&knob-pointer update debounce=0',
         { right: 200, top: 80 },
         {
           screenshotSelector: '#story-root',
@@ -250,7 +250,7 @@ describe('Interactions', () => {
 
     it('show synced crosshairs', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=false&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left',
+        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=false&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left&knob-pointer update debounce=0',
         { right: 200, top: 80 },
         {
           screenshotSelector: '#story-root',
@@ -260,7 +260,7 @@ describe('Interactions', () => {
 
     it('show synced extra values in legend', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-Series type_Top Chart=line&knob-enable external tooltip_Top Chart=true&knob-Series type_Bottom Chart=line&knob-enable external tooltip_Bottom Chart=false',
+        'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-Series type_Top Chart=line&knob-enable external tooltip_Top Chart=true&knob-Series type_Bottom Chart=line&knob-enable external tooltip_Bottom Chart=false&knob-pointer update debounce=0',
         { right: 200, top: 80 },
         {
           screenshotSelector: '#story-root',

package.json

@@ -72,7 +72,7 @@
     "redux": "^4.0.4",
     "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "ts-debounce": "^1.0.0",
+    "ts-debounce": "^3.0.0",
     "utility-types": "^3.10.0",
     "uuid": "^3.3.2"
   },

packages/charts/api/charts.api.md

@@ -626,7 +626,7 @@ export const DEFAULT_TOOLTIP_SNAP = true;
 export const DEFAULT_TOOLTIP_TYPE: "vertical";
 
 // @public (undocumented)
-export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption';
+export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption';
 
 // @public (undocumented)
 export const DEPTH_KEY = "depth";
@@ -1473,20 +1473,28 @@ export interface PointerOutEvent extends BasePointerEvent {
 }
 
 // @public
-export interface PointerOverEvent extends BasePointerEvent {
+export interface PointerOverEvent extends BasePointerEvent, ProjectedValues {
     // (undocumented)
     scale: ScaleContinuousType | ScaleOrdinalType;
     // (undocumented)
     type: typeof PointerEventType.Over;
     // @alpha
     unit?: string;
-    // (undocumented)
-    value: number | string | null;
 }
 
-// @public (undocumented)
+// @public
 export type PointerUpdateListener = (event: PointerEvent_2) => void;
 
+// @public
+export const PointerUpdateTrigger: Readonly<{
+    X: "x";
+    Y: "y";
+    Both: "both";
+}>;
+
+// @public (undocumented)
+export type PointerUpdateTrigger = $Values<typeof PointerUpdateTrigger>;
+
 // @public (undocumented)
 export const PointShape: Readonly<{
     Circle: "circle";
@@ -1798,9 +1806,10 @@ export interface SettingsSpec extends Spec, LegendSpec {
     orderOrdinalBinsBy?: OrderBy;
     // (undocumented)
     pointBuffer?: MarkBuffer;
+    pointerUpdateDebounce?: number;
+    pointerUpdateTrigger: PointerUpdateTrigger;
     // (undocumented)
     rendering: Rendering;
-    // (undocumented)
     resizeDebounce?: number;
     // (undocumented)
     rotation: Rotation;

packages/charts/package.json

@@ -50,7 +50,7 @@
     "redux": "^4.0.4",
     "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "ts-debounce": "^1.0.0",
+    "ts-debounce": "^3.0.0",
     "utility-types": "^3.10.0",
     "uuid": "^3.3.2"
   },

packages/charts/src/__mocks__/ts-debounce.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable unicorn/filename-case */
+
+import { debounce as debounceLodash } from 'lodash';
+
+// Need ability to flush debouncer in unit tests. Otherwise functions the same
+export const debounce = debounceLodash;
+
+/* eslint-enable unicorn/filename-case */