From f759638bf4b63f92c4ac43150846eea93e1e16e8 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Tue, 30 May 2023 17:28:07 +0200
Subject: [PATCH] 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        |  2 +-
 src/routes/brews/+page.svelte           |  2 +-
 src/routes/brews/[date]/+page.server.ts | 23 +++++++++-
 src/routes/brews/[date]/+page.svelte    | 56 ++++++++++++-------------
 4 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/src/routes/brews/+page.server.ts b/src/routes/brews/+page.server.ts
index 6d2aa15..bf1de29 100644
--- a/src/routes/brews/+page.server.ts
+++ b/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 () => {
diff --git a/src/routes/brews/+page.svelte b/src/routes/brews/+page.svelte
index 1a546de..a8af991 100644
--- a/src/routes/brews/+page.svelte
+++ b/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>
 
diff --git a/src/routes/brews/[date]/+page.server.ts b/src/routes/brews/[date]/+page.server.ts
index 318eab9..495d6de 100644
--- a/src/routes/brews/[date]/+page.server.ts
+++ b/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;
diff --git a/src/routes/brews/[date]/+page.svelte b/src/routes/brews/[date]/+page.svelte
index e4c736c..7bff593 100644
--- a/src/routes/brews/[date]/+page.svelte
+++ b/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;