feat(analytics): phat chart

Phala-Network · Aug 8, 2023 · 06dbe2b · 06dbe2b
1 parent 5ddfa81
commit 06dbe2b
Show file tree

Hide file tree

Showing 20 changed files with 266 additions and 26 deletions.
diff --git a/apps/analytics/package.json b/apps/analytics/package.json
@@ -22,7 +22,12 @@
   "type": "module",
   "dependencies": {
     "autoprefixer": "^10.4.14",
+    "chart.js": "^4.3.3",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "date-fns": "^2.30.0",
+    "graphql-request": "^6.1.0",
     "postcss": "^8.4.27",
+    "svelte-chartjs": "^3.1.2",
     "tailwindcss": "^3.3.3"
   }
 }
diff --git a/apps/analytics/src/app.css b/apps/analytics/src/app.css
@@ -1,3 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .card {
+    @apply bg-slate-800 rounded-3xl px-6 py-4 shadow-xl;
+  }
+
+  .card-head {
+    @apply font-montserrat font-bold text-4xl;
+  }
+
+  .card-title {
+    @apply font-montserrat font-semibold text-sm text-slate-400;
+  }
+}
diff --git a/apps/analytics/src/app.html b/apps/analytics/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-gray-900 text-white">
+	<body data-sveltekit-preload-data="hover" class="bg-slate-900 text-white">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/apps/analytics/src/components/Nav.svelte b/apps/analytics/src/components/Nav.svelte
@@ -0,0 +1,12 @@
+<nav
+  class="p-1 h-14 rounded-full bg-slate-800 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>
+  </div>
+
+  <ul class="font-montserrat hidden md:block">
+    <li>Overview</li>
+  </ul>
+</nav>
diff --git a/apps/analytics/src/components/PhatContractChart.svelte b/apps/analytics/src/components/PhatContractChart.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/lib'
+  import {gql, request} from 'graphql-request'
+  import {onMount} from 'svelte'
+  import {Line} from 'svelte-chartjs'
+
+  import {
+    Chart as ChartJS,
+    LineElement,
+    LinearScale,
+    PointElement,
+    TimeScale,
+    Tooltip,
+    type ChartData,
+  } from 'chart.js'
+
+  import 'chartjs-adapter-date-fns'
+
+  ChartJS.register(Tooltip, LineElement, LinearScale, TimeScale, PointElement)
+
+  interface Execution {
+    dt: Date
+    executionCount: number
+    userCount: number
+  }
+
+  interface ExecutionData {
+    dt: string
+    executionCount: number
+    userCount: number
+  }
+
+  const document = gql`
+    {
+      phatOfflineExecution(orderBy: {dt: DESC}, limit: 10) {
+        dt
+        executionCount
+        userCount
+      }
+    }
+  `
+  let executions: Execution[]
+  let data: ChartData<'line', number[]>
+  $: current = executions?.[0]
+    ? compactFormat(executions[0].executionCount)
+    : null
+  $: if (executions) {
+    data = {
+      labels: executions.map((e) => e.dt),
+      datasets: [
+        {
+          label: 'Execution',
+          data: executions.map((e) => e.executionCount),
+          borderColor: '#C5FF46',
+        },
+      ],
+    }
+  }
+  onMount(() => {
+    request<{phatOfflineExecution: ExecutionData[]}>(
+      'https://offchain-metrics.phala.network/v1/graphql',
+      document
+    ).then((res) => {
+      executions = res.phatOfflineExecution.reverse().map((e) => {
+        return {
+          ...e,
+          dt: new Date(e.dt),
+        }
+      })
+    })
+  })
+</script>
+
+{#if executions != null}
+  <div class="flex flex-col h-full">
+    <div>
+      <h2 class="card-title">Phat Contract daily execution</h2>
+      <h1 class="card-head mt-1">{current}</h1>
+    </div>
+
+    <div class="mt-4 flex-1">
+      <Line
+        {data}
+        options={{
+          scales: {
+            x: {
+              type: 'time',
+              grid: {display: false},
+              border: {display: false},
+              ticks: {color: '#94a3b8', font: {family: 'Montserrat'}},
+              time: {tooltipFormat: 'PP'},
+            },
+            y: {
+              // suggestedMin: 1000000,
+              // min: 0,
+              grid: {display: false},
+              border: {display: false},
+              ticks: {
+                display: false,
+                // color: '#94a3b8',
+                // font: {family: 'Montserrat'},
+                // callback: (tickValue) => {
+                //   if (typeof tickValue === 'number') {
+                //     return compactFormat(tickValue)
+                //   }
+                //   return tickValue
+                // },
+              },
+            },
+          },
+          elements: {line: {tension: 0.5}, point: {radius: 0}},
+          maintainAspectRatio: false,
+          interaction: {mode: 'index', intersect: false},
+          plugins: {
+            tooltip: {
+              titleFont: {family: 'Montserrat'},
+              bodyFont: {family: 'Montserrat'},
+              displayColors: false,
+            },
+          },
+        }}
+      />
+    </div>
+  </div>
+{/if}
diff --git a/apps/analytics/src/routes/+page.svelte b/apps/analytics/src/routes/+page.svelte
@@ -1,15 +1,20 @@
-<script>
+<script lang="ts">
+  import Nav from '~/components/Nav.svelte'
+  import PhatContractChart from '~/components/PhatContractChart.svelte'
 </script>
 
 <svelte:head>
   <title>Phala Analytics</title>
 </svelte:head>
 
-<main class="flex flex-col items-center">
-  <header class="flex items-center my-6">
-    <img class="block w-10 mr-4" src="favicon.png" alt="Phala logo" />
-    <h1 class="text-2xl font-medium">Phala Analytics</h1>
-  </header>
+<header class="mx-auto px-4 md:px-6 mt-4 md:mt-6 max-w-6xl">
+  <Nav />
+</header>
 
-  <h2>Phat Contract execution count</h2>
+<main
+  class="grid gap-4 grid-cols-1 md:grid-cols-2 max-w-5xl mx-auto mt-6 md:mt-10 px-4 md:px-6"
+>
+  <section class="card h-80">
+    <PhatContractChart />
+  </section>
 </main>
diff --git a/apps/analytics/static/logo.svg b/apps/analytics/static/logo.svg
diff --git a/apps/analytics/svelte.config.js b/apps/analytics/svelte.config.js
@@ -1,13 +1,19 @@
-import adapter from '@sveltejs/adapter-static';
-import {vitePreprocess} from '@sveltejs/kit/vite';
+import adapter from '@sveltejs/adapter-static'
+import {vitePreprocess} from '@sveltejs/kit/vite'
+import path from 'path'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
 
-	kit: {adapter: adapter()}
-};
+  kit: {
+    adapter: adapter(),
+    alias: {
+      '~': path.resolve('./src'),
+    },
+  },
+}
 
