Small fixes to pie chart

EmoryDHLab · Jul 19, 2024 · 7297fe1 · 7297fe1
1 parent 7af5289
commit 7297fe1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/app/components/dubois/PieChart.client.tsx b/app/components/dubois/PieChart.client.tsx
@@ -227,6 +227,8 @@ export default function PieChart({
           )
             label.showLabel();
         });
+
+        // p5.noLoop();
       };
     }
 
@@ -235,7 +237,7 @@ export default function PieChart({
     return () => {
       p5Copy.remove();
     };
-  }, [studentData, isMobile, windowSize, containerSize, id, interactive]);
+  }, [studentData, isMobile, windowSize, containerSize, id]);
 
   return (
     <div

diff --git a/app/components/dubois/StudentChartOne.tsx b/app/components/dubois/StudentChartOne.tsx
@@ -48,12 +48,23 @@ export default function StudentChartOne({
   const [pieChartTop, setPieChartTop] = useState<number>(100);
   const [pieChartLeft, setPieChartLeft] = useState<number>(100);
   const [pieChartWidth, setPieChartWidth] = useState<number>(100);
+  const [recreationOpacity, setRecreationOpacity] = useState<number>(100);
 
   useEffect(() => {
     if (!windowSize.height || !windowSize.width) return;
     setChartWidth(windowSize.width / 2);
   }, [windowSize, activeStudent]);
 
+  useEffect(() => {
+    if (showRecreation) {
+      setRecreationOpacity(100);
+    } else if (showPieChart) {
+      setRecreationOpacity(50);
+    } else {
+      setRecreationOpacity(0);
+    }
+  }, [showRecreation, showPieChart]);
+
   useEffect(() => {
     if (!windowSize.height) return;
     setPieChartTop(
@@ -78,9 +89,7 @@ export default function StudentChartOne({
       <svg viewBox={`0 0 800 1000`} className="my-auto h-[80vh]">
         <g
           id="recreated-chart-1"
-          className={`transition-opacity duration-1000 opacity-${
-            showRecreation ? 100 : 0
-          }`}
+          className={`transition-opacity duration-1000 opacity-${recreationOpacity}`}
         >
           <rect
             x={0}
@@ -391,7 +400,9 @@ export default function StudentChartOne({
             <PieChart
               id={id ?? "student-chart-one"}
               studentData={studentData}
-              className={`order-last md:order-none transition-opacity duration-1000 translate-x-6 opacity-${
+              className={`pointer-events-${
+                interactive ? "auto" : "none"
+              } order-last md:order-none transition-opacity duration-1000 translate-x-6 opacity-${
                 showPieChart ? 100 : 0
               }`}
               interactive={interactive}

diff --git a/app/components/dubois/pieChart/Circle.ts b/app/components/dubois/pieChart/Circle.ts
@@ -59,8 +59,7 @@ export class Circle {
   display() {
     if (
       this.p5.dist(this.p5.mouseX, this.p5.mouseY, this.x, this.y) <
-        this.diameter / 2 &&
-      this.interactive
+      this.diameter / 2
     ) {
       this.p5.fill("white");
       this.p5.stroke("#FEF6D8");