Skip to content

Commit fe30681

Browse files
committed
updates
1 parent 482166b commit fe30681

File tree

5 files changed

+26
-29
lines changed

5 files changed

+26
-29
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Ideally, the data could be served directly from GitHub Pages, but I've found tha
1010

1111
### Dev
1212

13-
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.
13+
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.
1414

1515
### Deployment
1616

src/lib/components/ChartDetail.svelte

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
{#if (dataByStation && timeslice)}
2727
<div
2828
class="
29-
flex flex-col w-full p-2 gap-2
29+
flex flex-col w-full p-2 gap-1
3030
bg-gray-100 rounded-lg shadow-sm
3131
"
3232
>
33-
<span class="mb-1 text-sm">
33+
<span class="mb-1 text-xs">
3434
{timeslice.toLocaleString("en-US", {
3535
weekday: 'long',
3636
year: 'numeric',
@@ -44,14 +44,14 @@
4444
{#each stations as s}
4545
{#if dataByStation[s]}
4646
<div
47-
class="flex flex-row px-2 gap-2 w-full"
47+
class="flex flex-row px-2 gap-1 w-full"
4848
>
49-
<h4 class="w-12 font-semibold text-sm">
49+
<h4 class="w-12 font-semibold text-xs">
5050
{s}
5151
</h4>
52-
<div class="flex flex-col gap-2 w-full">
52+
<div class="flex flex-col gap-1 w-full">
5353
{#each variables as v}
54-
<div class="flex flex-row px-2 text-sm gap-2">
54+
<div class="flex flex-row px-2 text-xs gap-2">
5555
<span class="w-24 text-end">
5656
{dataByStation[s][v.variable]} {v.units}
5757
</span>

src/lib/components/StationChart.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
});
112112
chart = Plot.plot({
113113
width: chartWidth,
114-
height: 384,
114+
height: 300,
115115
marginRight: 30 * axesScales.length,
116116
x: { label: '', domain: [start, end], grid: true, labelArrow: 'none', type: 'time', },
117117
y: { axis: 'left', label: selectedVariables[0].units, grid: true, tickFormat: d3.format('~g') },
@@ -127,7 +127,7 @@
127127
else if (selectedStations.length > 1) {
128128
chart = Plot.plot({
129129
width: chartWidth,
130-
height: 384,
130+
height: 300,
131131
marginLeft: 50,
132132
x: { label: '', domain: [start, end], grid: true, labelArrow: 'none', type: 'time', },
133133
y: { label: selectedVariables[0].units, grid: true, tickFormat: d3.format('~g') },

src/lib/components/VariablePicker.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<h3 class="text-xs font-semibold text-gray-700 py-2 w-36 text-end">
2121
PLOT VARIABLE{multi ? 'S' : ''}:
2222
</h3>
23-
<div class="md:min-w-72 max-w-[30rem]">
23+
<div class="md:min-w-72 max-w-[30rem] text-xs">
2424
{#if multi}
2525
<MultiSelect
2626
bind:selected={multiVariables}

src/routes/+page.svelte

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</script>
5555

5656
<div
57-
class="w-full h-auto min-h-screen flex flex-col items-stretch"
57+
class="w-full h-full min-h-[32rem] flex flex-col items-stretch"
5858
>
5959
{#if SHOW_DEMO_MESSAGE}
6060
<div
@@ -77,23 +77,7 @@
7777
toggleStation={toggleStation}
7878
/>
7979
</div>
80-
<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">
81-
<h2 class="text-xl font-medium">
82-
BSEC Weather Station Dashboard
83-
</h2>
84-
<div
85-
class="
86-
h-4 flex flex-row items-center text-sm
87-
text-red-600 has-only:text-red-600/0
88-
transition-colors has-only:duration-[2s] has-only:delay-2000 ease-out
89-
"
90-
>
91-
{#if errorMessage}
92-
<span class="">
93-
{errorMessage}
94-
</span>
95-
{/if}
96-
</div>
80+
<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">
9781
{#if selectedStations.length === 0}
9882
<div class="">
9983
<span class="text-base">
@@ -113,7 +97,7 @@
11397
<div
11498
class="w-3 h-3 rounded-full border border-black {COLOR_CLASSES[selectedStationsColorIndex[i]]}"
11599
></div>
116-
<span class="text-black font-medium">
100+
<span class="text-black text-xs font-medium">
117101
{s}
118102
</span>
119103
<button
@@ -138,6 +122,19 @@
138122
bind:multiVariables
139123
bind:singleVariable
140124
/>
125+
<div
126+
class="
127+
h-4 flex flex-row items-center text-sm
128+
text-red-600 has-only:text-red-600/0
129+
transition-colors has-only:duration-[2s] has-only:delay-2000 ease-out
130+
"
131+
>
132+
{#if errorMessage}
133+
<span class="">
134+
{errorMessage}
135+
</span>
136+
{/if}
137+
</div>
141138
<StationChart
142139
availableVariables={AVAILABLE_VARIABLES}
143140
{startDate}

0 commit comments

Comments
 (0)