+ {@render rowHeader('wi-strong-wind', windUnit, m.var_wind_short())}
{#each cellData as cell (cell.idx)}
{@const wind = hourly.windspeed_10m[cell.idx]}
{@const windDir = hourly.winddirection_10m[cell.idx]}
- |
+ |
{#if windDir != null && !isNaN(windDir)}
{:else if rowKey === 'gusts' && showRow('gusts')}
-
- {@render rowHeader('wi-strong-wind', windUnit, 'Gusts')}
+
+ {@render rowHeader('wi-strong-wind', windUnit, m.var_gusts_short())}
{#each cellData as cell (cell.idx)}
{@const v = hourly.wind_gusts_10m?.[cell.idx]}
|
{:else if rowKey === 'humidity' && showRow('humidity')}
- |
- {@render rowHeader('wi-humidity', '%', 'Humidity')}
+
+ {@render rowHeader('wi-humidity', '%', m.var_humidity())}
{#each cellData as cell (cell.idx)}
{@const hum = hourly.relative_humidity_2m[cell.idx]}
- |
+ |
{formatValue(hum)}
|
{/each}
{:else if rowKey === 'clouds' && showRow('clouds')}
-
- {@render rowHeader('wi-cloud', '%', 'Clouds')}
+
+ {@render rowHeader('wi-cloud', '%', m.var_cloud_short())}
{#each cellData as cell (cell.idx)}
{@const cloud = hourly.cloud_cover[cell.idx]}
|
{formatValue(cloud)}
|
@@ -713,11 +768,12 @@
{:else if rowKey === 'pressure' && showRow('pressure')}
-
- {@render rowHeader('wi-barometer', 'hPa', 'Pressure')}
+
+ {@render rowHeader('wi-barometer', 'hPa', m.var_pressure_short())}
{#each cellData as cell (cell.idx)}
{@const v = hourly.pressure_msl?.[cell.idx]}
|
@@ -727,11 +783,12 @@
|
{:else if rowKey === 'uv' && showRow('uv')}
-
- {@render rowHeader('wi-day-sunny', 'UV', 'UV')}
+
+ {@render rowHeader('wi-day-sunny', 'UV', m.var_uv_short())}
{#each cellData as cell (cell.idx)}
{@const v = hourly.uv_index?.[cell.idx]}
|
@@ -741,23 +798,27 @@
|
{:else if rowKey === 'visibility' && showRow('visibility')}
-
- {@render rowHeader('wi-fog', 'km', 'Visibility')}
+
+ {@render rowHeader('wi-fog', 'km', m.var_visibility_short())}
{#each cellData as cell (cell.idx)}
{@const v = hourly.visibility?.[cell.idx]}
- |
+ |
{v != null && !isNaN(v) ? (v / 1000).toFixed(0) : '-'}
|
{/each}
{:else if rowKey === 'precipitation' && showRow('precipitation')}
-
- {@render rowHeader('wi-raindrop', precipUnit, 'Precip')}
+
+ {@render rowHeader('wi-raindrop', precipUnit, m.var_precipitation_short())}
{#each cellData as cell (cell.idx)}
{@const precip = hourly.precipitation[cell.idx]}
{@const prob = hourly.precipitation_probability[cell.idx]}
|
{:else if rowKey === 'snowfall' && showRow('snowfall')}
- |
- {@render rowHeader('wi-snow', 'cm', 'Snow')}
+
+ {@render rowHeader('wi-snow', 'cm', m.var_snowfall_short())}
{#each cellData as cell (cell.idx)}
{@const v = hourly.snowfall?.[cell.idx]}
- |
+ |
{v != null && !isNaN(v) && v > 0 ? v.toFixed(1) : '-'}
|
{/each}
@@ -853,6 +917,24 @@
overflow: hidden;
}
+ /* A row the selected model carries no data for: legible, clearly inactive,
+ and not competing with the rows that do have values. */
+ .row-empty {
+ opacity: 0.4;
+ }
+
+ /* An individual cell past the point where the model stopped: drop the
+ day/night tinting so the gap reads as "no data" rather than clear sky. */
+ .cell-empty {
+ background: none !important;
+ }
+
+ /* A whole column the model never reached - dimmed end to end, hour label
+ included, so the point where the forecast runs out is obvious. */
+ .col-empty {
+ opacity: 0.35;
+ }
+
/* ── Precipitation ──────────────────────────────────────────── */
.precip-cell {
position: relative;
diff --git a/src/routes/weather/week/[location]/variables.ts b/src/routes/weather/week/[location]/variables.ts
index 7dbbbbb..9c16e08 100644
--- a/src/routes/weather/week/[location]/variables.ts
+++ b/src/routes/weather/week/[location]/variables.ts
@@ -6,6 +6,8 @@
*/
import { defaultVariablePrefs } from '$lib/stores/settings';
+import * as m from '$lib/paraglide/messages';
+
import { getColor } from '../../utils/colors';
import {
type WeatherUnits,
@@ -69,8 +71,8 @@ export interface ChartVariableDef {
export const CHART_VARIABLES: ChartVariableDef[] = [
{
key: 'temperature',
- label: 'Temperature',
- short: 'Temp',
+ label: m.var_temperature(),
+ short: m.var_temperature_short(),
field: 'temperature_2m',
type: 'line',
kind: 'temp',
@@ -83,8 +85,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'weather_icons',
- label: 'Weather icons',
- short: 'Icons',
+ label: m.var_icons(),
+ short: m.var_icons_short(),
field: 'weather_code',
type: 'line',
kind: 'temp',
@@ -94,8 +96,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'apparent_temperature',
- label: 'Apparent Temp',
- short: 'Feels',
+ label: m.var_apparent(),
+ short: m.var_apparent_short(),
field: 'apparent_temperature',
type: 'line',
kind: 'temp',
@@ -105,8 +107,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'dew_point',
- label: 'Dew Point',
- short: 'Dew',
+ label: m.var_dew_point(),
+ short: m.var_dew_point_short(),
field: 'dew_point_2m',
type: 'line',
kind: 'temp',
@@ -115,8 +117,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'cloud_cover',
- label: 'Cloud Cover',
- short: 'Cloud',
+ label: m.var_cloud(),
+ short: m.var_cloud_short(),
field: 'cloud_cover',
type: 'line',
kind: 'percent',
@@ -128,8 +130,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
// the way the layers actually look from below.
{
key: 'cloud_cover_low',
- label: 'Cloud Cover Low',
- short: 'Low',
+ label: m.var_cloud_low(),
+ short: m.var_cloud_low_short(),
field: 'cloud_cover_low',
type: 'line',
kind: 'percent',
@@ -139,8 +141,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'cloud_cover_mid',
- label: 'Cloud Cover Mid',
- short: 'Mid',
+ label: m.var_cloud_mid(),
+ short: m.var_cloud_mid_short(),
field: 'cloud_cover_mid',
type: 'line',
kind: 'percent',
@@ -150,8 +152,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'cloud_cover_high',
- label: 'Cloud Cover High',
- short: 'High',
+ label: m.var_cloud_high(),
+ short: m.var_cloud_high_short(),
field: 'cloud_cover_high',
type: 'line',
kind: 'percent',
@@ -161,8 +163,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'precipitation',
- label: 'Precipitation',
- short: 'Precip',
+ label: m.var_precipitation(),
+ short: m.var_precipitation_short(),
field: 'precipitation',
type: 'bar',
kind: 'precip',
@@ -170,8 +172,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'precipitation_probability',
- label: 'Precip. Probability',
- short: 'PoP',
+ label: m.var_pop(),
+ short: m.var_pop_short(),
field: 'precipitation_probability',
type: 'line',
kind: 'percent',
@@ -181,8 +183,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'rain',
- label: 'Rain',
- short: 'Rain',
+ label: m.var_rain(),
+ short: m.var_rain_short(),
field: 'rain',
type: 'bar',
kind: 'precip',
@@ -190,8 +192,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'showers',
- label: 'Showers',
- short: 'Shwr',
+ label: m.var_showers(),
+ short: m.var_showers_short(),
field: 'showers',
type: 'bar',
kind: 'precip',
@@ -199,8 +201,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'snowfall',
- label: 'Snowfall',
- short: 'Snow',
+ label: m.var_snowfall(),
+ short: m.var_snowfall_short(),
field: 'snowfall',
type: 'bar',
kind: 'snow',
@@ -208,8 +210,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'wind',
- label: 'Wind Speed',
- short: 'Wind',
+ label: m.var_wind(),
+ short: m.var_wind_short(),
field: 'windspeed_10m',
api: 'wind_speed_10m',
type: 'line',
@@ -221,8 +223,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'wind_direction',
- label: 'Wind direction',
- short: 'Dir',
+ label: m.var_wind_dir(),
+ short: m.var_wind_dir_short(),
field: 'winddirection_10m',
api: 'wind_direction_10m',
type: 'line',
@@ -233,8 +235,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'wind_gusts',
- label: 'Wind Gusts',
- short: 'Gusts',
+ label: m.var_gusts(),
+ short: m.var_gusts_short(),
field: 'wind_gusts_10m',
type: 'line',
kind: 'wind',
@@ -244,8 +246,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'humidity',
- label: 'Humidity',
- short: 'RH',
+ label: m.var_humidity(),
+ short: m.var_humidity_short(),
field: 'relative_humidity_2m',
type: 'line',
kind: 'percent',
@@ -255,8 +257,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'pressure_msl',
- label: 'Pressure (MSL)',
- short: 'MSLP',
+ label: m.var_pressure(),
+ short: m.var_pressure_short(),
field: 'pressure_msl',
type: 'line',
kind: 'pressure',
@@ -265,8 +267,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'surface_pressure',
- label: 'Surface Pressure',
- short: 'Psfc',
+ label: m.var_surface_pressure(),
+ short: m.var_surface_pressure_short(),
field: 'surface_pressure',
type: 'line',
kind: 'pressure',
@@ -276,8 +278,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'uv_index',
- label: 'UV Index',
- short: 'UV',
+ label: m.var_uv(),
+ short: m.var_uv_short(),
field: 'uv_index',
type: 'line',
kind: 'uv',
@@ -288,8 +290,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'visibility',
- label: 'Visibility',
- short: 'Vis',
+ label: m.var_visibility(),
+ short: m.var_visibility_short(),
field: 'visibility',
type: 'line',
kind: 'distance',
@@ -299,8 +301,8 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
},
{
key: 'cape',
- label: 'CAPE',
- short: 'CAPE',
+ label: m.var_cape(),
+ short: m.var_cape_short(),
field: 'cape',
type: 'line',
kind: 'energy',
|