Commit progress

Author: paulpopus

demo/src/payload.config.ts

@@ -6,11 +6,19 @@ import Tags from "./collections/Tags";
 import Users from "./collections/Users";
 import Media from "./collections/Media";
 import payloadDashboardAnalytics from "../../src/index";
+import { PlausibleProvider } from "../../src/types/providers";
 
 const PLAUSIBLE_API_KEY = process.env.PLAUSIBLE_API_KEY;
 const PLAUSIBLE_HOST = process.env.PLAUSIBLE_HOST;
 const PLAUSIBLE_SITE_ID = process.env.PLAUSIBLE_SITE_ID;
 
+const plausibleProvider: PlausibleProvider = {
+  source: "plausible",
+  apiSecret: PLAUSIBLE_API_KEY,
+  siteId: PLAUSIBLE_SITE_ID,
+  host: PLAUSIBLE_HOST,
+};
+
 export default buildConfig({
   serverURL: "http://localhost:3000",
   admin: {
@@ -42,41 +50,40 @@ export default buildConfig({
   },
   plugins: [
     payloadDashboardAnalytics({
-      provider: {
-        source: "plausible",
-        apiSecret: PLAUSIBLE_API_KEY,
-        siteId: PLAUSIBLE_SITE_ID,
-        host: PLAUSIBLE_HOST,
-      },
+      provider: plausibleProvider,
       collections: [
         {
           slug: Posts.slug,
           widgets: [
             {
               type: "chart",
-              metrics: ["pageViews", "uniqueVisitors"],
+              label: "Views and visitors",
+              metrics: ["views", "visitors", "sessions"],
               timeframe: "30d",
               idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             {
               type: "chart",
-              metrics: ["pageViews"],
+              metrics: ["sessions"],
               timeframe: "7d",
               idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             {
               type: "chart",
-              metrics: ["uniqueVisitors"],
+              metrics: ["sessionDuration"],
               timeframe: "currentMonth",
               idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             /* {
               type: "info",
-              metric: "totalViews",
+              metrics: ["views"],
+              idMatcher: (document: any) => `/articles/${document.slug}`,
             },
             {
               type: "info",
-              metric: "liveVisitors",
+              metrics: ["sessions", "sessionDuration"],
+              timeframe: "6mo",
+              idMatcher: (document: any) => `/articles/${document.slug}`,
             }, */
           ],
         },

src/components/Charts/AggregateDataWidget.tsx

@@ -10,29 +10,16 @@ import type { ChartDataPoint, ChartData } from "../../types/data";
 import type { PageInfoWidget } from "../../types/widgets";
 import type { AxisOptions } from "react-charts";
 import { useDocumentInfo } from "payload/components/utilities";
-import { MetricMap } from "../../providers/plausible/client";
+import { MetricMap } from "../../providers/plausible/utilities";
 import { useTheme } from "payload/dist/admin/components/utilities/Theme";
 
-/* type ChartOptions = {
-  timeframe?: string;
-  metrics: ChartWidget["metrics"];
-  idMatcher: IdMatcherFunction;
-}; */
-
 type Props = {
   options: PageInfoWidget;
 };
 
-const ChartComponent = lazy(() =>
-  import("react-charts").then((module) => {
-    return { default: module.Chart };
-  })
-);
-
 const AggregateDataWidget: 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();
 
@@ -65,12 +52,6 @@ const AggregateDataWidget: React.FC<Props> = ({ options }) => {
       }).then((response) => response.json());
 
       getChartData.then((data: ChartData) => {
-        /* const processedData: ChartData = [
-          {
-            label: "test",
-            data: data,
-          },
-        ]; */
         setChartData(data);
         setIsLoading(false);
       });

src/components/Charts/PageViewsChart.tsx

@@ -7,10 +7,10 @@ import React, {
   useMemo,
 } from "react";
 import type { ChartDataPoint, ChartData } from "../../types/data";
-import type { PageChartWidget } from "../../types/widgets";
+import type { PageChartWidget, Metrics } from "../../types/widgets";
 import type { AxisOptions } from "react-charts";
 import { useDocumentInfo } from "payload/components/utilities";
-import { MetricMap } from "../../providers/plausible/client";
+import { MetricMap } from "../../providers/plausible/utilities";
 import { useTheme } from "payload/dist/admin/components/utilities/Theme";
 
 type Props = {
@@ -67,17 +67,21 @@ const PageViewsChart: React.FC<Props> = ({ options }) => {
   }, [publishedDoc, pageId]);
 
   const chartLabel = useMemo(() => {
-    if (label) return label;
+    if (!!label) return label;
 
-    const metricValues: string[] = [];
+    if (metrics) {
+      const metricValues: string[] = [];
 
-    Object.entries(MetricMap).forEach(([key, value]) => {
-      /* @ts-ignore */
-      if (metrics.includes(key)) metricValues.push(value.label);
-    });
+      Object.entries(MetricMap).forEach(([key, value]) => {
+        // @ts-ignore
+        if (metrics.includes(key)) metricValues.push(value.label);
+      });
 
-    return metricValues.join(", ");
-  }, [options]);
+      return metricValues.join(", ");
+    } else {
+      return "No metrics defined for this widget";
+    }
+  }, [label, metrics]);
 
   const primaryAxis = React.useMemo<AxisOptions<ChartDataPoint>>(() => {
     return {

src/index.ts

@@ -11,6 +11,7 @@ import getProvider from "./providers";
 import getGlobalAggregateData from "./routes/getGlobalAggregateData";
 import getGlobalChartData from "./routes/getGlobalChartData";
 import getPageChartData from "./routes/getPageChartData";
+import getPageAggregateData from "./routes/getPageAggregateData";
 import type { CollectionConfig } from "payload/dist/collections/config/types";
 import { getPageViewsChart } from "./components/Charts/PageViewsChart";
 import { getAggregateDataWidget } from "./components/Charts/AggregateDataWidget";
@@ -63,6 +64,7 @@ const payloadDashboardAnalytics =
         getGlobalAggregateData(apiProvider),
         getGlobalChartData(apiProvider),
         getPageChartData(apiProvider),
+        getPageAggregateData(apiProvider),
       ],
       ...(collections && {
         collections: collections.map((collection) => {

src/providers/plausible/client.ts

@@ -1,27 +1,13 @@
 import type { PlausibleProvider } from "../../types/providers";
 import type { AllAvailableMetrics } from "../../types/widgets";
+import { MetricMap } from "./utilities";
 
 type ClientOptions = {
   endpoint: string;
   timeframe?: string;
   metrics?: AllAvailableMetrics[];
 };
 
-export const MetricMap: Record<
-  AllAvailableMetrics,
-  { label: string; value: string }
-> = {
-  pageViews: {
-    label: "Page views",
-    value: "pageviews",
-  },
-  uniqueVisitors: { label: "Visitors", value: "visitors" },
-  bounceRate: { label: "Bounce rate", value: "visitors" },
-  averageDuration: { label: "Avg. duration", value: "visitors" },
-  totalViews: { label: "Total views", value: "visitors" },
-  totalVisitors: { label: "Total visitors", value: "visitors" },
-};
-
 function client(provider: PlausibleProvider, options: ClientOptions) {
   const { endpoint, timeframe, metrics } = options;
   const host = provider.host ?? `https://plausible.io`;

src/providers/plausible/utilities.ts

@@ -0,0 +1,15 @@
+import { AllAvailableMetrics } from "../../types/widgets";
+
+export const MetricMap: Record<
+  AllAvailableMetrics,
+  { label: string; value: string }
+> = {
+  views: {
+    label: "Views",
+    value: "pageviews",
+  },
+  visitors: { label: "Visitors", value: "visitors" },
+  bounceRate: { label: "Bounce rate", value: "bounce_rate" },
+  sessionDuration: { label: "Avg. duration", value: "visit_duration" },
+  sessions: { label: "Sessions", value: "visits" },
+};

src/types/widgets.d.ts

@@ -2,32 +2,31 @@ export type Timeframes = "12mo" | "6mo" | "30d" | "7d" | "currentMonth";
 
 export type IdMatcherFunction = (document: any) => string;
 
-export type ChartWidgetMetrics = "pageViews" | "uniqueVisitors";
+export type Metrics =
+  | "views"
+  | "visitors"
+  | "sessions"
+  | "bounceRate"
+  | "sessionDuration";
 
 export interface ChartWidget {
   type: "chart";
   label?: string;
-  metrics: ChartWidgetMetrics[];
-  timeframe: Timeframes;
+  metrics: Metrics[];
+  timeframe?: Timeframes;
 }
 
 export interface PageChartWidget extends ChartWidget {
   idMatcher: IdMatcherFunction;
 }
 
-export type InfoWidgetMetrics =
-  | "totalViews"
-  | "totalVisitors"
-  | "bounceRate"
-  | "averageDuration";
-
-export type AllAvailableMetrics = ChartWidgetMetrics | InfoWidgetMetrics;
+export type AllAvailableMetrics = Metrics;
 
 export interface InfoWidget {
   type: "info";
   label?: string;
-  metrics: InfoWidgetMetrics[];
-  timeframe: Timeframes;
+  metrics: Metrics[];
+  timeframe?: Timeframes;
 }
 
 export interface PageInfoWidget extends InfoWidget {