Merge pull request #2906 from evidence-dev/fix/daterange-prerender-wi…

…th-defaultvalue Fix prerendering of DateRange with defaultValue
evidence-dev · Dec 18, 2024 · 76b5a68 · 76b5a68
2 parents 70fbe16 + 11e25fc
commit 76b5a68
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 31 deletions.
diff --git a/.changeset/dirty-worms-sniff.md b/.changeset/dirty-worms-sniff.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+fix ssr'd defaultValue usage with DateRange
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -59,26 +59,19 @@
 	$: startString = formatDateString(start || $query?.[0].start || new Date(0));
 	$: endString = formatDateString(end || $query?.[0].end || new Date());
 
-	$: if ((query && $query.dataLoaded) || !query) {
-		if (range) {
-			$inputs[name] = { start: startString, end: endString };
-		} else {
-			$inputs[name] = { value: startString };
-		}
-	}
-
 	let currentDate = dateToYYYYMMDD(new Date());
 
-	let selectedDateInput;
-	$: if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end) && range) {
-		$inputs[name] = {
-			start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
-			end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
-		};
-	} else if (selectedDateInput && selectedDateInput && !range) {
-		$inputs[name] = {
-			value: dateToYYYYMMDD(selectedDateInput.toDate(getLocalTimeZone()) ?? new Date(0))
-		};
+	function onSelectedDateInputChange(selectedDateInput) {
+		if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end) && range) {
+			$inputs[name] = {
+				start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
+				end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
+			};
+		} else if (selectedDateInput && selectedDateInput && !range) {
+			$inputs[name] = {
+				value: dateToYYYYMMDD(selectedDateInput.toDate(getLocalTimeZone()) ?? new Date(0))
+			};
+		}
 	}
 </script>
 
@@ -105,7 +98,7 @@
 					<Skeleton class="h-8 w-72" />
 				</svelte:fragment>
 				<DateInput
-					bind:selectedDateInput
+					{onSelectedDateInputChange}
 					start={startString}
 					end={endString}
 					loaded={loaded?.ready ?? true}

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -32,7 +32,10 @@
 	});
 
 	/** @type {import('bits-ui').DateRange | undefined} */
-	export let selectedDateInput = undefined;
+	let selectedDateInput = undefined;
+
+	/** @type {(selectedDateInput: import('bits-ui').DateRange | undefined) => void} */
+	export let onSelectedDateInputChange;
 	/** @type {string} */
 	export let start;
 	/** @type {string} */
@@ -218,6 +221,8 @@
 		}
 	}
 	$: updateDateRange(calendarStart, calendarEnd);
+
+	$: onSelectedDateInputChange(selectedDateInput);
 </script>
 
 <div class="flex">

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
@@ -52,16 +52,13 @@
 	$: startString = formatDateString(start || $query?.[0].start || new Date(0));
 	$: endString = formatDateString(end || $query?.[0].end || new Date());
 
-	$: if ((query && $query.dataLoaded) || !query) {
-		$inputs[name] = { start: startString, end: endString };
-	}
-
-	let selectedDateInput;
-	$: if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end)) {
-		$inputs[name] = {
-			start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
-			end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
-		};
+	function onSelectedDateInputChange(selectedDateInput) {
+		if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end)) {
+			$inputs[name] = {
+				start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
+				end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
+			};
+		}
 	}
 </script>
 
@@ -89,7 +86,7 @@
 				</svelte:fragment>
 
 				<DateInput
-					bind:selectedDateInput
+					{onSelectedDateInputChange}
 					start={startString}
 					end={endString}
 					loaded={loaded?.ready ?? true}

diff --git a/sites/test-env/pages/daterange.md b/sites/test-env/pages/daterange.md
@@ -42,3 +42,35 @@ limit 1000
 ```
 
 <DataTable data={range_of_orders_2} />
+
+## With defaultValue
+
+<DateRange
+    name=date_picker
+    start='2021-01-01'
+    end='2021-10-21'
+    defaultValue='Last 7 Days'
+/>
+
+```sql dates
+select 
+'${inputs.date_picker.start}' as start, 
+'${inputs.date_picker.end}' as end
+```
+
+<DataTable data={dates}/>
+
+```sql orders_per_day
+select 
+date_trunc('day', order_datetime) as date,
+count(*) as orders
+from orders
+where order_datetime between '${inputs.date_picker.start}' and '${inputs.date_picker.end}'
+group by 1
+```
+
+<LineChart
+    data={orders_per_day}
+    x=date
+    y=orders
+/>