diff --git a/src/Debug.tsx b/src/Debug.tsx index 6e68077..f59d13e 100644 --- a/src/Debug.tsx +++ b/src/Debug.tsx @@ -1,83 +1,16 @@ -import { - createEffect, - createResource, - createSignal, - ErrorBoundary, - For, - Show, -} from "solid-js"; +import { createResource, ErrorBoundary } from "solid-js"; import { openDatabase } from "./data"; import Graph from "./Graph"; -type Unit = "kg" | "lb"; - export default function Debug() { const [database] = createResource(openDatabase); - const [entries, { refetch }] = createResource(database, async (database) => { + const [entries] = createResource(database, async (database) => { const entries = await database.getAll("entries"); return entries; }); - async function handleSubmit( - event: SubmitEvent & { currentTarget: HTMLFormElement } - ) { - event.preventDefault(); - console.debug("handleSubmit", event); - - const input = event.currentTarget.elements.namedItem("weight"); - if (!(input instanceof HTMLInputElement)) - throw new Error("Expected input element"); - - const weight = input.valueAsNumber; - - const currentDatabase = database(); - console.debug("currentDatabase", currentDatabase); - const now = new Date(); - currentDatabase?.add( - "entries", - { - timestamp: now, - weight, - }, - now.getTime() - ); - event.currentTarget.reset(); - refetch(); - } - - async function remove(date: Date) { - const currentDatabase = database(); - if (!currentDatabase) throw new Error("Expected database to be ready"); - - currentDatabase.delete("entries", date.getTime()); - refetch(); - } - - const [unit, setUnit] = createSignal("kg"); - - function format(weight: number, unit: Unit) { - if (unit === "kg") return weight; - // If 1lb = 0.45_359_237kg - // Then divide both sides by 45359237 to get 1/45_359_237lb and 0.00_000_001kg - // Multiply both sides by 100_000_000 to get 2.2_046_226_218lbs = 1kg - // 1/45_359_237*100_000_000 - return weight * 2.2046226218; - } - - let weightInput: HTMLInputElement | undefined; - - createEffect(() => { - // Need to access unit here to register it as a effect dependency - const currentUnit = unit(); - if (!weightInput?.valueAsNumber) return; - weightInput.valueAsNumber = - currentUnit === "kg" - ? weightInput.valueAsNumber / 2.2046226218 - : weightInput.valueAsNumber * 2.2046226218; - }); - return (

Debug

diff --git a/src/Graph.tsx b/src/Graph.tsx index 51b1d18..71e9bc6 100644 --- a/src/Graph.tsx +++ b/src/Graph.tsx @@ -1,22 +1,12 @@ -import { createEffect, For, Show, type Accessor, type JSX } from "solid-js"; +import { For, Show, type Accessor, type JSX } from "solid-js"; import type { Entry } from "./data"; -function* repeat(times: number) { - for (let index = 0; index < times; index++) { - yield index; - } -} - -function daysInMonth(year: number, month: number) { - // You can go negative on days. So 0 is the last day of the previous month - // Momth is 0 based index e.g. 11 is December - // Sou we would have to -1 to get the current month with the momth number - // But we want the next one so it would be +1 which cancels out the -1 - return new Date(year, month, 0).getDate(); +function startOfMonth(date: Date) { + return new Date(date.getFullYear(), date.getMonth(), 1); } -function startOfMonth(year: number, month: number) { - return new Date(year, month, 1); +function endOfMonth(date: Date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 0); } type Properties = { entries: Accessor }; @@ -26,11 +16,6 @@ type TrendLine = Pick< "x1" | "x2" | "y1" | "y2" >; -type Max = { - x: number; - y: number; -}; - type Range = { from: number; to: number; @@ -145,11 +130,6 @@ function useTrendLine(entries: Accessor): { return { trendLine, aggregation }; } -type Point = { - x: number; - y: number; -}; - function XAxisMarks({ height }: { height: number }) { return ( @@ -166,7 +146,7 @@ function XAxisMarks({ height }: { height: number }) { ); } -function YAxisMarks({ width }: { width: number }) { +function YAxisMarks() { return ( {(y) => ( @@ -183,103 +163,76 @@ function YAxisMarks({ width }: { width: number }) { ); } -// const adjustToSvgSpace = () => { -// const { x, y } = ranges(); -// const maxX = x.to; -// const maxY = y.to; - -// return (x: number, y: number) => { -// // Percent of the max value -// // Percent of the width -// x = (x / maxX) * width; -// y = (y / maxY) * height; - -// return [height - y, width - x]; -// }; -// }; - -function adjustToSvgSpace( - x: number, - y: number, - maxX: number, - maxY: number, - width: number, - height: number -) { - // Percent of the max value - // Percent of the width - x = (x / maxX) * width; - y = (y / maxY) * height; - - console.debug({ x, y, maxX, maxY, width, height }); - - return [height - y, width - x]; -} - export default function Graph({ entries }: Properties) { //TODO make range configurable // Need to curb time stamp or we get overflow const now = new Date(); - const xRange = { - from: startOfMonth(now.getFullYear(), now.getMonth()).getTime(), - to: Number.POSITIVE_INFINITY, - }; - const { trendLine, aggregation } = useTrendLine(entries); + + const timeStart = startOfMonth(now).getTime(); + const timeEnd = endOfMonth(now).getTime(); + + // const weightStart = 0; + const weightEnd = 100; + + const { trendLine } = useTrendLine(entries); const width = 100; const height = 100; + const adjustX = (x: number) => { + const timeRange = timeEnd - timeStart; + const xInTimeRange = x - timeStart; + const percentage = xInTimeRange / timeRange; + + const inSvg = percentage * width; + return inSvg; + }; - createEffect(() => console.debug("trendLine", trendLine())); + const adjustY = (y: number) => { + const percentage = y / weightEnd; + const inSvg = height - percentage * height; + return inSvg; + }; return ( - - {(ranges) => { - const adjust = (x: number, y: number) => { - const { x: xRange } = ranges(); - const relativeX = (x / xRange.to) * 100; - - return adjustToSvgSpace(relativeX, y, 100, 100, width, height); - }; - return ( - - - - - {(trendLine) => { - const line = trendLine(); - const [x1, y1] = adjust(line.x1 as number, line.x2 as number); - const [x2, y2] = adjust(line.x2 as number, line.x2 as number); - return ( - - ); - }} - - - {({ weight, timestamp }) => { - const [x, y] = adjust(timestamp.getTime(), weight); - return ( - // TODO filter out values out of range - - ); - }} - - - - ); - }} - + + + + + {(trendLine) => { + const { x1, x2, y1, y2 } = trendLine(); + return ( + + ); + }} + + + {({ weight, timestamp }) => { + return ( + // TODO filter out values out of range + + ); + }} + + + ); }