Fix dashboard issues found in demo (#380)

* make sure we have a full line of numbers; * remove comment * prevent plotly from converting date strings to int * change legend to "grants served" * Removed Active Grant Count, centered legend items, and updated tests. * More fixes and updates. * Added num of participants to dashboard overview. * Fix linting error. * Added helper function for comma separator and hooked up to top dashboard widget * Updated AR landing and reason list with comma sep. * Fix audit vuln * Add comma sep to total tta hrs graph and fixed unit test. * Added comma sep to topic freq chart. * Rollback from Analytics to Dashboard... * Cleaned up dashboard to prevent additional async calls * Fix linting error and test * Fixes based on Joshs comments * grab main fe yarn-audit-known-issues * test deploy to sandbox * switch num of participants to its own query * Fix linting * Issues found during demo * push to sandbox * fix function case * fix ability to set start date of sep 1 Co-authored-by: Matt Bevilacqua <thewatermethod@gmail.com> Co-authored-by: Sarah-Jaine Szekeresh <sarah-jaine@adhocteam.us>
HHS · Aug 6, 2021 · 413b504 · 413b504
1 parent 80f3c81
commit 413b504
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 30 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -164,7 +164,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "sj-instrument-transaction"
+    default: "fix-dashboard-issues-found-in-demo"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

diff --git a/frontend/src/Constants.js b/frontend/src/Constants.js
@@ -92,4 +92,4 @@ export const ESCAPE_KEY_CODE = 27;
 export const ESCAPE_KEY_CODES = ['Escape', 'Esc'];
 
 export const DATE_FMT = 'YYYY/MM/DD';
-export const EARLIEST_FILTER_DATE = moment('2020-09-01');
+export const EARLIEST_INC_FILTER_DATE = moment('2020-08-31');
diff --git a/frontend/src/components/DateRangePicker.js b/frontend/src/components/DateRangePicker.js
@@ -6,7 +6,7 @@ import { DateRangePicker as DateRange, isInclusivelyBeforeDay } from 'react-date
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendar } from '@fortawesome/free-solid-svg-icons';
 
