feat(explorer): cost per proof chart (#1635)

Co-authored-by: Urix <[email protected]>

Author: MarcosNicolau

explorer/assets/css/app.css

@@ -1,6 +1,7 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "./tooltip.css";
 
 @layer base {
     :root {

explorer/assets/css/tooltip.css

@@ -0,0 +1,61 @@
+.chart-tooltip-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+
+.chart-tooltip-dot {
+	height: 10px;
+	width: 10px;
+	top: -5px;
+	border-radius: 100%;
+	background-color: hsl(var(--foreground));
+	opacity: 0.2;
+	position: absolute;
+	transition: all 0.2s;
+}
+
+.chart-tooltip-dot:hover {
+	opacity: 0.5;
+	transform: scale(1.2);
+	cursor: pointer;
+}
+
+.chart-tooltip-items-container {
+	min-height: 50px;
+	min-width: 250px;
+	padding: 20px;
+	margin-top: 8px;
+	background-color: hsl(var(--card));
+	border-radius: 8px;
+	border-width: 1px;
+	border-color: hsl(var(--foreground) / 20%);
+}
+
+.chart-tooltip-title {
+	text-align: center;
+	color: hsl(var(--foreground));
+	margin-bottom: 10px;
+	font-weight: 700;
+}
+
+.chart-tooltip-items {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+}
+
+.chart-tooltip-item {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.chart-tooltip-item-title {
+	color: hsl(var(--muted-foreground));
+}
+
+.chart-tooltip-item-value {
+	color: hsl(var(--foreground));
+}

explorer/assets/js/app.js

@@ -7,32 +7,30 @@ import darkModeHook from "../vendor/dark_mode";
 import searchFocusHook from "../vendor/search_focus";
 import tooltipHook from "../vendor/tooltip";
 import copyToClipboardHook from "../vendor/clipboard";
+import chartHook from "../vendor/charts";
 
-let Hooks = {};
-Hooks.DarkThemeToggle = darkModeHook;
-Hooks.SearchFocus = searchFocusHook;
-Hooks.TooltipHook = tooltipHook;
-Hooks.CopyToClipboard = copyToClipboardHook;
+let hooks = {};
+hooks.DarkThemeToggle = darkModeHook;
+hooks.SearchFocus = searchFocusHook;
+hooks.TooltipHook = tooltipHook;
+hooks.CopyToClipboard = copyToClipboardHook;
+hooks.ChartHook = chartHook;
 
 let csrfToken = document
 	.querySelector("meta[name='csrf-token']")
 	.getAttribute("content");
 
 let liveSocket = new LiveSocket("/live", Socket, {
 	params: { _csrf_token: csrfToken },
-	hooks: Hooks
+	hooks: hooks,
 });
 
 topbar.config({
 	barColors: { 0: "#18FF7F" },
 	shadowColor: "rgba(0, 0, 0, .3)"
 });
-window.addEventListener("phx:page-loading-start", (_info) =>
-	topbar.show(50)
-);
-window.addEventListener("phx:page-loading-stop", (_info) =>
-	topbar.hide()
-);
+window.addEventListener("phx:page-loading-start", (_info) => topbar.show(50));
+window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
 
 liveSocket.connect();
 

explorer/assets/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
-    "@floating-ui/dom": "^1.6.8"
+    "@floating-ui/dom": "^1.6.8",
+    "chart.js": "^4.4.7"
   },
   "devDependencies": {
     "tailwindcss-animate": "^1.0.7"

explorer/assets/pnpm-lock.yaml

@@ -0,0 +1,63 @@
+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 age min, mean and max age in x axis
+	options.scales.x.ticks.callback = (_value, index, values) => {
+		const age = data.datasets[0].age;
+		if (index === 0) return age[0];
+		if (index === Math.floor((age.length - 1) / 2))
+			return age[Math.floor((age.length - 1) / 2)];
+		if (index === values.length - 1) return age[age.length - 1];
+		return "";
+	};
+
+	options.plugins.tooltip.external = (context) =>
+		alignedTooltip(context, {
+			title: "Cost per proof",
+			items: [
+				{ title: "Cost", id: "cost" },
+				{ title: "Age", id: "age" },
+				{ title: "Merkle root", id: "merkle_root" },
+				{ title: "Block number", id: "block_number" },
+				{ title: "Amount of proofs", id: "amount_of_proofs" },
+			],
+			onTooltipClick: (tooltipModel) => {
+				const dataset = tooltipModel.dataPoints[0].dataset;
+				const idx = tooltipModel.dataPoints[0].dataIndex;
+				const merkleRootHash = dataset.merkle_root[idx];
+				window.location.href = `/batches/${merkleRootHash}`;
+			},
+			onTooltipUpdate: (tooltipModel) => {
+				const dataset = tooltipModel.dataPoints[0].dataset;
+				const idx = tooltipModel.dataPoints[0].dataIndex;
+
+				const cost = `${dataset.data[idx].y} USD`;
+				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];
+
+				return {
+					cost,
+					age,
+					merkle_root,
+					block_number,
+					amount_of_proofs,
+				};
+			},
+		});
+};

explorer/assets/vendor/charts/cost_per_proof.js

@@ -0,0 +1,60 @@
+import Chart from "chart.js/auto";
+import { costPerProofCustomOptions } from "./cost_per_proof";
+
+const applyCommonChartOptions = (options, data) => {
+	// tooltip disabled by default, each chart should implement its own with alignedTooltip
+	options.plugins.tooltip = {
+		enabled: false,
+	};
+};
+
+const applyOptionsByChartId = (id, options, data) => {
+	const idOptionsMap = {
+		cost_per_proof_chart: () => costPerProofCustomOptions(options, data),
+	};
+
+	idOptionsMap[id] && idOptionsMap[id]();
+};
+
+export default {
+	mounted() {
+		this.initChart();
+		window.addEventListener("theme-changed", this.reinitChart.bind(this));
+	},
+
+	updated() {
+		this.reinitChart();
+	},
+
+	destroyed() {
+		if (this.chart) {
+			this.chart.destroy();
+		}
+
+		window.removeEventListener("theme-changed", this.reinitChart.bind(this));
+	},
+
+	initChart() {
+		const ctx = this.el;
+		const type = this.el.dataset.chartType;
+		const data = JSON.parse(this.el.dataset.chartData);
+		const options = JSON.parse(this.el.dataset.chartOptions);
+		const chartId = this.el.id;
+
+		applyCommonChartOptions(options, data);
+		applyOptionsByChartId(chartId, options, data);
+
+		this.chart = new Chart(ctx, {
+			type,
+			data,
+			options,
+		});
+	},
+
+	reinitChart() {
+		if (this.chart) {
+			this.chart.destroy();
+		}
+		this.initChart();
+	},
+};