Skip to content

Commit 8b0e54d

Browse files
thurberthurber
committed
updates
1 parent 601baad commit 8b0e54d

File tree

88 files changed

+538
-436
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+538
-436
lines changed

‎package-lock.json‎

Lines changed: 373 additions & 376 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/colors.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// colorblind friendly
2+
const COLORS = [
3+
'#4053d3',
4+
'#ddb310',
5+
'#bf1d14',
6+
'#00beff',
7+
'#fb49b0',
8+
'#00b25d',
9+
];
10+
11+
const COLOR_CLASSES = [
12+
'bg-[#4053d3] hover:bg-[#4053d3]/75',
13+
'bg-[#ddb310] hover:bg-[#ddb310]/75',
14+
'bg-[#bf1d14] hover:bg-[#bf1d14]/75',
15+
'bg-[#00beff] hover:bg-[#00beff]/75',
16+
'bg-[#fb49b0] hover:bg-[#fb49b0]/75',
17+
'bg-[#00b25d] hover:bg-[#00b25d]/75',
18+
];
19+
20+
21+
const STATION_TYPE_COLORS = {
22+
'AWS': 'bg-[#44AA99] hover:bg-[#88CCEE]',
23+
'OTT': 'bg-[#AA4499] hover:bg-[#CC6677]',
24+
};
25+
26+
export {COLORS, COLOR_CLASSES, STATION_TYPE_COLORS};

