feat(explorer): batch-size chart (#1641)

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

Author: 3 people

explorer/assets/vendor/charts/batch_size.js

@@ -0,0 +1,63 @@
+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 "";
+	};
+
+	// 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: "Batch size",
+			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/index.js

@@ -1,5 +1,6 @@
 import Chart from "chart.js/auto";
 import { costPerProofCustomOptions } from "./cost_per_proof";
+import { batchSizeCustomOptions } from "./batch_size";
 
 const applyCommonChartOptions = (options, data) => {
 	// tooltip disabled by default, each chart should implement its own with alignedTooltip
@@ -11,6 +12,7 @@ const applyCommonChartOptions = (options, data) => {
 const applyOptionsByChartId = (id, options, data) => {
 	const idOptionsMap = {
 		cost_per_proof_chart: () => costPerProofCustomOptions(options, data),
+		batch_size_chart: () => batchSizeCustomOptions(options, data),
 	};
 
 	idOptionsMap[id] && idOptionsMap[id]();

explorer/lib/explorer_web/components/charts.ex

@@ -24,7 +24,6 @@ defmodule ExplorerWeb.ChartComponents do
 
   @doc """
   Renders a line chart with aligned style.
-
   ## Examples
     <.line
       id="exchanges"
@@ -83,7 +82,6 @@ defmodule ExplorerWeb.ChartComponents do
               ticks: %{
                 display: @show_ticks.x,
                 autoSkip: false,
-                sampleSize: 1,
                 maxRotation: 0,
                 font: %{
                   weight: "700"
@@ -102,7 +100,6 @@ defmodule ExplorerWeb.ChartComponents do
               ticks: %{
                 display: @show_ticks.y,
                 autoSkip: false,
-                sampleSize: 1,
                 maxRotation: 0,
                 font: %{
                   weight: "700"

explorer/lib/explorer_web/live/pages/home/index.ex

@@ -34,6 +34,27 @@ defmodule ExplorerWeb.Home.Index do
     }
   end
 
+  def get_batch_size_chart_data() do
+    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 100, order_by: :desc}))
+
+    extra_data =
+      %{
+        merkle_root: Enum.map(batches, fn b -> b.merkle_root end),
+        amount_of_proofs: Enum.map(batches, fn b -> b.amount_of_proofs end),
+        age: Enum.map(batches, fn b -> Helpers.parse_timeago(b.submission_timestamp) end)
+      }
+
+    points =
+      Enum.map(batches, fn b ->
+        %{x: b.submission_block_number, y: b.amount_of_proofs}
+      end)
+
+    %{
+      points: points,
+      extra_data: extra_data
+    }
+  end
+
   defp set_empty_values(socket) do
     Logger.info("Setting empty values")
 
@@ -45,7 +66,8 @@ defmodule ExplorerWeb.Home.Index do
       verified_proofs: :empty,
       restaked_amount_eth: :empty,
       restaked_amount_usd: :empty,
-      cost_per_proof_data: %{points: [], extra_data: %{}}
+      cost_per_proof_data: %{points: [], extra_data: %{}},
+      batch_size_chart_data: %{points: [], extra_data: %{}}
     )
   end
 
@@ -73,7 +95,8 @@ defmodule ExplorerWeb.Home.Index do
        verified_proofs: verified_proofs,
        restaked_amount_eth: restaked_amount_eth,
        restaked_amount_usd: restaked_amount_usd,
-       cost_per_proof_chart: get_cost_per_proof_chart_data()
+       cost_per_proof_chart: get_cost_per_proof_chart_data(),
+       batch_size_chart_data: get_batch_size_chart_data()
      )}
   end
 
@@ -105,6 +128,7 @@ defmodule ExplorerWeb.Home.Index do
        restaked_amount_eth: restaked_amount_eth,
        restaked_amount_usd: restaked_amount_usd,
        cost_per_proof_chart: get_cost_per_proof_chart_data(),
+       batch_size_chart_data: get_batch_size_chart_data(),
        page_title: "Welcome"
      )}
   rescue

explorer/lib/explorer_web/live/pages/home/index.html.heex

@@ -45,6 +45,15 @@
         />
       </div>
     </.card>
+    <.card title="Batch Size" class="w-full  sm:col-span-2">
+      <div style="height: 200px;" class="mt-4">
+        <.line_chart
+          id="batch_size_chart"
+          points={@batch_size_chart_data.points}
+          extra_data={@batch_size_chart_data.extra_data}
+        />
+      </div>
+    </.card>
     <div class="relative truncate sm:col-span-2">
         <h1 class="text-xl font-bold font-foreground text-left py-2">
         Recent Batches