-import { DATE_FMT, EARLIEST_FILTER_DATE } from '../Constants';
+import { DATE_FMT, EARLIEST_INC_FILTER_DATE } from '../Constants';
 
 const phrases = {
   focusStartDate: 'Interact with the calendar and add the dates for your date range',
@@ -66,12 +66,12 @@ function DateRangePicker({
   return (
     <>
       { showDateError ? (
-        <div className="usa-alert margin-1" role="alert">
+        <div className="usa-alert usa-alert--warning margin-1" role="alert">
           <div className="usa-alert__body">
             <p className="usa-alert__text">
-              Please enter a valid start date
+              Reports are available from 09/01/2020.
               <br />
-              in the DD/MM/YYYY format
+              Use the format MM/DD/YYYY.
             </p>
           </div>
         </div>
@@ -92,7 +92,7 @@ function DateRangePicker({
           numberOfMonths={1}
           hideKeyboardShortcutsPanel
           endDate={endDate}
-          isOutsideRange={(day) => isInclusivelyBeforeDay(day, EARLIEST_FILTER_DATE)}
+          isOutsideRange={(day) => isInclusivelyBeforeDay(day, EARLIEST_INC_FILTER_DATE)}
           onFocusChange={(focused) => {
             if (focusedInput !== null) {
               updateFocused(focused);

diff --git a/frontend/src/pages/Landing/Components/DatePicker.js b/frontend/src/pages/Landing/Components/DatePicker.js
@@ -6,7 +6,7 @@ import { SingleDatePicker, isInclusivelyBeforeDay } from 'react-dates';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendar } from '@fortawesome/free-solid-svg-icons';
 
-import { DATE_FMT, EARLIEST_FILTER_DATE } from '../../../Constants';
+import { DATE_FMT, EARLIEST_INC_FILTER_DATE } from '../../../Constants';
 
 function DatePicker({ query, onUpdateFilter, id }) {
   const [isFocused, updateIsFocused] = useState(false);
@@ -32,7 +32,7 @@ function DatePicker({ query, onUpdateFilter, id }) {
         focused={isFocused}
         numberOfMonths={1}
         hideKeyboardShortcutsPanel
-        isOutsideRange={(day) => isInclusivelyBeforeDay(day, EARLIEST_FILTER_DATE)}
+        isOutsideRange={(day) => isInclusivelyBeforeDay(day, EARLIEST_INC_FILTER_DATE)}
         onFocusChange={({ focused }) => {
           if (!focused) {
             updateIsFocused(focused);

diff --git a/frontend/src/widgets/DashboardOverview.js b/frontend/src/widgets/DashboardOverview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Grid } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faChartBar, faUserFriends, faUser, faClock, faBuilding,
+  faChartBar, faUserFriends, faUser, faClock, faDollarSign,
 } from '@fortawesome/free-solid-svg-icons';
 import withWidgetData from './withWidgetData';
 import './DashboardOverview.css';
@@ -59,7 +59,7 @@ export function DashboardOverviewWidget({ data }) {
   return (
     <Grid row className="smart-hub--dashboard-overview margin-bottom-3">
       <Field icon={faChartBar} iconColor="#148439" backgroundColor="#F0FCF4" label="Activity reports" data={data.numReports} />
-      <Field icon={faBuilding} iconColor="#2B7FB9" backgroundColor="#E2EFF7" label="Grants served" data={data.numGrants} />
+      <Field icon={faDollarSign} iconColor="#0166ab" backgroundColor="#E2EFF7" label="Grants served" data={data.numGrants} />
       <Field icon={faUserFriends} iconColor="#264A64" backgroundColor="#ECEEF1" label="Participants" data={data.numParticipants} labelCssClasses="padding-top-2" />
       <Field icon={faClock} iconColor="#E29F4D" backgroundColor="#FFF1E0" label="Hours of TTA" data={data.sumDuration} decimalPlaces={1} />
       <Field icon={faUser} iconColor="#A12854" backgroundColor="#FFE8F0" label="In-person activities" data={data.inPerson} />

diff --git a/frontend/src/widgets/ReasonList.js b/frontend/src/widgets/ReasonList.js
@@ -31,7 +31,7 @@ function ReasonList({ data, dateTime }) {
           <caption className="smart-hub--reason-list-caption">
             <div className="display-flex flex-wrap flex-align-center">
               <h2 className="smart-hub--reason-list-heading ttahub--dashboard-widget-heading margin-0">Reasons in Activity Reports</h2>
-              <DateTime classNames="padding-x-1 margin-left-3" timestamp={dateTime.timestamp} label={dateTime.label} />
+              <DateTime classNames="margin-left-1 padding-x-1" timestamp={dateTime.timestamp} label={dateTime.label} />
             </div>
           </caption>
           <thead>

diff --git a/frontend/src/widgets/TopicFrequencyGraph.js b/frontend/src/widgets/TopicFrequencyGraph.js
@@ -258,7 +258,7 @@ export function TopicFrequencyGraphWidget({ data, dateTime }) {
         <Grid className="flex-align-self-center" desktop={{ col: 'auto' }} tabletLg={{ col: 12 }}>
           <h2 className="ttahub--dashboard-widget-heading margin-0">Number of Activity Reports by Topic</h2>
         </Grid>
-        <Grid col="auto" className="display-flex desktop:padding-x-2 desktop:margin-y-0 margin-y-2 flex-align-self-center">
+        <Grid col="auto" className="display-flex desktop:padding-x-1 desktop:margin-y-0 margin-y-2 flex-align-self-center">
           <DateTime classNames="display-flex flex-align-center padding-x-1" timestamp={dateTime.timestamp} label={dateTime.label} />
         </Grid>
         <Grid col="auto" className="ttahub--topic-frequency-graph-control-row display-flex desktop:padding-x-2">

diff --git a/frontend/src/widgets/TotalHrsAndGranteeGraph.css b/frontend/src/widgets/TotalHrsAndGranteeGraph.css
@@ -1,12 +1,10 @@
 .ttahub--total-hrs-grantee-graph-legend {
-  margin-left: 12%;
-  margin-right: 12%;
   text-align: center;
 }
 
 .ttahub--total-hrs-grantee-graph-legend span {
   font-size: 16px;
-  padding-right: 18px;
+  padding-right: 32px;
 }
 
 .ttahub--total-hrs-grantee-graph-legend span::after {

diff --git a/frontend/src/widgets/TotalHrsAndGranteeGraph.js b/frontend/src/widgets/TotalHrsAndGranteeGraph.js
@@ -149,7 +149,7 @@ export function TotalHrsAndGranteeGraph({ data, dateTime }) {
         tickformat: ',.0d',
         title: {
           standoff: 20,
-          text: 'Number of Hours / Grants',
+          text: 'Number of Hours',
           font: {
             family: 'Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif',
             size: 18,
@@ -169,24 +169,27 @@ export function TotalHrsAndGranteeGraph({ data, dateTime }) {
 
   return (
     <div className="ttahub--total-hrs-grantee-graph">
-      <Grid row className="position-relative margin-bottom-4">
+      <Grid row className="position-relative margin-bottom-2">
         <Grid col="auto"><h2 className="ttahub--dashboard-widget-heading margin-0">Total TTA Hours</h2></Grid>
-        <Grid col="auto" className="ttahub--total-hours-graph-timestamp-container display-flex desktop:padding-x-2 flex-align-self-center">
-          <DateTime classNames="display-flex flex-align-center padding-x-1 margin-left-1" timestamp={dateTime.timestamp} label={dateTime.label} />
+        <Grid col="auto" className="ttahub--total-hours-graph-timestamp-container display-flex desktop:padding-x-1 flex-align-self-center">
+          <DateTime classNames="display-flex flex-align-center padding-x-1" timestamp={dateTime.timestamp} label={dateTime.label} />
         </Grid>
       </Grid>
 
-      <Grid row className="position-relative margin-top-1 margin-bottom-3 ttahub--total-hrs-grantee-graph-legend">
-        <Grid desktop={{ col: 4 }} col={6}>
+      <div className="grid-row ttahub--total-hrs-grantee-graph-legend margin-bottom-3">
+
+        <div className="grid-col flex-auto">
           <span>TA</span>
-        </Grid>
-        <Grid desktop={{ col: 4 }} col={6}>
+        </div>
+
+        <div className="grid-col flex-auto">
           <span>Training</span>
-        </Grid>
-        <Grid desktop={{ col: 4 }} col={6}>
+        </div>
+
+        <div className="grid-col flex-auto">
           <span>Both</span>
-        </Grid>
-      </Grid>
+        </div>
+      </div>
 
       <div data-testid="lines" ref={lines} />
     </div>

diff --git a/frontend/src/widgets/WidgetHelper.js b/frontend/src/widgets/WidgetHelper.js
@@ -1,6 +1,6 @@
 /* WidgetHelper.js */
 /* Helper Functions for Widgets */
-function FormatNumber(numberToFormat, decimalPlaces = 0) {
+function formatNumber(numberToFormat, decimalPlaces = 0) {
   if (!numberToFormat || Number.isNaN(numberToFormat)) {
     return 0;
   }
@@ -11,4 +11,4 @@ function FormatNumber(numberToFormat, decimalPlaces = 0) {
 
   return number;
 }
-export default FormatNumber;
+export default formatNumber;