Add test component for charts

Author: paulpopus

demo/src/payload.config.ts

@@ -31,6 +31,11 @@ export default buildConfig({
         siteId: PLAUSIBLE_SITE_ID,
         host: PLAUSIBLE_HOST,
       },
+      collections: [
+        {
+          slug: Posts.slug,
+        },
+      ],
     }),
   ],
 });

package.json

@@ -29,11 +29,15 @@
   "devDependencies": {
     "@types/react-router-dom": "^5.3.3",
     "payload": "^1.6.26",
+    "react": "^18",
     "typescript": "^4.5.5"
   },
   "files": [
     "dist",
     "types.js",
     "types.d.ts"
-  ]
+  ],
+  "dependencies": {
+    "react-charts": "^3.0.0-beta.54"
+  }
 }

src/components/Charts/ViewsChart.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import type { DashboardAnalyticsConfig } from "../../types";
+import { AxisOptions, Chart } from "react-charts";
+
+type Props = {};
+
+type ChartDataType = {
+  date: string;
+  pageviews: number;
+  visitors: number;
+};
+
+export const ViewsChart: React.FC<Props> = (props) => {
+  const [chartData, setChartData] = useState<ChartDataType[]>([]);
+
+  /* useEffect(() => {
+    const getChartData = fetch(`/api/analytics/globalChartData`).then(
+      (response) => response.json()
+    );
+
+    getChartData.then((data) => {
+      console.log("fetched data from backend:", data);
+      setChartData(data);
+    });
+  }, []); */
+
+  /* const primaryAxis = React.useMemo<AxisOptions<ChartDataType>>(
+    () => ({
+      getValue: (datum) => datum.date as unknown as Date,
+    }),
+    []
+  );
+
+  const secondaryAxes = React.useMemo<AxisOptions<ChartDataType>[]>(
+    () => [
+      {
+        getValue: (datum) => datum.visitors,
+      },
+    ],
+    []
+  ); */
+
+  return (
+    <div
+      style={{
+        marginBottom: "20px",
+      }}
+    >
+      my chart goes here:
+      {/* <Chart
+        options={{
+          chartData,
+          primaryAxis,
+          secondaryAxes,
+        }}
+      /> */}
+    </div>
+  );
+};
+
+export const getViewsChart = (props: any) => <ViewsChart {...props} />;

src/index.ts

@@ -1,13 +1,16 @@
-import { Config as PayloadConfig } from "payload/config";
-import { DashboardAnalyticsConfig } from "./types";
+import type { Config as PayloadConfig } from "payload/config";
+import type { DashboardAnalyticsConfig } from "./types";
 import { extendWebpackConfig } from "./extendWebpackConfig";
 import getProvider from "./providers";
 import getGlobalAggregateData from "./routes/getGlobalAggregateData";
+import getGlobalChartData from "./routes/getGlobalChartData";
+import type { CollectionConfig } from "payload/dist/collections/config/types";
+import { getViewsChart } from "./components/Charts/ViewsChart";
 
 const payloadDashboardAnalytics =
   (incomingConfig: DashboardAnalyticsConfig) =>
   (config: PayloadConfig): PayloadConfig => {
-    const { admin } = config;
+    const { admin, collections } = config;
     const { provider } = incomingConfig;
     const endpoints = config.endpoints ?? [];
     const apiProvider = getProvider(provider);
@@ -18,7 +21,42 @@ const payloadDashboardAnalytics =
         ...admin,
         webpack: extendWebpackConfig(config),
       },
-      endpoints: [...endpoints, getGlobalAggregateData(apiProvider)],
+      endpoints: [
+        ...endpoints,
+        getGlobalAggregateData(apiProvider),
+        getGlobalChartData(apiProvider),
+      ],
+      ...(collections && {
+        collections: collections.map((collection) => {
+          const targetCollection = incomingConfig.collections?.find((col) => {
+            if (col.slug === collection.slug) return true;
+            return false;
+          });
+
+          if (targetCollection) {
+            const collectionConfigWithHooks: CollectionConfig = {
+              ...collection,
+              fields: [
+                ...collection.fields,
+                {
+                  type: "ui",
+                  name: "viewschart",
+                  admin: {
+                    position: "sidebar",
+                    components: {
+                      Field: (props) => getViewsChart(props),
+                    },
+                  },
+                },
+              ],
+            };
+
+            return collectionConfigWithHooks;
+          }
+
+          return collection;
+        }),
+      }),
     };
 
     return processedConfig;

src/providers/index.ts

@@ -3,8 +3,8 @@ import type { Provider } from "../types";
 
 export type ApiProvider = {
   getGlobalAggregateData: () => Promise<any>;
-  /* getGlobalChartData: () => {},
-    getPageAggregateData: () => {},
+  getGlobalChartData: () => Promise<any>;
+  /* getPageAggregateData: () => {},
     getPageChartData: () => {}, */
 };
 

src/providers/plausible/client.ts

@@ -7,12 +7,7 @@ function client(provider: PlausibleProvider, endpoint?: string) {
   const url = new URL(`${host}/api/${apiVersion}${endpoint}`);
   url.searchParams.append("site_id", provider.siteId);
 
-  const plausibleMetrics = [
-    "visitors",
-    "pageviews",
-    "bounce_rate",
-    "visit_duration",
-  ];
+  const plausibleMetrics = ["visitors", "pageviews"];
 
   const baseUrl = String(url.href);
   url.searchParams.append("period", "30d");

src/providers/plausible/getGlobalChartData.ts

@@ -0,0 +1,14 @@
+import type { PlausibleProvider } from "../../types";
+import client from "./client";
+
+async function getGlobalChartData(provider: PlausibleProvider) {
+  const plausibleClient = client(provider, "/stats/timeseries");
+
+  const data = await plausibleClient.fetch().then((response) => {
+    return response.json();
+  });
+
+  return data;
+}
+
+export default getGlobalChartData;

src/providers/plausible/index.ts

@@ -1,10 +1,12 @@
 import { PlausibleProvider } from "../../types";
 import getGlobalAggregateData from "./getGlobalAggregateData";
+import getGlobalChartData from "./getGlobalChartData";
 import { ApiProvider } from "..";
 
 const plausible = (provider: PlausibleProvider): ApiProvider => {
   return {
     getGlobalAggregateData: async () => await getGlobalAggregateData(provider),
+    getGlobalChartData: async () => await getGlobalChartData(provider),
     /* getGlobalChartData: () => {},
     getPageAggregateData: () => {},
     getPageChartData: () => {}, */

src/routes/getGlobalChartData/handler.ts

@@ -0,0 +1,19 @@
+import { Endpoint } from "payload/config";
+import { ApiProvider } from "../../providers";
+import payload from "payload";
+
+const handler = (provider: ApiProvider) => {
+  const handler: Endpoint["handler"] = async (req, res, next) => {
+    try {
+      const data = await provider.getGlobalChartData();
+      res.status(200).send(data);
+    } catch (error) {
+      payload.logger.error(payload);
+      res.status(500);
+    }
+  };
+
+  return handler;
+};
+
+export default handler;

src/routes/getGlobalChartData/index.ts

@@ -0,0 +1,13 @@
+import { Endpoint } from "payload/config";
+import handler from "./handler";
+import { ApiProvider } from "../../providers";
+
+const getGlobalChartData = (provider: ApiProvider): Endpoint => {
+  return {
+    path: "/analytics/globalChartData",
+    method: "get",
+    handler: handler(provider),
+  };
+};
+
+export default getGlobalChartData;