Merge pull request #320 from wasp-lang/miho-plausible-stats

opensaas.sh stats improvements
wasp-lang · Nov 19, 2024 · 79efec8 · 79efec8
2 parents 85fcc8b + 7db5489
commit 79efec8
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 6 deletions.
diff --git a/opensaas-sh/app_diff/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx.diff b/opensaas-sh/app_diff/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx.diff
@@ -1,18 +1,23 @@
 --- template/app/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx
 +++ opensaas-sh/app/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx
 @@ -1,4 +1,6 @@
-+import { Link } from "wasp/client/router";
++import { Link } from 'wasp/client/router';
  import { type AuthUser } from 'wasp/auth';
-+import { useState, useEffect } from 'react';
++import { useState, useEffect, useMemo } from 'react';
  import { useQuery, getDailyStats } from 'wasp/client/operations';
  import TotalSignupsCard from './TotalSignupsCard';
  import TotalPageViewsCard from './TotalPageViewsCard';
-@@ -10,12 +12,45 @@
- import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin'
+@@ -7,21 +9,68 @@
+ import RevenueAndProfitChart from './RevenueAndProfitChart';
+ import SourcesTable from './SourcesTable';
+ import DefaultLayout from '../../layout/DefaultLayout';
+-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin'
++import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 
  const Dashboard = ({ user }: { user: AuthUser }) => {
+-  useRedirectHomeUnlessUserIsAdmin({ user })
 +  const [isDemoInfoVisible, setIsDemoInfoVisible] = useState(false);
-   useRedirectHomeUnlessUserIsAdmin({ user })
++  useRedirectHomeUnlessUserIsAdmin({ user });
 
    const { data: stats, isLoading, error } = useQuery(getDailyStats);
 
@@ -36,14 +41,24 @@
 +      console.error(error);
 +    }
 +  };
++
++  const sortedSources = useMemo(() => {
++    return stats?.dailyStats?.sources?.slice().sort((a, b) => b.visitors - a.visitors);
++  }, [stats?.dailyStats?.sources]);
 +
    return (
      <DefaultLayout user={user}>
 +      {/* Floating Demo Announcement */}
 +      {isDemoInfoVisible && (
 +        <div className='fixed z-999 bottom-0 mb-2 left-1/2 -translate-x-1/2 lg:mb-4 bg-gray-700 rounded-full px-3.5 py-2 text-sm text-white duration-300 ease-in-out hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600'>
 +          <div className='px-4 flex flex-row gap-2 items-center my-1'>
-+            <span className='text-gray-100 text-center'>This is actual data from Stripe test purchases. <br/> Try out purchasing a <Link to='/pricing' className="underline text-yellow-400">test product</Link>!</span>
++            <span className='text-gray-100 text-center'>
++              This is actual data from Stripe test purchases. <br /> Try out purchasing a{' '}
++              <Link to='/pricing' className='underline text-yellow-400'>
++                test product
++              </Link>
++              !
++            </span>
 +            <button className=' pl-2.5 text-gray-400 text-xl font-bold' onClick={() => handleDemoInfoClose()}>
 +              X
 +            </button>
@@ -53,3 +68,23 @@
        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5'>
          <TotalPageViewsCard
            totalPageViews={stats?.dailyStats.totalViews}
+           prevDayViewsChangePercent={stats?.dailyStats.prevDayViewsChangePercent}
+         />
+-        <TotalRevenueCard dailyStats={stats?.dailyStats} weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
++        <TotalRevenueCard
++          dailyStats={stats?.dailyStats}
++          weeklyStats={stats?.weeklyStats}
++          isLoading={isLoading}
++        />
+         <TotalPayingUsersCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
+         <TotalSignupsCard dailyStats={stats?.dailyStats} isLoading={isLoading} />
+       </div>
+@@ -30,7 +79,7 @@
+         <RevenueAndProfitChart weeklyStats={stats?.weeklyStats} isLoading={isLoading} />
+
+         <div className='col-span-12 xl:col-span-8'>
+-          <SourcesTable sources={stats?.dailyStats?.sources} />
++          <SourcesTable sources={sortedSources} />
+         </div>
+       </div>
+     </DefaultLayout>
diff --git a/opensaas-sh/app_diff/src/analytics/providers/plausibleAnalyticsUtils.ts.diff b/opensaas-sh/app_diff/src/analytics/providers/plausibleAnalyticsUtils.ts.diff
@@ -0,0 +1,29 @@
+--- template/app/src/analytics/providers/plausibleAnalyticsUtils.ts
++++ opensaas-sh/app/src/analytics/providers/plausibleAnalyticsUtils.ts
+@@ -36,7 +36,7 @@
+
+ async function getTotalPageViews() {
+   const response = await fetch(
+-    `${PLAUSIBLE_BASE_URL}/v1/stats/aggregate?site_id=${PLAUSIBLE_SITE_ID}&metrics=pageviews`,
++    `${PLAUSIBLE_BASE_URL}/v1/stats/aggregate?site_id=${PLAUSIBLE_SITE_ID}&metrics=pageviews&with_imported=true`,
+     {
+       method: 'GET',
+       headers: {
+@@ -80,7 +80,7 @@
+ }
+
+ async function getPageviewsForDate(date: string) {
+-  const url = `${PLAUSIBLE_BASE_URL}/v1/stats/aggregate?site_id=${PLAUSIBLE_SITE_ID}&period=day&date=${date}&metrics=pageviews`;
++  const url = `${PLAUSIBLE_BASE_URL}/v1/stats/aggregate?site_id=${PLAUSIBLE_SITE_ID}&period=day&date=${date}&metrics=pageviews&with_imported=true`;
+   const response = await fetch(url, {
+     method: 'GET',
+     headers: headers,
+@@ -93,7 +93,7 @@
+ }
+
+ export async function getSources() {
+-  const url = `${PLAUSIBLE_BASE_URL}/v1/stats/breakdown?site_id=${PLAUSIBLE_SITE_ID}&property=visit:source&metrics=visitors`;
++  const url = `${PLAUSIBLE_BASE_URL}/v1/stats/breakdown?site_id=${PLAUSIBLE_SITE_ID}&property=visit:source&metrics=visitors&with_imported=true`;
+   const response = await fetch(url, {
+     method: 'GET',
+     headers: headers,