Skip to content

update level ui of student #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

update level ui of student #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2386372
update level ui of student
ShivaniYadav07 Oct 5, 2024
5f6511e
fixed subjectprogress and dailyreport
ShivaniYadav07 Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions src/app/(root)/student/[studentId]/components/DailyReport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,29 @@
import RadialBarChart from "@/components/charts/RadialBarChart";
import { formatDate } from "@/helpers/utils";

const DailyReport = ({dailyreportquiz,dailyreportsession}:any) => {
const DailyReport = ({ dailyreportquiz, dailyreportsession }: any) => {
return (
<div className="px-3 bg-[#FBFAFC] rounded-2xl border-[1px] border-[#D8D5D5] shadow-custom-black py-2">
<h4 className="text-xs md:text-sm font-bold">Daily Report</h4>
<div className="flex items-center justify-center">
<RadialBarChart
series={[dailyreportquiz,dailyreportsession]}
colors={["#9654F4", "#72EFDD"]}
labels={["Sessions", "Quizzes"]}
dataLabel="overall"
width="90%"
hollowSize="45%"
fontSize="18px"
/>

<div className="flex flex-col gap-2">
<div className="flex flex-wrap justify-center">
<div className="chart-container">
<RadialBarChart
series={[dailyreportquiz, dailyreportsession]}
colors={["#9654F4", "#72EFDD"]}
labels={["Sessions", "Quizzes"]}
dataLabel="overall"
width="100%"
hollowSize="45%"
fontSize="18px"
/>
</div>
<div className="legend-container flex flex-col gap-2">
<div className="flex items-center gap-2">
<span className=" block w-3 h-3 rounded bg-primary"></span>
<span className="block w-3 h-3 rounded bg-primary"></span>
<span className="text-xs capitalize">Sessions</span>
</div>
<div className="flex items-center gap-2">
<span className=" block w-3 h-3 rounded bg-[#72EFDD]"></span>
<span className="block w-3 h-3 rounded bg-[#72EFDD]"></span>
<span className="text-xs capitalize">Quizzes</span>
</div>
</div>
Expand Down
67 changes: 40 additions & 27 deletions src/app/(root)/student/[studentId]/components/LevelPoints.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import ArrowIcon from "@/components/icons/ArrowIcon";
import ChevronRightIcon from "@/components/icons/ChevronRightIcon";
import RoundArrowIcon from "@/components/icons/RoundArrowIcon";
Expand Down Expand Up @@ -28,53 +27,67 @@ const LevelPoints = ({
return (
<div
className={cn(
" rounded-full md:w-[90px] shadow-custom-point bg-[#F4F4F4] p-3 w-[62px] h-[62px] md:h-[90px] flex flex-col justify-center"
"rounded-full shadow-custom-point bg-[#F4F4F4] p-3 w-[62px] h-[62px] flex flex-col justify-center items-center",
"md:w-[90px] md:h-[90px] lg:w-[110px] lg:h-[110px]" // Responsive widths and heights
)}
>
<div className="flex items-center justify-around">
<div className="flex items-center justify-between md:justify-around w-full">
<div className="md:block hidden">
<Image
src={iconImageSrc}
alt={iconAltText}
width={pointsText === "Streak" ? 11 : 14}
height={pointsText === "Streak" ? 11 : 14}
className={cn("shadow-lg", iconShadowColor)}
/>
<Image
src={iconImageSrc}
alt={iconAltText}
width={pointsText === "Streak" ? 11 : 14}
height={pointsText === "Streak" ? 11 : 14}
className={cn("shadow-lg", iconShadowColor)}
/>
</div>
<div className="md:hidden block">
<Image
src={iconImageSrc}
alt={iconAltText}
width={pointsText === "Streak" ? 5 : 7}
height={pointsText === "Streak" ? 5 : 7}
className={cn("shadow-lg", iconShadowColor)}
/>
<Image
src={iconImageSrc}
alt={iconAltText}
width={pointsText === "Streak" ? 7 : 9}
height={pointsText === "Streak" ? 7 : 9}
className={cn("shadow-lg", iconShadowColor)}
/>
</div>
<ChevronRightIcon
width={12}
height={12}
className={cn("rounded-full border-none p-[2px] md:block hidden", chevronBgColor)}
className={cn(
"rounded-full border-none p-[2px] hidden md:block",
chevronBgColor
)}
/>
</div>

<div className=" flex flex-col justify-start items-center ">
<p className="md:text-[10px] text-[8px] font-medium text-[#6B6B6B]">{pointsText}</p>
<h3 className={cn("leading-[0.5] text-[9.4px] md:text-base font-semibold", pointsColor)}>
<div className="flex flex-col justify-start items-center mt-2 md:mt-3">
<p className="text-[8px] md:text-[10px] lg:text-sm font-medium text-[#6B6B6B]">
{pointsText}
</p>
<h3
className={cn(
"leading-[0.5] text-[9.4px] md:text-base font-semibold",
pointsColor
)}
>
{points}
</h3>

<Progressbar
value={progressValue}
progressClassName='md:w-[46px] md:h-[4px] w-[27.13px] h-[2px]'
progressClassName="w-[30px] h-[2px] md:w-[46px] md:h-[4px]"
indicatorClassName={progressIndicatorBg}
/>

{pointsText !== "Streak" && (
<div className="flex items-center gap-[2px]">
<RoundArrowIcon stroke={progressIconStroke } className="rotate-180"/>
<div className="flex items-center gap-1 mt-1">
<RoundArrowIcon
stroke={progressIconStroke}
className="rotate-180"
/>
<span
className={cn(
"md:text-[9px] text-[4px] font-bold mt-[0.5px]",
"text-[6px] md:text-[9px] font-bold",
pointsProgressTextColor
)}
>
Expand All @@ -85,12 +98,12 @@ const LevelPoints = ({

{pointsText === "Streak" && (
<>
<div className=" w-full text-[5.5px] text-black font-semibold flex items-center justify-center gap-1 mb-1">
<div className="w-full text-[6px] md:text-[7.5px] text-black font-semibold flex items-center justify-center gap-1 mb-1">
<span>Jan12</span>
<span>Feb12</span>
</div>

<p className="md:text-[7.5px] text-[4px] text-black font-semibold -mt-1">
<p className="text-[5px] md:text-[7.5px] text-black font-semibold -mt-1">
Good Work!
</p>
</>
Expand Down
53 changes: 6 additions & 47 deletions src/app/(root)/student/[studentId]/components/SubjectProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const SubjectProgress = ({ userSubjects }: any) => {
const roundedProgress = Math.round(subject?.overall_progress || 0);
const roundedEfficiency = Math.round(subject?.overall_efficiency || 0);


return (
<div className="h-full bg-[#FBFAFC] rounded-2xl border-[1px] border-[#D8D5D5] shadow-custom-black py-2">
<div className="px-3 flex items-center justify-between">
Expand All @@ -36,67 +35,27 @@ const SubjectProgress = ({ userSubjects }: any) => {
))}
</ul>
</div>
<div className="w-full h-full overflow-hidden">

<div className="w-full h-[250px] overflow-hidden"> {/* Set a fixed height */}
<TabContent id={activeTab!} activeTab={activeTab!}>
<div className="h-full grid grid-cols-2 mt-3 place-items-center">
<div className="h-full flex flex-col gap-2">
<div className="h-full grid grid-cols-2 mt-3 place-items-center gap-4"> {/* Add gap for spacing */}
<div className="h-full flex flex-col justify-center items-center gap-2"> {/* Make it centered */}
<SemiRadialChart

series={[roundedProgress]}
colors={["#6200EE"]}
chartLabel="revision"
/>
</div>

<div className="h-full flex flex-col gap-2">
<div className="h-full flex flex-col justify-center items-center gap-2"> {/* Equal height and centered */}
<SemiRadialChart
series={[subject?.overall_efficiency]}
series={[roundedEfficiency]}
colors={["#56CFE1"]}
chartLabel="efficiency"
/>
</div>
</div>
</TabContent>

{/* <TabContent id={activeTab!} activeTab={activeTab!}>
<div className="grid grid-cols-2 mt-3">
<div className="h-full flex flex-col gap-2">
<SemiRadialChart
series={[55]}
colors={["#6200EE"]}
chartLabel="revision"
/>
</div>

<div className="h-full flex flex-col gap-2">
<SemiRadialChart
series={[60]}
colors={["#56CFE1"]}
chartLabel="efficiency"
/>
</div>
</div>
</TabContent>

<TabContent id={activeTab!} activeTab={activeTab!}>
<div className="grid grid-cols-2 mt-3">
<div className="h-full flex flex-col gap-2">
<SemiRadialChart
series={[90]}
colors={["#6200EE"]}
chartLabel="revision"
/>
</div>

<div className="h-full flex flex-col gap-2">
<SemiRadialChart
series={[25]}
colors={["#56CFE1"]}
chartLabel="efficiency"
/>
</div>
</div>
</TabContent> */}
</div>
</div>
);
Expand Down
45 changes: 39 additions & 6 deletions src/components/charts/RadialBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
"use client";
import { cn } from "@/lib/utils";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import RadialBarChartSkeleton from "./_skeletons/RadialBarChartSkeleton";
import { ISubject } from "@/helpers/types";

const Charts = dynamic(() => import("react-apexcharts"), {
ssr: false,
loading: () => <RadialBarChartSkeleton />,
Expand All @@ -29,6 +31,35 @@ const RadialBarChart = ({
fontSize,
subject,
}: RadialBarChartProps) => {
const [currentHollowSize, setCurrentHollowSize] = useState(hollowSize);

// Adjust hollow size based on screen width for responsiveness
useEffect(() => {
const updateHollowSize = () => {
const screenWidth = window.innerWidth;

if (screenWidth < 640) {
// Small screens
setCurrentHollowSize("40%"); // Smaller hollow size for mobile devices
} else if (screenWidth < 1024) {
// Medium screens
setCurrentHollowSize("40%");
} else {
// Large screens
setCurrentHollowSize(hollowSize); // Use default size for larger screens
}
};

// Set initial size on load
updateHollowSize();

// Update hollow size when the window is resized
window.addEventListener("resize", updateHollowSize);

// Cleanup the event listener on unmount
return () => window.removeEventListener("resize", updateHollowSize);
}, [hollowSize]);

return (
<div className="relative h-full">
<Charts
Expand All @@ -46,14 +77,14 @@ const RadialBarChart = ({
radialBar: {
hollow: {
margin: 5,
size: hollowSize,
size: currentHollowSize, // Use responsive hollow size
},
dataLabels: {
show: labels.includes("No. of Questions Solved") ? false : true,
value: {
fontSize: fontSize ?? "18px",
fontWeight: 600,
fontFamily: "Mada,sans-serif",
fontFamily: "Mada, sans-serif",
offsetY: 2,
},
name: {
Expand All @@ -66,11 +97,10 @@ const RadialBarChart = ({
(acc: number, value: number) => acc + value,
0
);

const average = sum / w?.globals?.series.length;

const averagePercentage = Math.round((average / 100) * 100);

const averagePercentage = Math.round(
(average / 100) * 100
);
return `${averagePercentage}%`;
},
},
Expand All @@ -84,19 +114,22 @@ const RadialBarChart = ({
}}
/>

{/* Custom Label in the Center */}
<div
className={cn(
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
dataLabel === "questions" ? "-mt-3" : ""
)}
>
{/* Display Number of Questions Solved */}
{labels.includes("No. of Questions Solved") && (
<p className="text-2xl leading-none font-semibold text-center">
{subject?.total_questions_solved.number! > 120
? "120+"
: subject?.total_questions_solved.number}
</p>
)}
{/* Data Label Text */}
<p
className={cn(
"text-sm leading-none font-medium mt-2 capitalize",
Expand Down