first step to show graph of sensors

package.json

@@ -68,6 +68,8 @@
     "@node-rs/argon2": "^2.0.2",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "drizzle-orm": "^0.43.1",
     "mqtt": "^5.13.1",
     "postgres": "^3.4.5",

pnpm-lock.yaml

@@ -17,6 +17,12 @@ importers:
       '@oslojs/encoding':
         specifier: ^1.1.0
         version: 1.1.0
+      d3-scale:
+        specifier: ^4.0.2
+        version: 4.0.2
+      d3-shape:
+        specifier: ^3.2.0
+        version: 3.2.0
       drizzle-orm:
         specifier: ^0.43.1
         version: 0.43.1(postgres@3.4.5)

src/lib/server/db/schema.js

@@ -42,4 +42,5 @@ export const sensorData = pgTable("sensor_data", {
   humidity: real().notNull(),
   pressure: real().notNull(),
   altitude: real().notNull(),
+  time: timestamp().notNull().defaultNow(),
 });

src/routes/(app)/[slug]/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
   import { Thermometer, Droplets, Gauge, Mountain, Cpu } from "@lucide/svelte";
+  import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
+  import { Input } from "$lib/components/ui/input/index.js";
+  import { Label } from "$lib/components/ui/label/index.js";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
 
   const { data } = $props();
 
@@ -120,9 +124,83 @@
       drawFloorplan(data.floor[0].json);
     }
   });
+
+  import * as Chart from "$lib/components/ui/chart/index.js";
+  import * as Card from "$lib/components/ui/card/index.js";
+  import * as Select from "$lib/components/ui/select/index.js";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+  import { scaleUtc } from "d3-scale";
+  import { Area, AreaChart, ChartClipPath } from "layerchart";
+  import { curveNatural } from "d3-shape";
+  import ChartContainer from "$lib/components/ui/chart/chart-container.svelte";
+  import { cubicInOut } from "svelte/easing";
+  import { ChevronDownIcon, Columns2 } from "@lucide/svelte";
+
+  let chartData = $state([
+    { date: new Date("2024-04-01"), desktop: 222, mobile: 150 },
+    { date: new Date("2024-04-02"), desktop: 97, mobile: 180 },
+    { date: new Date("2024-04-03"), desktop: 167, mobile: 120 },
+    { date: new Date("2024-04-04"), desktop: 242, mobile: 260 },
+    { date: new Date("2024-06-27"), desktop: 448, mobile: 490 },
+    { date: new Date("2024-06-28"), desktop: 149, mobile: 200 },
+    { date: new Date("2024-06-29"), desktop: 103, mobile: 160 },
+    { date: new Date("2024-06-30"), desktop: 446, mobile: 400 },
+  ]);
+
+  let timeRange = $state("90d");
+
+  const selectedLabel = $derived.by(() => {
+    switch (timeRange) {
+      case "90d":
+        return "Last 3 months";
+      case "30d":
+        return "Last 30 days";
+      case "7d":
+        return "Last 7 days";
+      default:
+        return "Last 3 months";
+    }
+  });
+
+  const filteredData = $derived(
+    chartData.filter((item) => {
+      const referenceDate = new Date("2024-06-30");
+      let daysToSubtract = 90;
+      if (timeRange === "30d") {
+        daysToSubtract = 30;
+      } else if (timeRange === "7d") {
+        daysToSubtract = 7;
+      }
+
+      referenceDate.setDate(referenceDate.getDate() - daysToSubtract);
+      return item.date >= referenceDate;
+    }),
+  );
+
+  const chartConfig = {
+    desktop: { label: "Desktop", color: "var(--chart-1)" },
+    mobile: { label: "Mobile", color: "var(--chart-2)" },
+  } satisfies Chart.ChartConfig;
+
+  const table = $state([
+    { visible: true, id: "temperature" },
+    { visible: true, id: "altitude" },
+    { visible: true, id: "humidity" },
+  ]);
+
+  let onOpenChange = $state(async (open: boolean) => {
+    if (open) {
+      const response = await fetch("/" + data.slug + "/stats");
+      const number = await response.json();
+      console.log(number);
+
+      chartData = [];
+    }
+  });
 </script>
 
 <div class="container mx-auto p-6">
