Year display working

nkalupahana · Dec 22, 2023 · 7a3ba09 · 7a3ba09
1 parent 649e6b1
commit 7a3ba09
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 35 deletions.
diff --git a/src/components/graphs/DASSGraph.tsx b/src/components/graphs/DASSGraph.tsx
@@ -1,29 +1,9 @@
 import { VictoryLine, VictoryScatter, VictoryChart, VictoryAxis, VictoryZoomContainer } from "victory";
 import { BlockerRectangle, CustomLineSegment, CustomVictoryLabel, MultiCurve, ONE_DAY, GraphProps } from "./graph-helpers";
 import theme from "./graph-theme";
-import { DateTime } from "luxon";
 import { AnyMap } from "../../helpers";
-import { useEffect, useRef, useState } from "react";
-
-const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now }: GraphProps) => {
-    const [boundingRect, setBoundingRect] = useState({ width: 0, height: 0 });
-    const graphRef = useRef<null | HTMLDivElement>(null);
-    useEffect(() => {
-        if (!graphRef.current) return;
-
-        const listener = () => {
-            if (!graphRef.current) return;
-            setBoundingRect(graphRef.current.getBoundingClientRect());
-        };
-
-        window.addEventListener("resize", listener);
-        listener();
-
-        return () => {
-            window.removeEventListener("resize", listener);
-        };
-    }, []);
 
+const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now, pageWidth, tickCount, tickFormatter }: GraphProps) => {
     const labels = ["Normal", "Mild", "Moderate", "Severe", "Extremely\nSevere", ""];
     const lines = [
         {
@@ -66,7 +46,7 @@ const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now }: GraphProps) => {
     }
 
     return (
-        <div style={{ height: "375px", width: "100%" }} ref={graphRef}>
+        <div style={{ height: "400px", width: "100%" }}>
             <div style={{
                 display: "flex",
                 justifyContent: "space-between",
@@ -95,7 +75,7 @@ const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now }: GraphProps) => {
                     alignItems: "center",
                     flexWrap: "wrap",
                 }}>
-                    <p>Zoom:</p>
+                    <p>Zoom</p>
                     <div onClick={() => zoomTo("3M")} className="outline-button">3M</div>
                     <div onClick={() => zoomTo("6M")} className="outline-button">6M</div>
                     <div onClick={() => zoomTo("1Y")} className="outline-button">1Y</div>
@@ -115,9 +95,9 @@ const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now }: GraphProps) => {
                     />
                 }
                 maxDomain={{ x: now + ONE_DAY * 3 }}
