[Feature] Add GA4 metrics to DataLoader methods

Author: Michael Levin

jest_setup.js

@@ -25,6 +25,8 @@ window.fetch = jest.fn(() => {
   };
 });
 
+window.gas4 = jest.fn();
+
 // Stub Math.random.  Used to create random ids for tooltip element.
 const mockMath = Object.create(global.Math);
 mockMath.random = () => 0.5;

js/components/dashboard_content/AverageEngagementDuration.js

@@ -26,7 +26,7 @@ function AverageEngagementDuration({ dataHrefBase }) {
   useEffect(() => {
     const initEngagementDurationsChart = async () => {
       if (!engagementDurationData) {
-        const data = await DataLoader.loadJSON(jsonDataURL);
+        const data = await DataLoader.loadDailyReportJSON(jsonDataURL);
         await setEngagementDurationData(data);
       } else {
         const chartBuilder = new ChartBuilder();

js/components/dashboard_content/BrowsersChart.js

@@ -40,7 +40,7 @@ function BrowsersChart({ dataHrefBase }) {
     let data;
 
     try {
-      data = await DataLoader.loadJSON(
+      data = await DataLoader.loadDailyReportJSON(
         `${dataHrefBase}/${currentFilter[1]}.json`,
       );
     } catch (e) {

js/components/dashboard_content/DevicesChart.js

@@ -41,7 +41,7 @@ function DevicesChart({ dataHrefBase }) {
     let data;
 
     try {
-      data = await DataLoader.loadJSON(
+      data = await DataLoader.loadDailyReportJSON(
         `${dataHrefBase}/${currentFilter[1]}.json`,
       );
     } catch (e) {

js/components/dashboard_content/EngagementRate.js

@@ -25,7 +25,7 @@ function EngagementRate({ dataHrefBase }) {
   useEffect(() => {
     const initEngagementRateChart = async () => {
       if (!engagementRateData) {
-        const data = await DataLoader.loadJSON(jsonDataURL);
+        const data = await DataLoader.loadDailyReportJSON(jsonDataURL);
         await setEngagementRateData(data);
       } else {
         const chartBuilder = new ChartBuilder();

js/components/dashboard_content/OperatingSystemsChart.js

@@ -44,7 +44,7 @@ function OperatingSystemsChart({ dataHrefBase }) {
     let windowsData;
 
     try {
-      osData = await DataLoader.loadJSON(
+      osData = await DataLoader.loadDailyReportJSON(
         `${dataHrefBase}/os-${currentFilter[1]}.json`,
       );
     } catch (e) {
@@ -53,7 +53,7 @@ function OperatingSystemsChart({ dataHrefBase }) {
     await buildOsChartForData(osData);
 
     try {
-      windowsData = await DataLoader.loadJSON(
+      windowsData = await DataLoader.loadDailyReportJSON(
         `${dataHrefBase}/windows-${currentFilter[1]}.json`,
       );
     } catch (e) {

js/components/dashboard_content/RealtimeVisitors.js

@@ -26,12 +26,12 @@ function RealtimeVisitors({ dataHrefBase, agency, refreshSeconds }) {
   useEffect(() => {
     const initRealtimeVisitorsChart = async () => {
       if (!realtimeVisitorData) {
-        const data = await DataLoader.loadJSON(dataURL);
+        const data = await DataLoader.loadRealtimeReportJSON(dataURL);
         await setRealtimeVisitorData(data);
         // Refresh data every interval. useEffect will run and update the chart
         // when the state is changed.
         setInterval(() => {
-          DataLoader.loadJSON(dataURL).then((data) => {
+          DataLoader.loadRealtimeReportJSON(dataURL).then((data) => {
             setRealtimeVisitorData(data);
           });
         }, refreshSeconds * 1000);

js/components/dashboard_content/ScreenResolutionsChart.js

@@ -40,7 +40,7 @@ function ScreenResolutionsChart({ dataHrefBase }) {
     let data;
 
     try {
-      data = await DataLoader.loadJSON(
+      data = await DataLoader.loadDailyReportJSON(
         `${dataHrefBase}/${currentFilter[1]}.json`,
       );
     } catch (e) {

js/components/dashboard_content/Sessions30Days.js

@@ -26,7 +26,7 @@ function Sessions30Days({ dataHrefBase }) {
   useEffect(() => {
     const initSessionsChart = async () => {
       if (!sessionData) {
-        const data = await DataLoader.loadJSON(jsonDataURL);
+        const data = await DataLoader.loadDailyReportJSON(jsonDataURL);
         await setSessionData(data);
       } else {
         const chartBuilder = new ChartBuilder();

js/components/dashboard_content/TopCities.js

@@ -58,9 +58,13 @@ function TopCities({ dataHrefBase, refreshSeconds }) {
     let data;
 
     try {
-      data = await DataLoader.loadJSON(
-        `${dataHrefBase}/${currentFilter[1]}.json`,
-      );
+      const url = `${dataHrefBase}/${currentFilter[1]}.json`;
+
+      if (isRealtime) {
+        data = await DataLoader.loadRealtimeReportJSON(url);
+      } else {
+        data = await DataLoader.loadDailyReportJSON(url);
+      }
     } catch (e) {
       data = { data: [], totals: {} };
     }