-export default config;
+export default config
diff --git a/apps/analytics/tailwind.config.js b/apps/analytics/tailwind.config.js
@@ -3,7 +3,9 @@ export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
     extend: {},
+    fontFamily: {
+      montserrat: ['Montserrat', 'sans-serif'],
+    },
   },
   plugins: [],
 }
-
diff --git a/apps/app/components/BasePool/Chart.tsx b/apps/app/components/BasePool/Chart.tsx
@@ -1,12 +1,12 @@
 import useSWRValue from '@/hooks/useSWRValue'
 import {aprToApy} from '@/lib/apr'
-import compactFormat from '@/lib/compactFormat'
 import {
   useBasePoolSnapshotsConnectionQuery,
   type BasePoolCommonFragment,
 } from '@/lib/subsquidQuery'
 import {colors} from '@/lib/theme'
 import {subsquidClientAtom} from '@/store/common'
+import {compactFormat} from '@phala/lib'
 import {addDays, addHours} from 'date-fns'
 import Decimal from 'decimal.js'
 import {useAtom} from 'jotai'

diff --git a/apps/app/components/BasePool/WithdrawQueue.tsx b/apps/app/components/BasePool/WithdrawQueue.tsx
@@ -1,7 +1,6 @@
 import WithdrawalQueueIcon from '@/assets/withdraw_queue.svg'
 import Empty from '@/components/Empty'
 import SectionHeader from '@/components/SectionHeader'
