graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add hover tooltips to weather charts showing values at cursor position

Browse source
This commit is contained in:
Graham McIntire 2026-03-22 16:37:20 -05:00
parent 8333ee3219
commit 22ccec7d06
No known key found for this signature in database
1 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/js/features/weather_charts.ts
View file

@ -135,6 +135,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(255, 0, 0, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
{
label: labels.dew_label || "Dew Point (°F)",
@ -143,6 +144,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(0, 0, 255, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
],
title: (labels) => labels.temp_title || "Temperature & Dew Point (°F)",
@ -158,6 +160,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(0, 255, 0, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
],
title: (labels) => labels.hum_title || "Humidity (%)",
@ -174,6 +177,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(128, 0, 128, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
],
title: (labels) => labels.prs_title || "Barometric Pressure (mb)",
@ -189,6 +193,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(255, 165, 0, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
{
label: labels.gst_label || "Wind Gust (mph)",
@ -197,6 +202,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(255, 0, 0, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
],
title: (labels) => labels.wnd_title || "Wind Speed & Gust (mph)",
@ -235,6 +241,7 @@ const chartConfigs: Record<string, ChartConfig> = {
backgroundColor: "rgba(255, 215, 0, 0.1)",
tension: 0.1,
pointRadius: 0,
pointHoverRadius: 4,
},
],
title: (labels) => labels.lum_title || "Solar Radiation (W/m²)",
@ -295,6 +302,10 @@ function createChartHook(configKey: string): Hook {
adapters: { date: { locale: "en-GB" } },
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: "index",
intersect: false,
},
plugins: {
title: {
display: true,
@ -302,6 +313,19 @@ function createChartHook(configKey: string): Hook {
color: colors.text,
},
legend: { labels: { color: colors.text } },
tooltip: {
enabled: true,
mode: "index",
intersect: false,
callbacks: {
label: (context: any) => {
const label = context.dataset.label || "";
const value = context.parsed.y;
if (value === null || value === undefined) return "";
return `${label}: ${Number.isInteger(value) ? value : value.toFixed(1)}`;
},
},
},
},
scales: {
x: {