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

opensaas.sh stats improvements

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 @@
+@@ -7,21 +9,68 @@
- import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin'
+ 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,6 +41,10 @@
 +      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}>
@@ -43,7 +52,13 @@
 +      {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>

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,