Stats and Tooltip (#30)

* mocked stats * responsive stats and toolkit hover * tooltip icon * Fix stats breaking on liveview updates --------- Co-authored-by: Javier Chatruc <[email protected]>
lambdaclass · Jul 11, 2023 · fec0d53 · fec0d53
1 parent 7ae0551
commit fec0d53
Show file tree

Hide file tree

Showing 16 changed files with 285 additions and 7 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -69,6 +69,206 @@ Hooks.Copy = {
   },
 };
 
+Hooks.Stats = {
+  mounted() {
+    new ApexCharts(document.querySelector("#transactions-chart"), transactions).render();
+    new ApexCharts(document.querySelector("#fees"), fees).render();
+    new ApexCharts(document.querySelector("#tvl"), tvl).render();
+  },
+
+  updated() {
+    new ApexCharts(document.querySelector("#transactions-chart"), transactions).render();
+    new ApexCharts(document.querySelector("#fees"), fees).render();
+    new ApexCharts(document.querySelector("#tvl"), tvl).render();
+  }
+};
+
+// Apex Chart for Stats
+let randomizeArray = function (arg) {
+  let array = arg.slice();
+  let currentIndex = array.length,
+    temporaryValue,
+    randomIndex;
+
+  while (0 !== currentIndex) {
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+};
+// data for the sparklines that appear below header area
+let sparklineData = [47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 61, 27, 54, 43, 19, 46];
+
+let transactions = {
+  chart: {
+    id: "transactions",
+    type: "area",
+    height: 160,
+    background: "#1A1A24",
+    sparkline: {
+      enabled: true,
+    },
+  },
+  tooltip: {
+    theme: "dark",
+  },
+  stroke: {
+    curve: "straight",
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [
+    {
+      name: "Transactions",
+      data: randomizeArray(sparklineData),
+    },
+  ],
+  labels: [...Array(30).keys()].map((n) => `2018-09-0${n + 1}`),
+  yaxis: {
+    min: 0,
+  },
+  xaxis: {
+    type: "datetime",
+    categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan", "05 Jan", "06 Jan", "07 Jan", "08 Jan", "09 Jan", "10 Jan", "11 Jan", "12 Jan"],
+  },
+  colors: ["#b43cff"],
+  title: {
+    text: "424,652",
+    offsetX: 20,
+    style: {
+      fontSize: "24px",
+      cssClass: "apexcharts-yaxis-title",
+      color: "white",
+    },
+  },
+  subtitle: {
+    text: "last month",
+    offsetX: 20,
+    style: {
+      fontSize: "14px",
+      cssClass: "apexcharts-yaxis-title",
+      color: "#6B7280",
+    },
+  },
+};
+let fees = {
+  chart: {
+    id: "fees",
+    type: "area",
+    height: 160,
+    background: "#1A1A24",
+    sparkline: {
+      enabled: true,
+    },
+  },
+  tooltip: {
+    theme: "dark",
+  },
+  stroke: {
+    curve: "straight",
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [
+    {
+      name: "fee",
+      data: randomizeArray(sparklineData),
+    },
+  ],
+  labels: [...Array(30).keys()].map((n) => `2018-09-0${n + 1}`),
+  yaxis: {
+    min: 0,
+  },
+  xaxis: {
+    type: "datetime",
+    categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan", "05 Jan", "06 Jan", "07 Jan", "08 Jan", "09 Jan", "10 Jan", "11 Jan", "12 Jan"],
+  },
+  colors: ["#b43cff"],
+  title: {
+    text: "33.83653 ETH",
+    offsetX: 20,
+    style: {
+      fontSize: "24px",
+      cssClass: "apexcharts-yaxis-title",
+      color: "white",
+    },
+  },
+  subtitle: {
+    text: "last month",
+    offsetX: 20,
+    style: {
+      fontSize: "14px",
+      cssClass: "apexcharts-yaxis-title",
+      color: "#6B7280",
+    },
+  },
+};
+let tvl = {
+  chart: {
+    id: "tvl",
+    type: "area",
+    height: 160,
+    background: "#1A1A24",
+    sparkline: {
+      enabled: true,
+    },
+  },
+  tooltip: {
+    theme: "dark",
+  },
+  stroke: {
+    curve: "straight",
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [
+    {
+      name: "tvl",
+      data: randomizeArray(sparklineData),
+    },
+  ],
+  labels: [...Array(30).keys()].map((n) => `2018-09-0${n + 1}`),
+  yaxis: {
+    min: 0,
+  },
+  xaxis: {
+    type: "datetime",
+    categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan", "05 Jan", "06 Jan", "07 Jan", "08 Jan", "09 Jan", "10 Jan", "11 Jan", "12 Jan"],
+  },
+  colors: ["#b43cff"],
+  title: {
+    text: "$ 57,920,345",
+    offsetX: 20,
+    style: {
+      fontSize: "24px",
+      cssClass: "apexcharts-yaxis-title",
+      color: "white",
+    },
+  },
+  subtitle: {
+    text: "last month",
+    offsetX: 20,
+    style: {
+      fontSize: "14px",
+      cssClass: "apexcharts-yaxis-title",
+      color: "#6B7280",
+    },
+  },
+};
+
+// Tippy.js for Tooltip
+tippy("#tps", {
+  content: "The avarage transactions per second",
+});
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, hooks: Hooks });
 

diff --git a/lib/starknet_explorer_web/components/layouts/root.html.heex b/lib/starknet_explorer_web/components/layouts/root.html.heex
@@ -16,5 +16,18 @@
     <footer class="absolute bottom-0 left-0 right-0 flex justify-center items-center mt-10 py-4 text-gray-500">
       <p id="copyright"></p>
     </footer>
+    <!-- Development -->
+    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js">
+    </script>
+    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js">
+    </script>
+    <!-- Production -->
+    <script src="https://unpkg.com/@popperjs/core@2">
+    </script>
+    <script src="https://unpkg.com/tippy.js@6">
+    </script>
+    <!-- ApexChart -->
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts">
+    </script>
   </body>
 </html>
diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -20,6 +20,65 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
       <h1>Welcome to</h1>
       <h2>Starknet Explorer</h2>
     </div>
+    <div class="mx-auto max-w-7xl grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-5 my-10">
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+        <img src={~p"/images/box.svg"} />
+        <div class="text-sm">
+          <div>Blocks Height</div>
+          <div>101,752</div>
+        </div>
+      </div>
+      <div class="relative flex items-start gap-3 bg-container p-4 md:p-5">
+        <img id="tps" class="absolute top-2 right-2 w-5 h-5" src={~p"/images/help-circle.svg"} />
+        <img src={~p"/images/zap.svg"} />
+        <div class="text-sm">
+          <div>TPS</div>
+          <div>2.15</div>
+        </div>
+      </div>
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+        <img src={~p"/images/code.svg"} />
+        <div class="text-sm">
+          <div>Classes</div>
+          <div>4,536</div>
+        </div>
+      </div>
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+        <img src={~p"/images/message-square.svg"} />
+        <div class="text-sm">
+          <div>Messages</div>
+          <div>905,510</div>
+        </div>
+      </div>
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+        <img src={~p"/images/file.svg"} />
+        <div class="text-sm">
+          <div>Contracts</div>
+          <div>1,525,792</div>
+        </div>
+      </div>
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+        <img src={~p"/images/calendar.svg"} />
+        <div class="text-sm">
+          <div>Events</div>
+          <div>2.15</div>
+        </div>
+      </div>
+    </div>
+    <div class="mx-auto max-w-7xl grid md:grid-cols-3 gap-5 my-10" phx-hook="Stats" id="stats_table">
+      <div class="pt-5 bg-container">
+        <div class="ml-7 text-gray-500">Transactions</div>
+        <div id="transactions-chart"></div>
+      </div>
+      <div class="pt-5 bg-container">
+        <div class="ml-7 text-gray-500">Transaction Fees</div>
+        <div id="fees"></div>
+      </div>
+      <div class="pt-5 bg-container">
+        <div class="ml-7 text-gray-500">TVL</div>
+        <div id="tvl"></div>
+      </div>
+    </div>
     <div class="mx-auto max-w-7xl grid lg:grid-cols-2 lg:gap-5 xl:gap-16 mt-16">
       <div>
         <div class="table-header">

diff --git a/priv/static/images/arrow-right.svg b/priv/static/images/arrow-right.svg
diff --git a/priv/static/images/box.svg b/priv/static/images/box.svg
diff --git a/priv/static/images/calendar.svg b/priv/static/images/calendar.svg
diff --git a/priv/static/images/check-square.svg b/priv/static/images/check-square.svg
diff --git a/priv/static/images/code.svg b/priv/static/images/code.svg
diff --git a/priv/static/images/copy.svg b/priv/static/images/copy.svg
diff --git a/priv/static/images/corner-up-right.svg b/priv/static/images/corner-up-right.svg
diff --git a/priv/static/images/file.svg b/priv/static/images/file.svg
diff --git a/priv/static/images/help-circle.svg b/priv/static/images/help-circle.svg
diff --git a/priv/static/images/menu.svg b/priv/static/images/menu.svg
diff --git a/priv/static/images/message-square.svg b/priv/static/images/message-square.svg
diff --git a/priv/static/images/search.svg b/priv/static/images/search.svg
diff --git a/priv/static/images/zap.svg b/priv/static/images/zap.svg