[IMP] chart: add mouseup event to listened events

To detect a middle mouse click on a chart, we have to use the
`mouseup` event, the `click` event is not triggered with middle
mouse button.

Note: ChartJS `onClick` is called at both the `click` and `mouseup`
events, sso we have to be careful in the `onClick` handlers.

closes #6076

Task: 4636147
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

Author: hokolomopo

src/helpers/figures/charts/chart_ui_common.ts

@@ -21,6 +21,7 @@ export const CHART_COMMON_OPTIONS: ChartOptions = {
     },
   },
   animation: false,
+  events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "mouseup"],
 };
 
 export function truncateLabel(label: string | undefined): string {

src/helpers/figures/charts/runtime/chartjs_legend.ts

@@ -213,6 +213,9 @@ export const INTERACTIVE_LEGEND_CONFIG = {
     target.style.cursor = "default";
   },
   onClick: (event, legendItem, legend) => {
+    if (event.type !== "click") {
+      return;
+    }
     const index = legendItem.datasetIndex;
     if (!legend.legendItems || index === undefined) {
       return;

tests/figures/chart/__snapshots__/chart_plugin.test.ts.snap

@@ -47,6 +47,14 @@ exports[`Linear/Time charts font color is white with a dark background color 1`]
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -184,6 +192,14 @@ exports[`Linear/Time charts snapshot test of chartJS configuration for date char
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -328,6 +344,14 @@ exports[`Linear/Time charts snapshot test of chartJS configuration for linear ch
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -446,6 +470,14 @@ exports[`datasource tests create a chart with stacked bar 1`] = `
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "indexAxis": "x",
       "layout": {
         "padding": {
@@ -564,6 +596,14 @@ exports[`datasource tests create chart with a dataset of one cell (no title) 1`]
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -700,6 +740,14 @@ exports[`datasource tests create chart with column datasets 1`] = `
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -836,6 +884,14 @@ exports[`datasource tests create chart with column datasets with category title
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -972,6 +1028,14 @@ exports[`datasource tests create chart with column datasets without series title
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -1091,6 +1155,14 @@ exports[`datasource tests create chart with only the dataset title (no data) 1`]
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -1227,6 +1299,14 @@ exports[`datasource tests create chart with rectangle dataset 1`] = `
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -1363,6 +1443,14 @@ exports[`datasource tests create chart with row datasets 1`] = `
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -1499,6 +1587,14 @@ exports[`datasource tests create chart with row datasets with category title 1`]
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,
@@ -1635,6 +1731,14 @@ exports[`datasource tests create chart with row datasets without series title 1`
           "hitRadius": 15,
         },
       },
+      "events": [
+        "mousemove",
+        "mouseout",
+        "click",
+        "touchstart",
+        "touchmove",
+        "mouseup",
+      ],
       "layout": {
         "padding": {
           "bottom": 10,