Add progress on aggregate page data

Author: paulpopus

demo/src/payload.config.ts

@@ -62,7 +62,7 @@ export default buildConfig({
               timeframe: "30d",
               idMatcher: (document: any) => `/articles/${document.slug}`,
             },
-            {
+            /* {
               type: "chart",
               metrics: ["sessions"],
               timeframe: "7d",
@@ -73,18 +73,19 @@ export default buildConfig({
               metrics: ["sessionDuration"],
               timeframe: "currentMonth",
               idMatcher: (document: any) => `/articles/${document.slug}`,
-            },
-            /* {
+            }, */
+            {
               type: "info",
               metrics: ["views"],
               idMatcher: (document: any) => `/articles/${document.slug}`,
+              label: "hidden",
             },
             {
               type: "info",
               metrics: ["sessions", "sessionDuration"],
               timeframe: "6mo",
               idMatcher: (document: any) => `/articles/${document.slug}`,
-            }, */
+            },
           ],
         },
       ],

…omponents/Charts/AggregateDataWidget.tsx …nents/Aggregates/AggregateDataWidget.tsxsrc/components/Charts/AggregateDataWidget.tsx renamed to src/components/Aggregates/AggregateDataWidget.tsx src/components/Charts/AggregateDataWidget.tsx renamed to src/components/Aggregates/AggregateDataWidget.tsx

@@ -6,9 +6,8 @@ import React, {
   useRef,
   useMemo,
 } from "react";
-import type { ChartDataPoint, ChartData } from "../../types/data";
+import type { AggregateData } 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/utilities";
 import { useTheme } from "payload/dist/admin/components/utilities/Theme";
