feat: propagate item pointermove and click events (#1511)

* feat: propagate item click event

* fix: only trigger on actual item click

* feat: add pointermove event

* chore: fix typo

* chore: rename event to follow best practices

* feat(test): check that click outside of bar item does not trigger event

elements/chart/src/main.js

@@ -52,6 +52,32 @@ export class EOxChart extends LitElement {
     this.unstyled = false;
   }
 
+  _dispatchItemPointerMoveEvent(detail) {
+    /**
+     * Chart item is hovered. Event detail includes
+     * `event` (pointermove event) and `item` (the hovered item on the chart)
+     *
+     */
+    this.dispatchEvent(
+      new CustomEvent("pointermove:item", {
+        detail,
+      }),
+    );
+  }
+
+  _dispatchItemClickEvent(detail) {
+    /**
+     * Chart item is clicked. Event detail includes
+     * `event` (click event) and `item` (the clicked item on the chart)
+     *
+     */
+    this.dispatchEvent(
+      new CustomEvent("click:item", {
+        detail,
+      }),
+    );
+  }
+
   /**
    * Lifecycle method called when the element is updated
    *

elements/chart/src/methods/render/render-chart.js

@@ -22,6 +22,14 @@ const renderChartMethod = (EOxChart, spec, dataValues) => {
       });
       res.view.run();
     }
+    res.view.addEventListener("pointermove", (event, item) => {
+      if (!item) return;
+      EOxChart._dispatchItemPointerMoveEvent({ event, item });
+    });
+    res.view.addEventListener("click", (event, item) => {
+      if (!item) return;
+      EOxChart._dispatchItemClickEvent({ event, item });
+    });
   });
 };
 

elements/chart/stories/chart.stories.js

@@ -12,6 +12,10 @@ export default {
       .dataValues=${args.dataValues}
       .noShadow=${args.noShadow}
       .unstyled=${args.unstyled}
+      @pointermove:item=${(e) =>
+        console.log("Chart hovered! Hovered item: ", e.detail.item)}
+      @click:item=${(e) =>
+        console.log("Chart clicked! Clicked item: ", e.detail.item)}
       style="width:100%; height: 400px;"
     ></eox-chart>
   `,

elements/chart/test/cases/click-chart.js

@@ -0,0 +1,40 @@
+import { TEST_SELECTORS, TEST_VALUES } from "../../src/enums";
+
+// Destructure TEST_SELECTORS object
+const { chart } = TEST_SELECTORS;
+
+// Destructuring TEST_VALUES object
+const { chartSpec } = TEST_VALUES;
+
+/**
+ * Test to verify if the chart registers the click on items correctly.
+ */
+const clickChartTest = () => {
+  cy.get(chart).and(($el) => {
+    const eoxChart = $el[0];
+    eoxChart.spec = chartSpec;
+  });
+
+  const clickEventHandlerSpy = cy.spy();
+  cy.get(chart).and(($chart) => {
+    $chart.get(0).addEventListener("click:item", clickEventHandlerSpy);
+  });
+
+  // eslint-disable-next-line cypress/unsafe-to-chain-command
+  cy.get(chart)
+    // click on axis title
+    .click(5, 100)
+    .then(() => {
+      expect(clickEventHandlerSpy).to.not.be.called;
+    });
+
+  // eslint-disable-next-line cypress/unsafe-to-chain-command
+  cy.get(chart)
+    // click on bar
+    .click(50, 100)
+    .then(() => {
+      expect(clickEventHandlerSpy).to.be.calledOnce;
+    });
+};
+
+export default clickChartTest;

elements/chart/test/cases/index.js

@@ -1,2 +1,3 @@
 export { default as loadChartTest } from "./load-chart";
 export { default as setDataValuesTest } from "./set-data-values";
+export { default as clickChartTest } from "./click-chart";

elements/chart/test/general.cy.js

@@ -1,6 +1,6 @@
 // Importing necessary modules, test cases, and enums
 import "../src/main";
-import { loadChartTest, setDataValuesTest } from "./cases";
+import { loadChartTest, setDataValuesTest, clickChartTest } from "./cases";
 import { TEST_SELECTORS, TEST_VALUES } from "../src/enums";
 
 // Destructuring TEST_SELECTORS object
@@ -23,4 +23,6 @@ describe("Chart", () => {
   it("loads the chart", () => loadChartTest());
 
   it("allows setting data values asynchronously", () => setDataValuesTest());
+
+  it("triggers an click:item event", () => clickChartTest());
 });