diff --git a/web-ui/src/pages/PulseReportPage.jsx b/web-ui/src/pages/PulseReportPage.jsx
index 4cf902f10..66e5e8fcb 100644
--- a/web-ui/src/pages/PulseReportPage.jsx
+++ b/web-ui/src/pages/PulseReportPage.jsx
@@ -33,7 +33,8 @@ import {
MenuItem,
Modal,
TextField,
- Typography
+ Typography,
+ Link,
} from '@mui/material';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -79,6 +80,8 @@ const ScoreOptionLabel = {
'Combined': 'Both',
};
+const pulsesPerPage = 15;
+
/*
// Returns a random, integer score between 1 and 5.
// We may want to uncomment this later for testing.
@@ -117,6 +120,7 @@ const PulseReportPage = () => {
const [expanded, setExpanded] = useState(false);
const [scoreChartData, setScoreChartData] = useState([]);
const [pulses, setPulses] = useState([]);
+ const [pulsesUpperBounds, setPulsesUpperBounds] = useState(pulsesPerPage);
const [scope, setScope] = useState('Individual');
const [scoreType, setScoreType] = useState(ScoreOption.COMBINED);
const [selectedPulse, setSelectedPulse] = useState(null);
@@ -329,6 +333,7 @@ const PulseReportPage = () => {
return compare;
});
setPulses(pulses);
+ setPulsesUpperBounds(pulsesPerPage);
};
useEffect(() => {
@@ -389,63 +394,6 @@ const PulseReportPage = () => {
);
- const scoreDistributionChart = () => (
-
-
-
-
-
-
-
-
-
- {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.INTERNAL) &&
-
- }
- {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.EXTERNAL) &&
-
- }
-
- setExpanded(!expanded)}
- aria-expanded={expanded}
- aria-label={expanded ? 'show less' : 'show more'}
- size="large"
- />
-
- {responseSummary()}
-
-
-
- );
-
const handleCommentClick = pulse => {
setSelectedPulse(pulse);
setShowComments(true);
@@ -725,16 +673,33 @@ const PulseReportPage = () => {
}
+ setExpanded(!expanded)}
+ aria-expanded={expanded}
+ aria-label={expanded ? 'show less' : 'show more'}
+ size="large"
+ />
+
+ {responseSummary()}
+
>
);
const responseSummary = () => {
- let filteredPulses = pulses;
+ const pulsesSlice = pulses.slice(0, pulsesUpperBounds);
+
+ let filteredPulses = pulsesSlice;
const teamMemberIds = teamMembers.map(member => member.id);
if (teamMemberIds.length) {
- filteredPulses = pulses.filter(pulse =>
+ filteredPulses = pulsesSlice.filter(pulse =>
teamMemberIds.includes(pulse.teamMemberId)
);
}
@@ -773,6 +738,14 @@ const PulseReportPage = () => {
);
})}
+ {pulsesUpperBounds < pulses.length &&
+ {
+ event.preventDefault();
+ setPulsesUpperBounds(pulsesUpperBounds + pulsesPerPage);
+ }}>
+ Load more...
+
+ }
>
);
};
@@ -840,7 +813,6 @@ const PulseReportPage = () => {
/>
{pulseScoresChart()}
{averageScores()}
- {scoreDistributionChart()}
setShowComments(false)}>