Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 2x 10x 10x 3x 2x 10x 1x 9x 9x 10x | import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
ReferenceLine,
} from "recharts";
import {
buildTimeSeries,
groupBySectionAndQuarter,
formatDateForAxis,
formatQuarter,
} from "main/components/EnrollmentHistory/EnrollmentHistoryHelper";
const EnrollmentLineChart = ({ data, title, passTimes }) => {
const timeSeriesData = buildTimeSeries(data);
return (
<div data-testid="enrollment-history-graph">
<h3>{title}</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart
data={timeSeriesData}
// Stryker disable next-line all
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<XAxis
dataKey="timestamp"
type="number"
scale="time"
// Stryker disable next-line all
domain={["auto", "auto"]}
tickFormatter={formatDateForAxis}
/>
<YAxis />
<Legend />
<Tooltip labelFormatter={formatDateForAxis} />
<Line
type="monotone"
dataKey="enrollment"
stroke="#8884d8"
// Stryker disable next-line all
dot={false}
/>
{passTimes &&
passTimes.map((pass) => (
<ReferenceLine
key={pass.label}
// Stryker disable next-line all
x={new Date(pass.date).getTime()}
stroke="#ff7300"
// Stryker disable next-line all
label={{ value: pass.label, position: "insideTopRight" }}
/>
))}
</LineChart>
</ResponsiveContainer>
</div>
);
};
const EnrollmentHistoryGraph = ({ enrollmentHistory, passTimes }) => {
if (!enrollmentHistory || enrollmentHistory.length === 0) {
return <div data-testid="enrollment-history-graph-empty" />;
}
const groups = groupBySectionAndQuarter(enrollmentHistory);
return (
<div data-testid="enrollment-history-graphs">
{Object.entries(groups).map(([key, sectionData]) => (
<EnrollmentLineChart
key={key}
data={sectionData}
title={`Section ${sectionData[0].section} - ${formatQuarter(sectionData[0].yyyyq)}`}
passTimes={passTimes}
/>
))}
</div>
);
};
export default EnrollmentHistoryGraph;
|