Remove most graph padding and rework miniProf grid layout

UTDNebula · Dec 30, 2023 · 0378ee4 · 0378ee4
1 parent 588fe0e
commit 0378ee4
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 41 deletions.
diff --git a/src/components/MiniGrades.tsx b/src/components/MiniGrades.tsx
@@ -9,7 +9,7 @@ export const MiniGrades = ({ series }: { series: ApexAxisChartSeries }) => {
       options={miniGradeChartOptions}
       series={series}
       type="bar"
-      height={124}
+      height={'100%'}
     ></Chart>
   );
 };
diff --git a/src/components/MiniProfessor.tsx b/src/components/MiniProfessor.tsx
@@ -34,33 +34,32 @@ export const MiniProfessor = ({
         </button>
       </header>
       <Card>
-        <div className="grid grid-cols-12">
-          <div className="col-span-4">
-            <MiniScore
-              name="RMP"
-              title="Overall Quality"
-              score={professorData.rmpScore}
-              maxScore={5}
-              inverted={false}
-            />
-            <div className="my-2"></div>
-            <MiniScore
-              name="DIFF"
-              title="Level of Difficulty"
-              score={professorData.diffScore}
-              maxScore={5}
-              inverted={true}
-            />
-            <div className="my-2"></div>
-            <MiniScore
-              name="WTA"
-              title="Would take again"
-              score={professorData.wtaScore}
-              maxScore={100}
-              inverted={false}
-            />
-          </div>
-          <div className="col-span-8 max-h-[124px]">
+        <div className="grid grid-cols-12 grid-rows-3 gap-2">
+          <MiniScore
+            name="RMP"
+            title="Overall Quality"
+            score={professorData.rmpScore}
+            maxScore={5}
+            inverted={false}
+            className="col-span-4 row-span-1 col-start-1"
+          />
+          <MiniScore
+            name="DIFF"
+            title="Level of Difficulty"
+            score={professorData.diffScore}
+            maxScore={5}
+            inverted={true}
+            className="col-span-4 row-span-1 row-start-2"
+          />
+          <MiniScore
+            name="WTA"
+            title="Would take again"
+            score={professorData.wtaScore}
+            maxScore={100}
+            inverted={false}
+            className="col-span-4 row-span-1 row-start-3"
+          />
+          <div className="col-span-8 row-span-3 col-start-5 max-h-[124px]">
             <MiniGrades series={professorData.gradeDistribution} />
           </div>
         </div>

diff --git a/src/components/MiniScore.tsx b/src/components/MiniScore.tsx
@@ -8,6 +8,7 @@ interface MiniScoreProps {
   score: number;
   maxScore: number;
   inverted: boolean;
+  className: string;
 }
 
 export const MiniScore = ({
@@ -16,9 +17,10 @@ export const MiniScore = ({
   score,
   maxScore,
   inverted,
+  className,
 }: MiniScoreProps) => {
   return (
-    <div className="grid grid-cols-12" title={title}>
+    <div className={'grid grid-cols-12 ' + className} title={title}>
       <h3 className="bg-blue-dark rounded-l-xl text-white text-center py-1.5 col-span-5">
         {name}
       </h3>

diff --git a/src/components/ProfileGrades.tsx b/src/components/ProfileGrades.tsx
@@ -22,12 +22,12 @@ export const ProfileGrades = ({
           {'Grades Distribution (' + total + ')'}
         </h2>
       </header>
-      <div className="border-blue-dark border-r-2 border-l-2 border-b-2 rounded-b-2xl">
+      <div className="border-blue-dark border-r-2 border-l-2 border-b-2 rounded-b-2xl pr-2">
         <Chart
           options={gradeChartOptions}
           series={series}
           type="bar"
-          height={150}
+          height={'100%'}
         ></Chart>
       </div>
     </>

diff --git a/src/components/RmpRatings.tsx b/src/components/RmpRatings.tsx
@@ -22,7 +22,7 @@ export const RmpRatings = ({
           options={ratingsChartOptions}
           series={series}
           type="donut"
-          height={300}
+          height={'100%'}
         ></Chart>
       </div>
     </div>

diff --git a/src/utils/styling.ts b/src/utils/styling.ts
@@ -52,10 +52,6 @@ export const gradeChartOptions: ApexOptions = {
     id: 'grade-distribution',
   },
   grid: {
-    padding: {
-      left: 20,
-      right: 20,
-    },
     yaxis: {
       lines: {
         show: false,
@@ -99,7 +95,7 @@ export const ratingsChartOptions: ApexOptions = {
     id: 'ratings-distribution',
   },
   noData: {
-    text: 'No data found',
+    text: 'RMP data unavailable for professor',
     align: 'center',
     verticalAlign: 'middle',
   },
@@ -160,10 +156,7 @@ export const miniGradeChartOptions: ApexOptions = {
   },
   grid: {
     padding: {
-      left: 15,
-      right: 5,
-      bottom: -5,
-      top: -30,
+      top: -20,
     },
     yaxis: {
       lines: {