chore: CHARTS-5035 update the click event examples (#26)

* chore: CHARTS-5035 update the click event examples

* chore: CHARTS-5035 update the SDK package version to use the new beta version

Author: kristinamongo

examples/click-events-basic/package-lock.json

@@ -8,7 +8,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@mongodb-js/charts-embed-dom": "^1.2.0-beta.1",
+    "@mongodb-js/charts-embed-dom": "^2.1.0-beta.1",
     "regenerator-runtime": "^0.13.3",
     "parcel": "^1.12.4"
   },

examples/click-events-basic/package.json

@@ -2,16 +2,17 @@ import "regenerator-runtime/runtime";
 import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
 
 const sdk = new ChartsEmbedSDK({
-  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp" // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
+  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
 });
 
 const chart = sdk.createChart({
   chartId: "90a8fe84-dd27-4d53-a3fc-0e40392685dd", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
-  height: "700px"
+  height: "700px",
 });
 
-chart.addEventListener("click", (payload) => {
-  document.getElementById("payload").innerHTML = '<pre>' + JSON.stringify(payload, null, 2) + '</pre>'; 
+const clickHandler = (payload) => {
+  document.getElementById("payload").innerHTML =
+    "<pre>" + JSON.stringify(payload, null, 2) + "</pre>";
 
   let infoText = "";
   if (payload.target.role) {
@@ -36,10 +37,11 @@ chart.addEventListener("click", (payload) => {
   }
 
   document.getElementById("info").innerHTML = "<ul>" + infoText + "</ul>";
-});
+};
 
 async function renderCharts() {
   await chart.render(document.getElementById("chart"));
+  await chart.addEventListener("click", clickHandler);
 }
 
 renderCharts().catch((e) => window.alert(e.message));

examples/click-events-basic/src/index.js

@@ -8,7 +8,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@mongodb-js/charts-embed-dom": "^1.2.0-beta.1",
+    "@mongodb-js/charts-embed-dom": "^2.1.0-beta.1",
     "regenerator-runtime": "^0.13.3",
     "parcel": "^1.12.4"
   },

examples/click-events-filtering/package-lock.json

@@ -2,41 +2,33 @@ import "regenerator-runtime/runtime";
 import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
 
 const sdk = new ChartsEmbedSDK({
-  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp" // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
+  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
 });
 
 const chart1 = sdk.createChart({
   chartId: "90a8fe84-dd27-4d53-a3fc-0e40392685dd", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
-  height: "700px"
+  height: "700px",
 });
 
 const chart2 = sdk.createChart({
   chartId: "c6d6b83e-b096-4bb8-9d7f-b7344177cd11", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
-  height: "700px"
+  height: "700px",
 });
 
-chart1.addEventListener("click", (payload) => {
-  if (payload.target.role === "mark") {
-    // Optional: ~REPLACE~ this with a suitable filter if you're using your own chart
-    const filter = {
-      genres: payload.data.y.value,
-      year: {
-        $gte: payload.data.color.lowerBound,
-        $lt: payload.data.color.upperBound
-      }
-    };
-    chart2.setFilter(filter);
-    document.getElementById("filterMessage").innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`
-
-  } else {
-    chart2.setFilter({});
-    document.getElementById("filterMessage").innerText = "all movies"
-  }
-});
+const clickHandler = (payload) => {
+  // Optional: ~REPLACE~ this with a suitable filter if you're using your own chart
+  chart2.setFilter(payload.selectionFilter);
+  document.getElementById(
+    "filterMessage"
+  ).innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`;
+};
 
 async function renderCharts() {
   await chart1.render(document.getElementById("chart1"));
   await chart2.render(document.getElementById("chart2"));
+
+  const options = { includes: [{ roles: ["mark"] }] };
+  await chart1.addEventListener("click", clickHandler, options);
 }
 
 renderCharts().catch((e) => window.alert(e.message));