Skip to content

Commit b7db074

Browse files
levinmrlevinmr
authored
Merge pull request #1509 from 18F/feature/page_helpful_score
[Feature] Add page helpful score for the site
2 parents 22e8479 + 83974aa commit b7db074

13 files changed

Lines changed: 389 additions & 10 deletions

File tree

‎_includes/dashboard_content.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,19 @@
2323
dataPrefix="{{ data_prefix }}"
2424
agency="{{ page.title }}"
2525
></div>
26+
<section class="grid-row">
27+
<div id="touchpoints-page-helpful-survey-root" class="grid-col-12"></div>
28+
<div
29+
class="card:grid-offset-2 card:grid-col-8 mobile-lg:grid-offset-3 mobile-lg:grid-col-6 desktop:grid-offset-5 desktop:grid-col-2 margin-bottom-2"
30+
>
31+
<div
32+
id="page-helpful-survey-score-root"
33+
dataURL="{{ site.data_url }}"
34+
></div>
35+
<div class="text-normal font-sans-lg text-center">
36+
<p class="margin-y-1">Customer feedback</p>
37+
<p class="margin-0">over the last 30 days</p>
38+
</div>
39+
</div>
40+
</section>
2641
</main>

‎_includes/touchpoints_page_helpful_survey.html‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎_layouts/default.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99

1010
<body>
1111
{% include banner.html %} {% include header.html %} {% include error.html %}
12-
{{ content }} {% include touchpoints_page_helpful_survey.html %}{% include
13-
footer.html %}
12+
{{ content }} {% include footer.html %}
1413
</body>
1514

1615
{% include footer_scripts.html %}

