/graph API endpoint for proxy to elastic, all use this endpoint or lib/server functions to get data

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

@@ -1,13 +1,21 @@
-import { fetchTemperature, fetchHumidity, fetchPressure } from '$lib/graphQueryGenerator';
+import {
+  fetchTemperature,
+  fetchHumidity,
+  fetchPressure
+} from '../../lib/server/graphQueryGenerator';
 import type { PageServerLoad } from './$types';
-import type IChartFrame from '$lib/interfaces/IChartFrame';
+import type IChartFrame from '../../lib/interfaces/IChartFrame';
 
-let DEFAULT_MINUTES = 10080;
+const DEFAULT_MINUTES = 10080;
 
 export const load: PageServerLoad = async ({ fetch }) => {
-  const temperatureData: IChartFrame[] = await getTemp(DEFAULT_MINUTES, fetch);
-  const humidityData: IChartFrame[] = await getHumidity(DEFAULT_MINUTES, fetch);
-  const pressureData: IChartFrame[] = await getPressure(DEFAULT_MINUTES, fetch);
+  const to = new Date();
+  const from = new Date(to.getTime() - DEFAULT_MINUTES * 60 * 1000);
+  const size = 40;
+
+  const temperatureData: IChartFrame[] = await fetchTemperature(from, to, size);
+  const humidityData: IChartFrame[] = await fetchHumidity(from, to, size);
+  const pressureData: IChartFrame[] = await fetchPressure(from, to, size);
 
   return {
     temperatureData,
@@ -16,23 +24,3 @@ export const load: PageServerLoad = async ({ fetch }) => {
     DEFAULT_MINUTES
   };
 };
-
-function getSensor(func: Function, minutes: number, fetch: Function) {
-  const from: Date = new Date();
-  const to = new Date(from.getTime() - minutes * 60 * 1000);
-  const size = 40;
-
-  return func(from, to, size, fetch);
-}
-
-function getTemp(minutes: number, fetch: Function): IChartFrame[] {
-  return getSensor(fetchTemperature, minutes, fetch);
-}
-
-function getHumidity(minutes: number, fetch: Function): IChartFrame[] {
-  return getSensor(fetchHumidity, minutes, fetch);
-}
-
-function getPressure(minutes: number, fetch: Function): IChartFrame[] {
-  return getSensor(fetchPressure, minutes, fetch);
-}

src/routes/graphs/+page.svelte

@@ -1,55 +1,48 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { fetchTemperature, fetchHumidity, fetchPressure } from '$lib/graphQueryGenerator';
-  import Graph from '$lib/components/Graph.svelte';
-  import type IChartFrame from '$lib/interfaces/IChartFrame';
+  import Graph from '../../lib/components/Graph.svelte';
+  import type IChartFrame from '../../lib/interfaces/IChartFrame';
   import type { PageData } from './$types';
 
-  export let data: PageData
+  export let data: PageData;
 
   let temperatureData: IChartFrame[] = data?.temperatureData;
-  let humidityData: IChartFrame[] = data?.temperatureData;
-  let pressureData: IChartFrame[] = data?.temperatureData;
-  let DEFAULT_MINUTES: number = data?.DEFAULT_MINUTES
+  let humidityData: IChartFrame[] = data?.humidityData;
+  let pressureData: IChartFrame[] = data?.pressureData;
+  let DEFAULT_MINUTES: number = data?.DEFAULT_MINUTES;
   let minutes: number = DEFAULT_MINUTES;
 
-  const buttonMinutes = [{
-      value: 15,
-      name: 'Last 15 minutes'
-    }, {
-      value: 60,
-      name: 'Last hour'
-    }, {
-      value: 1440,
-      name: 'Last day'
-    }, {
-      value: 10080,
-      name: 'Last week'
-    }, {
-      value: 43200,
-      name: 'Last month'
-    }, {
-      value: 129600,
-      name: 'Last 3 months'
-    }, {
-      value: 259200,
-      name: 'Last 6 months'
-    }, {
-      value: 518400,
-      name: 'Last year',
-    }]
+  async function fetchData(unit: string, from: Date, to: Date, size: number) {
+    const options = {
+      method: 'POST',
+      body: JSON.stringify({ from, to, size })
+    };
+
+    return fetch(`/api/graph/${unit}`, options).then((resp) => resp.json());
+  }
+
+  const buttonMinutes = [
+    { value: 15, name: 'Last 15 minutes' },
+    { value: 60, name: 'Last hour' },
+    { value: 360, name: 'Last 6 hours' },
+    { value: 1440, name: 'Last day' },
+    { value: 10080, name: 'Last week' },
+    { value: 43200, name: 'Last month' },
+    { value: 129600, name: 'Last 3 months' },
+    { value: 259200, name: 'Last 6 months' },
+    { value: 518400, name: 'Last year' }
+  ];
 
   function reload(mins: number) {
-    minutes = mins
-    const from: Date = new Date();
-    const to = new Date(from.getTime() - minutes * 60 * 1000);
+    minutes = mins;
+    const to: Date = new Date();
+    const from = new Date(to.getTime() - minutes * 60 * 1000);
     const size = 40;
 
-    fetchTemperature(from, to, size, window.fetch).then((resp) => (temperatureData = resp));
-    fetchHumidity(from, to, size, window.fetch).then((resp) => (humidityData = resp));
-    fetchPressure(from, to, size, window.fetch).then((resp) => (pressureData = resp));
+    fetchData('temperature', from, to, size).then((resp) => (temperatureData = resp?.data));
+    fetchData('humidity', from, to, size).then((resp) => (humidityData = resp?.data));
+    fetchData('pressure', from, to, size).then((resp) => (pressureData = resp?.data));
   }
-</script>
 
 <!-- <h1>Server: {emoji.emoji}</h1> -->
 
@@ -57,24 +50,27 @@
 
 <div class="button-wrapper">
   {#each buttonMinutes as button}
-    <button on:click={() => reload(button.value)} class="{button.value === minutes ? 'selected' : ''}">{ button.name }</button>
+    <button
+      on:click="{() => reload(button.value)}"
+      class="{button.value === minutes ? 'selected' : ''}">{button.name}</button
+    >
   {/each}
 </div>
 
 <section class="graphs">
   {#if temperatureData}
-    <div class="graphWrapper">
-      <Graph dataFrames={temperatureData} name="Temperature" />
+    <div class="card">
+      <Graph dataFrames="{temperatureData}" name="Temperature" />
     </div>
   {/if}
   {#if humidityData}
-    <div class="graphWrapper">
-      <Graph dataFrames={humidityData} name="Humidity" beginAtZero={false} />
+    <div class="card">
+      <Graph dataFrames="{humidityData}" name="Humidity" />
     </div>
   {/if}
   {#if pressureData}
-    <div class="graphWrapper">
-      <Graph dataFrames={pressureData} name="Pressure" beginAtZero={false} />
+    <div class="card">
+      <Graph dataFrames="{pressureData}" name="Pressure" />
     </div>
   {/if}
 </section>
@@ -89,17 +85,21 @@
     width: 100%;
 
     @include mobile {
-      grid-template-columns: 1fr;
+      display: block;
+      > *:not(*:first-child) {
+        margin-top: 1rem;
+      }
     }
 
-    .graphWrapper {
-      max-width: 100vw;
+    .card {
+      padding: 1rem;
     }
   }
 
   .button-wrapper {
     display: flex;
-    width: min-content;
+    margin: 1rem 0;
+    overflow-y: scroll;
   }
 
   button {