Merge pull request #1437 from 18F/develop

[Feature] Add cards to dashboard layout -- Staging

_includes/dashboard_content.html

@@ -8,7 +8,7 @@
 -->
 <main
   id="dashboard-content-root"
-  class="grid-row"
+  class="padding-2"
   dataURL="{{ site.data_url }}"
   dataPrefix="{{ data_prefix }}"
   agency="{{ page.title }}"

ga4-data/live/realtime-event-counts.json

@@ -0,0 +1,180 @@
+{
+  "name": "realtime-event-counts",
+  "agency": null,
+  "query": {
+    "metrics": [
+      {
+        "name": "eventCount"
+      }
+    ],
+    "dimensions": [
+      {
+        "name": "eventName"
+      }
+    ],
+    "limit": "10000",
+    "property": "properties/397708109"
+  },
+  "meta": {
+    "name": "Number of events of each type realtime",
+    "description": "Number of current events for each event name across all sites."
+  },
+  "data": [
+    {
+      "event_label": "page_view",
+      "total_events": "5803562"
+    },
+    {
+      "event_label": "user_engagement",
+      "total_events": "3251503"
+    },
+    {
+      "event_label": "session_start",
+      "total_events": "1791624"
+    },
+    {
+      "event_label": "scroll",
+      "total_events": "1416785"
+    },
+    {
+      "event_label": "first_visit",
+      "total_events": "811884"
+    },
+    {
+      "event_label": "click",
+      "total_events": "361237"
+    },
+    {
+      "event_label": "file_download",
+      "total_events": "104264"
+    },
+    {
+      "event_label": "view_search_results",
+      "total_events": "93229"
+    },
+    {
+      "event_label": "dap_event",
+      "total_events": "57813"
+    },
+    {
+      "event_label": "video_pause",
+      "total_events": "17534"
+    },
+    {
+      "event_label": "video_play",
+      "total_events": "13808"
+    },
+    {
+      "event_label": "video_progress",
+      "total_events": "13010"
+    },
+    {
+      "event_label": "video_start",
+      "total_events": "9315"
+    },
+    {
+      "event_label": "telephone_click",
+      "total_events": "8109"
+    },
+    {
+      "event_label": "email_click",
+      "total_events": "2706"
+    },
+    {
+      "event_label": "custom",
+      "total_events": "2379"
+    },
+    {
+      "event_label": "official_usa_site_banner_click",
+      "total_events": "2025"
+    },
+    {
+      "event_label": "video_complete",
+      "total_events": "1307"
+    },
+    {
+      "event_label": "audio_progress",
+      "total_events": "735"
+    },
+    {
+      "event_label": "Click",
+      "total_events": "515"
+    },
+    {
+      "event_label": "audio_start",
+      "total_events": "504"
+    },
+    {
+      "event_label": "(other)",
+      "total_events": "472"
+    },
+    {
+      "event_label": "audio_pause",
+      "total_events": "375"
+    },
+    {
+      "event_label": "audio_complete",
+      "total_events": "274"
+    },
+    {
+      "event_label": "video_error",
+      "total_events": "217"
+    },
+    {
+      "event_label": "audio_play",
+      "total_events": "146"
+    },
+    {
+      "event_label": "Link_Click_Titles",
+      "total_events": "85"
+    },
+    {
+      "event_label": "PNG",
+      "total_events": "69"
+    },
+    {
+      "event_label": "JPG",
+      "total_events": "62"
+    },
+    {
+      "event_label": "pdf",
+      "total_events": "53"
+    },
+    {
+      "event_label": "xlsx",
+      "total_events": "9"
+    },
+    {
+      "event_label": "GIF",
+      "total_events": "6"
+    },
+    {
+      "event_label": "PDF",
+      "total_events": "5"
+    },
+    {
+      "event_label": "Viewed",
+      "total_events": "1"
+    },
+    {
+      "event_label": "docx",
+      "total_events": "1"
+    },
+    {
+      "event_label": "exe",
+      "total_events": "1"
+    },
+    {
+      "event_label": "ppsx",
+      "total_events": "1"
+    },
+    {
+      "event_label": "pptx",
+      "total_events": "1"
+    }
+  ],
+  "totals": {
+    "total_events": 13765626
+  },
+  "taken_at": "2024-11-20T17:34:01.358Z"
+}

