From 463e7534e8db4e8d47710481789859dc828cb522 Mon Sep 17 00:00:00 2001
From: Jay Varner <jayvarner@gmail.com>
Date: Wed, 6 Nov 2024 09:38:31 -0500
Subject: [PATCH] Add dots for unrecorded students

---
 app/components/dubois/PieChart.client.tsx     | 33 ++++++++++++++-----
 app/components/dubois/StudentChartTwo.tsx     |  9 +++++
 .../duboisScrollytell/ChartTwoScrollytell.tsx |  2 ++
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/app/components/dubois/PieChart.client.tsx b/app/components/dubois/PieChart.client.tsx
index 35826b9..53d0440 100644
--- a/app/components/dubois/PieChart.client.tsx
+++ b/app/components/dubois/PieChart.client.tsx
@@ -13,6 +13,7 @@ interface Props {
   containerSize?: number;
   interactive?: boolean;
   activeStudent?: string;
+  extra?: boolean;
 }
 
 const OFFSET = Math.PI * 1.1;
@@ -41,6 +42,8 @@ function createNewCircle(
   // in order to get a better distribution:
   // http://www.anderswallin.net/2009/05/uniform-random-points-in-a-circle-using-polar-coordinates/
   const r = pieChartRadius * Math.sqrt(p5.random(0, 1));
+  // console.log("🚀 ~ pieChartRadius:", pieChartRadius)
+
   // And a random angle
   const angle = p5.random(startAngle, endAngle);
   // Convert to cartesian
@@ -60,6 +63,8 @@ function createNewCircle(
     }
   }
 
+  const content = student ? `${student.name}\n${student.location}\n${student.year}` : "unknown"
+
   return new Circle(
     p5,
     x,
@@ -67,7 +72,7 @@ function createNewCircle(
     circleDiameter,
     id,
     circles,
-    `${student.name}\n${student.location}\n${student.year}`,
+    content,
     interactive
   );
 }
@@ -79,9 +84,11 @@ function placeCategoryCircles(
   currentAngle: number,
   categoryAngle: number,
   students: any[],
-  interactive: boolean
+  interactive: boolean,
+  extra: boolean
 ) {
-  const diameter = p5.width * (15 / 466);
+  let diameter = p5.width * (15 / 466);
+  if (extra) diameter = diameter / 6
   const center = {
     x: p5.width / 2,
     y: p5.height / 2,
@@ -90,7 +97,9 @@ function placeCategoryCircles(
   // do the overlap check only for the category circles.
   const categoryCircles = [];
 
-  for (let i = 0; i < students.length; i++) {
+  const extraCount = extra ? Math.floor(p5.map(students.length, 0, 163, 0, 3693)) : 0
+
+  for (let i = 0; i < (students.length + extraCount); i++) {
     while (true) {
       const circle = createNewCircle(
         p5,
@@ -127,7 +136,8 @@ function placeCategories(
   studentData: StudentData,
   circles: Circle[],
   labels: Label[],
-  interactive: boolean
+  interactive: boolean,
+  extra: boolean
 ) {
   const { count, categories } = studentData;
   let currentAngle = OFFSET;
@@ -141,7 +151,8 @@ function placeCategories(
       currentAngle,
       categoryAngle,
       students,
-      interactive
+      interactive,
+      extra
     );
     currentAngle += categoryAngle;
   }
@@ -178,6 +189,7 @@ export default function PieChart({
   containerSize,
   interactive = true,
   activeStudent,
+  extra = false
 }: Props) {
   const { isMobile } = useDeviceContext();
   const { windowSize } = useResizeObserver();
@@ -187,6 +199,11 @@ export default function PieChart({
     activeStudentRef.current = activeStudent;
   }, [activeStudent]);
 
+  useEffect(() => {
+
+    console.log("🚀 ~ extra:", extra)
+  }, [extra]);
+
   useEffect(() => {
     function script(p5: p5) {
       let circles: Circle[] = [];
@@ -206,7 +223,7 @@ export default function PieChart({
       p5.setup = function () {
         p5.createCanvas(pieSize, pieSize).parent(id);
 
-        placeCategories(p5, studentData, circles, labels, interactive);
+        placeCategories(p5, studentData, circles, labels, interactive, extra);
       };
 
       p5.draw = function () {
@@ -237,7 +254,7 @@ export default function PieChart({
     return () => {
       p5Copy.remove();
     };
-  }, [studentData, isMobile, windowSize, containerSize, id]);
+  }, [studentData, isMobile, windowSize, containerSize, id, interactive, extra]);
 
   return (
     <div
diff --git a/app/components/dubois/StudentChartTwo.tsx b/app/components/dubois/StudentChartTwo.tsx
index c17b3fd..5ffed92 100644
--- a/app/components/dubois/StudentChartTwo.tsx
+++ b/app/components/dubois/StudentChartTwo.tsx
@@ -6,6 +6,7 @@ import PieChart from "~/components/dubois/PieChart.client";
 import { ClientOnly } from "remix-utils/client-only";
 import { map } from "~/utils";
 
+console.log("🚀 ~ studentData:", studentData)
 const faded = 10;
 
 const largeText = 22;
@@ -21,6 +22,7 @@ interface Props {
   activeStudent?: string;
   topOffset: number;
   leftOffset?: number;
+  showExtra?: boolean;
 }
 
 export default function StudentChartTwo({
@@ -31,6 +33,7 @@ export default function StudentChartTwo({
   activeStudent = undefined,
   topOffset,
   leftOffset = 0,
+  showExtra = false,
 }: Props) {
   const { windowSize } = useResizeObserver();
   const [chartWidth, setChartWidth] = useState<number>(800);
@@ -43,6 +46,11 @@ export default function StudentChartTwo({
     setChartWidth(windowSize.width / 2);
   }, [windowSize]);
 
+  useEffect(() => {
+    console.log("🚀 ~ showExtra:", showExtra)
+
+  }, [showExtra]);
+
   useEffect(() => {
     if (!windowSize.height) return;
     setPieChartTop(
@@ -264,6 +272,7 @@ export default function StudentChartTwo({
               interactive={interactive}
               activeStudent={activeStudent}
               containerSize={pieChartWidth}
+              extra={showExtra}
             />
           )}
         </ClientOnly>
diff --git a/app/components/dubois/duboisScrollytell/ChartTwoScrollytell.tsx b/app/components/dubois/duboisScrollytell/ChartTwoScrollytell.tsx
index f1fe3d1..0ac73be 100644
--- a/app/components/dubois/duboisScrollytell/ChartTwoScrollytell.tsx
+++ b/app/components/dubois/duboisScrollytell/ChartTwoScrollytell.tsx
@@ -17,6 +17,7 @@ function ChartTwoScrollytell({ triggers }: { triggers: ReactElement[] }) {
   const minScrollProgress = 10.5;
 
   useEffect(() => {
+      console.log("🚀 ~ useEffect ~ scrollProgress:", scrollProgress)
     switch (true) {
       case scrollProgress < minScrollProgress + 4:
         setActiveStudent(undefined);
@@ -76,6 +77,7 @@ function ChartTwoScrollytell({ triggers }: { triggers: ReactElement[] }) {
                   scrollProgress <= minScrollProgress + 2
                 }
                 activeStudent={activeStudent}
+                showExtra={scrollProgress >= minScrollProgress + 3 && scrollProgress <= minScrollProgress + 5}
               />
             </div>
           </div>