Update widget logic

Author: paulpopus

demo/src/payload.config.ts

@@ -54,17 +54,15 @@ export default buildConfig({
     payloadDashboardAnalytics({
       provider: plausibleProvider,
       navigation: {
-        BeforeNavLinks: [
-          {
-            type: "live",
-          },
-        ],
-        AfterNavLinks: [
+        afterNavLinks: [
           {
             type: "live",
           },
         ],
       },
+      dashboard: {
+        beforeDashboard: ["topPages", "viewsChart"],
+      },
       globals: [
         {
           slug: "homepage",

src/index.ts

@@ -4,6 +4,8 @@ import type {
   PageInfoWidget,
   PageChartWidget,
   PageWidgets,
+  NavigationWidgets,
+  DashboardWidgets,
 } from "./types/widgets";
 import type { Field } from "payload/dist/fields/config/types";
 import { extendWebpackConfig } from "./extendWebpackConfig";
@@ -19,7 +21,7 @@ import type { CollectionConfig } from "payload/dist/collections/config/types";
 import type { GlobalConfig } from "payload/dist/globals/config/types";
 import { getPageViewsChart } from "./components/Charts/PageViewsChart";
 import { getAggregateDataWidget } from "./components/Aggregates/AggregateDataWidget";
-import LiveDataWidget from "./components/Live/LiveDataWidget";
+import LiveDataComponent from "./components/Live/LiveDataWidget";
 
 const PageWidgetMap: Record<
   PageWidgets["type"],
@@ -47,6 +49,10 @@ const PageWidgetMap: Record<
   }),
 };
 
+const NavigationWidgetMap: Record<NavigationWidgets["type"], React.FC> = {
+  live: LiveDataComponent.LiveDataWidget,
+};
+
 const payloadDashboardAnalytics =
   (incomingConfig: DashboardAnalyticsConfig) =>
   (config: PayloadConfig): PayloadConfig => {
@@ -61,16 +67,20 @@ const payloadDashboardAnalytics =
         ...admin,
         components: {
           ...admin?.components,
-          ...(navigation?.BeforeNavLinks && {
+          ...(navigation?.beforeNavLinks && {
             beforeNavLinks: [
               ...(admin?.components?.beforeNavLinks ?? []),
-              LiveDataWidget.LiveDataWidget,
+              ...navigation.beforeNavLinks.map(
+                (widget) => NavigationWidgetMap[widget.type]
+              ),
             ],
           }),
-          ...(navigation?.AfterNavLinks && {
+          ...(navigation?.afterNavLinks && {
             afterNavLinks: [
               ...(admin?.components?.afterNavLinks ?? []),
-              LiveDataWidget.LiveDataWidget,
+              ...navigation.afterNavLinks.map(
+                (widget) => NavigationWidgetMap[widget.type]
+              ),
             ],
           }),
         },

src/types/index.ts

@@ -28,7 +28,12 @@ export type DashboardAnalyticsConfig = {
   collections?: Collection[];
   globals?: Global[];
   navigation?: {
-    BeforeNavLinks?: NavigationWidgets[];
-    AfterNavLinks?: NavigationWidgets[];
+    beforeNavLinks?: NavigationWidgets[];
+    afterNavLinks?: NavigationWidgets[];
+  };
+  dashboard?: {
+    beforeDashboard?: DashboardWidgets[];
+    dashboard?: DashboardWidgets[];
+    afterDashboard?: DashboardWidgets[];
   };
 };

src/types/widgets.d.ts

@@ -9,19 +9,22 @@ export type Metrics =
   | "bounceRate"
   | "sessionDuration";
 
+export type AllAvailableMetrics = Metrics;
+
+/* Keeping this for later */
+/* export type Reports = "topSources" | "topPages" | "topCountries"; */
+
 export interface ChartWidget {
   type: "chart";
-  label?: string | "hidden";
   metrics: Metrics[];
   timeframe?: Timeframes;
+  label?: string | "hidden";
 }
 
 export interface PageChartWidget extends ChartWidget {
   idMatcher: IdMatcherFunction;
 }
 
-export type AllAvailableMetrics = Metrics;
-
 export interface InfoWidget {
   type: "info";
   label?: string | "hidden";
@@ -31,14 +34,21 @@ export interface InfoWidget {
 
 export interface LiveWidget {
   type: "live";
-  //label?: string | "hidden";
+}
+
+export interface ReportWidget {
+  type: "report";
+  report: Reports;
+  timeframe?: Timeframes;
 }
 
 export interface PageInfoWidget extends InfoWidget {
   idMatcher: IdMatcherFunction;
 }
 
-export type DashboardWidgets = ChartWidget | InfoWidget;
+/* export type DashboardWidgets = ChartWidget | InfoWidget | ReportWidget; */
+
+export type DashboardWidgets = "topPages" | "viewsChart";
 
 export type NavigationWidgets = LiveWidget;