Major updates on Master Statistical
This commit is contained in:
Joao Ramos
@@ -1,36 +1,49 @@
|
||||
import clsx from "clsx";
|
||||
import {IconType} from "react-icons";
|
||||
import { IconType } from "react-icons";
|
||||
|
||||
interface Props {
|
||||
Icon: IconType;
|
||||
label: string;
|
||||
value?: string | number;
|
||||
color: "purple" | "rose" | "red" | "green";
|
||||
tooltip?: string;
|
||||
onClick?: () => void;
|
||||
Icon: IconType;
|
||||
label: string;
|
||||
value?: string | number;
|
||||
color: "purple" | "rose" | "red" | "green";
|
||||
tooltip?: string;
|
||||
onClick?: () => void;
|
||||
isSelected?: boolean;
|
||||
}
|
||||
|
||||
export default function IconCard({Icon, label, value, color, tooltip, onClick}: Props) {
|
||||
const colorClasses: {[key in typeof color]: string} = {
|
||||
purple: "text-mti-purple-light",
|
||||
red: "text-mti-red-light",
|
||||
rose: "text-mti-rose-light",
|
||||
green: "text-mti-green-light",
|
||||
};
|
||||
export default function IconCard({
|
||||
Icon,
|
||||
label,
|
||||
value,
|
||||
color,
|
||||
tooltip,
|
||||
onClick,
|
||||
isSelected,
|
||||
}: Props) {
|
||||
const colorClasses: { [key in typeof color]: string } = {
|
||||
purple: "mti-purple-light",
|
||||
red: "mti-red-light",
|
||||
rose: "mti-rose-light",
|
||||
green: "mti-green-light",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={clsx(
|
||||
"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
|
||||
tooltip && "tooltip tooltip-bottom",
|
||||
)}
|
||||
data-tip={tooltip}>
|
||||
<Icon className={clsx("text-6xl", colorClasses[color])} />
|
||||
<span className="flex flex-col gap-1 items-center text-xl">
|
||||
<span className="text-lg">{label}</span>
|
||||
<span className={clsx("font-semibold", colorClasses[color])}>{value}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={clsx(
|
||||
"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
|
||||
tooltip && "tooltip tooltip-bottom",
|
||||
isSelected && `border border-solid border-${colorClasses[color]}`
|
||||
)}
|
||||
data-tip={tooltip}
|
||||
>
|
||||
<Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
|
||||
<span className="flex flex-col gap-1 items-center text-xl">
|
||||
<span className="text-lg">{label}</span>
|
||||
<span className={clsx("font-semibold", `text-${colorClasses[color]}`)}>
|
||||
{value}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,11 +5,20 @@ import IconCard from "./IconCard";
|
||||
import useAssignmentsCorporates from "@/hooks/useAssignmentCorporates";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import moment from "moment";
|
||||
import { groupBySession } from "@/utils/stats";
|
||||
import { Assignment, AssignmentResult } from "@/interfaces/results";
|
||||
import { Assignment, AssignmentWithCorporateId } from "@/interfaces/results";
|
||||
import {
|
||||
CellContext,
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
HeaderGroup,
|
||||
Table,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
|
||||
interface Props {
|
||||
corporateUsers: CorporateUser[];
|
||||
corporateUsers: User[];
|
||||
users: User[];
|
||||
}
|
||||
|
||||
@@ -20,11 +29,29 @@ interface TableData {
|
||||
submitted: boolean;
|
||||
date: moment.Moment;
|
||||
assignment: string;
|
||||
corporateId: string;
|
||||
}
|
||||
|
||||
interface UserCount {
|
||||
userCount: number;
|
||||
maxUserCount: number;
|
||||
}
|
||||
|
||||
const MasterStatistical = (props: Props) => {
|
||||
const { users, corporateUsers } = props;
|
||||
|
||||
const corporates = React.useMemo(() => corporateUsers.map((x) => x.id), [corporateUsers]);
|
||||
const corporateRelevantUsers = React.useMemo(
|
||||
() => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
|
||||
[corporateUsers]
|
||||
);
|
||||
|
||||
const corporates = React.useMemo(
|
||||
() => corporateRelevantUsers.map((x) => x.id),
|
||||
[corporateRelevantUsers]
|
||||
);
|
||||
|
||||
const [selectedCorporates, setSelectedCorporates] =
|
||||
React.useState<string[]>(corporates);
|
||||
const [startDate, setStartDate] = React.useState<Date | null>(
|
||||
moment("01/01/2023").toDate()
|
||||
);
|
||||
@@ -33,75 +60,249 @@ const MasterStatistical = (props: Props) => {
|
||||
);
|
||||
|
||||
const { assignments } = useAssignmentsCorporates({
|
||||
corporates,
|
||||
// corporates: [...corporates, "tYU0HTiJdjMsS8SB7XJsUdMMP892"],
|
||||
corporates: selectedCorporates,
|
||||
startDate,
|
||||
endDate,
|
||||
});
|
||||
|
||||
|
||||
const x = assignments.reduce((accmA: TableData[], a: Assignment) => {
|
||||
const userResults = a.results.reduce((accmB: TableData[], r: AssignmentResult) => {
|
||||
const userStats = groupBySession(r.stats);
|
||||
const data = Object.keys(userStats).map((key) => ({
|
||||
user: users.find((u) => u.id === r.user)?.name || "",
|
||||
correct: userStats[key].reduce((n, e) => n + e.score.correct, 0),
|
||||
corporate: users.find((u) => u.id === a.assigner)?.name || "",
|
||||
submitted: false,
|
||||
date: moment.max(userStats[key].map((e) => moment(e.date))),
|
||||
assignment: a.name,
|
||||
}));
|
||||
return [...accmB, ...data];
|
||||
}, []);
|
||||
|
||||
return [...accmA, ...userResults];
|
||||
}, []);
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 items-center text-center">
|
||||
<IconCard
|
||||
Icon={BsBank}
|
||||
label="Consolidate"
|
||||
value={0}
|
||||
color="purple"
|
||||
onClick={() => console.log("clicked")}
|
||||
/>
|
||||
{corporateUsers.map((group) => (
|
||||
<IconCard
|
||||
key={group.id}
|
||||
Icon={BsBank}
|
||||
label={group.corporateInformation?.companyInformation?.name}
|
||||
value={0}
|
||||
color="purple"
|
||||
onClick={() => console.log("clicked", group)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<ReactDatePicker
|
||||
dateFormat="dd/MM/yyyy"
|
||||
className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
||||
selected={startDate}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
selectsRange
|
||||
showMonthDropdown
|
||||
onChange={([initialDate, finalDate]: [Date, Date]) => {
|
||||
setStartDate(initialDate ?? moment("01/01/2023").toDate());
|
||||
if (finalDate) {
|
||||
// basicly selecting a final day works as if I'm selecting the first
|
||||
// minute of that day. this way it covers the whole day
|
||||
setEndDate(moment(finalDate).endOf("day").toDate());
|
||||
return;
|
||||
const tableResults = React.useMemo(
|
||||
() =>
|
||||
assignments.reduce((accmA: TableData[], a: AssignmentWithCorporateId) => {
|
||||
const userResults = a.assignees.map((assignee) => {
|
||||
const userStats =
|
||||
a.results.find((r) => r.user === assignee)?.stats || [];
|
||||
const userName = users.find((u) => u.id === assignee)?.name || "";
|
||||
const corporate = users.find((u) => u.id === a.assigner)?.name || "";
|
||||
const commonData = {
|
||||
user: userName,
|
||||
corporateId: a.corporateId,
|
||||
corporate,
|
||||
assignment: a.name,
|
||||
};
|
||||
if (userStats.length === 0) {
|
||||
return {
|
||||
...commonData,
|
||||
correct: 0,
|
||||
submitted: false,
|
||||
// date: moment(),
|
||||
};
|
||||
}
|
||||
setEndDate(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
<IconCard
|
||||
onClick={() => console.log("clicked")}
|
||||
Icon={BsPersonFill}
|
||||
label="Consolidate Highest Student"
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
return {
|
||||
...commonData,
|
||||
correct: userStats.reduce((n, e) => n + e.score.correct, 0),
|
||||
submitted: true,
|
||||
date: moment.max(userStats.map((e) => moment(e.date))),
|
||||
};
|
||||
}) as TableData[];
|
||||
|
||||
return [...accmA, ...userResults];
|
||||
}, []),
|
||||
[assignments, users]
|
||||
);
|
||||
|
||||
const getCorporateScores = (corporateId: string): UserCount => {
|
||||
const corporateAssignmentsUsers = assignments
|
||||
.filter((a) => a.corporateId === corporateId)
|
||||
.reduce((acc, a) => acc + a.assignees.length, 0);
|
||||
|
||||
const corporateResults = tableResults.filter(
|
||||
(r) => r.corporateId === corporateId
|
||||
).length;
|
||||
|
||||
return {
|
||||
maxUserCount: corporateAssignmentsUsers,
|
||||
userCount: corporateResults,
|
||||
};
|
||||
};
|
||||
|
||||
const corporateScores = corporates.reduce(
|
||||
(accm, id) => ({
|
||||
...accm,
|
||||
[id]: getCorporateScores(id),
|
||||
}),
|
||||
{}
|
||||
) as Record<string, UserCount>;
|
||||
|
||||
const consolidateScore = Object.values(corporateScores).reduce(
|
||||
(acc: UserCount, { userCount, maxUserCount }: UserCount) => ({
|
||||
userCount: acc.userCount + userCount,
|
||||
maxUserCount: acc.maxUserCount + maxUserCount,
|
||||
}),
|
||||
{ userCount: 0, maxUserCount: 0 }
|
||||
);
|
||||
|
||||
const getConsolidateScoreStr = (data: UserCount) =>
|
||||
`${data.userCount}/${data.maxUserCount}`;
|
||||
|
||||
const columnHelper = createColumnHelper<TableData>();
|
||||
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("user", {
|
||||
header: "User",
|
||||
id: "user",
|
||||
cell: (info) => {
|
||||
return <span>{info.getValue()}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("corporate", {
|
||||
header: "Corporate",
|
||||
id: "corporate",
|
||||
cell: (info) => {
|
||||
return <span>{info.getValue()}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("assignment", {
|
||||
header: "Assignment",
|
||||
id: "assignment",
|
||||
cell: (info) => {
|
||||
return <span>{info.getValue()}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("submitted", {
|
||||
header: "Submitted",
|
||||
id: "submitted",
|
||||
cell: (info) => {
|
||||
return (
|
||||
<Checkbox isChecked={info.getValue()} disabled onChange={() => {}}>
|
||||
<span></span>
|
||||
</Checkbox>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("correct", {
|
||||
header: "Correct",
|
||||
id: "correct",
|
||||
cell: (info) => {
|
||||
return <span>{info.getValue()}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("date", {
|
||||
header: "Date",
|
||||
id: "date",
|
||||
cell: (info) => {
|
||||
const date = info.getValue();
|
||||
if (date) {
|
||||
return <span>{date.format("DD/MM/YYYY")}</span>;
|
||||
}
|
||||
|
||||
return <span>{""}</span>;
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
const table = useReactTable({
|
||||
data: tableResults,
|
||||
columns: defaultColumns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
const areAllSelected = selectedCorporates.length === corporates.length;
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-wrap gap-2 items-center text-center">
|
||||
<IconCard
|
||||
Icon={BsBank}
|
||||
label="Consolidate"
|
||||
value={getConsolidateScoreStr(consolidateScore)}
|
||||
color="purple"
|
||||
onClick={() => {
|
||||
if (areAllSelected) {
|
||||
setSelectedCorporates([]);
|
||||
return;
|
||||
}
|
||||
setSelectedCorporates(corporates);
|
||||
}}
|
||||
isSelected={areAllSelected}
|
||||
/>
|
||||
{corporateRelevantUsers.map((group) => {
|
||||
const isSelected = selectedCorporates.includes(group.id);
|
||||
return (
|
||||
<IconCard
|
||||
key={group.id}
|
||||
Icon={BsBank}
|
||||
label={group.corporateInformation?.companyInformation?.name}
|
||||
value={getConsolidateScoreStr(corporateScores[group.id])}
|
||||
color="purple"
|
||||
onClick={() => {
|
||||
if (isSelected) {
|
||||
setSelectedCorporates(
|
||||
selectedCorporates.filter((x) => x !== group.id)
|
||||
);
|
||||
return;
|
||||
}
|
||||
setSelectedCorporates([...selectedCorporates, group.id]);
|
||||
}}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex gap-3 w-full">
|
||||
<ReactDatePicker
|
||||
dateFormat="dd/MM/yyyy"
|
||||
className="px-4 py-6 w-52 text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
||||
selected={startDate}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
selectsRange
|
||||
showMonthDropdown
|
||||
onChange={([initialDate, finalDate]: [Date, Date]) => {
|
||||
setStartDate(initialDate ?? moment("01/01/2023").toDate());
|
||||
if (finalDate) {
|
||||
// basicly selecting a final day works as if I'm selecting the first
|
||||
// minute of that day. this way it covers the whole day
|
||||
setEndDate(moment(finalDate).endOf("day").toDate());
|
||||
return;
|
||||
}
|
||||
setEndDate(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th className="p-4 text-left" key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="px-2">
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr
|
||||
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
||||
key={row.id}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td className="px-4 py-2" key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<IconCard
|
||||
onClick={() => console.log("clicked")}
|
||||
Icon={BsPersonFill}
|
||||
label="Consolidate Highest Student"
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Assignment } from "@/interfaces/results";
|
||||
import { AssignmentWithCorporateId } from "@/interfaces/results";
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function useAssignmentsCorporates({
|
||||
@@ -12,7 +11,7 @@ export default function useAssignmentsCorporates({
|
||||
startDate: Date | null;
|
||||
endDate: Date | null;
|
||||
}) {
|
||||
const [assignments, setAssignments] = useState<Assignment[]>([]);
|
||||
const [assignments, setAssignments] = useState<AssignmentWithCorporateId[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isError, setIsError] = useState(false);
|
||||
|
||||
@@ -30,7 +29,7 @@ export default function useAssignmentsCorporates({
|
||||
});
|
||||
|
||||
axios
|
||||
.get<Assignment[]>(
|
||||
.get<AssignmentWithCorporateId[]>(
|
||||
`/api/assignments/corporate?${urlSearchParams.toString()}`
|
||||
)
|
||||
.then(async (response) => {
|
||||
|
||||
@@ -29,3 +29,5 @@ export interface Assignment {
|
||||
archived?: boolean;
|
||||
released?: boolean;
|
||||
}
|
||||
|
||||
export type AssignmentWithCorporateId = Assignment & { corporateId: string };
|
||||
|
||||
@@ -5,7 +5,6 @@ import { sessionOptions } from "@/lib/session";
|
||||
import { getAllAssignersByCorporate } from "@/utils/groups.be";
|
||||
import { getAssignmentsByAssigners } from "@/utils/assignments.be";
|
||||
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
@@ -20,17 +19,49 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
}
|
||||
|
||||
async function GET(req: NextApiRequest, res: NextApiResponse) {
|
||||
const { ids, startDate, endDate } = req.query as { ids: string, startDate?: string, endDate?: string };
|
||||
const { ids, startDate, endDate } = req.query as {
|
||||
ids: string;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
};
|
||||
|
||||
const startDateParsed = startDate ? new Date(startDate) : undefined;
|
||||
const endDateParsed = endDate ? new Date(endDate) : undefined;
|
||||
try {
|
||||
const idsList = ids.split(",");
|
||||
|
||||
const assigners = await Promise.all(idsList.map(getAllAssignersByCorporate));
|
||||
const assignmentList = [...assigners.flat(), ...idsList];
|
||||
const assignments = await getAssignmentsByAssigners(assignmentList, startDateParsed, endDateParsed);
|
||||
res.status(200).json(assignments);
|
||||
const assigners = await Promise.all(
|
||||
idsList.map(async (id) => {
|
||||
const assigners = await getAllAssignersByCorporate(id);
|
||||
return {
|
||||
corporateId: id,
|
||||
assigners,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const assignments = await Promise.all(assigners.map(async (data) => {
|
||||
try {
|
||||
const assigners = [...new Set([...data.assigners, data.corporateId])];
|
||||
const assignments = await getAssignmentsByAssigners(
|
||||
assigners,
|
||||
startDateParsed,
|
||||
endDateParsed
|
||||
);
|
||||
return assignments.map((assignment) => ({
|
||||
...assignment,
|
||||
corporateId: data.corporateId,
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return [];
|
||||
}
|
||||
}));
|
||||
|
||||
console.log(assignments);
|
||||
|
||||
// const assignments = await getAssignmentsByAssigners(assignmentList, startDateParsed, endDateParsed);
|
||||
res.status(200).json(assignments.flat());
|
||||
} catch (err: any) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
|
||||
@@ -128,6 +128,7 @@ export const groupBySession = (stats: Stat[]) => groupBy(stats, "session");
|
||||
export const groupByDate = (stats: Stat[]) => groupBy(stats, "date");
|
||||
export const groupByExam = (stats: Stat[]) => groupBy(stats, "exam");
|
||||
export const groupByModule = (stats: Stat[]) => groupBy(stats, "module");
|
||||
export const groupByUser = (stats: Stat[]) => groupBy(stats, "user");
|
||||
|
||||
export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => {
|
||||
return stats.map((stat) => ({
|
||||
|
||||
Reference in New Issue
Block a user