infos

GTBitsOfGood · Nov 16, 2024 · f84c207 · f84c207
1 parent 6dbcf33
commit f84c207
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 23 deletions.
diff --git a/src/components/Dashboard/MathScreen/MathScreen.tsx b/src/components/Dashboard/MathScreen/MathScreen.tsx
@@ -63,7 +63,7 @@ const MathScreen = ({
             title="Average Math Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number correct on first attempt divided by total"
             data={accuracyData}
             fullWidth
             yLabel=""
@@ -76,23 +76,23 @@ const MathScreen = ({
             title="Average Math Difficulty"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info=""
             data={difficultyData}
             fullWidth
             gridLines
           />
           <BarChart
             width={325}
             height={175}
-            title="Average Questions Answered per Session sdsdsdsdshdajsdhj asj djas dhj "
+            title="Average Questions Answered per Session"
             data={numQuestionData}
             hoverable
             percentageChange
             yLabel=""
             // yLabel="Questions"
             fullWidth
             gridLines
-            info="test"
+            info=""
           />
           <BarChart
             width={325}
@@ -103,7 +103,7 @@ const MathScreen = ({
             percentageChange
             fullWidth
             gridLines
-            info="Test"
+            info="In seconds"
           />
         </div>
         <div className={styles.textStatsWithHeader}>

diff --git a/src/components/Dashboard/OverallDashboard/OverallDashboard.module.scss b/src/components/Dashboard/OverallDashboard/OverallDashboard.module.scss
@@ -20,6 +20,12 @@
       font-size: 29.705px;
       font-style: normal;
     }
+
+    .infoBox {
+      font-family: var(--font-poppins);
+      font-size: 12px;
+      font-style: normal;
+    }
   }
 
   .bottomContainer {

diff --git a/src/components/Dashboard/OverallDashboard/OverallDashboard.tsx b/src/components/Dashboard/OverallDashboard/OverallDashboard.tsx
@@ -10,12 +10,13 @@ import {
   QuestionIcon as QI,
   BarChartIcon,
 } from "@src/app/icons";
-import { CSSProperties } from "react";
+import { CSSProperties, useState, useRef, useEffect } from "react";
 import { DateRangeEnum, Days } from "@/common_utils/types";
 import { D3Data } from "@src/utils/types";
 import Chip from "@src/components/Chip/Chip";
 import ActiveIndicatorBox from "@src/components/ActiveIndicatorBox/ActiveIndicatorBox";
 import DateSelector from "@src/components/DateSelector/DateSelector";
+import PopupModal from "@src/components/Graphs/PopupModal/PopupModal";
 import { BarChart, SmallDataBox, WeeklyProgress } from "../../Graphs";
 import styles from "./OverallDashboard.module.scss";
 
@@ -54,6 +55,26 @@ function formatDate(date: Date) {
 }
 
 export default function OverallDashboard(params: Params) {
+  const [infoPopup, setInfoPopup] = useState(false);
+  const infoButtonRef = useRef(null);
+  const [popupX, setPopupX] = useState<number | null>(null);
+  const [popupY, setPopupY] = useState<number | null>(null);
+
+  useEffect(() => {
+    const onScroll = () => setInfoPopup(false);
+    // clean up code
+    window.removeEventListener("scroll", onScroll);
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    if (infoButtonRef.current) {
+      const rect: Element = infoButtonRef.current;
+      const newTop = rect.getBoundingClientRect().y + 30;
+      setPopupY(newTop);
+      const left = rect.getBoundingClientRect().x;
+      setPopupX(left);
+    }
+  }, [setPopupX, setPopupY, setInfoPopup]);
+
   return (
     <div className={styles.OverallDashboard} style={params.style}>
       <div className={styles.titleRow}>
@@ -74,7 +95,31 @@ export default function OverallDashboard(params: Params) {
           active={params.active}
           style={{ marginLeft: "17px", marginRight: "10px" }}
         />
-        <IGI />
+        <div
+          className={styles.infoBox}
+          onMouseEnter={() => {
+            setInfoPopup(true);
+          }}
+          onMouseLeave={() => {
+            setInfoPopup(false);
+          }}
+          ref={infoButtonRef}
+          style={{ position: "relative" }}
+        >
+          <IGI />
+          <PopupModal
+            show={infoPopup}
+            info={
+              "Active means a user has completed at least two sessions each week for the past two weeks."
+            }
+            style={{
+              position: "fixed",
+              top: `${popupY}px`,
+              zIndex: 500,
+              left: `${popupX}px`,
+            }}
+          />
+        </div>
         <div className={styles.dateSelector}>
           <DateSelector
             selectedValue={params.menuState[0]}

diff --git a/src/components/Dashboard/ReadingScreen/ReadingScreen.tsx b/src/components/Dashboard/ReadingScreen/ReadingScreen.tsx
@@ -96,10 +96,10 @@ export default function ReadingScreen({
           <LineChart
             width={325}
             height={185}
-            title="Average Reading Rate (Words/Min)"
+            title="Average Reading Rate"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Words/Min"
             data={readingRate}
             fullWidth
             gridLines
@@ -113,7 +113,7 @@ export default function ReadingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Hey this is just some info I thought you will find interesting."
+            info="In seconds"
           />
         </div>
         <div className={styles.textStats}>

diff --git a/src/components/Dashboard/TriviaScreen/TriviaScreen.tsx b/src/components/Dashboard/TriviaScreen/TriviaScreen.tsx
@@ -71,7 +71,7 @@ export default function TriviaScreen({
             title="Average Trivia Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number of self-reported correct answers"
             data={accuracyData}
             fullWidth
             gridLines
@@ -80,6 +80,7 @@ export default function TriviaScreen({
             width={325}
             height={175}
             title="Average Time Spent per Question"
+            info="In seconds"
             data={timeData}
             hoverable
             percentageChange

diff --git a/src/components/Dashboard/WritingScreen/WritingScreen.tsx b/src/components/Dashboard/WritingScreen/WritingScreen.tsx
@@ -61,7 +61,6 @@ export default function WritingScreen({
             //   { text: "sessions completed without writing", color: "#FF9FB3" },
             //   { text: "sessions completed with writing", color: "#008AFC" },
             // ]}
-            info="Some really extremely interesting information about stacked bar chart."
             hoverable
             percentageChange
             fullWidth
@@ -76,14 +75,13 @@ export default function WritingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Some info for testing purposes in bar chart"
           />
           <BarChart
             width={325}
             height={185}
             title="Average Time Spent Per Prompt"
             data={avgTime}
-            info="Some info for testing purposes in bar chart"
+            info="In seconds"
             hoverable
             percentageChange
             fullWidth

diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx
@@ -34,6 +34,7 @@ function DateSelector({
         border: "none",
         width: "130px",
         textAlign: "center",
+        backgroundColor: "white",
       }}
       sx={{
         "&.MuiOutlinedInput-root": {
@@ -48,6 +49,7 @@ function DateSelector({
         fontSize: "12px",
         fontFamily: poppins500.style.fontFamily,
       }}
+      defaultBackgroundColor="#ffffff"
     />
   );
 }

diff --git a/src/components/GroupDashboard/GroupMathScreen/GroupMathScreen.tsx b/src/components/GroupDashboard/GroupMathScreen/GroupMathScreen.tsx
@@ -60,7 +60,7 @@ const GroupMathScreen = ({
             title="Average Math Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number correct on first attempt divided by total"
             data={accuracyData}
             fullWidth
             gridLines
@@ -71,7 +71,7 @@ const GroupMathScreen = ({
             title="Average Math Difficulty"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info=""
             data={difficultyData}
             fullWidth
             gridLines
@@ -91,6 +91,7 @@ const GroupMathScreen = ({
             width={325}
             height={175}
             title="Average Time Spent per Question"
+            info="In seconds"
             data={timeData}
             hoverable
             percentageChange

diff --git a/src/components/GroupDashboard/GroupReadingScreen/GroupReadingScreen.tsx b/src/components/GroupDashboard/GroupReadingScreen/GroupReadingScreen.tsx
@@ -98,10 +98,10 @@ export default function GroupReadingScreen({
           <LineChart
             width={325}
             height={185}
-            title="Average Reading Rate (Words/Min)"
+            title="Average Reading Rate"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Words/Min"
             data={readingRate}
             fullWidth
             gridLines
@@ -115,7 +115,7 @@ export default function GroupReadingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Hey this is just some info I thought you will find interesting."
+            info="In seconds"
           />
         </div>
         <div className={styles.textStats}>

diff --git a/src/components/GroupDashboard/GroupTriviaScreen/GroupTriviaScreen.tsx b/src/components/GroupDashboard/GroupTriviaScreen/GroupTriviaScreen.tsx
@@ -68,7 +68,7 @@ export default function GroupTriviaScreen({
             title="Average Trivia Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number of self-reported correct answers"
             data={accuracyData}
             fullWidth
             gridLines
@@ -77,6 +77,7 @@ export default function GroupTriviaScreen({
             width={325}
             height={175}
             title="Average Time Spent per Question"
+            info="In seconds"
             data={timeData}
             hoverable
             percentageChange

diff --git a/src/components/GroupDashboard/GroupWritingScreen/GroupWritingScreen.tsx b/src/components/GroupDashboard/GroupWritingScreen/GroupWritingScreen.tsx
@@ -55,7 +55,6 @@ export default function GroupWritingScreen({
               { text: "sessions completed without writing", color: "#FF9FB3" },
               { text: "sessions completed with writing", color: "#008AFC" },
             ]}
-            info="Some really extremely interesting information about stacked bar chart."
             hoverable
             percentageChange
             fullWidth
@@ -70,14 +69,13 @@ export default function GroupWritingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Some info for testing purposes in bar chart"
           />
           <BarChart
             width={325}
             height={185}
             title="Average Time Spent Per Prompt"
             data={avgTimeData}
-            info="Some info for testing purposes in bar chart"
+            info="In seconds"
             hoverable
             percentageChange
             fullWidth