ga4-data/live/realtime.json

@@ -1,24 +1,28 @@
 {
   "name": "realtime",
+  "agency": null,
   "query": {
     "metrics": [
       {
         "name": "activeUsers"
+      },
+      {
+        "name": "screenPageViews"
       }
     ],
-    "samplingLevel": "HIGHER_PRECISION",
     "limit": "10000",
-    "property": "properties/393249053"
+    "property": "properties/397708109"
   },
   "meta": {
-    "name": "Active Users Right Now",
-    "description": "Number of users currently visiting all sites."
+    "name": "Active users and page views realtime",
+    "description": "Number of users currently visiting all sites and the number of page views."
   },
   "data": [
     {
-      "activeUsers": "10003538"
+      "activeUsers": "1827769",
+      "pageviews": "6062691"
     }
   ],
   "totals": {},
-  "taken_at": "2024-01-05T16:05:45.980Z"
+  "taken_at": "2024-11-20T16:06:58.795Z"
 }

ga4-data/trade-development-agency/realtime-event-counts.json

@@ -0,0 +1,25 @@
+{
+  "name": "realtime-event-counts",
+  "agency": "trade-development-agency",
+  "query": {
+    "metrics": [
+      {
+        "name": "eventCount"
+      }
+    ],
+    "dimensions": [
+      {
+        "name": "eventName"
+      }
+    ],
+    "limit": "10000",
+    "property": "properties/397513313"
+  },
+  "meta": {
+    "name": "Number of events of each type realtime",
+    "description": "Number of current events for each event name across all sites."
+  },
+  "data": [],
+  "totals": {},
+  "taken_at": "2024-11-20T19:53:50.732Z"
+}

ga4-data/trade-development-agency/realtime.json

@@ -0,0 +1,23 @@
+{
+  "name": "realtime",
+  "agency": "trade-development-agency",
+  "query": {
+    "metrics": [
+      {
+        "name": "activeUsers"
+      },
+      {
+        "name": "screenPageViews"
+      }
+    ],
+    "limit": "10000",
+    "property": "properties/397513313"
+  },
+  "meta": {
+    "name": "Active users and page views realtime",
+    "description": "Number of users currently visiting all sites and the number of page views."
+  },
+  "data": [],
+  "totals": {},
+  "taken_at": "2024-11-20T19:53:49.965Z"
+}

js/components/card/Card.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Wrapper react component which creates a USWDS card component.
+ *
+ * @param {object} props the properties for the component.
+ * @param {import('react').ReactNode} props.children the wrapped elements.
+ * @param {string} props.className the class names to append to the rendered
+ * element.
+ * @returns {import('react').ReactElement} The rendered element
+ */
+function Card({ children, className = "" }) {
+  return <li className={`usa-card ${className}`}>{children}</li>;
+}
+
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default Card;

js/components/card/CardContent.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Wrapper react component which creates a USWDS card container component.
+ *
+ * @param {object} props the properties for the component.
+ * @param {import('react').ReactNode} props.children the wrapped elements.
+ * @param {string} props.className the class names to append to the rendered
+ * element.
+ * @returns {import('react').ReactElement} The rendered element
+ */
+function CardContent({ children, className = "" }) {
+  return <div className={`usa-card__container ${className}`}>{children}</div>;
+}
+
+CardContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default CardContent;

js/components/card/CardGroup.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Wrapper react component which creates a USWDS card group component.
+ *
+ * @param {object} props the properties for the component.
+ * @param {import('react').ReactNode} props.children the wrapped elements.
+ * @param {string} props.className the class names to append to the rendered
+ * element.
+ * @returns {import('react').ReactElement} The rendered element
+ */
+function CardGroup({ children, className = "" }) {
+  return <ul className={`usa-card-group ${className}`}>{children}</ul>;
+}
+
+CardGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default CardGroup;