feat(analytics): global states (#321)

Phala-Network · Aug 17, 2023 · f45110e · f45110e
1 parent a9ac2f5
commit f45110e
Show file tree

Hide file tree

Showing 25 changed files with 491 additions and 78 deletions.
diff --git a/apps/analytics/package.json b/apps/analytics/package.json
@@ -21,10 +21,14 @@
   },
   "type": "module",
   "dependencies": {
+    "@phala/util": "workspace:^",
+    "@rgossiaux/svelte-headlessui": "^2.0.0",
+    "@rgossiaux/svelte-heroicons": "^0.1.2",
     "autoprefixer": "^10.4.14",
     "chart.js": "^4.3.3",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.30.0",
+    "decimal.js": "^10.4.3",
     "graphql-request": "^6.1.0",
     "postcss": "^8.4.27",
     "svelte-chartjs": "^3.1.2",

diff --git a/apps/analytics/src/app.css b/apps/analytics/src/app.css
@@ -5,14 +5,14 @@
 
 @layer components {
   .card {
-    @apply bg-slate-800 rounded-3xl px-6 py-4 shadow-xl;
+    @apply bg-gray-700 rounded-3xl px-6 py-6 shadow-xl;
   }
 
-  .card-head {
+  .data-value {
     @apply font-montserrat font-bold text-4xl;
   }
 
-  .card-title {
-    @apply font-montserrat font-semibold text-sm text-slate-400;
+  .data-label {
+    @apply font-montserrat text-sm text-gray-400;
   }
 }
diff --git a/apps/analytics/src/app.html b/apps/analytics/src/app.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-slate-900 text-white">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover" class="bg-gray-900 text-white">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/apps/analytics/src/components/AverageAprChart.svelte b/apps/analytics/src/components/AverageAprChart.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {toPercentage} from '@phala/util'
+  import type {ChartData} from 'chart.js'
+  import {onDestroy} from 'svelte'
+  import {Line} from 'svelte-chartjs'
+  import {globalStateStore} from '~/stores'
+
+  let displayValue: string
+
+  let unsubscribe = globalStateStore.subscribe((data) => {
+    const percentage = toPercentage(data.summary?.averageApr)
+    if (percentage != null) {
+      displayValue = percentage
+    }
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  let data: ChartData<'line', number[]>
+</script>
+
+<div class="flex flex-col h-full">
+  <div>
+    <h1 class="data-label">Average APR</h1>
+    <div class="data-value mt-1">{displayValue ?? ''}</div>
+  </div>
+
+  <div class="mt-4 flex-1">
+    {#if data != null}
+      <Line
+        {data}
+        options={{
+          scales: {
+            x: {type: 'time'},
+            y: {ticks: {display: false}},
+          },
+        }}
+      />
+    {/if}
+  </div>
+</div>
diff --git a/apps/analytics/src/components/DelegationValueChart.svelte b/apps/analytics/src/components/DelegationValueChart.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/util'
+  import type {ChartData} from 'chart.js'
+  import {onDestroy} from 'svelte'
+  import {Line} from 'svelte-chartjs'
+  import {globalStateStore} from '~/stores'
+
+  let displayValue: string
+
+  let unsubscribe = globalStateStore.subscribe((data) => {
+    const value = data.summary?.totalValue
+    if (value != null) {
+      displayValue = compactFormat(value)
+    }
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  let data: ChartData<'line', number[]>
+</script>
+
+<div class="flex flex-col h-full">
+  <div>
+    <h1 class="data-label">Delegation value</h1>
+    <div class="data-value mt-1">{displayValue ?? ''}</div>
+  </div>
+
+  <div class="mt-4 flex-1">
+    {#if data != null}
+      <Line
+        {data}
+        options={{
+          scales: {
+            x: {type: 'time'},
+            y: {ticks: {display: false}},
+          },
+        }}
+      />
+    {/if}
+  </div>
+</div>
diff --git a/apps/analytics/src/components/DelegatorChart.svelte b/apps/analytics/src/components/DelegatorChart.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/util'
+  import type {ChartData} from 'chart.js'
+  import {onDestroy} from 'svelte'
+  import {Line} from 'svelte-chartjs'
+  import {globalStateStore} from '~/stores'
+
+  let displayValue: string
+
+  let unsubscribe = globalStateStore.subscribe((data) => {
+    const value = data.summary?.delegatorCount
+    if (value != null) {
+      displayValue = compactFormat(value)
+    }
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  let data: ChartData<'line', number[]>
+</script>
+
+<div class="flex flex-col h-full">
+  <div>
+    <h1 class="data-label">Delegator</h1>
+    <div class="data-value mt-1">{displayValue ?? ''}</div>
+  </div>
+
+  <div class="mt-4 flex-1">
+    {#if data != null}
+      <Line
+        {data}
+        options={{
+          scales: {
+            x: {type: 'time'},
+            y: {ticks: {display: false}},
+          },
+        }}
+      />
+    {/if}
+  </div>
+</div>
diff --git a/apps/analytics/src/components/Nav.svelte b/apps/analytics/src/components/Nav.svelte
@@ -1,12 +1,57 @@
+<script lang="ts">
+  import {
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuItems,
+    Transition,
+  } from '@rgossiaux/svelte-headlessui'
+  import {ChevronDownIcon} from '@rgossiaux/svelte-heroicons/solid'
+  let links: {label: string; href: string}[] = [
+    {label: 'Home', href: 'https://phala.network'},
+    {label: 'Phala App', href: 'https://app.phala.network'},
+    {label: 'Phat Contract', href: 'https://phat.phala.network'},
+    {label: 'Phat Bricks', href: 'https://bricks.phala.network'},
+  ]
+</script>
+
 <nav
-  class="p-1 h-14 rounded-full bg-slate-800 w-full flex items-center justify-center relative shadow-xl"
+  class="p-1 h-14 rounded-full bg-gray-700 w-full flex items-center justify-center relative shadow-xl"
 >
   <div class="flex items-center absolute top-1 left-1 h-12">
     <img class="block w-12 mr-4" src="logo.svg" alt="Phala logo" />
-    <h1 class="text-xl font-black font-montserrat">Analytics</h1>
+    <h1 class="font-black font-montserrat text-base">Analytics</h1>
   </div>
 
-  <ul class="font-montserrat hidden md:block">
+  <Menu class="absolute top-1 left-1 h-12 font-black font-montserrat text-base">
+    <MenuButton class="flex items-center bg-black/20 rounded-full pr-4">
+      <img class="block w-12 mr-4" src="logo.svg" alt="Phala logo" />
+      <h1>Analytics</h1>
+      <ChevronDownIcon class="w-5 h-5 ml-8 text-gray-600" aria-hidden="true" />
+    </MenuButton>
+    <Transition
+      enter="transition duration-100 ease-out"
+      enterFrom="transform scale-95 opacity-0"
+      enterTo="transform scale-100 opacity-100"
+      leave="transition duration-75 ease-out"
+      leaveFrom="transform scale-100 opacity-100"
+      leaveTo="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        class="absolute right-0 mt-2 bg-gray-700 rounded-3xl p-1 shadow-xl"
+      >
+        {#each links as link}
+          <MenuItem
+            target="_blank"
+            class="flex items-center px-6 hover:bg-black/20 h-10 rounded-full"
+            href={link.href}>{link.label}</MenuItem
+          >
+        {/each}
+      </MenuItems>
+    </Transition>
+  </Menu>
+
+  <ul class="font-montserrat hidden md:block text-sm">
     <li>Overview</li>
   </ul>
 </nav>
diff --git a/apps/analytics/src/components/OnlineWorkerChart.svelte b/apps/analytics/src/components/OnlineWorkerChart.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/util'
+  import type {ChartData} from 'chart.js'
+  import {onDestroy} from 'svelte'
+  import {Line} from 'svelte-chartjs'
+  import {globalStateStore} from '~/stores'
+
+  let displayValue: string
+
+  let unsubscribe = globalStateStore.subscribe((data) => {
+    const value = data.summary?.idleWorkerCount
+    if (value != null) {
+      displayValue = compactFormat(value)
+    }
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  let data: ChartData<'line', number[]>
+</script>
+
+<div class="flex flex-col h-full">
+  <div>
+    <h1 class="data-label">Online workers</h1>
+    <div class="data-value mt-1">{displayValue ?? ''}</div>
+  </div>
+
+  <div class="mt-4 flex-1">
+    {#if data != null}
+      <Line
+        {data}
+        options={{
+          scales: {
+            x: {type: 'time'},
+            y: {ticks: {display: false}},
+          },
+        }}
+      />
+    {/if}
+  </div>
+</div>