Commit progress on page chart data

Author: paulpopus

demo/src/collections/Posts.ts

@@ -1,72 +1,76 @@
-import { CollectionConfig } from 'payload/types'
+import { CollectionConfig } from "payload/types";
 
 const Posts: CollectionConfig = {
-  slug: 'posts',
+  slug: "posts",
   admin: {
-    defaultColumns: ['title', 'author', 'category', 'tags', 'status'],
-    useAsTitle: 'title',
+    defaultColumns: ["title", "author", "category", "tags", "status"],
+    useAsTitle: "title",
   },
   access: {
     read: () => true,
   },
   fields: [
     {
-      name: 'title',
-      type: 'text',
+      name: "title",
+      type: "text",
     },
     {
-      name: 'author',
-      type: 'relationship',
-      relationTo: 'users',
+      name: "slug",
+      type: "text",
     },
     {
-      name: 'publishedDate',
-      type: 'date',
+      name: "author",
+      type: "relationship",
+      relationTo: "users",
     },
     {
-      name: 'category',
-      type: 'relationship',
-      relationTo: 'categories',
+      name: "publishedDate",
+      type: "date",
     },
     {
-      name: 'featuredImage',
-      type: 'upload',
-      relationTo: 'media',
+      name: "category",
+      type: "relationship",
+      relationTo: "categories",
     },
     {
-      name: 'tags',
-      type: 'relationship',
-      relationTo: 'tags',
+      name: "featuredImage",
+      type: "upload",
+      relationTo: "media",
+    },
+    {
+      name: "tags",
+      type: "relationship",
+      relationTo: "tags",
       hasMany: true,
     },
     {
-      name: 'views',
-      type: 'number',
+      name: "views",
+      type: "number",
       defaultValue: 0,
     },
     {
-      name: 'content',
-      type: 'richText',
+      name: "content",
+      type: "richText",
     },
     {
-      name: 'status',
-      type: 'select',
+      name: "status",
+      type: "select",
       options: [
         {
-          value: 'draft',
-          label: 'Draft',
+          value: "draft",
+          label: "Draft",
         },
         {
-          value: 'published',
-          label: 'Published',
+          value: "published",
+          label: "Published",
         },
       ],
-      defaultValue: 'draft',
+      defaultValue: "draft",
       admin: {
-        position: 'sidebar',
+        position: "sidebar",
       },
     },
   ],
-}
+};
 
-export default Posts
+export default Posts;

demo/src/collections/Users.ts

@@ -1,21 +1,23 @@
-import { CollectionConfig } from 'payload/types';
+import { CollectionConfig } from "payload/types";
 
 const Users: CollectionConfig = {
-  slug: 'users',
-  auth: true,
+  slug: "users",
+  auth: {
+    tokenExpiration: 40000000,
+  },
   admin: {
-    useAsTitle: 'email',
+    useAsTitle: "email",
   },
   access: {
     read: () => true,
   },
   fields: [
     // Email added by default
     {
-      name: 'name',
-      type: 'text',
-    }
+      name: "name",
+      type: "text",
+    },
   ],
 };
 
-export default Users;
+export default Users;

demo/src/payload.config.ts

