fix: tooltip names mixing

yetanotherco · Dec 24, 2024 · 9c494af · 9c494af
1 parent 8a109ef
commit 9c494af
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/explorer/assets/vendor/charts/batch_size.js b/explorer/assets/vendor/charts/batch_size.js
@@ -23,6 +23,7 @@ export const batchSizeCustomOptions = (options, data) => {
 
 	options.plugins.tooltip.external = (context) =>
 		alignedTooltip(context, {
+			name: "batch-size",
 			title: "Batch size",
 			items: [
 				{ title: "Cost", id: "cost" },

diff --git a/explorer/assets/vendor/charts/cost_per_proof.js b/explorer/assets/vendor/charts/cost_per_proof.js
@@ -23,6 +23,7 @@ export const costPerProofCustomOptions = (options, data) => {
 
 	options.plugins.tooltip.external = (context) =>
 		alignedTooltip(context, {
+			name: "cost-per-proof",
 			title: "Cost per proof",
 			items: [
 				{ title: "Cost", id: "cost" },

diff --git a/explorer/assets/vendor/charts/tooltip.js b/explorer/assets/vendor/charts/tooltip.js
@@ -26,6 +26,7 @@ const tooltipComponent = ({ title, isTooltipClickable, items }) => `
  *
  * @param {Object} context - The chart.js context, typically passed as `this` within chart hooks.
  * @param {Object} params - An object containing configuration for the tooltip.
+ * @param {Object} params.name - A string that serves as an identifier for the tooltip.
  * @param {string} params.title - The title text to display in the tooltip.
  * @param {Array} params.items - An array of items (with ids) to be displayed inside the tooltip.
  * @param {Array} params.onTooltipClick - A callback that receives `tooltipModel` and gets triggered when the tooltip is clicked.
@@ -36,6 +37,7 @@ const tooltipComponent = ({ title, isTooltipClickable, items }) => `
  *
  * @example
  * alignedTooltip(context, {
+ *   name: "my-chart",
  *   title: "Tooltip Title",
  *   items: [{ title: "Cost", id: "cost_id" }, { title: "Timestamp", id: "timestamp_id" }],
  *   onTooltipClick: (tooltipModel) => {
@@ -58,15 +60,15 @@ const tooltipComponent = ({ title, isTooltipClickable, items }) => `
  */
 export const alignedTooltip = (
 	context,
-	{ title, items, onTooltipClick, onTooltipUpdate }
+	{ name, title, items, onTooltipClick, onTooltipUpdate }
 ) => {
 	const tooltipModel = context.tooltip;
-	let tooltipEl = document.getElementById("chartjs-tooltip");
+	let tooltipEl = document.getElementById(`chartjs-tooltip-${name}`);
 	if (!tooltipEl) {
 		tooltipEl = document.createElement("div");
 		tooltipEl.style = "transition: opacity 0.3s;";
 		tooltipEl.style = "transition: left 0.1s;";
-		tooltipEl.id = "chartjs-tooltip";
+		tooltipEl.id = `chartjs-tooltip-${name}`;
 		tooltipEl.innerHTML = tooltipComponent({
 			title,
 			isTooltipClickable: !!onTooltipClick,