updates

Author: thurber

README.md

@@ -10,7 +10,7 @@ Ideally, the data could be served directly from GitHub Pages, but I've found tha
 
 ### Dev
 
-Run a local dev server with `npm run dev`. The dev server will serve the data from the local `static/data/` directory; the production code will serve from the GCP bucket.
+Install dependencies with `npm i`. Run a local dev server with `npm run dev`. The dev server will serve the data from the local `static/data/` directory; the production code will serve from the GCP bucket.
 
 ### Deployment
 

src/lib/components/ChartDetail.svelte

@@ -26,11 +26,11 @@
 {#if (dataByStation && timeslice)}
     <div
         class="
-            flex flex-col w-full p-2 gap-2
+            flex flex-col w-full p-2 gap-1
             bg-gray-100 rounded-lg shadow-sm
         "
     >
-        <span class="mb-1 text-sm">
+        <span class="mb-1 text-xs">
             {timeslice.toLocaleString("en-US", {
                 weekday: 'long',
                 year: 'numeric',
@@ -44,14 +44,14 @@
         {#each stations as s}
             {#if dataByStation[s]}
                 <div
-                    class="flex flex-row px-2 gap-2 w-full"
+                    class="flex flex-row px-2 gap-1 w-full"
                 >
-                    <h4 class="w-12 font-semibold text-sm">
+                    <h4 class="w-12 font-semibold text-xs">
                         {s}
                     </h4>
-                    <div class="flex flex-col gap-2 w-full">
+                    <div class="flex flex-col gap-1 w-full">
                         {#each variables as v}
-                            <div class="flex flex-row px-2 text-sm gap-2">
+                            <div class="flex flex-row px-2 text-xs gap-2">
                                 <span class="w-24 text-end">
                                     {dataByStation[s][v.variable]} {v.units}
                                 </span>

src/lib/components/StationChart.svelte

@@ -111,7 +111,7 @@
                 });
                 chart = Plot.plot({
                     width: chartWidth,
-                    height: 384,
+                    height: 300,
                     marginRight: 30 * axesScales.length,
                     x: { label: '', domain: [start, end], grid: true, labelArrow: 'none', type: 'time', },
                     y: { axis: 'left', label: selectedVariables[0].units, grid: true, tickFormat: d3.format('~g') },
@@ -127,7 +127,7 @@
             else if (selectedStations.length > 1) {
                 chart = Plot.plot({
                     width: chartWidth,
-                    height: 384,
+                    height: 300,
                     marginLeft: 50,
                     x: { label: '', domain: [start, end], grid: true, labelArrow: 'none', type: 'time', },
                     y: { label: selectedVariables[0].units, grid: true, tickFormat: d3.format('~g') },

src/lib/components/VariablePicker.svelte

@@ -20,7 +20,7 @@
         <h3 class="text-xs font-semibold text-gray-700 py-2 w-36 text-end">
             PLOT VARIABLE{multi ? 'S' : ''}:
         </h3>
-        <div class="md:min-w-72 max-w-[30rem]">
+        <div class="md:min-w-72 max-w-[30rem] text-xs">
             {#if multi}
                 <MultiSelect
                     bind:selected={multiVariables}

src/routes/+page.svelte

@@ -54,7 +54,7 @@
 </script>
 
 <div
-    class="w-full h-auto min-h-screen flex flex-col items-stretch"
+    class="w-full h-full min-h-[32rem] flex flex-col items-stretch"
 >
     {#if SHOW_DEMO_MESSAGE}
         <div
@@ -77,23 +77,7 @@
                 toggleStation={toggleStation}
             />
         </div>
-        <div class="lg:max-w-[50%] w-full min-w-96 h-auto lg:min-h-[calc(100vh-2rem)] lg:shadow z-10 px-3 py-4 gap-2 flex flex-col items-center">
-            <h2 class="text-xl font-medium">
-                BSEC Weather Station Dashboard
-            </h2>
-            <div
-                class="
-                    h-4 flex flex-row items-center text-sm 
-                    text-red-600 has-only:text-red-600/0
-                    transition-colors has-only:duration-[2s] has-only:delay-2000 ease-out
-                "
-            >
-                {#if errorMessage}
-                    <span class="">
-                        {errorMessage}
-                    </span>
-                {/if}
-            </div>
+        <div class="lg:max-w-[50%] w-full min-w-96 h-auto lg:min-h-[calc(100vh-2rem)] lg:shadow z-10 px-2 py-2 gap-2 flex flex-col items-center">
             {#if selectedStations.length === 0}
                 <div class="">
                     <span class="text-base">
@@ -113,7 +97,7 @@
                                 <div
                                     class="w-3 h-3 rounded-full border border-black {COLOR_CLASSES[selectedStationsColorIndex[i]]}"
                                 ></div>
-                                <span class="text-black font-medium">
+                                <span class="text-black text-xs font-medium">
                                     {s}
                                 </span>
                                 <button
@@ -138,6 +122,19 @@
                     bind:multiVariables
                     bind:singleVariable
                 />
+                <div
+                    class="
+                        h-4 flex flex-row items-center text-sm 
+                        text-red-600 has-only:text-red-600/0
+                        transition-colors has-only:duration-[2s] has-only:delay-2000 ease-out
+                    "
+                >
+                    {#if errorMessage}
+                        <span class="">
+                            {errorMessage}
+                        </span>
+                    {/if}
+                </div>
                 <StationChart
                     availableVariables={AVAILABLE_VARIABLES}
                     {startDate}