‎ga4-data/analytics.usa.gov/was-this-page-helpful-30-days.json‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
{
2+
"name": "was_this_page_helpful-60-days",
3+
"agency": "analytics.usa.gov",
4+
"sampling": [],
5+
"query": {
6+
"meta": {
7+
"name": "Was this page helpful - 60 Days",
8+
"description": "60 days of event counts and labels (yes/no) for was this page helpful for analytics.usa.gov"
9+
},
10+
"metrics": [
11+
{
12+
"name": "eventCount"
13+
}
14+
],
15+
"orderBys": [
16+
{
17+
"desc": true,
18+
"metric": {
19+
"metricName": "eventCount"
20+
}
21+
}
22+
],
23+
"dateRanges": [
24+
{
25+
"endDate": "yesterday",
26+
"startDate": "60daysAgo"
27+
}
28+
],
29+
"dimensions": [
30+
{
31+
"name": "customEvent:event_label"
32+
},
33+
{
34+
"name": "pagePath"
35+
}
36+
],
37+
"dimensionFilter": {
38+
"andGroup": {
39+
"expressions": [
40+
{
41+
"filter": {
42+
"fieldName": "eventName",
43+
"stringFilter": {
44+
"value": "was_this_helpful_submit"
45+
}
46+
}
47+
},
48+
{
49+
"filter": {
50+
"fieldName": "hostName",
51+
"stringFilter": {
52+
"value": "analytics.usa.gov"
53+
}
54+
}
55+
},
56+
{
57+
"filter": {
58+
"fieldName": "customEvent:event_action",
59+
"stringFilter": {
60+
"value": "was_this_page_helpful_v3.0"
61+
}
62+
}
63+
}
64+
]
65+
}
66+
},
67+
"limit": "10000",
68+
"property": "properties/451665844"
69+
},
70+
"data": [
71+
{
72+
"customEvent:event_label": "yes",
73+
"pagePath": "/",
74+
"total_events": "20"
75+
},
76+
{
77+
"customEvent:event_label": "no",
78+
"pagePath": "/",
79+
"total_events": "4"
80+
},
81+
{
82+
"customEvent:event_label": "yes",
83+
"pagePath": "/national-library-medicine",
84+
"total_events": "4"
85+
},
86+
{
87+
"customEvent:event_label": "no",
88+
"pagePath": "/definitions",
89+
"total_events": "3"
90+
},
91+
{
92+
"customEvent:event_label": "yes",
93+
"pagePath": "/definitions",
94+
"total_events": "3"
95+
},
96+
{
97+
"customEvent:event_label": "yes",
98+
"pagePath": "/commerce",
99+
"total_events": "2"
100+
},
101+
{
102+
"customEvent:event_label": "yes",
103+
"pagePath": "/defense",
104+
"total_events": "2"
105+
},
106+
{
107+
"customEvent:event_label": "no",
108+
"pagePath": "/commerce",
109+
"total_events": "1"
110+
},
111+
{
112+
"customEvent:event_label": "no",
113+
"pagePath": "/health-human-services",
114+
"total_events": "1"
115+
},
116+
{
117+
"customEvent:event_label": "no",
118+
"pagePath": "/health-human-services/",
119+
"total_events": "1"
120+
},
121+
{
122+
"customEvent:event_label": "no",
123+
"pagePath": "/state",
124+
"total_events": "1"
125+
},
126+
{
127+
"customEvent:event_label": "yes",
128+
"pagePath": "/about",
129+
"total_events": "1"
130+
},
131+
{
132+
"customEvent:event_label": "yes",
133+
"pagePath": "/access-board",
134+
"total_events": "1"
135+
},
136+
{
137+
"customEvent:event_label": "yes",
138+
"pagePath": "/army",
139+
"total_events": "1"
140+
},
141+
{
142+
"customEvent:event_label": "yes",
143+
"pagePath": "/consumer-financial-protection-bureau",
144+
"total_events": "1"
145+
},
146+
{
147+
"customEvent:event_label": "yes",
148+
"pagePath": "/corporation-national-community-service",
149+
"total_events": "1"
150+
},
151+
{
152+
"customEvent:event_label": "yes",
153+
"pagePath": "/data",
154+
"total_events": "1"
155+
},
156+
{
157+
"customEvent:event_label": "yes",
158+
"pagePath": "/defense-health-agency",
159+
"total_events": "1"
160+
},
161+
{
162+
"customEvent:event_label": "yes",
163+
"pagePath": "/energy",
164+
"total_events": "1"
165+
},
166+
{
167+
"customEvent:event_label": "yes",
168+
"pagePath": "/federal-trade-commission",
169+
"total_events": "1"
170+
},
171+
{
172+
"customEvent:event_label": "yes",
173+
"pagePath": "/forest-service",
174+
"total_events": "1"
175+
},
176+
{
177+
"customEvent:event_label": "yes",
178+
"pagePath": "/health-human-services",
179+
"total_events": "1"
180+
},
181+
{
182+
"customEvent:event_label": "yes",
183+
"pagePath": "/historical-data-download",
184+
"total_events": "1"
185+
},
186+
{
187+
"customEvent:event_label": "yes",
188+
"pagePath": "/interior/data",
189+
"total_events": "1"
190+
},
191+
{
192+
"customEvent:event_label": "yes",
193+
"pagePath": "/nuclear-regulatory-commission",
194+
"total_events": "1"
195+
},
196+
{
197+
"customEvent:event_label": "yes",
198+
"pagePath": "/social-security-administration",
199+
"total_events": "1"
200+
}
201+
],
202+
"totals": {
203+
"total_events": 57,
204+
"by_customEvent:event_label": {
205+
"yes": 46,
206+
"no": 11
207+
}
208+
},
209+
"taken_at": "2025-02-13T18:40:09.553Z"
210+
}