‎src/lib/components/PopRock.svelte‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script>
2+
3+
let {
4+
properties,
5+
} = $props();
6+
7+
const keyToLabel = {
8+
'station_id' : 'Station ID',
9+
'station_type' : 'Type',
10+
'site_name' : 'Site Name',
11+
}
12+
13+
</script>
14+
15+
16+
<div class="flex flex-col gap-2 w-40">
17+
{#each Object.keys(keyToLabel) as k}
18+
{#if properties?.[k]}
19+
<div class="flex flex-col items-start">
20+
<p class="text-[0.67rem] whitespace-nowrap uppercase leading-none text-gray-300">
21+
{keyToLabel[k]}
22+
</p>
23+
<p class="text-base leading-tight">
24+
{properties?.[k]}
25+
</p>
26+
</div>
27+
{/if}
28+
{/each}
29+
</div>

‎src/lib/components/StationChart.svelte‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
1111
import { base } from '$app/paths';
1212
import ChartDetail from "./ChartDetail.svelte";
13+
import { COLORS } from "$lib/colors";
1314
1415
const interval = d3.utcMinute.every(5);
1516
@@ -60,8 +61,8 @@
6061
const d = [];
6162
selectedStations.forEach((station) => {
6263
d.push(
63-
// asyncBufferFromUrl({ url: `${base}/data/${station}_5min_data.parquet` }).then(file => (
64-
asyncBufferFromUrl({ url: `https://storage.googleapis.com/bsecdata/${station}_5min_data.parquet` }).then(file => (
64+
asyncBufferFromUrl({ url: `${base}/data/${station}_5min_data.parquet` }).then(file => (
65+
// asyncBufferFromUrl({ url: `https://storage.googleapis.com/bsecdata/${station}_5min_data.parquet` }).then(file => (
6566
parquetQuery({
6667
file,
6768
compressors: { SNAPPY: snappyUncompressor() },
@@ -85,7 +86,7 @@
8586
});
8687
8788
$effect(() => {
88-
if (data && (selectedVariables.length > 0) && chartWidth) {
89+
if (data && (data.length > 0) && (selectedVariables.length > 0) && chartWidth) {
8990
if (selectedStations.length === 1) {
9091
// need a y axis for each unit type in variables
9192
const uniqueUnits = [...new Set(selectedVariables.map(v => v.units))];
@@ -123,7 +124,11 @@
123124
marginLeft: 50,
124125
x: { label: '', domain: [start, end], grid: true, labelArrow: 'none', type: 'time', },
125126
y: { label: selectedVariables[0].units, grid: true, tickFormat: d3.format('~g') },
126-
color: { legend: true },
127+
color: {
128+
legend: true,
129+
domain: selectedStations,
130+
range: COLORS,
131+
},
127132
marks: [
128133
Plot.lineY(data, { x: 'obsTimeUtc', y: selectedVariables[0].variable, z: 'stationID', stroke: 'stationID', interval }),
129134
Plot.ruleX(data, Plot.pointerX({ x: 'obsTimeUtc', py: selectedVariables[0].variable, stroke: '#911364' })),
@@ -156,12 +161,19 @@
156161
<Icon class="text-blue-600 mt-24" icon="line-md:downloading-loop" width=200 height=200 />
157162
{/if}
158163
<div bind:clientWidth={chartWidth} bind:this={chartDiv} role="img" class="w-full"></div>
159-
{#if data}
164+
{#if data && (data.length > 0)}
160165
<ChartDetail
161166
data={data}
162167
stations={selectedStations}
163168
timeslice={selectedTime}
164169
variables={selectedVariables}
165170
/>
166171
{/if}
172+
{#if data && (data.length === 0)}
173+
<span
174+
class=""
175+
>
176+
No data available for the selected station(s) and date range.
177+
</span>
178+
{/if}
167179
</div>

‎src/lib/components/StationMap.svelte‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
22
import { base } from '$app/paths';
33
import { MapLibre, Popup, Marker } from 'svelte-maplibre';
4+
import PopRock from './PopRock.svelte';
5+
import { COLOR_CLASSES, STATION_TYPE_COLORS } from '$lib/colors';
46
57
let {
68
selectedStations = $bindable([]),
@@ -18,7 +20,7 @@
1820
</script>
1921

2022
<div
21-
class="w-full h-full min-h-96"
23+
class="w-full h-full min-h-96 relative flex flex-col items-center"
2224
>
2325
<MapLibre
2426
center={[-76.6, 39.3]}
@@ -33,18 +35,32 @@
3335
id={properties.station_id}
3436
lngLat={geometry?.coordinates}
3537
class="
36-
w-3 h-3 rounded-full cursor-pointer border
38+
rounded-full cursor-pointer border border-black
3739
{selectedStations.includes(properties.station_id)
38-
? 'bg-amber-600/50 border-amber-600 hover:bg-red-900/50 hover:border-red-900'
39-
: 'bg-blue-800/50 border-blue-800 hover:bg-green-500/50 hover:border-green-500'
40+
? `w-5 h-5 ${COLOR_CLASSES[selectedStations.indexOf(properties.station_id)]}`
41+
: `w-3 h-3 ${STATION_TYPE_COLORS[properties.station_type]}`
4042
}
4143
"
4244
onclick={() => { toggleStation(properties.station_id) }}
4345
>
4446
<Popup openOn='hover'>
45-
<span>{properties.station_id}</span>
47+
<PopRock properties={properties} />
4648
</Popup>
4749
</Marker>
4850
{/each}
4951
</MapLibre>
52+
<div
53+
class="
54+
absolute bottom-12 pointer-events-none
55+
bg-white border-gray-300 border p-2 flex flex-row items-center gap-2
56+
"
57+
>
58+
<span>Station Type:</span>
59+
{#each Object.keys(STATION_TYPE_COLORS) as t}
60+
<div class="flex flex-row items-center gap-1">
61+
<div class="w-3 h-3 rounded-full border border-black {STATION_TYPE_COLORS[t]}"></div>
62+
<span>{t}</span>
63+
</div>
64+
{/each}
65+
</div>
5066
</div>

‎src/lib/components/TimeRangePicker.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
todayBtn={false}
2525
bind:value={startDate}
2626
startDate="2023-01-01"
27-
endDate="2024-12-31"
27+
endDate="2025-12-31"
2828
mode="date"
2929
inputClasses="w-24 text-center cursor-pointer"
3030
/>
@@ -44,7 +44,7 @@
4444
todayBtn={false}
4545
bind:value={endDate}
4646
startDate="2023-01-01"
47-
endDate="2024-12-31"
47+
endDate="2025-12-31"
4848
mode="date"
4949
inputClasses="w-24 text-center cursor-pointer"
5050
/>

‎src/routes/+page.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@
88
import VariablePicker from "$lib/components/VariablePicker.svelte";
99
1010
import AVAILABLE_VARIABLES from "$lib/dataVariables";
11+
import { COLOR_CLASSES } from "$lib/colors";
1112
1213
const MAX_SELECTED = 6;
1314
1415
let selectedStations = $state([]);
1516
16-
let startDate = $state('2024-10-01');
17-
let endDate = $state('2024-10-01');
17+
let startDate = $state('2025-03-01');
18+
let endDate = $state('2025-03-01');
1819
1920
let multiVariables = $state(['Temperature - Average', 'Precipitation - Total', 'Pressure - Maximum']);
2021
let singleVariable = $state(['Temperature - Average']);
@@ -97,8 +98,11 @@
9798
SELECTED STATIONS:
9899
</h3>
99100
<div class="flex-1 flex flex-row flex-wrap gap-1">
100-
{#each selectedStations as s}
101+
{#each selectedStations as s, i}
101102
<div class="px-2 py-1 rounded-lg bg-gray-200 shadow-sm flex flex-row items-center gap-1">
103+
<div
104+
class="w-3 h-3 rounded-full border border-black {COLOR_CLASSES[i]}"
105+
></div>
102106
<span class="text-black font-medium">
103107
{s}
104108
</span>

0 commit comments

Comments
 (0)