Add config for navigation components

Author: paulpopus

demo/src/payload.config.ts

@@ -51,6 +51,18 @@ export default buildConfig({
   plugins: [
     payloadDashboardAnalytics({
       provider: plausibleProvider,
+      navigation: {
+        BeforeNavLinks: [
+          {
+            type: "live",
+          },
+        ],
+        AfterNavLinks: [
+          {
+            type: "live",
+          },
+        ],
+      },
       collections: [
         {
           slug: Posts.slug,
@@ -62,28 +74,11 @@ export default buildConfig({
               timeframe: "30d",
               idMatcher: (document: any) => `/articles/${document.slug}`,
             },
-            /* {
-              type: "chart",
-              metrics: ["sessions"],
-              timeframe: "7d",
-              idMatcher: (document: any) => `/articles/${document.slug}`,
-            },
-            {
-              type: "chart",
-              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",
+              label: "Page data",
+              metrics: ["views", "sessions", "sessionDuration"],
+              timeframe: "currentMonth",
               idMatcher: (document: any) => `/articles/${document.slug}`,
             },
           ],

src/components/Aggregates/AggregateDataWidget.tsx

@@ -78,7 +78,7 @@ const AggregateDataWidget: React.FC<Props> = ({ options }) => {
         marginBottom: "1.5rem",
         border: "1px solid",
         borderColor: "var(--theme-elevation-100)",
-        padding: "0.5rem",
+        padding: "1rem",
       }}
     >
       {label !== "hidden" && (

src/components/Live/LiveDataWidget.tsx

@@ -0,0 +1,85 @@
+import React, {
+  useEffect,
+  useState,
+  lazy,
+  useReducer,
+  useRef,
+  useMemo,
+} from "react";
+import type { LiveData } from "../../types/data";
+import type { LiveWidget } from "../../types/widgets";
+import { MetricMap } from "../../providers/plausible/utilities";
+import { useTheme } from "payload/dist/admin/components/utilities/Theme";
+
+type Props = {};
+
+const LiveDataWidget: React.FC<Props> = ({}) => {
+  const [data, setData] = useState<LiveData>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const theme = useTheme();
+
+  /* const { label } = options; */
+
+  useEffect(() => {
+    const getLiveData = fetch(`/api/analytics/liveData`, {
+      method: "post",
+      credentials: "include",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({}),
+    }).then((response) => response.json());
+
+    getLiveData.then((data: LiveData) => {
+      setData(data);
+      setIsLoading(false);
+    });
+  }, []);
+
+  const heading = useMemo(() => {
+    /* if (label) return label; */
+
+    return "hidden";
+  }, []);
+
+  return (
+    <section
+      style={{
+        marginBottom: "1.5rem",
+        border: "1px solid",
+        borderColor: "var(--theme-elevation-100)",
+        padding: "0.5rem",
+        width: "100%",
+      }}
+    >
+      {heading !== "hidden" && (
+        <h1 style={{ fontSize: "1.25rem", marginBottom: "0.75rem" }}>
+          {heading}
+        </h1>
+      )}
+      <div>
+        {isLoading ? (
+          <>Loading...</>
+        ) : (
+          <ul style={{ margin: "0", listStyle: "none", padding: "0" }}>
+            <li style={{ display: "flex", justifyContent: "space-between" }}>
+              <div style={{ fontWeight: "700" }}>Live visitors</div>
+              <div>{data?.visitors}</div>
+            </li>
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export const getLiveDataWidget = (props?: any, options?: LiveWidget) => {
+  const combinedProps: Props = {
+    ...props,
+    options,
+  };
+  return <LiveDataWidget {...combinedProps} />;
+};
+
+export default { LiveDataWidget, getLiveDataWidget };

src/index.ts

@@ -18,6 +18,7 @@ import getLiveData from "./routes/getLiveData";
 import type { CollectionConfig } from "payload/dist/collections/config/types";
 import { getPageViewsChart } from "./components/Charts/PageViewsChart";
 import { getAggregateDataWidget } from "./components/Aggregates/AggregateDataWidget";
+import LiveDataWidget from "./components/Live/LiveDataWidget";
 
 const PageWidgetMap: Record<
   PageWidgets["type"],
@@ -49,17 +50,29 @@ const payloadDashboardAnalytics =
   (incomingConfig: DashboardAnalyticsConfig) =>
   (config: PayloadConfig): PayloadConfig => {
     const { admin, collections } = config;
-    const { provider } = incomingConfig;
+    const { provider, navigation } = incomingConfig;
     const endpoints = config.endpoints ?? [];
     const apiProvider = getProvider(provider);
 
     const processedConfig: PayloadConfig = {
       ...config,
       admin: {
         ...admin,
-        /* components: {
-          beforeDashboard: [() => getViewsChart()],
-        }, */
+        components: {
+          ...admin?.components,
+          ...(navigation?.BeforeNavLinks && {
+            beforeNavLinks: [
+              ...(admin?.components?.beforeNavLinks ?? []),
+              LiveDataWidget.LiveDataWidget,
+            ],
+          }),
+          ...(navigation?.AfterNavLinks && {
+            afterNavLinks: [
+              ...(admin?.components?.afterNavLinks ?? []),
+              LiveDataWidget.LiveDataWidget,
+            ],
+          }),
+        },
         webpack: extendWebpackConfig(config),
       },
       endpoints: [

src/types/index.ts

@@ -2,7 +2,7 @@ import type { PlausibleProvider } from "./providers";
 import type {
   DashboardWidgets,
   PageWidgets,
-  IdMatcherFunction,
+  NavigationWidgets,
 } from "./widgets";
 
 export interface ItemConfig {
@@ -24,4 +24,8 @@ export type Provider = PlausibleProvider;
 export type DashboardAnalyticsConfig = {
   provider: Provider;
   collections?: Collection[];
+  navigation?: {
+    BeforeNavLinks?: NavigationWidgets[];
+    AfterNavLinks?: NavigationWidgets[];
+  };
 };

src/types/widgets.d.ts

@@ -29,10 +29,17 @@ export interface InfoWidget {
   timeframe?: Timeframes;
 }
 
+export interface LiveWidget {
+  type: "live";
+  //label?: string | "hidden";
+}
+
 export interface PageInfoWidget extends InfoWidget {
   idMatcher: IdMatcherFunction;
 }
 
 export type DashboardWidgets = ChartWidget | InfoWidget;
 
+export type NavigationWidgets = LiveWidget;
+
 export type PageWidgets = PageChartWidget | PageInfoWidget;