feat: add projection click listener

[markov00]

Summary

This PR adds a projection click listener called onProjectionListener and available in the <Settings /> component with the following characteristics:

• it will fire every time the user clicks on the projection area (everything within the axes)
• the listener is called with an object that contains the nearest X and Ys values. These values are not screen coordinates but the real data domain values inverted computed inverting the x and y scales.
• we don't actually prevent firing the onProjectionListener if an onElementClick listener is configured and the user clicks directly on a bar/point. Both events could fire one after the other. We prevent the onProjectionListener from firing an event if a onElementClick listener is available and it has fired a click event

The type signature of this new listener is the following:

/**
 * @public
 * The listener type for click on the projection area.
 */
export type ProjectionClickListener = (values: ProjectedValues) => void;


/**
 * @public
 * An object that contains the scaled mouse position based on
 * the current chart configuration.
 */
export type ProjectedValues = {
  /**
   * The independent variable of the chart
   */
  x: PrimitiveValue;
  /**
   * The set of dependent variable, each one with its own groupId
   */
  y: Array<{ value: PrimitiveValue; groupId: string }>;
  /**
   * The categorical value used for the vertical placement of the chart
   * in a small multiple layout
   */
  smVerticalValue: PrimitiveValue;
  /**
   * The categorical value used for the horizontal placement of the chart
   * in a small multiple layout
   */
  smHorizontalValue: PrimitiveValue;
};

You can enable it through the <Settings onProjectionListener={yourListenerImplementationHere}/>

The Interactions -> Bar clicks story in storybook is updated to fire with this listener

close #846

Checklist

Delete any items that are not applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios

[codecov-io]

Codecov Report

Merging #913 (5d203f2) into master (860224e) will increase coverage by 0.08%.
The diff coverage is 63.04%.

@@            Coverage Diff             @@
##           master     #913      +/-   ##
==========================================
+ Coverage   70.11%   70.20%   +0.08%     
==========================================
  Files         340      357      +17     
  Lines       10979    10645     -334     
  Branches     2382     2163     -219     
==========================================
- Hits         7698     7473     -225     
+ Misses       3267     3089     -178     
- Partials       14       83      +69     

Flag	Coverage Δ
unittests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/specs/settings.tsx	86.66% <ø> (-0.44%)	⬇️
..._types/xy_chart/state/selectors/on_click_caller.ts	57.57% <39.13%> (ø)
...pes/xy_chart/state/selectors/get_cursor_pointer.ts	68.18% <50.00%> (-5.51%)	⬇️
...art/state/selectors/get_projected_scaled_values.ts	93.75% <93.75%> (ø)
src/chart_types/xy_chart/state/chart_state.tsx	100.00% <100.00%> (ø)
src/utils/dimensions.ts	71.42% <0.00%> (-28.58%)	⬇️
src/chart_types/xy_chart/utils/panel_utils.ts	72.72% <0.00%> (-19.59%)	⬇️
src/utils/data_generators/data_generator.ts	45.45% <0.00%> (-9.10%)	⬇️
...t/state/selectors/compute_small_multiple_scales.ts	86.95% <0.00%> (-8.70%)	⬇️
src/components/portal/utils.ts	21.42% <0.00%> (-7.15%)	⬇️
... and 196 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 860224e...5d203f2. Read the comment docs.

[nickofthyme]

LGTM just two comments.

[nickofthyme]

is there a way to check if the onElementClick was called with the same x value, and if so block this from firing?

I'm just thinking about the use case of having the same action fired for both onElementClick and onProjectionClick especially with multiple bars. Which could fire the action twice. The user could just debounce the function for 100 ms but I wonder if not firing a duplicate event, namely onProjectionClick, would be better.

[markov00]

There is a way, we should merge the element and projection click handlers and use a single method to handle both cases. I can check if we can quickly implement that in this PR

[nickofthyme]

Ok, if it's more hassle than it's worth, I think this is fine as is.

[markov00]

done here 5d203f2

[markov00]

🎉 This PR is included in version 24.2.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