The provided code does the following things: 1. **Create a new...

The provided code does the following things:

1. Create a new set: An empty JavaScript Set named storeSet is created. A Set ensures that all its entries are unique.

   const storeSet = new Set();
   

2. Iterate over series data: The code iterates through the context.panel.data.series array using forEach.

   context.panel.data.series.forEach((seriesObj) => { 
     storeSet.add(seriesObj.meta.custom.labels["metric.label.store"]); 
     console.log(seriesObj.meta.custom.labels["metric.label.store"]);
   });
   

   Inside the loop:

   • It extracts the value of metric.label.store from seriesObj.meta.custom.labels.
   • Adds this value to the storeSet (if it is not already present, since a Set only stores unique values).
   • Logs the extracted store label to the console.

3. Convert the Set to an Array: After populating the Set, it converts the storeSet to an array called storesArray.

   const storesArray = Array.from(storeSet);
   

4. Set up a mouseover event listener: The code sets an event listener (mouseover) on context.panel.chart.

   context.panel.chart.on("mouseover", (params) => { 
     context.grafana.locationService.partial({ "var-query0": storesArray }, true);
   });
   

   When a mouseover event occurs on the chart:

   • It updates the Grafana locationService with a query parameter, var-query0, containing the storesArray.

5. Return value: The code finally returns an object with a title property:

   return {
     'title': { "text": "update" }
   };
   

To Update on Button Click Instead of Mouseover

Currently, the mouseover event on the chart triggers the update of context.grafana.locationService.partial. To change this functionality so that updates occur only on a button click inside the panel, you should do the following:

1. Define a button (e.g., within your panel's HTML template or configuration).
2. Attach a click event listener to this button.
3. Move the relevant logic (updating the locationService) into this click handler instead of the mouseover handler.

Here’s how the modified code might look:

const storeSet = new Set();

// Build the Set from series data
context.panel.data.series.forEach((seriesObj) => {
  storeSet.add(seriesObj.meta.custom.labels["metric.label.store"]);
  console.log(seriesObj.meta.custom.labels["metric.label.store"]);
});

const storesArray = Array.from(storeSet); // Convert Set to Array

// Attach a click event listener to a button inside the panel
const button = document.getElementById("updateButton"); // Assume there's a button with ID 'updateButton'

button.addEventListener("click", () => {
  // Update locationService on button click
  context.grafana.locationService.partial({ "var-query0": storesArray }, true);
});

return {
  title: { text: "update" }
};

Changes Made:

1. Removed Mouseover Listener: Removed the mouseover event listener from the chart.
2. Button Integration:
   • Added a reference to a button (updateButton) using getElementById.
   • Added a click event listener to this button.
3. Code on Click: The update logic for context.grafana.locationService.partial is now executed only when the button is clicked.

Additional Notes:

• Ensure that the button with ID updateButton exists in your Grafana panel's DOM (HTML or templating). For example, you might include it in your panel's custom HTML template.
• If you need the stores list (storesArray) to dynamically update in response to something else (like data changes), you may need to re-generate it on demand during the button click handler.
• If the mouseover functionality is still required for something else, you can leave its logic in the code while adding this button logic for the click-based behavior.