Display temperature & humidity as graph over time of a brew.

Uses the available lib/server/graphQueryGenerator functions to get data.

src/routes/brews/+page.server.ts

@@ -1,4 +1,4 @@
-import brews from '../../brews.json'
+import brews from '../../brews.json';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {

src/routes/brews/+page.svelte

@@ -5,7 +5,7 @@
   const path = (date: string) => '/brews/' + String(date);
 
   const dateFormat = { year: 'numeric', month: 'short', day: 'numeric' };
-  const dateString = (date) => new Date(date * 1000).toLocaleDateString('no-NB', dateFormat);
+  const dateString = (date: number) => new Date(date * 1000).toLocaleDateString('no-NB', dateFormat);
 
 </script>
 

src/routes/brews/[date]/+page.server.ts

@@ -1,8 +1,25 @@
 import { error } from '@sveltejs/kit';
 import brews from '../../../brews.json';
+import { fetchHumidity, fetchTemperature } from '../../../lib/server/graphQueryGenerator';
 import type { PageLoad } from './$types';
 
-export const load = (({ params }) => {
+async function fetchGraphData(brew) {
+  const start = new Date(brew.date * 1000 - 86400000);
+  const end = new Date(brew.date * 1000 + 4838400000);
+  const size = 200;
+
+  const [temperature, humidity] = await Promise.all([
+    fetchTemperature(start, end, size),
+    fetchHumidity(start, end, size)
+  ]);
+
+  return {
+    temperature,
+    humidity
+  };
+}
+
+export const load = (async ({ params }) => {
   const { date } = params;
   const brew = brews.find((b) => b?.date === date);
 
@@ -10,5 +27,7 @@ export const load = (({ params }) => {
     throw error(404, 'Brew not found');
   }
 
-  return { brew };
+  const graphData = await fetchGraphData(brew);
+
+  return { brew, graphData };
 }) satisfies PageLoad;

src/routes/brews/[date]/+page.svelte

@@ -1,27 +1,19 @@
 <script lang="ts">
   import Graph from '../../../lib/components/Graph.svelte';
-  import { fetchTemperature, fetchHumidity } from '../../../lib/graphQueryGenerator';
   import IChartFrame from '../../../lib/interfaces/IChartFrame';
   let height: number;
 
-  // let brew = {
-  //   recipe: 'https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ',
-  //   bryggselv: 'https://www.bryggselv.no/finest/105932/kinn-kveldsbris-allgrain-ølsett-25-liter',
-  //   untapped: 'https://untappd.com/b/kinn-bryggeri-kveldsbris/695024'
-  // }
-
   export let data;
   let brew = data.brew;
-  let temperatureData: IChartFrame[];
-  let humidityData: IChartFrame[];
+  let temperatureData: IChartFrame[] = data.graphData.temperature;
+  let humidityData: IChartFrame[] = data.graphData.humidity;
 
-  const from: Date = new Date();
-  const to = new Date(1684872000000);
-  const size = 40;
-  fetchTemperature(from, to, size, fetch).then((resp) => (temperatureData = resp));
-  fetchHumidity(from, to, size, fetch).then((resp) => (humidityData = resp));
-
-  const dateFormat = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  };
   const dateString = new Date(Number(brew.date * 1000)).toLocaleDateString('no-NB', dateFormat);
 
   const wizards = brew.by.join(', ');
@@ -75,19 +67,21 @@
       ble Tuborg Bryggeri en del av Carlsberg.
     </p>
 
-    {#if temperatureData}
-      <div class="graph">
-        <h3>Temperature during fermentation</h3>
-        <Graph dataFrames="{temperatureData}" name="Temperature" />
-      </div>
-    {/if}
+    <div class="graph-container">
+      {#if temperatureData}
+        <div class="graph">
+          <h3>Temperature during fermentation</h3>
+          <Graph dataFrames="{temperatureData}" name="Temperature" hideTitle="{true}" />
+        </div>
+      {/if}
 
-    {#if humidityData}
-      <div class="graph">
-        <h3>Humidity during carbonation</h3>
-        <Graph dataFrames="{humidityData}" name="Humidity" />
-      </div>
-    {/if}
+      {#if humidityData}
+        <div class="graph">
+          <h3>Humidity during carbonation</h3>
+          <Graph dataFrames="{humidityData}" name="Humidity" hideTitle="{true}" />
+        </div>
+      {/if}
+    </div>
 
     <h3>Smak</h3>
     <p>
@@ -222,6 +216,12 @@
       font-weight: 300;
     }
 
+    .graph-container {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
     .graph {
       width: 100%;
       max-height: 50vh;