set oldest and current null points

Author: ajgeiss0702

src/lib/lttstore/product/ProductMoveRateGraph.svelte

@@ -12,7 +12,9 @@
 	let {
 		productName = typed<string | undefined>(),
 		stockHistory: stockHistoryRaw = typed<StockHistoryTableRow[]>(),
-		chartUpdateNumber = typed<number>(1)
+		chartUpdateNumber = typed<number>(1),
+		historyDays = typed<number | "all">("all"),
+		stockAsOf = typed<number>(Date.now())
 	} = $props();
 
 	let wrapperDiv = $state<HTMLDivElement>();
@@ -45,28 +47,33 @@
   let data = $derived.by(() => {
 		return [
 			[
+				...(historyDays === "all" ? [] : [Math.round((Date.now() - (historyDays * 24 * 60 * 60e3)) / 1e3)]),
 				...stockHistory.map((h, i) => i === 0
 					? Math.round(h.timestamp / 1e3)
 					: Math.round((stockHistory[i-1].timestamp + h.timestamp) / 2 / 1e3)
 				),
-				...(stockHistory.length > 1 ? [Math.round(stockHistory[stockHistory.length-1].timestamp / 1e3)] : []),
+				Math.round(stockAsOf / 1e3)
 			],
 			...(onlyTotal ? ["total"] : Object.keys(someStock))
-				.map(k => stockHistory.map((h, i, a) => {
-					if(i > 0) {
-						const previous = a[i-1];
-						const previousStock = previous.stock[k]
-						const currentStock = h.stock[k];
-						if(previousStock === null || currentStock === null) return null;
-						const timeDiff = h.timestamp - previous.timestamp;
-						const stockDiff = previousStock - currentStock;
-						const rate = stockDiff / (timeDiff / (60 * 60e3));
-						if(rate < 0) return null;
-						return rate;
-					} else {
-						return null;
-					}
-				}))
+				.map(k => [
+					...(historyDays === "all" ? [] : [null]),
+					...stockHistory.map((h, i, a) => {
+						if(i > 0) {
+							const previous = a[i-1];
+							const previousStock = previous.stock[k]
+							const currentStock = h.stock[k];
+							if(previousStock === null || currentStock === null) return null;
+							const timeDiff = h.timestamp - previous.timestamp;
+							const stockDiff = previousStock - currentStock;
+							const rate = stockDiff / (timeDiff / (60 * 60e3));
+							if(rate < 0) return null;
+							return rate;
+						} else {
+							return null;
+						}
+					}),
+					null
+				])
 		]
 	});
 

src/lib/lttstore/product/ProductStockHistoryGraph.svelte

@@ -61,7 +61,9 @@
 		productName = typed<string | undefined>(),
 		stockHistory = typed<StockHistoryTableRow[]>(),
 		productOptions = typed<ProductOption[]>(),
-		chartUpdateNumber = typed<number>(1)
+		chartUpdateNumber = typed<number>(1),
+		historyDays = typed<number | "all">("all"),
+		stockAsOf = typed<number>(Date.now())
 	} = $props();
 
 	let wrapperDiv = $state<HTMLDivElement>();
@@ -93,14 +95,24 @@
 
 	let data = $derived.by(() => {
 		const filteredKeys = filter ? Object.keys(someStock).filter(k => k.includes(filter!)) : Object.keys(someStock);
-		return [
-			stockHistory.map((h: StockHistoryTableRow) => Math.round(h.timestamp / 1e3)),
+		const d = [
+			[
+				...(historyDays === "all" ? [] : [Math.round((Date.now() - (historyDays * 24 * 60 * 60e3)) / 1e3)]),
+				...stockHistory.map((h: StockHistoryTableRow) => Math.round(h.timestamp / 1e3)),
+				Math.round(stockAsOf / 1e3)
+			],
 			...(onlyTotal ? ["total"] : filteredKeys)
-				.map((k: string) => stockHistory.map((h: { stock: string }) => {
-					const stock = JSON.parse(h.stock)[k];
-					return typeof stock === "number" ? stock : null;
-				}))
-		]
+				.map((k: string) => [
+					...(historyDays === "all" ? [] : [null]),
+					...stockHistory.map((h: { stock: string }) => {
+						const stock = JSON.parse(h.stock)[k];
+						return typeof stock === "number" ? stock : null;
+					}),
+					null
+				])
+		];
+		console.debug({d})
+		return d;
 	});
 
 	let width = $derived(wrapperDiv?.clientWidth ?? 1490);

src/routes/(info)/lttstore/products/[handle]/+page.server.ts

@@ -71,6 +71,7 @@ export const load = (async ({platform, params, url}) => {
   }
 
   let historyDays: number | string = Number(url.searchParams.get("historyDays") ?? defaultHistoryDays);
+  const stockAsOf = Date.now();
 
   let stockHistory: Promise<StockHistoryTableRow[]>;
   if((url.searchParams.get("historyDays") ?? defaultHistoryDays) === "all") {
@@ -115,5 +116,6 @@ export const load = (async ({platform, params, url}) => {
     stockHistory: await stockHistory,
     changeHistory,
     similarProducts,
+    stockAsOf
   }
 }) satisfies PageServerLoad

src/routes/(info)/lttstore/products/[handle]/+page.svelte

@@ -692,10 +692,10 @@
                 <option value="all">all-time</option>
               </select>
               {#key data}
-                <ProductStockHistoryGraph stockHistory={data.stockHistory} productName={productInfo.title} productOptions={productInfo.options} {chartUpdateNumber}/>
+                <ProductStockHistoryGraph stockHistory={data.stockHistory} productName={productInfo.title} productOptions={productInfo.options} historyDays={data.historyDays} stockAsOf={data.stockAsOf} {chartUpdateNumber}/>
                 <div class="min-h-[710px]">
                   <LazyLoad>
-                    <ProductMoveRateGraph stockHistory={data.stockHistory} productName={productInfo.title} {chartUpdateNumber}/>
+                    <ProductMoveRateGraph stockHistory={data.stockHistory} productName={productInfo.title} historyDays={data.historyDays} stockAsOf={data.stockAsOf} {chartUpdateNumber}/>
                   </LazyLoad>
                 </div>
               {/key}