merge settings and use same style for dropdowns

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

@@ -129,11 +129,6 @@
   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([]);
@@ -177,6 +172,20 @@
 
   let selectedSensor = $state("temperature");
 
+  const sensorLabel = $derived.by(() => {
+    switch (selectedSensor) {
+      case "altitude":
+        return "Altitude (m)";
+      case "humidity":
+        return "Humidity (%)";
+      case "pressure":
+        return "Pressure (kPa)";
+      case "temperature":
+      default:
+        return "Temperature (°C)";
+    }
+  });
+
   const sensorOptions = [
     {
       key: "temperature",
@@ -203,6 +212,7 @@
   const selectedSensorConfig = $derived(
     sensorOptions.find((s) => s.key === selectedSensor) || sensorOptions[0],
   );
+  const device = "macaddress";
 
   let isLoading = $state(false);
   let hasError = $state(false);
@@ -243,14 +253,31 @@
       }
     }
   });
+
+  function exportCSV(): void {
+    let csv = "data:text/csv;charset=utf-8,";
+
+    const headers = "time," + selectedSensorConfig.key;
+    csv += headers + "\n";
+
+    chartData.forEach((obj: any) => {
+      csv += obj.date.toISOString() + "," + obj[selectedSensorConfig.key] + "\n";
+    });
+
+    const encodedUri = encodeURI(csv);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", device + "_" + selectedSensorConfig.key + "_data.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
 </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}
-    <!-- Display saved floor plan configuration -->
     <div class="relative mx-auto max-w-4xl">
       {#if data.floorConfig.image}
         <div class="relative overflow-hidden rounded-lg border bg-gray-50">
@@ -327,7 +354,6 @@
       {/if}
     </div>
   {:else}
-    <!-- Fallback to canvas drawing -->
     <div class="flex flex-col items-center">
       <span class="mb-4">{mqttMessage}</span>
       <canvas bind:this={canvasEl} class="border" width="800" height="600"></canvas>
@@ -344,27 +370,17 @@
       </Dialog.Header>
 
       <div class="flex items-center gap-2">
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger class="rounded-lg">
-            {#snippet child({ props })}
-              <Button variant="outline" size="sm" {...props}>
-                <Columns2 />
-                <span class="hidden lg:inline">{selectedSensorConfig.label}</span>
-                <span class="lg:hidden">{selectedSensorConfig.label}</span>
-                <ChevronDownIcon />
-              </Button>
-            {/snippet}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="end" class="w-56">
-            <DropdownMenu.RadioGroup bind:value={selectedSensor}>
-              {#each sensorOptions as sensor}
-                <DropdownMenu.RadioItem value={sensor.key} class="capitalize">
-                  {sensor.label}
-                </DropdownMenu.RadioItem>
-              {/each}
-            </DropdownMenu.RadioGroup>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
+        <Select.Root type="single" bind:value={selectedSensor}>
+          <Select.Trigger class="w-[160px] rounded-lg" aria-label="Select a value">
+            {sensorLabel}
+          </Select.Trigger>
+          <Select.Content class="rounded-xl">
+            <Select.Item value="altitude" class="rounded-lg">Altitude (m)</Select.Item>
+            <Select.Item value="humidity" class="rounded-lg">Humidity (%)</Select.Item>
+            <Select.Item value="pressure" class="rounded-lg">Pressure (kPa)</Select.Item>
+            <Select.Item value="temperature" class="rounded-lg">Temperature (°C)</Select.Item>
+          </Select.Content>
+        </Select.Root>
 
         <Select.Root type="single" bind:value={timeRange}>
           <Select.Trigger class="w-[160px] rounded-lg" aria-label="Select a value">
@@ -377,7 +393,7 @@
           </Select.Content>
         </Select.Root>
 
-        <Button variant="outline" size="sm">
+        <Button variant="outline" size="sm" onclick={() => exportCSV()}>
           <DownloadIcon />
           <span class="hidden lg:inline">Export Data</span>
         </Button>