feat(xy): add onProjectionUpdate listener

elastic · Jun 9, 2021 · 818af54 · 818af54
1 parent f7fbc12
commit 818af54
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -1545,6 +1545,9 @@ export type ProjectedValues = {
 // @public
 export type ProjectionClickListener = (values: ProjectedValues) => void;
 
+// @public
+export type ProjectionUpdateListener = (values: ProjectedValues) => void;
+
 // @public
 export type Ratio = number;
 
@@ -1784,6 +1787,7 @@ export interface SettingsSpec extends Spec, LegendSpec {
     // (undocumented)
     onPointerUpdate?: PointerUpdateListener;
     onProjectionClick?: ProjectionClickListener;
+    onProjectionUpdate?: ProjectionUpdateListener;
     // (undocumented)
     onRenderChange?: RenderChangeListener;
     orderOrdinalBinsBy?: OrderBy;

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/on_pointer_move_caller.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/on_pointer_move_caller.ts
@@ -31,6 +31,7 @@ import { computeSeriesGeometriesSelector } from './compute_series_geometries';
 import { getGeometriesIndexKeysSelector } from './get_geometries_index_keys';
 import { getOrientedProjectedPointerPositionSelector } from './get_oriented_projected_pointer_position';
 import { PointerPosition } from './get_projected_pointer_position';
+import { getProjectedScaledValues } from './get_projected_scaled_values';
 
 const getPointerEventSelector = createCachedSelector(
   [
@@ -49,7 +50,7 @@ function getPointerEvent(
   xScale: Scale | undefined,
   geometriesIndexKeys: any[],
 ): PointerEvent {
-  // update che cursorBandPosition based on chart configuration
+  // update the cursorBandPosition based on chart configuration
   if (!xScale) {
     return {
       chartId,
@@ -79,7 +80,11 @@ function getPointerEvent(
   };
 }
 
-function hasPointerEventChanged(prevPointerEvent: PointerEvent, nextPointerEvent: PointerEvent | null) {
+function hasPointerEventChanged(
+  prevPointerEvent: PointerEvent,
+  nextPointerEvent: PointerEvent | null,
+  compareValue: boolean,
+) {
   if (nextPointerEvent && prevPointerEvent.type !== nextPointerEvent.type) {
     return true;
   }
@@ -95,7 +100,8 @@ function hasPointerEventChanged(prevPointerEvent: PointerEvent, nextPointerEvent
     nextPointerEvent &&
     prevPointerEvent.type === PointerEventType.Over &&
     nextPointerEvent.type === PointerEventType.Over &&
-    (prevPointerEvent.value !== nextPointerEvent.value ||
+    (!compareValue ||
+      prevPointerEvent.value !== nextPointerEvent.value ||
       prevPointerEvent.scale !== nextPointerEvent.scale ||
       prevPointerEvent.unit !== nextPointerEvent.unit)
   ) {
@@ -106,13 +112,19 @@ function hasPointerEventChanged(prevPointerEvent: PointerEvent, nextPointerEvent
 
 /** @internal */
 export function createOnPointerMoveCaller(): (state: GlobalChartState) => void {
+  let yValuesString: string = '';
   let prevPointerEvent: PointerEvent | null = null;
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartType.XYAxis) {
       selector = createCachedSelector(
-        [getSettingsSpecSelector, getPointerEventSelector, getChartIdSelector],
-        (settings: SettingsSpec, nextPointerEvent: PointerEvent, chartId: string): void => {
+        [getSettingsSpecSelector, getPointerEventSelector, getChartIdSelector, getProjectedScaledValues],
+        (
+          { onPointerUpdate, onProjectionUpdate }: SettingsSpec,
+          nextPointerEvent: PointerEvent,
+          chartId: string,
+          values,
+        ): void => {
           if (prevPointerEvent === null) {
             prevPointerEvent = {
               chartId,
@@ -125,8 +137,14 @@ export function createOnPointerMoveCaller(): (state: GlobalChartState) => void {
           // we have to update the prevPointerEvents before possibly calling the onPointerUpdate
           // to avoid a recursive loop of calls caused by the impossibility to update the prevPointerEvent
           prevPointerEvent = nextPointerEvent;
-          if (settings && settings.onPointerUpdate && hasPointerEventChanged(tempPrev, nextPointerEvent)) {
-            settings.onPointerUpdate(nextPointerEvent);
+          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);
           }
         },
       )({

diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx
@@ -131,6 +131,11 @@ export type ProjectedValues = {
  * The listener type for click on the projection area.
  */
 export type ProjectionClickListener = (values: ProjectedValues) => void;
+/**
+ * @public
+ * The listener type for mouse move on the projection area.
+ */
+export type ProjectionUpdateListener = (values: ProjectedValues) => void;
 
 /** @public */
 export type ElementClickListener = (
@@ -496,6 +501,12 @@ export interface SettingsSpec extends Spec, LegendSpec {
    * X axis point, and an array of Y values for every groupId used in the chart.
    */
   onProjectionClick?: ProjectionClickListener;
+  /**
+   * Attach a listener for mouse move on the projection area.
+   * The listener will be called with the current x value snapped to the closest
+   * X axis point, and an array of Y values for every groupId used in the chart.
+   */
+  onProjectionUpdate?: ProjectionUpdateListener;
   onElementClick?: ElementClickListener;
   onElementOver?: ElementOverListener;
   onElementOut?: BasicListener;

diff --git a/stories/interactions/16_cursor_update_action.tsx b/stories/interactions/16_cursor_update_action.tsx
@@ -96,6 +96,7 @@ export const Example = () => {
           showLegend
           showLegendExtra
           onPointerUpdate={pointerUpdate}
+          onProjectionUpdate={action('onProjectionUpdate')}
           externalPointerEvents={{
             tooltip: { visible: topVisible, placement: topPlacement },
           }}