-                height={375}
-                width={boundingRect.width}
-                padding={{top: 20, bottom: 50, left: 50, right: 50}}
+                height={400}
+                width={pageWidth}
+                padding={{top: 20, bottom: 75, left: 50, right: 25}}
             >
                 {/* Lines */}
                 {lines.map((line) => (
@@ -164,14 +144,15 @@ const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now }: GraphProps) => {
                 {/* Date axis (x) */}
                 <VictoryAxis
                     crossAxis
-                    tickFormat={(t) => DateTime.fromMillis(t).toFormat("LLL d")}
+                    tickFormat={tickFormatter}
                     style={{
                         grid: { stroke: "none" },
                         tickLabels: { padding: 20, angle: -45},
                     }}
                     axisComponent={<CustomLineSegment dx1={20} />}
                     tickComponent={<CustomLineSegment xcutoff={80} />}
                     tickLabelComponent={<CustomVictoryLabel xcutoff={80} dx1={-16} />}
+                    tickCount={tickCount}
                 />
 
                 {/* Category axis (y) */}

diff --git a/src/components/graphs/graph-helpers.tsx b/src/components/graphs/graph-helpers.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from "luxon";
 import { useMemo } from "react";
 import { Curve, VictoryLabel, LineSegment } from "victory";
 
@@ -6,6 +7,18 @@ export interface GraphProps {
     setXZoomDomain: (domain: undefined | [number, number]) => void;
     data: any[];
     now: number;
+    pageWidth: number
+    tickCount: number
+    tickFormatter: (timestamp: number) => string
+}
+
+export const formatDateTick = (timestamp: number, thisYear: number) => {
+    const dt = DateTime.fromMillis(timestamp)
+    if (dt.year === thisYear) {
+        return dt.toFormat("LLL d");
+    } else {
+        return dt.toFormat("LLL d yy");
+    }
 }
 
 export const ONE_DAY = 86400 * 1000;

diff --git a/src/pages/SurveyResults.tsx b/src/pages/SurveyResults.tsx
@@ -1,6 +1,6 @@
 import { IonIcon, IonSpinner } from "@ionic/react";
 import { closeOutline } from "ionicons/icons";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import EndSpacer from "../components/EndSpacer";
 import SurveyGraph from "../components/Review/SurveyGraph";
@@ -12,7 +12,8 @@ import DASS from "../screeners/dass";
 import SPF from "../screeners/spf";
 import DASSGraph from "../components/graphs/DASSGraph";
 import { DateTime } from "luxon";
-import { ONE_DAY } from "../components/graphs/graph-helpers";
+import { ONE_DAY, formatDateTick } from "../components/graphs/graph-helpers";
+import { memoize } from "lodash";
 
 const SurveyResults = () => {
     const [user] = useAuthState(auth);
@@ -23,7 +24,40 @@ const SurveyResults = () => {
         return DateTime.now().toMillis();
     }, []);
     const [xZoomDomain, setXZoomDomain] = useState<undefined | [number, number]>([now - ONE_DAY * 180, now]);
-    const dass = DASS();
+    const pageWidthRef = useRef<null | HTMLDivElement>(null);
+    const [pageWidth, setPageWidth] = useState(0);
+    useEffect(() => {
+        if (!pageWidthRef.current) return;
+
+        const listener = () => {
+            if (!pageWidthRef.current) return;
+            setPageWidth(pageWidthRef.current.getBoundingClientRect().width);
+        };
+
+        window.addEventListener("resize", listener);
+        listener();
+
+        return () => {
+            window.removeEventListener("resize", listener);
+        };
+    }, []);
+
+    const tickCount = useMemo(() => {
+        let ticks = pageWidth * 0.0170811;
+        if (ticks < 6) ticks = 6;
+        console.log(Math.round(ticks));
+        return Math.round(ticks);
+    }, [pageWidth]);
+
+    const memoTickFormatter = useMemo(() => {
+        const thisYear = DateTime.now().year;
+        const formatter = (timestamp: number) => {
+            return formatDateTick(timestamp, thisYear);
+        }
+
+        return memoize(formatter);
+    }, []);
+
     const spf = SPF();    
 
     useEffect(() => {
@@ -42,10 +76,16 @@ const SurveyResults = () => {
         setShowLastWeek(true);
     }, [surveyHistory]);
 
+    const dassData = useMemo(() => {
+        if (typeof surveyHistory !== "object") return [];
+        const dass = DASS();
+        return dass.processDataForGraph!(surveyHistory);
+    }, [surveyHistory]);
+
     return (
         <div className="container">
             <IonIcon className="top-corner x" icon={closeOutline} onClick={() => history.push("/summary")}></IonIcon>
-            <div className="center-journal">
+            <div className="center-journal" ref={pageWidthRef}>
                 <div className="title">Survey Results</div>
                 <br />
                 { showLastWeek && <div className="finish-button" onClick={() => history.push("/lastreview")} style={{"width": "80%", "maxWidth": "500px"}}>
@@ -72,9 +112,11 @@ const SurveyResults = () => {
                 { surveyHistory === PullDataStates.NOT_ENOUGH_DATA && <p className="text-center">As you complete surveys each week, more data will show up here.</p>}
                 { typeof surveyHistory === "object" && <>
                     <p className="bold head2 text-center">Depression, Anxiety, and Stress Levels</p>
-                    <DASSGraph xZoomDomain={xZoomDomain} setXZoomDomain={setXZoomDomain} data={dass.processDataForGraph!(surveyHistory)} now={now} />
+                    <DASSGraph xZoomDomain={xZoomDomain} setXZoomDomain={setXZoomDomain} data={dassData} now={now} pageWidth={pageWidth} tickCount={tickCount} tickFormatter={memoTickFormatter} />
                     <br />
-                    <p className="bold head2 text-center">Resilience</p>
+                    <p className="bold head2 text-center" style={{
+                        marginTop: "64px",
+                    }}>Resilience</p>
                     <SurveyGraph data={spf.processDataForGraph!(surveyHistory)} graphConfig={spf.graphConfig!} /> 
                     <p className="text-center margin-bottom-0 max-width-600">{ RESILIENCE_EXP }</p>
                 </> }

diff --git a/src/screeners/dass.tsx b/src/screeners/dass.tsx
@@ -210,8 +210,6 @@ export default function DASS(): Screener {
                 });
             }
 
-            console.log(d);
-
             return d;
         },
         graphConfig: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -210,8 +210,6 @@ export default function DASS(): Screener { @@
                     });
                 }
-                console.log(d);
                 return d;
             },
             graphConfig: {
@@ Expand Down @@