+  <!-- <div style="display: flex; justify-content: center; align-items: center; height: 100%;"> -->
   <h1 class="mb-6 text-center text-4xl font-bold">Floor {data.slug}</h1>
 
   {#if data.hasConfig && data.floorConfig}
@@ -209,4 +287,127 @@
       <canvas bind:this={canvasEl} class="border" width="800" height="600"></canvas>
     </div>
   {/if}
+  <Dialog.Root bind:onOpenChange>
+    <Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Statistics</Dialog.Trigger>
+    <Dialog.Content class="sm:max-h-2/3 sm:max-w-2/3">
+      <Dialog.Header>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+              <Button variant="outline" size="sm" {...props}>
+                <Columns2 />
+                <span class="hidden lg:inline">Customize Columns</span>
+                <span class="lg:hidden">Columns</span>
+                <ChevronDownIcon />
+              </Button>
+            {/snippet}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end" class="w-56">
+            {#each table as column}
+              <DropdownMenu.CheckboxItem
+                class="capitalize"
+                checked={column.visible}
+                onCheckedChange={(value) => (column.visible = !value)}
+              >
+                {column.id}
+              </DropdownMenu.CheckboxItem>
+            {/each}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+        <div class="grid flex-1 gap-1 text-center sm:text-left">
+          <Card.Title>Data for floor {data.slug}</Card.Title>
+          <Card.Description>Showing total data for the last 3 months</Card.Description>
+        </div>
+        <Select.Root type="single" bind:value={timeRange}>
+          <Select.Trigger class="w-[160px] rounded-lg sm:ml-auto" aria-label="Select a value">
+            {selectedLabel}
+          </Select.Trigger>
+          <Select.Content class="rounded-xl">
+            <Select.Item value="90d" class="rounded-lg">Last 3 months</Select.Item>
+            <Select.Item value="30d" class="rounded-lg">Last 30 days</Select.Item>
+            <Select.Item value="7d" class="rounded-lg">Last 7 days</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </Dialog.Header>
+
+      <ChartContainer config={chartConfig} class="aspect-auto h-[250px] w-full">
+        <AreaChart
+          legend
+          data={filteredData}
+          x="date"
+          xScale={scaleUtc()}
+          series={[
+            {
+              key: "mobile",
+              label: "Mobile",
+              color: chartConfig.mobile.color,
+            },
+            {
+              key: "desktop",
+              label: "Desktop",
+              color: chartConfig.desktop.color,
+            },
+          ]}
+          seriesLayout="stack"
+          props={{
+            area: {
+              curve: curveNatural,
+              "fill-opacity": 0.4,
+              line: { class: "stroke-1" },
+              motion: "tween",
+            },
+            xAxis: {
+              ticks: timeRange === "7d" ? 7 : undefined,
+              format: (v) => {
+                return v.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                });
+              },
+            },
+
+            yAxis: { format: () => "" },
+          }}
+        >
+          {#snippet marks({ series, getAreaProps })}
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stop-color="var(--color-desktop)" stop-opacity={1.0} />
+                <stop offset="95%" stop-color="var(--color-desktop)" stop-opacity={0.1} />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stop-color="var(--color-mobile)" stop-opacity={0.8} />
+                <stop offset="95%" stop-color="var(--color-mobile)" stop-opacity={0.1} />
+              </linearGradient>
+            </defs>
+            <ChartClipPath
+              initialWidth={0}
+              motion={{
+                width: { type: "tween", duration: 1000, easing: cubicInOut },
+              }}
+            >
+              {#each series as s, i (s.key)}
+                <Area
+                  {...getAreaProps(s, i)}
+                  fill={s.key === "desktop" ? "url(#fillDesktop)" : "url(#fillMobile)"}
+                />
+              {/each}
+            </ChartClipPath>
+          {/snippet}
+          {#snippet tooltip()}
+            <Chart.Tooltip
+              labelFormatter={(v: Date) => {
+                return v.toLocaleDateString("en-US", {
+                  month: "long",
+                });
+              }}
+              indicator="line"
+            />
+          {/snippet}
+        </AreaChart>
+      </ChartContainer>
+
+      <Dialog.Footer></Dialog.Footer>
+    </Dialog.Content>
+  </Dialog.Root>
 </div>

src/routes/(app)/[slug]/stats/+server.ts

@@ -0,0 +1,13 @@
+import { db } from "$lib/server/db";
+import * as table from "$lib/server/db/schema"
+
+export const GET = async () => {
+  const data = await db.select({ sensor: table.sensorData.sensor }).from(table.sensorData);
+  console.log(data);
+
+  return new Response(JSON.stringify(data), {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}

src/routes/mqtt/+server.js

@@ -1,6 +1,6 @@
 // src/routes/mqtt/+server.js
 import { connectedDevices, deviceSensorData, getCurrentDevices } from "$lib/server/mqtt-devices.js";
-import * as mqtt from "mqtt";
+import mqtt from "mqtt";
 import { writable } from "svelte/store";
 
 // A Svelte store to hold the latest MQTT message.