filter stats by all time, past 30d, or past 7d

DA0-DA0 · Jun 1, 2024 · d0ec8ae · d0ec8ae
1 parent 96c2740
commit d0ec8ae
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 32 deletions.
diff --git a/apps/dapp/pages/[[...tab]].tsx b/apps/dapp/pages/[[...tab]].tsx
@@ -57,7 +57,7 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
       ].map((chainId) => getDaoInfoForChainId(chainId, []))
 
   // Get all or chain-specific stats and TVL.
-  const [tvl, stats] = await Promise.all([
+  const [tvl, allStats, monthStats, weekStats] = await Promise.all([
     querySnapper<number>({
       query: chainId ? 'daodao-chain-tvl' : 'daodao-all-tvl',
       parameters: chainId ? { chainId } : undefined,
@@ -66,9 +66,23 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
       query: chainId ? 'daodao-chain-stats' : 'daodao-all-stats',
       parameters: chainId ? { chainId } : undefined,
     }),
+    querySnapper<DaoDaoIndexerChainStats>({
+      query: chainId ? 'daodao-chain-stats' : 'daodao-all-stats',
+      parameters: {
+        ...(chainId ? { chainId } : undefined),
+        daysAgo: 30,
+      },
+    }),
+    querySnapper<DaoDaoIndexerChainStats>({
+      query: chainId ? 'daodao-chain-stats' : 'daodao-all-stats',
+      parameters: {
+        ...(chainId ? { chainId } : undefined),
+        daysAgo: 7,
+      },
+    }),
   ])
 
-  if (!tvl || !stats) {
+  if (!tvl || !allStats || !monthStats || !weekStats) {
     processError('Failed to fetch TVL/stats for home page', {
       forceCapture: true,
       tags: {
@@ -85,7 +99,9 @@ export const getStaticProps: GetStaticProps<StatefulHomeProps> = async ({
       ...(chainId && { chainId }),
       // All or chain-specific stats.
       stats: {
-        ...stats,
+        all: allStats,
+        month: monthStats,
+        week: weekStats,
         // If chain is 1, it will not be shown.
         chains: chainId ? 1 : getSupportedChains().length,
         tvl,

diff --git a/packages/stateless/pages/Home.stories.tsx b/packages/stateless/pages/Home.stories.tsx
@@ -16,10 +16,24 @@ const Template: ComponentStory<typeof Home> = (args) => <Home {...args} />
 export const Default = Template.bind({})
 Default.args = {
   stats: {
-    daos: 1234,
-    proposals: 5678,
-    votes: 90123,
-    uniqueVoters: 4567,
+    all: {
+      daos: 1234,
+      proposals: 5678,
+      votes: 90123,
+      uniqueVoters: 4567,
+    },
+    month: {
+      daos: 234,
+      proposals: 678,
+      votes: 9123,
+      uniqueVoters: 567,
+    },
+    week: {
+      daos: 34,
+      proposals: 78,
+      votes: 123,
+      uniqueVoters: 67,
+    },
     chains: 10,
     tvl: 1234567890,
   },

diff --git a/packages/stateless/pages/Home.tsx b/packages/stateless/pages/Home.tsx
@@ -8,7 +8,7 @@ import {
   Search,
 } from '@mui/icons-material'
 import clsx from 'clsx'
-import { ComponentType } from 'react'
+import { ComponentType, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -18,7 +18,12 @@ import {
 } from '@dao-dao/types'
 import { UNDO_PAGE_PADDING_HORIZONTAL_CLASSES } from '@dao-dao/utils'
 
-import { Button, DaoInfoCards, HorizontalScroller } from '../components'
+import {
+  Button,
+  DaoInfoCards,
+  HorizontalScroller,
+  SegmentedControls,
+} from '../components'
 
 export type HomeProps = {
   /**
@@ -43,6 +48,8 @@ export type HomeProps = {
   openSearch: () => void
 }
 
+type StatsMode = 'all' | 'month' | 'week'
+
 export const Home = ({
   stats,
   DaoCard,
@@ -52,51 +59,78 @@ export const Home = ({
 }: HomeProps) => {
   const { t } = useTranslation()
 
+  const [statsMode, setStatsMode] = useState<StatsMode>('all')
+
   return (
     <>
+      <SegmentedControls<StatsMode>
+        className="w-max mb-4"
+        onSelect={setStatsMode}
+        selected={statsMode}
+        tabs={[
+          {
+            label: t('title.all'),
+            value: 'all',
+          },
+          {
+            label: '30d',
+            value: 'month',
+          },
+          {
+            label: '7d',
+            value: 'week',
+          },
+        ]}
+      />
+
       <DaoInfoCards
         cards={[
           {
             Icon: Public,
             label: t('title.daos'),
-            value: stats.daos.toLocaleString(),
+            value: stats[statsMode].daos.toLocaleString(),
           },
           {
             Icon: DescriptionOutlined,
             label: t('title.proposals'),
-            value: stats.proposals.toLocaleString(),
+            value: stats[statsMode].proposals.toLocaleString(),
           },
           {
             Icon: HowToVote,
             label: t('title.votesCast'),
-            value: stats.votes.toLocaleString(),
+            value: stats[statsMode].votes.toLocaleString(),
           },
           {
             Icon: PeopleOutlined,
             label: t('title.uniqueVoters'),
-            value: stats.uniqueVoters.toLocaleString(),
-          },
-          {
-            Icon: LockOutlined,
-            label: t('title.tvl'),
-            tooltip: t('info.estimatedTreasuryUsdValueTooltip'),
-            value:
-              '$' +
-              stats.tvl.toLocaleString(undefined, {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-              }),
+            value: stats[statsMode].uniqueVoters.toLocaleString(),
           },
-          // Only show the chain count if more than 1 (i.e. not on a
-          // chain-specific home page).
-          ...(stats.chains > 1
+          // Only show TVL and chain count when all is selected.
+          ...(statsMode === 'all'
             ? [
                 {
-                  Icon: Link,
-                  label: t('title.chains'),
-                  tooltip: t('info.chainsDeployedTooltip'),
-                  value: stats.chains.toLocaleString(),
+                  Icon: LockOutlined,
+                  label: t('title.tvl'),
+                  tooltip: t('info.estimatedTreasuryUsdValueTooltip'),
+                  value:
+                    '$' +
+                    stats.tvl.toLocaleString(undefined, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2,
+                    }),
                 },
+                // Only show the chain count if more than 1 (i.e. not on a
+                // chain-specific home page).
+                ...(stats.chains > 1
+                  ? [
+                      {
+                        Icon: Link,
+                        label: t('title.chains'),
+                        tooltip: t('info.chainsDeployedTooltip'),
+                        value: stats.chains.toLocaleString(),
+                      },
+                    ]
+                  : []),
               ]
             : []),
         ]}

diff --git a/packages/types/indexer.ts b/packages/types/indexer.ts
@@ -50,7 +50,25 @@ export type DaoDaoIndexerChainStats = {
   uniqueVoters: number
 }
 
-export type DaoDaoIndexerAllStats = DaoDaoIndexerChainStats & {
+export type DaoDaoIndexerAllStats = {
+  /**
+   * Stats from all time.
+   */
+  all: DaoDaoIndexerChainStats
+  /**
+   * Stats from last 30 days.
+   */
+  month: DaoDaoIndexerChainStats
+  /**
+   * Stats from last 7 days.
+   */
+  week: DaoDaoIndexerChainStats
+  /**
+   * Number of chains DAO DAO is deployed on.
+   */
   chains: number
+  /**
+   * Total TVL.
+   */
   tvl: number
 }