From 06dbe2b02e2b6fc708d6d68c82a0594c9c48e1da Mon Sep 17 00:00:00 2001 From: kingsleydon <10992364+kingsleydon@users.noreply.github.com> Date: Mon, 7 Aug 2023 19:00:54 +0800 Subject: [PATCH] feat(analytics): phat chart --- apps/analytics/package.json | 5 + apps/analytics/src/app.css | 15 +++ apps/analytics/src/app.html | 2 +- apps/analytics/src/components/Nav.svelte | 12 ++ .../src/components/PhatContractChart.svelte | 125 ++++++++++++++++++ apps/analytics/src/routes/+page.svelte | 19 ++- apps/analytics/static/logo.svg | 8 ++ apps/analytics/svelte.config.js | 22 +-- apps/analytics/tailwind.config.js | 4 +- apps/app/components/BasePool/Chart.tsx | 2 +- .../app/components/BasePool/WithdrawQueue.tsx | 2 +- apps/app/components/Delegation/Chart.tsx | 2 +- .../app/components/DelegationScatterChart.tsx | 2 +- apps/app/components/DelegationValueChart.tsx | 2 +- apps/app/components/FarmChart.tsx | 2 +- apps/app/components/TopBar/NetworkStats.tsx | 3 +- .../lib => packages/lib/src}/compactFormat.ts | 0 packages/lib/src/index.ts | 1 + packages/lib/src/useConnectPolkadotWallet.ts | 2 +- yarn.lock | 62 +++++++++ 20 files changed, 266 insertions(+), 26 deletions(-) create mode 100644 apps/analytics/src/components/Nav.svelte create mode 100644 apps/analytics/src/components/PhatContractChart.svelte create mode 100644 apps/analytics/static/logo.svg rename {apps/app/lib => packages/lib/src}/compactFormat.ts (100%) diff --git a/apps/analytics/package.json b/apps/analytics/package.json index 04c86c255..adb45753a 100644 --- 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 index b5c61c956..cb6b405a7 100644 --- 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 index 1c09d3a6c..7c2578d05 100644 --- a/apps/analytics/src/app.html +++ b/apps/analytics/src/app.html @@ -6,7 +6,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/apps/analytics/src/components/Nav.svelte b/apps/analytics/src/components/Nav.svelte new file mode 100644 index 000000000..05fcd6cde --- /dev/null +++ b/apps/analytics/src/components/Nav.svelte @@ -0,0 +1,12 @@ + diff --git a/apps/analytics/src/components/PhatContractChart.svelte b/apps/analytics/src/components/PhatContractChart.svelte new file mode 100644 index 000000000..d8ca787e8 --- /dev/null +++ b/apps/analytics/src/components/PhatContractChart.svelte @@ -0,0 +1,125 @@ + + +{#if executions != null} +
+
+

Phat Contract daily execution

+

{current}

+
+ +
+ { + // 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, + }, + }, + }} + /> +
+
+{/if} diff --git a/apps/analytics/src/routes/+page.svelte b/apps/analytics/src/routes/+page.svelte index b06a31974..de8d9b0a2 100644 --- a/apps/analytics/src/routes/+page.svelte +++ b/apps/analytics/src/routes/+page.svelte @@ -1,15 +1,20 @@ - Phala Analytics -
-
- Phala logo -

Phala Analytics

-
+
+
-

Phat Contract execution count

+
+
+ +
diff --git a/apps/analytics/static/logo.svg b/apps/analytics/static/logo.svg new file mode 100644 index 000000000..1eac5c80a --- /dev/null +++ b/apps/analytics/static/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/analytics/svelte.config.js b/apps/analytics/svelte.config.js index 758734600..e3f12c216 100644 --- 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 index 13207ccbb..856de947e 100644 --- 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 index 972e3f135..11206b679 100644 --- 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 index b7cd819e7..b950603e8 100644 --- 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 index 3d57af0fc..630cfac5b 100644 --- a/apps/app/components/Delegation/Chart.tsx +++ b/apps/app/components/Delegation/Chart.tsx @@ -1,5 +1,4 @@ import useSWRValue from '@/hooks/useSWRValue' -import compactFormat from '@/lib/compactFormat' import getDelegationProfit from '@/lib/getDelegationProfit' import { useDelegationSnapshotsConnectionQuery, @@ -7,6 +6,7 @@ import { } 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 index f49783af2..6f1aede0b 100644 --- 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 index 6a4fdc527..bc3a7fc21 100644 --- 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 index ded4fbcb2..7c9c92e98 100644 --- 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 index 35946b484..8df9af56f 100644 --- a/apps/app/components/TopBar/NetworkStats.tsx +++ b/apps/app/components/TopBar/NetworkStats.tsx @@ -2,7 +2,6 @@ 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, @@ -10,7 +9,7 @@ import { } 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 b/packages/lib/src/compactFormat.ts similarity index 100% rename from apps/app/lib/compactFormat.ts rename to packages/lib/src/compactFormat.ts diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 3fcdd3eb1..1b5536440 100644 --- 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 index ba97fe381..d9c9f7dde 100644 --- 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' diff --git a/yarn.lock b/yarn.lock index e06a711c4..78379b3d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2815,6 +2815,15 @@ __metadata: languageName: node linkType: hard +"@graphql-typed-document-node/core@npm:^3.2.0": + version: 3.2.0 + resolution: "@graphql-typed-document-node/core@npm:3.2.0" + peerDependencies: + graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 + checksum: fa44443accd28c8cf4cb96aaaf39d144a22e8b091b13366843f4e97d19c7bfeaf609ce3c7603a4aeffe385081eaf8ea245d078633a7324c11c5ec4b2011bb76d + languageName: node + linkType: hard + "@humanwhocodes/config-array@npm:^0.11.10": version: 0.11.10 resolution: "@humanwhocodes/config-array@npm:0.11.10" @@ -2899,6 +2908,13 @@ __metadata: languageName: node linkType: hard +"@kurkle/color@npm:^0.3.0": + version: 0.3.2 + resolution: "@kurkle/color@npm:0.3.2" + checksum: 79e97b31f8f6efb28c69d373f94b0c7480226fe8ec95221f518ac998e156444a496727ce47de6d728eb5c3369288e794cba82cae34253deb0d472d3bfe080e49 + languageName: node + linkType: hard + "@mantine/core@npm:^6.0.13": version: 6.0.15 resolution: "@mantine/core@npm:6.0.15" @@ -3468,8 +3484,13 @@ __metadata: "@sveltejs/adapter-static": ^2.0.3 "@sveltejs/kit": ^1.20.4 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: ^4.0.5 + svelte-chartjs: ^3.1.2 svelte-check: ^3.4.3 tailwindcss: ^3.3.3 tslib: ^2.4.1 @@ -6999,6 +7020,25 @@ __metadata: languageName: node linkType: hard +"chart.js@npm:^4.3.3": + version: 4.3.3 + resolution: "chart.js@npm:4.3.3" + dependencies: + "@kurkle/color": ^0.3.0 + checksum: 548605fc0a0a64fdc591a41159a2be86c1b408339d6e57b566c04dc157331b003db285a6139801d1700596acde8f0521bc6a156da29388025581619db6600073 + languageName: node + linkType: hard + +"chartjs-adapter-date-fns@npm:^3.0.0": + version: 3.0.0 + resolution: "chartjs-adapter-date-fns@npm:3.0.0" + peerDependencies: + chart.js: ">=2.8.0" + date-fns: ">=2.0.0" + checksum: c39bfdf490749faa589fba6e0dc0a2c5a467a5f06aaa52c5180e10fd9c83414807a064f6950538448bffee354c8064c0ce9d957bccbf2048e7ee2257aa95f138 + languageName: node + linkType: hard + "checkpoint-store@npm:^1.1.0": version: 1.1.0 resolution: "checkpoint-store@npm:1.1.0" @@ -10480,6 +10520,18 @@ __metadata: languageName: node linkType: hard +"graphql-request@npm:^6.1.0": + version: 6.1.0 + resolution: "graphql-request@npm:6.1.0" + dependencies: + "@graphql-typed-document-node/core": ^3.2.0 + cross-fetch: ^3.1.5 + peerDependencies: + graphql: 14 - 16 + checksum: 6d62630a0169574442320651c1f7626c0c602025c3c46b19e09417c9579bb209306ee63de9793a03be2e1701bb7f13971f8545d99bc6573e340f823af0ad35b2 + languageName: node + linkType: hard + "graphql-tag@npm:^2.12.6": version: 2.12.6 resolution: "graphql-tag@npm:2.12.6" @@ -16465,6 +16517,16 @@ __metadata: languageName: node linkType: hard +"svelte-chartjs@npm:^3.1.2": + version: 3.1.2 + resolution: "svelte-chartjs@npm:3.1.2" + peerDependencies: + chart.js: ^3.5.0 || ^4.0.0 + svelte: ^3.45.0 + checksum: a6cdec3c70d42db6ca37cddc40f61f07478a15ea22aee340b3d8696cf2dc84483021b98af6f392a5f63972aaa3af5fc9f09aafd22c846015f6ee1f578080256e + languageName: node + linkType: hard + "svelte-check@npm:^3.4.3": version: 3.4.6 resolution: "svelte-check@npm:3.4.6"