DASS all ready

nkalupahana · Dec 26, 2023 · ca07c3e · ca07c3e
1 parent 5807342
commit ca07c3e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 11 deletions.
diff --git a/cypress/component/graphs.cy.js b/cypress/component/graphs.cy.js
@@ -25,7 +25,7 @@ const DASSGraphContainer = ({ data }) => {
 
 function mulberry32(a) {
     return function() {
-      var t = a += 0x6D2B79F5;
+      let t = a += 0x6D2B79F5;
       t = Math.imul(t ^ t >>> 15, t | 1);
       t ^= t + Math.imul(t ^ t >>> 7, t | 61);
       return ((t ^ t >>> 14) >>> 0) / 4294967296;
@@ -55,4 +55,64 @@ describe("DASS", () => {
             cy.mount(<DASSGraphContainer data={dataSlice} />);
         }
     });
+
+    it("Further Out (4)", () => {
+        const dataSlice = [{
+            timestamp: now - (10 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }, {
+            timestamp: now - (9 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }, {
+            timestamp: now - (8 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }, {
+            timestamp: now - (7 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }]
+        cy.mount(<DASSGraphContainer data={dataSlice} />);
+    })
+
+    it("Further Out (1)", () => {
+        const dataSlice = [{
+            timestamp: now - (10 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }]
+        cy.mount(<DASSGraphContainer data={dataSlice} />);
+    })
+
+    it("Gap", () => {
+        const dataSlice = [{
+            timestamp: now - (10 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }, {
+            timestamp: now - (9 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }, {
+            timestamp: now - (5 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }, {
+            timestamp: now - (4 * week),
+            d: 1,
+            a: 0.5,
+            s: 0.5
+        }]
+        cy.mount(<DASSGraphContainer data={dataSlice} />);
+    })
 });
diff --git a/src/components/graphs/DASSGraph.tsx b/src/components/graphs/DASSGraph.tsx
@@ -5,7 +5,7 @@ import { AnyMap } from "../../helpers";
 import useZoomRange from "./useZoomRange";
 
 const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now, pageWidth, tickCount, tickFormatter, zoomTo }: GraphProps) => {
-    const [dataRange, minimumZoom] = useZoomRange(now, data, setXZoomDomain);
+    const [dataRange, minimumZoom, maxDomain] = useZoomRange(now, data, setXZoomDomain);
 
     const labels = ["Normal", "Mild", "Moderate", "Severe", "Extremely\nSevere", ""];
     const lines: AnyMap[] = [
@@ -46,7 +46,8 @@ const DASSGraph = ({ xZoomDomain, setXZoomDomain, data, now, pageWidth, tickCoun
                     onZoomDomainChange={(domain) => setXZoomDomain(domain.x as [number, number])}
                     minimumZoom={{ x: minimumZoom }}
                     zoomDomain={{ x: xZoomDomain }}
-                />}
+                    />}
+                maxDomain={{ x: maxDomain }}
                 width={pageWidth}
             >
                 {/* Lines */}

diff --git a/src/components/graphs/helpers.tsx b/src/components/graphs/helpers.tsx
@@ -71,7 +71,7 @@ interface GraphHeaderProps {
     lines: AnyMap[]
     keyMap: AnyMap
     zoomTo: (key: "3M" | "6M" | "1Y" | "All") => void;
-    dataRange: number
+    dataRange: number | undefined
 }
 
 export const GraphHeader = ({ lines, keyMap, zoomTo, dataRange } : GraphHeaderProps) => {
@@ -104,9 +104,9 @@ export const GraphHeader = ({ lines, keyMap, zoomTo, dataRange } : GraphHeaderPr
             flexWrap: "wrap",
         }}>
             <p>Zoom</p>
-            {(dataRange > (ONE_DAY * 90)) && <div onClick={() => zoomTo("3M")} className="outline-button">3M</div>}
-            {(dataRange > (ONE_DAY * 180)) && <div onClick={() => zoomTo("6M")} className="outline-button">6M</div>}
-            {(dataRange > (ONE_DAY * 365)) && <div onClick={() => zoomTo("1Y")} className="outline-button">1Y</div>}
+            {((dataRange ?? 0) > (ONE_DAY * 90)) && <div onClick={() => zoomTo("3M")} className="outline-button">3M</div>}
+            {((dataRange ?? 0) > (ONE_DAY * 180)) && <div onClick={() => zoomTo("6M")} className="outline-button">6M</div>}
+            {((dataRange ?? 0) > (ONE_DAY * 365)) && <div onClick={() => zoomTo("1Y")} className="outline-button">1Y</div>}
             <div onClick={() => zoomTo("All")} className="outline-button">All</div>
         </div>
     </div>

diff --git a/src/components/graphs/useZoomRange.ts b/src/components/graphs/useZoomRange.ts
@@ -8,18 +8,26 @@ const useZoomRange = (now: number, data: AnyMap[], setXZoomDomain: (domain: [num
     }, [now, data]);
 
     const minimumZoom = useMemo(() => {
+        if (data.length === 1) return 0;
         return Math.min(ONE_DAY * 60, dataRange);
-    }, [dataRange]);
+    }, [data, dataRange, data]);
 
     useEffect(() => {
-        if (dataRange < ONE_DAY * 180) {
+        if (data.length === 1) {
             setXZoomDomain(undefined);
+        } else if (dataRange < ONE_DAY * 180) {
+            setXZoomDomain([now - dataRange - ONE_DAY, now]);
         } else {
             setXZoomDomain([now - ONE_DAY * 180, now]);
         }
-    }, [now, dataRange, setXZoomDomain]);
+    }, [now, dataRange, setXZoomDomain, data]);
+
+    const maxDomain = useMemo(() => {
+        if (data.length === 1) return undefined;
+        return now + ONE_DAY;
+    }, [now, data]);
 
-    return [dataRange, minimumZoom];
+    return [dataRange, minimumZoom, maxDomain];
 }
 
 export default useZoomRange;