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 | 1x 1x 1x 5x 5x 10x 10x 5x 1x 3x 3x 20x 1x 3x | import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
} from "recharts";
export const formatTooltip = (value, _, props) => {
return [
`Enrollment: ${value.toFixed(1)}, Date Created: ${props.payload.dateCreated}`,
];
};
export const createCompleteEnrollmentData = (data) => {
var data_list = [];
for (let index = 0; index < data.length; index++) {
const item = data[index];
data_list.push({
enrollment: item.enrollment,
dateCreated: item.dateCreated,
});
}
return data_list;
};
// Component to render a single bar chart for a specific group of data
const EnrollmentHistoryLineChart = ({ data, title }) => {
const completeData = createCompleteEnrollmentData(data);
return (
<div data-testid="enrollment-history-graph">
<h3>{title}</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart
data={completeData}
// Stryker disable all
margin={{ top: 5, right: 30, left: 50, bottom: 5 }}
>
<XAxis dataKey="dateCreated" />
<YAxis
tickFormatter={(value) => `${value.toFixed(1)}`}
// Stryker restore all
/>
<Legend />
<Tooltip formatter={formatTooltip} />
<Line dataKey="enrollment" />
</LineChart>
</ResponsiveContainer>
</div>
);
};
// Stryker restore all
const EnrollmentHistoryGraphs = ({ enrollmentHistory }) => {
return (
<div data-testid="enrollment-history-graphs">
<EnrollmentHistoryLineChart
data={enrollmentHistory}
title={"Title to be implemented"}
/>
</div>
);
};
export default EnrollmentHistoryGraphs;
|