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 | 2x 2x 5x 5x 2x 5x 50x 2x 5x 5x 5x | import React from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
} from "recharts";
import {
formatTooltip,
createCompleteGradeData,
groupDataByQuarterAndInstructor,
} from "main/components/GradeHistory/GradeHistoryHelper";
// Stryker disable all: don't need to mutate constant arrays I just have to make checking things easier
const qtrNumToQuarter = {
1: "Winter",
2: "Spring",
3: "Summer",
4: "Fall",
};
// Stryker restore all
//from an input YYYYQ, create a prettier formated output that I like
const yyyyqToPrettyStr = (yyyyq) => {
const [year, qtr] = [yyyyq.slice(0, 4), yyyyq[4]];
return `${qtrNumToQuarter[qtr]} ${year}`;
};
// 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;
|