‎js/components/dashboard_content/SidebarContent.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function SidebarContent({ dataHrefBase, agency }) {
5757
<CardContent className="padding-105 margin-0 border-0 height-auto">
5858
<TopPages
5959
dataHrefBase={dataHrefBase}
60-
numberOfListingsToDisplay={30}
60+
numberOfListingsToDisplay={20}
6161
refreshSeconds={Config.realtimeDataRefreshSeconds}
6262
/>
6363
</CardContent>

‎js/components/page_helpful_survey_score/PageHelpfulSurveyScore.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useEffect, useState } from "react";
2+
import PropTypes from "prop-types";
3+
import { CircularProgressbar } from "react-circular-progressbar";
4+
5+
import DataLoader from "../../lib/data_loader";
6+
7+
/**
8+
* Loads the data
9+
*
10+
* @param {object} props the properties for the component
11+
* @param {string} props.dataURL the URL of the base location of the data to be
12+
* displayed In production this is proxied and redirected to the S3 bucket URL
13+
* by NGINX.
14+
* @returns {import('react').ReactElement} The rendered element
15+
*/
16+
function PageHelpfulSurveyScore({ dataURL }) {
17+
const jsonURL = `${dataURL}/analytics.usa.gov/was-this-page-helpful-30-days.json`;
18+
const [percentage, setPercentage] = useState(0);
19+
20+
useEffect(() => {
21+
const initChart = async () => {
22+
if (!percentage) {
23+
await loadData();
24+
}
25+
};
26+
initChart().catch(console.error);
27+
}, []);
28+
29+
async function loadData() {
30+
let data;
31+
32+
try {
33+
data = await DataLoader.loadJSON(jsonURL);
34+
} catch (e) {
35+
data = { data: [], totals: {} };
36+
}
37+
38+
if (
39+
data &&
40+
data.totals &&
41+
data.totals["by_customEvent:event_label"] &&
42+
data.totals["by_customEvent:event_label"]
43+
) {
44+
const calculatedValue =
45+
(data.totals["by_customEvent:event_label"]["yes"] /
46+
data.totals.total_events) *
47+
100;
48+
await setPercentage(Math.round(calculatedValue));
49+
}
50+
}
51+
52+
return <CircularProgressbar value={percentage} text={`${percentage}% Yes`} />;
53+
}
54+
55+
PageHelpfulSurveyScore.propTypes = {
56+
dataURL: PropTypes.string.isRequired,
57+
};
58+
59+
export default PageHelpfulSurveyScore;

‎js/components/page_helpful_survey_score/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
import { createRoot } from "react-dom/client";
3+
import PageHelpfulSurveyScore from "./PageHelpfulSurveyScore";
4+
5+
/**
6+
* Renders an PageHelpfulSurveyScore React component, when there is an
7+
* element on the current page with id 'page-helpful-survey-score-root'.
8+
*
9+
* The PageHelpfulSurveyScore component will be rendered as a child to the
10+
* matching element.
11+
*/
12+
13+
const domNode = document.getElementById("page-helpful-survey-score-root");
14+
15+
if (domNode) {
16+
const root = createRoot(domNode);
17+
const dataURL = domNode.attributes.getNamedItem("dataurl").value;
18+
root.render(<PageHelpfulSurveyScore dataURL={dataURL} />);
19+
}

‎js/lib/react_setup.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ require("../components/footer");
44
require("../components/historical_data_download");
55
require("../components/dashboard_content");
66
require("../components/touchpoints_page_helpful_survey");
7+
require("../components/page_helpful_survey_score");

‎package-lock.json‎

Lines changed: 12 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
"jest": "^29.7.0",
6161
"jest-environment-jsdom": "^29.7.0",
6262
"npm-run-all": "^4.1.5",
63-
"pa11y-ci": "^3.1.0",
6463
"pa11y": "^8.0.0",
64+
"pa11y-ci": "^3.1.0",
6565
"prettier": "^3.2.5",
6666
"react-test-renderer": "^18.3.1",
6767
"stylelint": "^16.2.1",
@@ -82,6 +82,7 @@
8282
"date-fns": "^3.6.0",
8383
"export-to-csv": "^1.3.0",
8484
"react": "^18.3.0",
85+
"react-circular-progressbar": "^2.1.0",
8586
"react-dom": "^18.3.0",
8687
"react-tabs": "^6.0.2"
8788
}

0 commit comments

Comments
 (0)