feat(analytics): phat chart

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

Hide file tree

Showing 21 changed files with 255 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,73 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/lib'
+  import type {ChartData} from 'chart.js'
+  import {gql, request} from 'graphql-request'
+  import {onMount} from 'svelte'
+  import {Line} from 'svelte-chartjs'
+
+  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)},
+      ],
+    }
+  }
+  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'},
+            y: {ticks: {display: false}},
+          },
+        }}
+      />
+    </div>
+  </div>
+{/if}
diff --git a/apps/analytics/src/lib/chart.ts b/apps/analytics/src/lib/chart.ts
@@ -0,0 +1,35 @@
+import {
+  Chart,
+  LineController,
+  LineElement,
+  LinearScale,
+  PointElement,
+  TimeScale,
+  Tooltip,
+} from 'chart.js'
+import 'chartjs-adapter-date-fns'
+
+export const initChartJS = () => {
+  Chart.register(
+    Tooltip,
+    LineController,
+    LineElement,
+    PointElement,
+    TimeScale,
+    LinearScale,
+  )
+
+  Chart.defaults.elements.line.tension = 0.5
+  Chart.defaults.elements.point.radius = 0
+  Chart.defaults.maintainAspectRatio = false
+  Chart.defaults.font.family = 'Montserrat'
+  Chart.defaults.color = '#94a3b8'
+  Chart.defaults.interaction.mode = 'index'
+  Chart.defaults.interaction.intersect = false
+  Chart.defaults.plugins.tooltip.displayColors = false
+  Chart.defaults.scale.grid.display = false
+  Chart.defaults.scales.time.time.tooltipFormat = 'PP'
+  Chart.defaults.borderColor = 'transparent'
+  Chart.defaults.animation = false
+  Chart.defaults.datasets.line.borderColor = '#C5FF46'
+}
diff --git a/apps/analytics/src/routes/+page.svelte b/apps/analytics/src/routes/+page.svelte
@@ -1,15 +1,26 @@
-<script>
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import Nav from '~/components/Nav.svelte'
+  import PhatContractChart from '~/components/PhatContractChart.svelte'
+  import {initChartJS} from '~/lib/chart'
+
+  onMount(() => {
+    initChartJS()
+  })
 </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'