Skip to content

Commit 55ab23f

Browse files
paulpopuspaulpopus
committed
refactor some code and types
1 parent 9b768eb commit 55ab23f

File tree

16 files changed

+252
-106
lines changed

16 files changed

+252
-106
lines changed

‎src/components/Charts/AggregateDataWidget.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import React, {
2+
useEffect,
3+
useState,
4+
lazy,
5+
useReducer,
6+
useRef,
7+
useMemo,
8+
} from "react";
9+
import type { ChartDataPoint, ChartData } from "../../types/data";
10+
import type { PageInfoWidget } from "../../types/widgets";
11+
import type { AxisOptions } from "react-charts";
12+
import { useDocumentInfo } from "payload/components/utilities";
13+
import { MetricMap } from "../../providers/plausible/client";
14+
import { useTheme } from "payload/dist/admin/components/utilities/Theme";
15+
16+
/* type ChartOptions = {
17+
timeframe?: string;
18+
metrics: ChartWidget["metrics"];
19+
idMatcher: IdMatcherFunction;
20+
}; */
21+
22+
type Props = {
23+
options: PageInfoWidget;
24+
};
25+
26+
const ChartComponent = lazy(() =>
27+
import("react-charts").then((module) => {
28+
return { default: module.Chart };
29+
})
30+
);
31+
32+
const AggregateDataWidget: React.FC<Props> = ({ options }) => {
33+
const [chartData, setChartData] = useState<ChartData>([]);
34+
const [isLoading, setIsLoading] = useState<boolean>(true);
35+
const chartRef = useRef<any>(null);
36+
const theme = useTheme();
37+
const { publishedDoc } = useDocumentInfo();
38+
39+
const { timeframe, metrics, idMatcher, label } = options;
40+
41+
const pageId = useMemo(() => {
42+
if (publishedDoc) return idMatcher(publishedDoc);
43+
else return "";
44+
}, [publishedDoc]);
45+
46+
const timeframeIndicator =
47+
timeframe === "currentMonth"
48+
? new Date().toLocaleString("default", { month: "long" })
49+
: timeframe ?? "30d";
50+
51+
useEffect(() => {
52+
if (pageId) {
53+
const getChartData = fetch(`/api/analytics/pageChartData`, {
54+
method: "post",
55+
credentials: "include",
56+
headers: {
57+
Accept: "application/json",
58+
"Content-Type": "application/json",
59+
},
60+
body: JSON.stringify({
61+
timeframe: timeframe,
62+
metrics: metrics,
63+
pageId: pageId,
64+
}),
65+
}).then((response) => response.json());
66+
67+
getChartData.then((data: ChartData) => {
68+
/* const processedData: ChartData = [
69+
{
70+
label: "test",
71+
data: data,
72+
},
73+
]; */
74+
setChartData(data);
75+
setIsLoading(false);
76+
});
77+
} else {
78+
setIsLoading(false);
79+
}
80+
}, [publishedDoc, pageId]);
81+
82+
const chartLabel = useMemo(() => {
83+
if (label) return label;
84+
85+
const metricValues: string[] = [];
86+
87+
Object.entries(MetricMap).forEach(([key, value]) => {
88+
/* @ts-ignore */
89+
if (metrics.includes(key)) metricValues.push(value.label);
90+
});
91+
92+
return metricValues.join(", ");
93+
}, [options]);
94+
95+
return (
96+
<section
97+
style={{
98+
marginBottom: "1.5rem",
99+
}}
100+
>
101+
aggr data
102+
</section>
103+
);
104+
};
105+
106+
export const getAggregateDataWidget = (
107+
props?: any,
108+
options?: PageInfoWidget
109+
) => {
110+
const combinedProps: Props = {
111+
...props,
112+
options,
113+
};
114+
return <AggregateDataWidget {...combinedProps} />;
115+
};
116+
117+
export default { AggregateDataWidget, getAggregateDataWidget };

