From 9824421b34f33c1ab85406c1766ab560a2e77de9 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Mon, 29 May 2023 12:32:07 +0200
Subject: [PATCH] Add temp & humidity graph for brew start & end date

---
 src/routes/brews/[date]/+page.svelte | 37 ++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/routes/brews/[date]/+page.svelte b/src/routes/brews/[date]/+page.svelte
index ffdedbd..e4c736c 100644
--- a/src/routes/brews/[date]/+page.svelte
+++ b/src/routes/brews/[date]/+page.svelte
@@ -1,4 +1,7 @@
 <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 = {
@@ -9,6 +12,14 @@
 
   export let data;
   let brew = data.brew;
+  let temperatureData: IChartFrame[];
+  let humidityData: IChartFrame[];
+
+  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 dateString = new Date(Number(brew.date * 1000)).toLocaleDateString('no-NB', dateFormat);
@@ -64,6 +75,20 @@
       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}
+
+    {#if humidityData}
+      <div class="graph">
+        <h3>Humidity during carbonation</h3>
+        <Graph dataFrames="{humidityData}" name="Humidity" />
+      </div>
+    {/if}
+
     <h3>Smak</h3>
     <p>
       Tuborg Sommerøl er en nordisk pilsner med en svært lys strågul farge. Aromaen er preget av
@@ -196,5 +221,17 @@
       line-height: 1.2;
       font-weight: 300;
     }
+
+    .graph {
+      width: 100%;
+      max-height: 50vh;
+      margin-bottom: 5rem;
+
+      @include desktop {
+        float: left;
+        max-height: 450px;
+        max-width: 48%;
+      }
+    }
   }
 </style>