-import compactFormat from '@/lib/compactFormat'
 import {
   useDelegationsConnectionQuery,
   type BasePoolCommonFragment,
@@ -12,6 +11,7 @@ import Check from '@mui/icons-material/Check'
 import WarningAmber from '@mui/icons-material/WarningAmber'
 import {Box, Paper, Stack, Tooltip, Typography, useTheme} from '@mui/material'
 import {DataGrid, type GridColDef, type GridSortModel} from '@mui/x-data-grid'
+import {compactFormat} from '@phala/lib'
 import {toCurrency} from '@phala/util'
 import {
   addDays,

diff --git a/apps/app/components/Delegation/Chart.tsx b/apps/app/components/Delegation/Chart.tsx
@@ -1,12 +1,12 @@
 import useSWRValue from '@/hooks/useSWRValue'
-import compactFormat from '@/lib/compactFormat'
 import getDelegationProfit from '@/lib/getDelegationProfit'
 import {
   useDelegationSnapshotsConnectionQuery,
   type DelegationCommonFragment,
 } from '@/lib/subsquidQuery'
 import {colors} from '@/lib/theme'
 import {subsquidClientAtom} from '@/store/common'
+import {compactFormat} from '@phala/lib'
 import {addDays} from 'date-fns'
 import Decimal from 'decimal.js'
 import {useAtom} from 'jotai'

diff --git a/apps/app/components/DelegationScatterChart.tsx b/apps/app/components/DelegationScatterChart.tsx
@@ -1,8 +1,8 @@
 import useGetApr from '@/hooks/useGetApr'
-import compactFormat from '@/lib/compactFormat'
 import {useDelegationsConnectionQuery} from '@/lib/subsquidQuery'
 import {colors} from '@/lib/theme'
 import {subsquidClientAtom} from '@/store/common'
+import {compactFormat} from '@phala/lib'
 import Decimal from 'decimal.js'
 import {useAtom} from 'jotai'
 import {useMemo, type FC} from 'react'

diff --git a/apps/app/components/DelegationValueChart.tsx b/apps/app/components/DelegationValueChart.tsx
@@ -1,7 +1,7 @@
 import useSWRValue from '@/hooks/useSWRValue'
-import compactFormat from '@/lib/compactFormat'
 import {useAccountSnapshotsConnectionQuery} from '@/lib/subsquidQuery'
 import {subsquidClientAtom} from '@/store/common'
+import {compactFormat} from '@phala/lib'
 import {addDays} from 'date-fns'
 import Decimal from 'decimal.js'
 import {useAtom} from 'jotai'

diff --git a/apps/app/components/FarmChart.tsx b/apps/app/components/FarmChart.tsx
@@ -1,11 +1,11 @@
 import useSWRValue from '@/hooks/useSWRValue'
-import compactFormat from '@/lib/compactFormat'
 import {
   useAccountSnapshotsConnectionQuery,
   type BasePoolKind,
 } from '@/lib/subsquidQuery'
 import {colors} from '@/lib/theme'
 import {subsquidClientAtom} from '@/store/common'
+import {compactFormat} from '@phala/lib'
 import {addDays} from 'date-fns'
 import Decimal from 'decimal.js'
 import {useAtom} from 'jotai'

diff --git a/apps/app/components/TopBar/NetworkStats.tsx b/apps/app/components/TopBar/NetworkStats.tsx
@@ -2,15 +2,14 @@ import {type WikiEntry} from '@/assets/wikiData'
 import {khalaSubsquidClient, phalaSubsquidClient} from '@/config'
 import useGetApr from '@/hooks/useGetApr'
 import useSWRValue from '@/hooks/useSWRValue'
-import compactFormat from '@/lib/compactFormat'
 import {
   useGlobalRewardsSnapshotsConnectionQuery,
   useGlobalStateQuery,
   useIdleWorkerCountQuery,
 } from '@/lib/subsquidQuery'
 import {chainAtom} from '@/store/common'
 import {Skeleton, Stack, Tooltip, useMediaQuery, useTheme} from '@mui/material'
-import {useInterval} from '@phala/lib'
+import {compactFormat, useInterval} from '@phala/lib'
 import {toPercentage} from '@phala/util'
 import {useQuery} from '@tanstack/react-query'
 import {addDays} from 'date-fns'

diff --git a/apps/app/lib/compactFormat.ts → packages/lib/src/compactFormat.ts b/apps/app/lib/compactFormat.ts → packages/lib/src/compactFormat.ts
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
@@ -1,3 +1,4 @@
+export {default as compactFormat} from './compactFormat'
 export * from './signAndSend'
 export {useConnectPolkadotWallet} from './useConnectPolkadotWallet'
 export {useInterval} from './useInterval'
diff --git a/packages/lib/src/useConnectPolkadotWallet.ts b/packages/lib/src/useConnectPolkadotWallet.ts
@@ -1,6 +1,6 @@
 import {polkadotAccountsAtom, walletAtom, walletNameAtom} from '@phala/store'
 import {transformAddress} from '@phala/util'
-import {type WalletAccount} from '@talismn/connect-wallets'
+import type {WalletAccount} from '@talismn/connect-wallets'
 import {useAtom} from 'jotai'
 import {useEffect} from 'react'