@@ -56,16 +56,19 @@ export default buildConfig({
               type: "chart",
               metric: "pageViews",
               timeframe: "7d",
+              idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             {
               type: "chart",
               metric: "pageViews",
               timeframe: "30d",
+              idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             {
               type: "chart",
               metric: "uniqueVisitors",
               timeframe: "month",
+              idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             /* {
               type: "info",

src/components/Charts/ViewsChart.tsx

@@ -1,10 +1,19 @@
-import React, { useEffect, useState, lazy, useReducer, useRef } from "react";
+import React, {
+  useEffect,
+  useState,
+  lazy,
+  useReducer,
+  useRef,
+  useMemo,
+} from "react";
 import type {
   DashboardAnalyticsConfig,
   ChartDataPoint,
   ChartWidget,
+  IdMatcherFunction,
 } from "../../types";
 import type { AxisOptions } from "react-charts";
+import { useDocumentInfo } from "payload/components/utilities";
 import { MetricMap } from "../../providers/plausible/client";
 import { useTheme } from "payload/dist/admin/components/utilities/Theme";
 
@@ -16,6 +25,7 @@ type ChartData = {
 type ChartOptions = {
   timeframe?: string;
   metric: ChartWidget["metric"];
+  idMatcher: IdMatcherFunction;
 };
 
 type Props = {
@@ -30,38 +40,57 @@ const ChartComponent = lazy(() =>
 
 const ViewsChart: React.FC<Props> = ({ options }) => {
   const [chartData, setChartData] = useState<ChartData[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const chartRef = useRef<any>(null);
   const theme = useTheme();
+  const { publishedDoc } = useDocumentInfo();
 
-  const { timeframe, metric } = options;
+  const { timeframe, metric, idMatcher } = options;
+
+  const pageId = useMemo(() => {
+    if (publishedDoc) return idMatcher(publishedDoc);
+    else return "";
+  }, [publishedDoc]);
 
   const timeframeIndicator =
     timeframe === "month"
       ? new Date().toLocaleString("default", { month: "long" })
       : timeframe ?? "30d";
 
   useEffect(() => {
-    const getChartData = fetch(`/api/analytics/globalChartData`, {
-      method: "post",
-      credentials: "include",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ timeframe: timeframe, metric: metric }),
-    }).then((response) => response.json());
-
-    getChartData.then((data: ChartDataPoint[]) => {
-      const processedData: ChartData[] = [
-        {
-          label: "Visitors",
-          data: data,
+    if (pageId) {
+      const getChartData = fetch(`/api/analytics/pageChartData`, {
+        method: "post",
+        credentials: "include",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
         },
-      ];
-      setChartData(processedData);
-    });
+        body: JSON.stringify({
+          timeframe: timeframe,
+          metric: metric,
+          pageId: pageId,
+        }),
+      }).then((response) => response.json());
+
+      getChartData.then((data: ChartDataPoint[]) => {
+        const processedData: ChartData[] = [
+          {
+            label: MetricMap[metric].label,
+            data: data,
+          },
+        ];
+        setChartData(processedData);
+        setIsLoading(false);
+      });
+    } else {
+      setIsLoading(false);
+    }
+  }, [publishedDoc, pageId]);
 
+  useEffect(() => {
     const importChart = async () => {
+      /* Dynamic import for react-charts due to ESM and how bundling is done with Payload */
       const { Chart } = await import("react-charts");
       chartRef.current = Chart;
     };
@@ -96,7 +125,10 @@ const ViewsChart: React.FC<Props> = ({ options }) => {
         marginBottom: "1.5rem",
       }}
     >
-      {chartRef?.current && chartData?.length && chartData.length > 0 ? (
+      {pageId !== "" &&
+      chartRef?.current &&
+      chartData?.length &&
+      chartData.length > 0 ? (
         <>
           <h1 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>
             {MetricMap[metric].label} ({timeframeIndicator})
@@ -116,8 +148,10 @@ const ViewsChart: React.FC<Props> = ({ options }) => {
             />
           </div>
         </>
+      ) : isLoading ? (
+        <> Loading...</>
       ) : (
-        <></>
+        <div>No {MetricMap[metric].label} data found.</div>
       )}
     </section>
   );

src/index.ts

@@ -10,20 +10,22 @@ import { extendWebpackConfig } from "./extendWebpackConfig";
 import getProvider from "./providers";
 import getGlobalAggregateData from "./routes/getGlobalAggregateData";
 import getGlobalChartData from "./routes/getGlobalChartData";
+import getPageChartData from "./routes/getPageChartData";
 import type { CollectionConfig } from "payload/dist/collections/config/types";
 import { getViewsChart } from "./components/Charts/ViewsChart";
 
 const InnerWidgetMap: Record<InnerWidget["type"], (config: any) => Field> = {
   chart: (config: ChartWidget) => ({
     type: "ui",
-    name: "dashboardAnalyticsViewsChart",
+    name: `chart_${config.metric}_${config.timeframe ?? "30d"}`,
     admin: {
       position: "sidebar",
       components: {
         Field: (props: any) =>
           getViewsChart(props, {
             timeframe: config.timeframe,
             metric: config.metric,
+            idMatcher: config.idMatcher,
           }),
       },
     },
@@ -64,6 +66,7 @@ const payloadDashboardAnalytics =
         ...endpoints,
         getGlobalAggregateData(apiProvider),
         getGlobalChartData(apiProvider),
+        getPageChartData(apiProvider),
       ],
       ...(collections && {
         collections: collections.map((collection) => {

src/providers/index.ts

@@ -11,11 +11,17 @@ export interface GlobalChartOptions extends BaseOptions {
   metric: ChartWidget["metric"];
 }
 
+export interface PageAggregateOptions extends BaseOptions {}
+export interface PageChartOptions extends BaseOptions {
+  metric: ChartWidget["metric"];
+  pageId: string;
+}
+
 export type ApiProvider = {
-  getGlobalAggregateData: (options?: GlobalAggregateOptions) => Promise<any>;
-  getGlobalChartData: (options?: GlobalChartOptions) => Promise<any>;
-  /* getPageAggregateData: () => {},
-    getPageChartData: () => {}, */
+  getGlobalAggregateData: (options: GlobalAggregateOptions) => Promise<any>;
+  getGlobalChartData: (options: GlobalChartOptions) => Promise<any>;
+  /* getPageAggregateData: (options?: PageAggregateOptions) => Promise<any>; */
+  getPageChartData: (options: PageChartOptions) => Promise<any>;
 };
 
 const getProvider = (provider: Provider) => {

src/providers/plausible/client.ts

@@ -41,14 +41,19 @@ function client(provider: PlausibleProvider, options: ClientOptions) {
     baseUrl: baseUrl,
     metric: plausibleMetric,
     url: url,
-    fetch: async () =>
-      await fetch(url, {
+    fetch: async (customUrl?: string) => {
+      const fetchUrl = customUrl ?? url.toString();
+
+      console.log("fetching data with ", fetchUrl);
+
+      return await fetch(fetchUrl, {
         method: "get",
         headers: new Headers({
           Authorization: `Bearer ${provider.apiSecret}`,
           "Content-Type": "application/x-www-form-urlencoded",
         }),
-      }),
+      });
+    },
   };
 }
 

src/providers/plausible/getPageAggregateData.ts

@@ -0,0 +1,21 @@
+import type { PlausibleProvider } from "../../types";
+import type { GlobalAggregateOptions } from "..";
+import client from "./client";
+
+async function getPageAggregateData(
+  provider: PlausibleProvider,
+  options?: GlobalAggregateOptions
+) {
+  const plausibleClient = client(provider, {
+    endpoint: "/stats/aggregate",
+    timeframe: options?.timeframe,
+  });
+
+  const data = await plausibleClient.fetch().then((response) => {
+    return response.json();
+  });
+
+  return data;
+}
+
+export default getPageAggregateData;