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 | 2x 5x 50x 2x 5x 5x 5x | import React from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
} from "recharts";
import {
yyyyqToPrettyStr,
formatTooltip,
createCompleteGradeData,
groupDataByQuarterAndInstructor,
} from "./GradeHistoryHelper";
// Component to render a single bar chart for a specific group of data
const GradeBarChart = ({ data, title }) => {
const completeData = createCompleteGradeData(data);
return (
<div data-testid="grade-history-graph">
<h3>{title}</h3>
<ResponsiveContainer width="100%" height={300}>
<BarChart
data={completeData}
// Stryker disable all
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<XAxis dataKey="grade" />
<YAxis
tickFormatter={(value) => `${value.toFixed(1)}%`}
// Stryker restore all
/>
<Legend />
<Tooltip formatter={formatTooltip} />
<Bar dataKey="percentage" fill="#8884d8" />
</BarChart>
</ResponsiveContainer>
</div>
);
};
const GradeHistoryGraphs = ({ gradeHistory }) => {
const groupedData = groupDataByQuarterAndInstructor(gradeHistory);
return (
<div data-testid="grade-history-graphs">
{Object.keys(groupedData).map((key) => {
const data = groupedData[key];
const title = `${yyyyqToPrettyStr(data[0].yyyyq)} - ${
data[0].instructor
}`;
return <GradeBarChart key={key} data={data} title={title} />;
})}
</div>
);
};
export default GradeHistoryGraphs;
|