‎src/components/Charts/PageViewsChart.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,15 @@ import React, {
66
useRef,
77
useMemo,
88
} from "react";
9-
import type {
10-
DashboardAnalyticsConfig,
11-
ChartDataPoint,
12-
ChartData,
13-
ChartWidget,
14-
ChartWidgetMetrics,
15-
} from "../../types";
9+
import type { ChartDataPoint, ChartData } from "../../types/data";
10+
import type { PageChartWidget } from "../../types/widgets";
1611
import type { AxisOptions } from "react-charts";
1712
import { useDocumentInfo } from "payload/components/utilities";
1813
import { MetricMap } from "../../providers/plausible/client";
1914
import { useTheme } from "payload/dist/admin/components/utilities/Theme";
2015

2116
type Props = {
22-
options: ChartWidget;
17+
options: PageChartWidget;
2318
};
2419

2520
const ChartComponent = lazy(() =>
@@ -42,7 +37,7 @@ const PageViewsChart: React.FC<Props> = ({ options }) => {
4237
}, [publishedDoc]);
4338

4439
const timeframeIndicator =
45-
timeframe === "month"
40+
timeframe === "currentMonth"
4641
? new Date().toLocaleString("default", { month: "long" })
4742
: timeframe ?? "30d";
4843

@@ -140,7 +135,7 @@ const PageViewsChart: React.FC<Props> = ({ options }) => {
140135
);
141136
};
142137

