diff --git a/cypress/component/graphs.cy.js b/cypress/component/graphs.cy.js index baeefef9..a9f9130b 100644 --- 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(); } }); + + 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(); + }) + + it("Further Out (1)", () => { + const dataSlice = [{ + timestamp: now - (10 * week), + d: 1, + a: 0.5, + s: 0.5 + }] + cy.mount(); + }) + + 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(); + }) }); diff --git a/src/components/graphs/DASSGraph.tsx b/src/components/graphs/DASSGraph.tsx index 9de19b32..dbe2ad25 100644 --- 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 index 92f4487b..3b1cc1da 100644 --- 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", }}>

Zoom

- {(dataRange > (ONE_DAY * 90)) &&
zoomTo("3M")} className="outline-button">3M
} - {(dataRange > (ONE_DAY * 180)) &&
zoomTo("6M")} className="outline-button">6M
} - {(dataRange > (ONE_DAY * 365)) &&
zoomTo("1Y")} className="outline-button">1Y
} + {((dataRange ?? 0) > (ONE_DAY * 90)) &&
zoomTo("3M")} className="outline-button">3M
} + {((dataRange ?? 0) > (ONE_DAY * 180)) &&
zoomTo("6M")} className="outline-button">6M
} + {((dataRange ?? 0) > (ONE_DAY * 365)) &&
zoomTo("1Y")} className="outline-button">1Y
}
zoomTo("All")} className="outline-button">All
diff --git a/src/components/graphs/useZoomRange.ts b/src/components/graphs/useZoomRange.ts index 6283ea01..573b9cc2 100644 --- 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; \ No newline at end of file