@@ -18,7 +17,7 @@ type Props = {
 };
 
 const AggregateDataWidget: React.FC<Props> = ({ options }) => {
-  const [chartData, setChartData] = useState<ChartData>([]);
+  const [data, setData] = useState<AggregateData>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const theme = useTheme();
   const { publishedDoc } = useDocumentInfo();
@@ -37,7 +36,7 @@ const AggregateDataWidget: React.FC<Props> = ({ options }) => {
 
   useEffect(() => {
     if (pageId) {
-      const getChartData = fetch(`/api/analytics/pageChartData`, {
+      const getAggregateData = fetch(`/api/analytics/pageAggregateData`, {
         method: "post",
         credentials: "include",
         headers: {
@@ -51,16 +50,16 @@ const AggregateDataWidget: React.FC<Props> = ({ options }) => {
         }),
       }).then((response) => response.json());
 
-      getChartData.then((data: ChartData) => {
-        setChartData(data);
+      getAggregateData.then((data: AggregateData) => {
+        setData(data);
         setIsLoading(false);
       });
     } else {
       setIsLoading(false);
     }
   }, [publishedDoc, pageId]);
 
-  const chartLabel = useMemo(() => {
+  const heading = useMemo(() => {
     if (label) return label;
 
     const metricValues: string[] = [];
@@ -77,9 +76,35 @@ const AggregateDataWidget: React.FC<Props> = ({ options }) => {
     <section
       style={{
         marginBottom: "1.5rem",
+        border: "1px solid",
+        borderColor: "var(--theme-elevation-100)",
+        padding: "0.5rem",
       }}
     >
-      aggr data
+      {label !== "hidden" && (
+        <h1 style={{ fontSize: "1.25rem", marginBottom: "0.75rem" }}>
+          {heading} ({timeframeIndicator})
+        </h1>
+      )}
+      <div>
+        {isLoading ? (
+          <>Loading...</>
+        ) : (
+          <ul style={{ margin: "0", listStyle: "none", padding: "0" }}>
+            {data.map((item, index) => {
+              return (
+                <li
+                  key={index}
+                  style={{ display: "flex", justifyContent: "space-between" }}
+                >
+                  <div style={{ fontWeight: "700" }}>{item.label}</div>
+                  <div>{item.value}</div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
     </section>
   );
 };

src/components/Charts/PageViewsChart.tsx

@@ -36,10 +36,11 @@ const PageViewsChart: React.FC<Props> = ({ options }) => {
     else return "";
   }, [publishedDoc]);
 
-  const timeframeIndicator =
-    timeframe === "currentMonth"
+  const timeframeIndicator = useMemo(() => {
+    return timeframe === "currentMonth"
       ? new Date().toLocaleString("default", { month: "long" })
       : timeframe ?? "30d";
+  }, [timeframe]);
 
   useEffect(() => {
     if (pageId) {

src/index.ts

@@ -14,7 +14,7 @@ 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";
+import { getAggregateDataWidget } from "./components/Aggregates/AggregateDataWidget";
 
 const PageWidgetMap: Record<
   PageWidgets["type"],

src/providers/index.ts

@@ -1,6 +1,7 @@
 import plausible from "./plausible";
 import type { Provider } from "../types";
-import { ChartWidget, InfoWidget } from "../types/widgets";
+import type { ChartWidget, InfoWidget } from "../types/widgets";
+import type { ChartData, AggregateData } from "../types/data";
 
 type BaseOptions = {
   timeframe?: string;
@@ -23,10 +24,14 @@ export interface PageChartOptions extends BaseOptions {
 }
 
 export type ApiProvider = {
-  getGlobalAggregateData: (options: GlobalAggregateOptions) => Promise<any>;
-  getGlobalChartData: (options: GlobalChartOptions) => Promise<any>;
-  getPageAggregateData: (options: PageAggregateOptions) => Promise<any>;
-  getPageChartData: (options: PageChartOptions) => Promise<any>;
+  getGlobalAggregateData: (
+    options: GlobalAggregateOptions
+  ) => Promise<AggregateData>;
+  getGlobalChartData: (options: GlobalChartOptions) => Promise<ChartData>;
+  getPageAggregateData: (
+    options: PageAggregateOptions
+  ) => Promise<AggregateData>;
+  getPageChartData: (options: PageChartOptions) => Promise<ChartData>;
 };
 
 const getProvider = (provider: Provider) => {

src/providers/plausible/getGlobalChartData.ts

@@ -1,7 +1,7 @@
 import type { PlausibleProvider } from "../../types/providers";
 import type { ChartData } from "../../types/data";
 import type { GlobalChartOptions } from "..";
-import { MetricMap } from "./client";
+import { MetricMap } from "./utilities";
 import payload from "payload";
 import client from "./client";
 

src/providers/plausible/getPageAggregateData.ts

@@ -1,5 +1,7 @@
 import type { PlausibleProvider } from "../../types/providers";
 import type { PageAggregateOptions } from "..";
+import type { AggregateData } from "../../types/data";
+import { MetricMap } from "./utilities";
 import client from "./client";
 
 async function getPageAggregateData(
@@ -18,11 +20,23 @@ async function getPageAggregateData(
 
   url.searchParams.append("filters", pageFilter);
 
-  const data = await plausibleClient.fetch(url.toString()).then((response) => {
-    return response.json();
-  });
+  const data = await plausibleClient
+    .fetch(url.toString())
+    .then((response) => response.json());
+
+  const processedData: AggregateData = Object.entries(data.results).map(
+    ([label, value]: any) => {
+      const labelAsMetric = Object.values(MetricMap).find((item) => {
+        return label === item.value;
+      });
 
-  return data;
+      return {
+        label: labelAsMetric?.label ?? label,
+        value: value.value,
+      };
+    }
+  );
+  return processedData;
 }
 
 export default getPageAggregateData;

src/providers/plausible/getPageChartData.ts

@@ -1,6 +1,7 @@
 import type { PlausibleProvider } from "../../types/providers";
 import type { PageChartOptions } from "..";
-import { MetricMap } from "./client";
+import type { ChartData } from "../../types/data";
+import { MetricMap } from "./utilities";
 import payload from "payload";
 import client from "./client";
 
@@ -29,8 +30,8 @@ async function getPageChartData(
       payload.logger.error(error);
     });
 
-  /* @todo: fix types later */
-  /* @ts-ignore */
+  // @todo: fix types later
+  // @ts-ignore
   const dataSeries: ChartData = options.metrics.map((metric) => {
     const mappedMetric = Object.entries(MetricMap).find(([key, value]) => {
       return metric === key;

src/providers/plausible/utilities.ts

@@ -1,9 +1,6 @@
-import { AllAvailableMetrics } from "../../types/widgets";
+import { MetricsMap } from "../../types/data";
 
-export const MetricMap: Record<
-  AllAvailableMetrics,
-  { label: string; value: string }
-> = {
+export const MetricMap: MetricsMap = {
   views: {
     label: "Views",
     value: "pageviews",

src/routes/getPageAggregateData/handler.ts

@@ -1,19 +1,19 @@
-import { Endpoint } from "payload/config";
+import type { Endpoint } from "payload/config";
 import { ApiProvider } from "../../providers";
+import type { AggregateData } from "../../types/data";
 import payload from "payload";
 
 const handler = (provider: ApiProvider) => {
   const handler: Endpoint["handler"] = async (req, res, next) => {
     try {
       const { timeframe, metrics, pageId } = req.body;
 
-      console.log("reached handler with", timeframe, metrics, pageId);
-
-      const data = await provider.getPageAggregateData({
+      const data: AggregateData = await provider.getPageAggregateData({
         timeframe: timeframe,
         metrics: metrics,
         pageId,
       });
+
       res.status(200).send(data);
     } catch (error) {
       payload.logger.error(error);