Add google provider working functions

Author: paulpopus

src/components/Aggregates/AggregateDataWidget.tsx

@@ -92,13 +92,19 @@ const AggregateDataWidget: React.FC<Props> = ({ options, metricsMap }) => {
         ) : (
           <ul style={{ margin: "0", listStyle: "none", padding: "0" }}>
             {data.map((item, index) => {
+              const value =
+                typeof item.value === "string"
+                  ? Math.floor(parseInt(item.value))
+                  : Math.floor(item.value);
               return (
                 <li
                   key={index}
                   style={{ display: "flex", justifyContent: "space-between" }}
                 >
-                  <div style={{ fontWeight: "700" }}>{item.label}</div>
-                  <div>{item.value}</div>
+                  <div style={{ fontWeight: "700" }}>
+                    {metricsMap ? metricsMap[item.label].label : item.label}
+                  </div>
+                  <div>{value}</div>
                 </li>
               );
             })}
@@ -117,6 +123,7 @@ export const getAggregateDataWidget = (
   const combinedProps: Props = {
     ...props,
     options,
+    metricsMap,
   };
   return <AggregateDataWidget {...combinedProps} />;
 };

src/components/Charts/PageViewsChart.tsx

@@ -97,9 +97,10 @@ const PageViewsChart: React.FC<Props> = ({ options, metricsMap }) => {
     () => [
       {
         getValue: (datum) => {
-          return datum.value;
+          return Math.floor(datum.value);
         },
         elementType: "line",
+        shouldNice: true,
       },
     ],
     []
@@ -148,6 +149,7 @@ export const getPageViewsChart = (
   const combinedProps: Props = {
     ...props,
     options,
+    metricsMap,
   };
   return <PageViewsChart {...combinedProps} />;
 };

src/providers/google/client.ts

@@ -3,14 +3,9 @@ import type { Metrics, Properties } from "../../types/widgets";
 import { BetaAnalyticsDataClient } from "@google-analytics/data";
 import { MetricMap, PropertyMap } from "./utilities";
 
-type ClientOptions = {
-  endpoint: string;
-  timeframe?: string;
-  metrics?: Metrics[];
-  property?: Properties;
-};
+type ClientOptions = {};
 
-function client(provider: GoogleProvider, options: ClientOptions) {
+function client(provider: GoogleProvider, options?: ClientOptions) {
   const analyticsDataClient = new BetaAnalyticsDataClient({
     keyFilename: provider.credentials,
   });

src/providers/google/getGlobalAggregateData.ts

@@ -0,0 +1,47 @@
+import type { GoogleProvider } from "../../types/providers";
+import type { GlobalAggregateOptions } from "..";
+import type { AggregateData } from "../../types/data";
+import { getMetrics, getDateRange } from "./utilities";
+import client from "./client";
+import type { protos } from "@google-analytics/data";
+import type { Timeframes } from "../../types/widgets";
+
+async function getGlobalAggregateData(
+  provider: GoogleProvider,
+  options: GlobalAggregateOptions
+) {
+  const googleClient = client(provider);
+
+  const { metrics } = options;
+  const timeframe: Timeframes = (options.timeframe as Timeframes) ?? "30d";
+
+  const usedMetrics = getMetrics(metrics);
+
+  const dateRange = getDateRange(timeframe);
+
+  const request: protos.google.analytics.data.v1beta.IRunReportRequest = {
+    property: `properties/${provider.propertyId}`,
+    dateRanges: [dateRange.formatted],
+    dimensions: [],
+    metrics: usedMetrics.map((metric) => {
+      return {
+        name: metric,
+      };
+    }),
+    keepEmptyRows: false,
+    metricAggregations: [1],
+  };
+
+  const data = await googleClient.run.runReport(request).then((data) => data);
+
+  const processedData: AggregateData = usedMetrics.map((metric, index) => {
+    return {
+      label: metrics[index],
+      value: data[0].totals?.[0].metricValues?.[index].value ?? 0,
+    };
+  });
+
+  return processedData;
+}
+
+export default getGlobalAggregateData;

src/providers/google/getGlobalChartData.ts

@@ -0,0 +1,86 @@
+import type { GoogleProvider } from "../../types/providers";
+import type { GlobalChartOptions } from "..";
+import type { ChartData } from "../../types/data";
+import {
+  getMetrics,
+  getDateRange,
+  DateFormat,
+  GoogleDateFormat,
+} from "./utilities";
+import client from "./client";
+import type { protos } from "@google-analytics/data";
+import type { Timeframes } from "../../types/widgets";
+import { eachDayOfInterval, parse, isEqual, format } from "date-fns";
+
+async function getGlobalChartData(
+  provider: GoogleProvider,
+  options: GlobalChartOptions
+) {
+  const googleClient = client(provider);
+
+  const { metrics } = options;
+  const timeframe: Timeframes = (options.timeframe as Timeframes) ?? "30d";
+
+  const usedMetrics = getMetrics(metrics);
+
+  const dateRange = getDateRange(timeframe);
+
+  const dates = eachDayOfInterval({
+    start: dateRange.dates.startDate,
+    end: dateRange.dates.endDate,
+  });
+
+  const request: protos.google.analytics.data.v1beta.IRunReportRequest = {
+    property: `properties/${provider.propertyId}`,
+    dateRanges: [dateRange.formatted],
+    dimensions: [{ name: "date" }],
+    metrics: usedMetrics.map((metric) => {
+      return {
+        name: metric,
+      };
+    }),
+    keepEmptyRows: false,
+    metricAggregations: [],
+  };
+
+  const data = await googleClient.run.runReport(request).then((data) => data);
+
+  const processedData: ChartData = usedMetrics.map((metric, index) => {
+    return {
+      label: metrics[index],
+      data: dates.map((date, dateIndex) => {
+        const matchingRow = data[0].rows?.find((row) => {
+          if (row.dimensionValues?.[0].value) {
+            const parsedDate = parse(
+              row.dimensionValues[0].value,
+              GoogleDateFormat,
+              new Date()
+            );
+
+            return isEqual(date, parsedDate);
+          }
+
+          return false;
+        });
+
+        if (matchingRow) {
+          const value = matchingRow.metricValues?.[index]?.value;
+
+          return {
+            timestamp: format(date, DateFormat),
+            value: value ? parseInt(value) : 0,
+          };
+        } else {
+          return {
+            timestamp: format(date, DateFormat),
+            value: 0,
+          };
+        }
+      }),
+    };
+  });
+
+  return processedData;
+}
+
+export default getGlobalChartData;

src/providers/google/getLiveData.ts

@@ -4,9 +4,7 @@ import type { LiveData } from "../../types/data";
 import client from "./client";
 
 async function getLiveData(provider: GoogleProvider, options: LiveDataOptions) {
-  const googleClient = client(provider, {
-    endpoint: "/stats/realtime/visitors",
-  });
+  const googleClient = client(provider);
 
   const request = {
     property: `properties/${provider.propertyId}`,
@@ -22,9 +20,7 @@ async function getLiveData(provider: GoogleProvider, options: LiveDataOptions) {
 
   const data = await googleClient.run
     .runRealtimeReport(request)
-    .then((data) => data[0].rows?.[0].metricValues?.[0]?.value);
-
-  console.log("data rows", data);
+    .then((data) => data[0].rows?.[0]?.metricValues?.[0]?.value ?? null);
 
   const processedData: LiveData = {
     visitors: data ? parseInt(data) : 0,

src/providers/google/getPageAggregateData.ts

@@ -1,46 +1,61 @@
 import type { GoogleProvider } from "../../types/providers";
 import type { PageAggregateOptions } from "..";
 import type { AggregateData } from "../../types/data";
-import { getMetrics } from "./utilities";
+import { getMetrics, getDateRange } from "./utilities";
 import client from "./client";
+import type { protos } from "@google-analytics/data";
+import type { Timeframes } from "../../types/widgets";
 
 async function getPageAggregateData(
   provider: GoogleProvider,
   options: PageAggregateOptions
 ) {
-  const googleClient = client(provider, {
-    endpoint: "/stats/realtime/visitors",
-  });
+  const googleClient = client(provider);
 
-  const { metrics } = options;
+  const { metrics, pageId } = options;
+  const timeframe: Timeframes = (options.timeframe as Timeframes) ?? "30d";
 
   const usedMetrics = getMetrics(metrics);
 
-  console.log("usedMetrics", usedMetrics);
+  const dateRange = getDateRange(timeframe);
 
-  const request = {
+  const request: protos.google.analytics.data.v1beta.IRunReportRequest = {
     property: `properties/${provider.propertyId}`,
-    dateRanges: [
-      {
-        startDate: "2023-03-05",
-        endDate: "today",
-      },
-    ],
+    dateRanges: [dateRange.formatted],
     dimensions: [{ name: "pagePath" }],
     metrics: usedMetrics.map((metric) => {
       return {
         name: metric,
       };
     }),
+    keepEmptyRows: false,
+    metricAggregations: [1],
+    dimensionFilter: {
+      andGroup: {
+        expressions: [
+          {
+            filter: {
+              fieldName: "pagePath",
+              stringFilter: {
+                matchType: "EXACT",
+                value: pageId,
+                caseSensitive: true,
+              },
+            },
+          },
+        ],
+      },
+    },
   };
 
   const data = await googleClient.run.runReport(request).then((data) => data);
 
-  console.log("data rows", data);
-
-  const processedData: AggregateData = {
-    visitors: 0,
-  };
+  const processedData: AggregateData = usedMetrics.map((metric, index) => {
+    return {
+      label: metrics[index],
+      value: data[0].totals?.[0].metricValues?.[index].value ?? 0,
+    };
+  });
 
   return processedData;
 }