Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TTAHUB-323] resolve bug with displaying dates on total hrs and grantee graph #412

Merged
merged 4 commits into from
Sep 8, 2021
Merged

[TTAHUB-323] resolve bug with displaying dates on total hrs and grantee graph #412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
680598d
resolve bug with displaying dates on total hrs and grantee
thewatermethod Sep 7, 2021
9d339d9
resolve failing unit test
thewatermethod Sep 7, 2021
1185be8
add explanatory label to date picker
thewatermethod Sep 7, 2021
d3c85c6
Merge branch 'main' into TTAHUB-323
thewatermethod Sep 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion frontend/src/components/ButtonSelect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ButtonSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/RegionalDashboard/components/DateRangeSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/widgets/TotalHrsAndGranteeGraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
})];
Expand Down
34 changes: 25 additions & 9 deletions frontend/src/widgets/__tests__/TotalHrsAndGranteeGraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down Expand Up @@ -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 () => {
Expand Down
30 changes: 13 additions & 17 deletions src/widgets/totalHrsAndGranteeGraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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.
Expand All @@ -31,6 +32,7 @@ function addOrUpdateResponse(traceIndex, res, xValue, valueToAdd) {
}
responseObject.x.push(xValue);
responseObject.y.push(0);
responseObject.month.push(month);
}
});
}
Expand All @@ -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: [],
},
];

Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/widgets/totalHrsAndGranteeGraph.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']);
Expand Down Expand Up @@ -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']);
Expand Down