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