143-
export const getPageViewsChart = (props?: any, options?: ChartWidget) => {
138+
export const getPageViewsChart = (props?: any, options?: PageChartWidget) => {
144139
const combinedProps: Props = {
145140
...props,
146141
options,

‎src/index.ts‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { Config as PayloadConfig } from "payload/config";
2+
import type { DashboardAnalyticsConfig } from "./types";
23
import type {
3-
DashboardAnalyticsConfig,
4-
ChartWidget,
5-
InfoWidget,
6-
InnerWidget,
7-
} from "./types";
4+
PageInfoWidget,
5+
PageChartWidget,
6+
PageWidgets,
7+
} from "./types/widgets";
88
import type { Field } from "payload/dist/fields/config/types";
99
import { extendWebpackConfig } from "./extendWebpackConfig";
1010
import getProvider from "./providers";
@@ -13,12 +13,13 @@ import getGlobalChartData from "./routes/getGlobalChartData";
1313
import getPageChartData from "./routes/getPageChartData";
1414
import type { CollectionConfig } from "payload/dist/collections/config/types";
1515
import { getPageViewsChart } from "./components/Charts/PageViewsChart";
16+
import { getAggregateDataWidget } from "./components/Charts/AggregateDataWidget";
1617

17-
const InnerWidgetMap: Record<
18-
InnerWidget["type"],
18+
const PageWidgetMap: Record<
19+
PageWidgets["type"],
1920
(config: any, index: number) => Field
2021
> = {
21-
chart: (config: ChartWidget, index: number) => ({
22+
chart: (config: PageChartWidget, index: number) => ({
2223
type: "ui",
2324
name: `chart_${index}_${config.timeframe ?? "30d"}`,
2425
admin: {
@@ -28,19 +29,16 @@ const InnerWidgetMap: Record<
2829
},
2930
},
3031
}),
31-
/* info: (config: InfoWidget) => ({
32+
info: (config: PageInfoWidget) => ({
3233
type: "ui",
3334
name: "dashboardAnalyticsViewsChart",
3435
admin: {
3536
position: "sidebar",
3637
components: {
37-
Field: (props: any) =>
38-
getViewsChart(props, {
39-
metric: config.metric,
40-
}),
38+
Field: (props: any) => getAggregateDataWidget(props, config),
4139
},
4240
},
43-
}), */
41+
}),
4442
};
4543

4644
const payloadDashboardAnalytics =
@@ -79,7 +77,7 @@ const payloadDashboardAnalytics =
7977
fields: [
8078
...collection.fields,
8179
...targetCollection.widgets.map((widget, index) => {
82-
const field = InnerWidgetMap[widget.type];
80+
const field = PageWidgetMap[widget.type];
8381

8482
return field(widget, index);
8583
}),

‎src/providers/index.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import plausible from "./plausible";
22
import type { Provider } from "../types";
3-
import { ChartWidget } from "../types";
3+
import { ChartWidget, InfoWidget } from "../types/widgets";
44

55
type BaseOptions = {
66
timeframe?: string;
77
};
88

9-
export interface GlobalAggregateOptions extends BaseOptions {}
9+
export interface GlobalAggregateOptions extends BaseOptions {
10+
metrics: InfoWidget["metrics"];
11+
}
1012
export interface GlobalChartOptions extends BaseOptions {
1113
metrics: ChartWidget["metrics"];
1214
}
1315

14-
export interface PageAggregateOptions extends BaseOptions {}
16+
export interface PageAggregateOptions extends BaseOptions {
17+
metrics: InfoWidget["metrics"];
18+
}
1519
export interface PageChartOptions extends BaseOptions {
1620
metrics: ChartWidget["metrics"];
1721
pageId: string;

‎src/providers/plausible/client.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import type { PlausibleProvider } from "../../types";
2-
import { InnerWidget, ChartWidgetMetrics } from "../../types";
1+
import type { PlausibleProvider } from "../../types/providers";
2+
import type { AllAvailableMetrics } from "../../types/widgets";
33

44
type ClientOptions = {
55
endpoint: string;
66
timeframe?: string;
7-
metrics?: InnerWidget["metrics"];
7+
metrics?: AllAvailableMetrics[];
88
};
99

1010
export const MetricMap: Record<
11-
ChartWidgetMetrics,
11+
AllAvailableMetrics,
1212
{ label: string; value: string }
1313
> = {
1414
pageViews: {
1515
label: "Page views",
1616
value: "pageviews",
1717
},
1818
uniqueVisitors: { label: "Visitors", value: "visitors" },
19+
bounceRate: { label: "Bounce rate", value: "visitors" },
20+
averageDuration: { label: "Avg. duration", value: "visitors" },
21+
totalViews: { label: "Total views", value: "visitors" },
22+
totalVisitors: { label: "Total visitors", value: "visitors" },
1923
};
2024

2125
function client(provider: PlausibleProvider, options: ClientOptions) {

‎src/providers/plausible/getGlobalAggregateData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { PlausibleProvider } from "../../types";
1+
import type { PlausibleProvider } from "../../types/providers";
22
import type { GlobalAggregateOptions } from "..";
33
import client from "./client";
44

‎src/providers/plausible/getGlobalChartData.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import type { PlausibleProvider, ChartData } from "../../types";
1+
import type { PlausibleProvider } from "../../types/providers";
2+
import type { ChartData } from "../../types/data";
23
import type { GlobalChartOptions } from "..";
34
import { MetricMap } from "./client";
45
import payload from "payload";

‎src/providers/plausible/getPageAggregateData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { PlausibleProvider } from "../../types";
1+
import type { PlausibleProvider } from "../../types/providers";
22
import type { GlobalAggregateOptions } from "..";
33
import client from "./client";
44

‎src/providers/plausible/getPageChartData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { PlausibleProvider, ChartData } from "../../types";
1+
import type { PlausibleProvider } from "../../types/providers";
22
import type { PageChartOptions } from "..";
33
import { MetricMap } from "./client";
44
import payload from "payload";

‎src/providers/plausible/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PlausibleProvider } from "../../types";
1+
import type { PlausibleProvider } from "../../types/providers";
22
import getGlobalAggregateData from "./getGlobalAggregateData";
33
import getGlobalChartData from "./getGlobalChartData";
44
import getPageAggregateData from "./getPageAggregateData";

0 commit comments

Comments
 (0)