[TTAHUB-323] resolve bug with displaying dates on total hrs and grant…

…ee graph (#412)

* resolve bug with displaying dates on total hrs and grantee

* resolve failing unit test

* add explanatory label to date picker

frontend/src/components/ButtonSelect.css

@@ -16,6 +16,13 @@
     box-sizing: border-box;
 }
 
+.smart-hub--button-select-menu-label:not(.sr-only) {
+    display: block;
+    margin-top: 1em;
+    max-width: 240px;
+    padding: 0 1em;
+}
+
 .smart-hub--button-select-range-button {
     background: white;
     border: 0;
@@ -39,7 +46,7 @@
     width: 32px;
 }
 .smart-hub--button-select-menu .ttahub-date-range-picker {
-    margin: 0.5em;
+    margin: 0.5em 0;
 }
 
 .smart-hub--button-select-menu .DateInput {

frontend/src/components/ButtonSelect.js

@@ -133,8 +133,8 @@ function ButtonSelect(props) {
       { menuIsOpen
         ? (
           <div className="smart-hub--button-select-menu" role="group" aria-describedby={labelId}>
-            <span className="sr-only" id={labelId}>{labelText}</span>
-            <fieldset className="border-0">
+            <span className={hasDateRange ? 'smart-hub--button-select-menu-label' : 'smart-hub--button-select-menu-label sr-only'} id={labelId}><strong>{labelText}</strong></span>
+            <fieldset className="margin-0 border-0">
               { options.map((option) => (
                 <button
                   type="button"

frontend/src/pages/RegionalDashboard/components/DateRangeSelect.js

@@ -24,7 +24,7 @@ export default function DateRangeSelect(props) {
       onApply={onApply}
       initialValue={initialValue}
       labelId="dateRangeOptionsLabel"
-      labelText="Date range options"
+      labelText="Select the date range for TTA activities"
       options={DATE_OPTIONS}
       applied={selectedDateRangeOption}
       hasDateRange

frontend/src/widgets/TotalHrsAndGranteeGraph.js

@@ -174,9 +174,9 @@ export function TotalHrsAndGranteeGraph({ data, dateTime, loading }) {
       return;
     }
 
-    const headings = ['TTA Provided', ...data[0].x.map((x) => {
-      if (data[0].month) {
-        return `${data[0].month} ${x}`;
+    const headings = ['TTA Provided', ...data[0].x.map((x, index) => {
+      if (data[0].month[index]) {
+        return `${data[0].month[index]} ${x}`;
       }
       return x;
     })];

frontend/src/widgets/__tests__/TotalHrsAndGranteeGraph.js

@@ -5,19 +5,33 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { TotalHrsAndGranteeGraph, LegendControl } from '../TotalHrsAndGranteeGraph';
 
 const TEST_DATA_MONTHS = [
-  { name: 'Grantee Rec TTA', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [1, 2, 3, 4, 5, 6] },
-  { name: 'Hours of Training', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [7, 8, 9, 0, 0, 0] },
-  { name: 'Hours of Technical Assistance', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [0, 0, 0, 10, 11.2348732847, 12] },
-  { name: 'Hours of Both', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [0, 13, 0, 14, 0, 0] },
+  {
+    name: 'Grantee Rec TTA', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [1, 2, 3, 4, 5, 6], month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+  },
+  {
+    name: 'Hours of Training', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [7, 8, 9, 0, 0, 0], month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+  },
+  {
+    name: 'Hours of Technical Assistance', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [0, 0, 0, 10, 11.2348732847, 12], month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+  },
+  {
+    name: 'Hours of Both', x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], y: [0, 13, 0, 14, 0, 0], month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+  },
 ];
 
 const TEST_DATA_DAYS = [
   {
-    name: 'Grantee Rec TTA', x: ['1', '2', '3', '4'], y: [1, 2, 3, 4], month: 'January',
+    name: 'Grantee Rec TTA', x: ['1', '2', '3', '4'], y: [1, 2, 3, 4], month: ['Jan', 'Jan', 'Jan', 'Feb'],
+  },
+  {
+    name: 'Hours of Training', x: ['1', '2', '3', '4'], y: [5, 6, 7, 0], month: ['Jan', 'Jan', 'Jan', 'Feb'],
+  },
+  {
+    name: 'Hours of Technical Assistance', x: ['1', '2', '3', '4'], y: [8, 9, 0, 0], month: ['Jan', 'Jan', 'Jan', 'Feb'],
+  },
+  {
+    name: 'Hours of Both', x: ['1', '2', '3', '4'], y: [10, 0, 0, 0], month: ['Jan', 'Jan', 'Jan', 'Feb'],
   },
-  { name: 'Hours of Training', x: ['1', '2', '3', '4'], y: [5, 6, 7, 0] },
-  { name: 'Hours of Technical Assistance', x: ['1', '2', '3', '4'], y: [8, 9, 0, 0] },
-  { name: 'Hours of Both', x: ['1', '2', '3', '4'], y: [10, 0, 0, 0] },
 ];
 
 const renderTotalHrsAndGranteeGraph = async (props) => (
@@ -109,8 +123,10 @@ describe('Total Hrs And Grantee Graph Widget', () => {
     renderTotalHrsAndGranteeGraph({ data: TEST_DATA_DAYS });
     const button = screen.getByRole('button', { name: 'display total training and technical assistance hours as table' });
     fireEvent.click(button);
-    const jan1 = screen.getByRole('columnheader', { name: /january 1/i });
+    const jan1 = screen.getByRole('columnheader', { name: /jan 1/i });
+    const feb4 = screen.getByRole('columnheader', { name: /feb 4/i });
     expect(jan1).toBeInTheDocument();
+    expect(feb4).toBeInTheDocument();
   });
 
   it('handles switching contexts', async () => {

src/widgets/totalHrsAndGranteeGraph.js

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { ActivityReport } from '../models';
 import { REPORT_STATUSES } from '../constants';
 
-function addOrUpdateResponse(traceIndex, res, xValue, valueToAdd) {
+function addOrUpdateResponse(traceIndex, res, xValue, valueToAdd, month) {
   // If report is missing duration set value to 0.
   let cleanValue = valueToAdd;
   if (cleanValue === null) {
@@ -15,14 +15,15 @@ function addOrUpdateResponse(traceIndex, res, xValue, valueToAdd) {
   res.forEach((responseObject, index) => {
     if (index === traceIndex) {
       if (responseObject.x.includes(xValue)) {
-        // Update existing Y value.
+        // Update existing x value.
         const indexToUpdate = res[traceIndex].x.indexOf(xValue);
         // eslint-disable-next-line no-param-reassign
         responseObject.y[indexToUpdate] += valueToUse;
       } else {
-        // Add X value and Update Y value.
+        // Add X value, month value, & Y value.
         responseObject.x.push(xValue);
         responseObject.y.push(valueToUse);
+        responseObject.month.push(month);
       }
     } else {
       // Add X axis entry with 0 value.
@@ -31,6 +32,7 @@ function addOrUpdateResponse(traceIndex, res, xValue, valueToAdd) {
       }
       responseObject.x.push(xValue);
       responseObject.y.push(0);
+      responseObject.month.push(month);
     }
   });
 }
@@ -39,13 +41,13 @@ export default async function totalHrsAndGranteeGraph(scopes, query) {
   // Build out return Graph data.
   const res = [
     {
-      name: 'Hours of Training', x: [], y: [], month: null,
+      name: 'Hours of Training', x: [], y: [], month: [],
     },
     {
-      name: 'Hours of Technical Assistance', x: [], y: [], month: null,
+      name: 'Hours of Technical Assistance', x: [], y: [], month: [],
     },
     {
-      name: 'Hours of Both', x: [], y: [], month: null,
+      name: 'Hours of Both', x: [], y: [], month: [],
     },
   ];
 
@@ -90,14 +92,6 @@ export default async function totalHrsAndGranteeGraph(scopes, query) {
     multipleYrs = moment(sdDate).format('YY') !== moment(edDate).format('YY');
   }
 
-  if (useDays) {
-    const month = moment(startDate).format('MMM');
-    res.forEach((r) => {
-      // eslint-disable-next-line no-param-reassign
-      r.month = month;
-    });
-  }
-
   // Query Approved AR's.
   const reports = await ActivityReport.findAll({
     attributes: [
@@ -125,17 +119,19 @@ export default async function totalHrsAndGranteeGraph(scopes, query) {
       const xValue = useDays ? moment(r.startDate).format('D')
         : multipleYrs ? moment(r.startDate).format('MMM-YY') : moment(r.startDate).format('MMM');
 
+      const month = useDays ? moment(r.startDate).format('MMM') : false;
+
       // Check if we have added this activity report for this date.
       if (!arDates.find((cache) => cache.id === r.id && cache.date === r.startDate)) {
         // Populate Both.
         if ((r.ttaType.includes('training') && r.ttaType.includes('technical-assistance')) || r.ttaType.includes('Both')) {
-          addOrUpdateResponse(2, res, xValue, r.duration);
+          addOrUpdateResponse(2, res, xValue, r.duration, month);
         } else if (r.ttaType.includes('training') || r.ttaType.includes('Training')) {
           // Hours of Training.
-          addOrUpdateResponse(0, res, xValue, r.duration);
+          addOrUpdateResponse(0, res, xValue, r.duration, month);
         } else {
           // Hours of Technical Assistance.
-          addOrUpdateResponse(1, res, xValue, r.duration);
+          addOrUpdateResponse(1, res, xValue, r.duration, month);
         }
 
         // Populate used AR Id's and Dates.

src/widgets/totalHrsAndGranteeGraph.test.js

@@ -180,7 +180,7 @@ describe('Total Hrs and Grantee Graph widget', () => {
     // Hours of Training.
     expect(data[0].x).toEqual(['Feb', 'Jun', 'Jul']);
     expect(data[0].y).toStrictEqual([0, 6.3, 6]);
-    expect(data[0].month).toBe(null);
+    expect(data[0].month).toStrictEqual([false, false, false]);
 
     // Hours of Technical Assistance.
     expect(data[1].x).toEqual(['Feb', 'Jun', 'Jul']);
@@ -226,7 +226,7 @@ describe('Total Hrs and Grantee Graph widget', () => {
     // Hours of Training.
     expect(data[0].x).toEqual(['10', '15', '20']);
     expect(data[0].y).toStrictEqual([1, 0, 0]);
-    expect(data[0].month).toBe('Jun');
+    expect(data[0].month).toStrictEqual(['Jun', 'Jun', 'Jun']);
 
     // Hours of Technical Assistance.
     expect(data[1].x).toEqual(['10', '15', '20']);