feat(explorer): new version integration (#1683)

Co-authored-by: Uriel Mihura <[email protected]>

Author: MarcosNicolau

explorer/assets/css/tooltip.css

@@ -8,16 +8,14 @@
 .chart-tooltip-dot {
 	height: 10px;
 	width: 10px;
-	top: -5px;
+	bottom: -5px;
 	border-radius: 100%;
-	background-color: hsl(var(--foreground));
-	opacity: 0.2;
+	background-color: hsl(var(--accent));
 	position: absolute;
 	transition: all 0.2s;
 }
 
 .chart-tooltip-dot:hover {
-	opacity: 0.5;
 	transform: scale(1.2);
 	cursor: pointer;
 }
@@ -26,7 +24,7 @@
 	min-height: 50px;
 	min-width: 250px;
 	padding: 20px;
-	margin-top: 8px;
+	margin-bottom: 8px;
 	background-color: hsl(var(--card));
 	border-radius: 8px;
 	border-width: 1px;
@@ -49,6 +47,7 @@
 .chart-tooltip-item {
 	display: flex;
 	justify-content: space-between;
+	gap: 5px;
 	width: 100%;
 }
 
@@ -59,3 +58,4 @@
 .chart-tooltip-item-value {
 	color: hsl(var(--foreground));
 }
+

explorer/assets/vendor/charts/batch_size.js

@@ -1,15 +1,12 @@
+import { yTickCallbackShowMinAndMaxValues } from "./helpers";
 import { alignedTooltip } from "./tooltip";
 
 export const batchSizeCustomOptions = (options, data) => {
 	// show only min and max values
-	options.scales.y.ticks.callback = (_value, index, values) => {
-		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
-		if (index === 0) return `${Math.min(...dataY)} proofs`;
-		if (index === values.length - 1) {
-			return `${Math.max(...dataY)} proofs`;
-		}
-		return "";
-	};
+	options.scales.y.ticks.callback = yTickCallbackShowMinAndMaxValues(
+		data,
+		(val) => `${val} proofs`
+	);
 
 	// show age min, mean and max age in x axis
 	options.scales.x.ticks.callback = (_value, index, values) => {
@@ -23,9 +20,10 @@ export const batchSizeCustomOptions = (options, data) => {
 
 	options.plugins.tooltip.external = (context) =>
 		alignedTooltip(context, {
+			name: "batch-size",
 			title: "Batch size",
 			items: [
-				{ title: "Cost", id: "cost" },
+				{ title: "Fee per proof", id: "cost" },
 				{ title: "Age", id: "age" },
 				{ title: "Merkle root", id: "merkle_root" },
 				{ title: "Block number", id: "block_number" },
@@ -40,16 +38,15 @@ export const batchSizeCustomOptions = (options, data) => {
 			onTooltipUpdate: (tooltipModel) => {
 				const dataset = tooltipModel.dataPoints[0].dataset;
 				const idx = tooltipModel.dataPoints[0].dataIndex;
-
-				const cost = `${dataset.data[idx].y} USD`;
+				const amount_of_proofs = dataset.data[idx].y;
 				const age = dataset.age[idx];
 				const merkleRootHash = dataset.merkle_root[idx];
 				const merkle_root = `${merkleRootHash.slice(
 					0,
 					6
 				)}...${merkleRootHash.slice(merkleRootHash.length - 4)}`;
 				const block_number = dataset.data[idx].x;
-				const amount_of_proofs = dataset.amount_of_proofs[idx];
+				const cost = `${dataset.fee_per_proof[idx]} USD`;
 
 				return {
 					cost,

explorer/assets/vendor/charts/cost_per_proof.js

@@ -1,15 +1,12 @@
+import { yTickCallbackShowMinAndMaxValues } from "./helpers";
 import { alignedTooltip } from "./tooltip";
 
 export const costPerProofCustomOptions = (options, data) => {
-	// show only min and max values
-	options.scales.y.ticks.callback = (_value, index, values) => {
-		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
-		if (index === 0) return `${Math.min(...dataY)} USD`;
-		if (index === values.length - 1) {
-			return `${Math.max(...dataY)} USD`;
-		}
-		return "";
-	};
+	// show only 0, min and max values
+	options.scales.y.ticks.callback = yTickCallbackShowMinAndMaxValues(
+		data,
+		(val) => `${val} USD`
+	);
 
 	// show age min, mean and max age in x axis
 	options.scales.x.ticks.callback = (_value, index, values) => {
@@ -23,9 +20,10 @@ 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" },
+				{ title: "Fee per proof", id: "cost" },
 				{ title: "Age", id: "age" },
 				{ title: "Merkle root", id: "merkle_root" },
 				{ title: "Block number", id: "block_number" },

explorer/assets/vendor/charts/helpers.js

@@ -0,0 +1,43 @@
+const findClosestIndex = (target, values) => {
+	let closestIndex = 0;
+	let smallestDiff = Math.abs(values[0] - target);
+	for (let i = 1; i < values.length; i++) {
+		const diff = Math.abs(values[i] - target);
+		if (diff < smallestDiff) {
+			closestIndex = i;
+			smallestDiff = diff;
+		}
+	}
+	return closestIndex;
+};
+
+/**
+ * A callback function to customize y-axis tick labels by showing only the zero, minimum and maximum data values.
+ *
+ * @param {Object} data - The chart data object containing datasets and their values.
+ * @param {Function} renderText - A function to format and render text for the tick labels.
+ * @returns {Function} - A callback function for Chart.js tick customization.
+ *
+ * The returned function compares the current tick index with the indices of the values closest
+ * to the minimum and maximum data points, and displays these values formatted using the
+ * `renderText` function.
+ *
+ * @example
+ * options.scales.y.ticks.callback = yTickCallbackShowMinAndMaxValues(data, (val) => `${val} USD`);
+ */
+export const yTickCallbackShowMinAndMaxValues =
+	(data, renderText) => (_value, index, values) => {
+		if (index === 0) return renderText(0);
+
+		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
+		const sortedData = dataY.sort((a, b) => b - a);
+		const min = sortedData[0];
+		const max = sortedData[sortedData.length - 1];
+		const valsData = values.map((item) => item.value);
+		const idxClosestToMin = findClosestIndex(min, valsData);
+		const idxClosestToMax = findClosestIndex(max, valsData);
+
+		if (index == idxClosestToMin) return renderText(min);
+		if (index == idxClosestToMax) return renderText(max);
+		return "";
+	};

explorer/assets/vendor/charts/index.js

@@ -21,7 +21,7 @@ const applyOptionsByChartId = (id, options, data) => {
 export default {
 	mounted() {
 		this.initChart();
-		window.addEventListener("theme-changed", this.reinitChart.bind(this));
+		window.addEventListener("resize", this.resizeChart.bind(this));
 	},
 
 	updated() {
@@ -31,9 +31,8 @@ export default {
 	destroyed() {
 		if (this.chart) {
 			this.chart.destroy();
+			window.removeEventListener("resize", this.resizeChart.bind(this));
 		}
-
-		window.removeEventListener("theme-changed", this.reinitChart.bind(this));
 	},
 
 	initChart() {
@@ -51,6 +50,8 @@ export default {
 			data,
 			options,
 		});
+
+		this.resizeChart();
 	},
 
 	reinitChart() {
@@ -59,4 +60,10 @@ export default {
 		}
 		this.initChart();
 	},
+
+	resizeChart() {
+		if (this.chart) {
+			this.chart.resize();
+		}
+	},
 };

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,
@@ -81,6 +83,10 @@ export const alignedTooltip = (
 			tooltipEl.style.opacity = 0;
 			tooltipEl.style.zIndex = -1;
 		};
+		// this is needed to maintain responsiveness
+		window.addEventListener("resize", () => {
+			tooltipEl.remove();
+		});
 		if (onTooltipClick)
 			tooltipEl.querySelector(".chart-tooltip-dot").onclick = () =>
 				onTooltipClick(tooltipModel);
@@ -91,12 +97,6 @@ export const alignedTooltip = (
 		tooltipEl.style.opacity = 0;
 		return;
 	}
-	tooltipEl.classList.remove("above", "below", "no-transform");
-	if (tooltipModel.yAlign) {
-		tooltipEl.classList.add(tooltipModel.yAlign);
-	} else {
-		tooltipEl.classList.add("no-transform");
-	}
 
 	const values = onTooltipUpdate(tooltipModel);
 	items.forEach((item) => {
@@ -115,5 +115,9 @@ export const alignedTooltip = (
 		tooltipModel.caretX +
 		"px";
 	tooltipEl.style.top =
-		position.top + window.scrollY + tooltipModel.caretY + "px";
+		position.top -
+		tooltipEl.offsetHeight +
+		window.scrollY +
+		tooltipModel.caretY +
+		"px";
 };

explorer/assets/vendor/dark_mode.js

@@ -41,8 +41,6 @@ const setupThemeToggle = () => {
 		.getElementById("theme-toggle")
 		.addEventListener("click", function () {
 			toggleVisibility(!isDark());
-			// chart.js listens for this event to re-render the chart and update its colors
-			window.dispatchEvent(new Event("theme-changed"));
 		});
 };
 

explorer/assets/vendor/tooltip.js

@@ -41,7 +41,7 @@ class Tooltip {
 	setupFloatingUI() {
 		this.cleanup = autoUpdate(this.$parent, this.$tooltip, () => {
 			computePosition(this.$parent, this.$tooltip, {
-				placement: "top",
+				placement: "bottom",
 				middleware: [offset(5), flip(), shift({ padding: 5 })]
 			}).then(({ x, y }) => {
 				Object.assign(this.$tooltip.style, {

explorer/lib/explorer/models/batches.ex

@@ -139,6 +139,19 @@ defmodule Batches do
       result -> result
     end
   end
+  
+  def get_avg_fee_per_proof() do
+    query =
+      from(b in Batches,
+        where: b.is_verified == true,
+        select: avg(b.fee_per_proof)
+      )
+
+    case Explorer.Repo.one(query) do
+      nil -> 0
+      result -> result
+    end
+  end
 
   def get_amount_of_verified_proofs() do
     query = from(b in Batches,

explorer/lib/explorer_web/components/assets_cta.ex

@@ -25,7 +25,7 @@ defmodule AssetsCTAComponent do
             View all active operators
           </.tooltip>
         </.link>
-        <.link navigate={~p"/restakes"} class="flex-1 flex flex-col justify-start gap-0.5 group">
+        <.link navigate={~p"/restaked"} class="flex-1 flex flex-col justify-start gap-0.5 group">
           <div class="text-muted-foreground font-semibold flex gap-2 items-center">
             <h2>
               Total Restaked