more typescript and update weather charts in real time
This commit is contained in:
parent
ed545467c5
commit
8c06f1f8fa
8 changed files with 388 additions and 760 deletions
754
assets/js/app.js
754
assets/js/app.js
|
|
@ -75,757 +75,9 @@ let Hooks = {};
|
||||||
Hooks.APRSMap = MapAPRSMap;
|
Hooks.APRSMap = MapAPRSMap;
|
||||||
Hooks.ResponsiveSlideoverHook = ResponsiveSlideoverHook;
|
Hooks.ResponsiveSlideoverHook = ResponsiveSlideoverHook;
|
||||||
|
|
||||||
Hooks.ChartJSTempChart = {
|
// Register weather chart hooks from TypeScript
|
||||||
mounted() {
|
import { WeatherChartHooks } from "./features/weather_charts";
|
||||||
console.log('Temperature chart mounted');
|
Object.assign(Hooks, WeatherChartHooks);
|
||||||
|
|
||||||
// Initialize global chart instances map if it doesn't exist
|
|
||||||
if (!window.chartInstances) {
|
|
||||||
window.chartInstances = new Map();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Register this chart instance
|
|
||||||
window.chartInstances.set(this.el.id, this);
|
|
||||||
|
|
||||||
this.renderChart();
|
|
||||||
// Listen for theme changes
|
|
||||||
this.themeChangeHandler = () => {
|
|
||||||
console.log('Temperature chart received themeChanged event');
|
|
||||||
if (this.chart) {
|
|
||||||
console.log('Re-rendering temperature chart');
|
|
||||||
this.renderChart();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
},
|
|
||||||
updated() { this.renderChart(); },
|
|
||||||
destroyed() {
|
|
||||||
// Clean up event listener
|
|
||||||
if (this.themeChangeHandler) {
|
|
||||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
}
|
|
||||||
// Remove from global chart instances
|
|
||||||
if (window.chartInstances) {
|
|
||||||
window.chartInstances.delete(this.el.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderChart() {
|
|
||||||
console.log('Temperature chart renderChart called');
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
|
||||||
const times = data.map(d => new Date(d.timestamp));
|
|
||||||
const temps = data.map(d => d.temperature);
|
|
||||||
const dews = data.map(d => d.dew_point);
|
|
||||||
const colors = getThemeColors();
|
|
||||||
console.log('Temperature chart colors:', colors);
|
|
||||||
|
|
||||||
const canvas = this.el.querySelector('canvas');
|
|
||||||
if (!canvas) {
|
|
||||||
console.error('Canvas element not found for temperature chart');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart = new Chart(canvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: times,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Temperature (°F)',
|
|
||||||
data: temps,
|
|
||||||
borderColor: 'red',
|
|
||||||
backgroundColor: 'rgba(255, 0, 0, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Dew Point (°F)',
|
|
||||||
data: dews,
|
|
||||||
borderColor: 'blue',
|
|
||||||
backgroundColor: 'rgba(0, 0, 255, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Temperature & Dew Point (°F)',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: colors.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
displayFormats: {
|
|
||||||
hour: 'HH:mm',
|
|
||||||
minute: 'HH:mm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Time',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: '°F',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Hooks.ChartJSHumidityChart = {
|
|
||||||
mounted() {
|
|
||||||
console.log('Humidity chart mounted');
|
|
||||||
|
|
||||||
// Initialize global chart instances map if it doesn't exist
|
|
||||||
if (!window.chartInstances) {
|
|
||||||
window.chartInstances = new Map();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Register this chart instance
|
|
||||||
window.chartInstances.set(this.el.id, this);
|
|
||||||
|
|
||||||
this.renderChart();
|
|
||||||
// Listen for theme changes
|
|
||||||
this.themeChangeHandler = () => {
|
|
||||||
console.log('Humidity chart received themeChanged event');
|
|
||||||
if (this.chart) {
|
|
||||||
console.log('Re-rendering humidity chart');
|
|
||||||
this.renderChart();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
},
|
|
||||||
updated() { this.renderChart(); },
|
|
||||||
destroyed() {
|
|
||||||
// Clean up event listener
|
|
||||||
if (this.themeChangeHandler) {
|
|
||||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
}
|
|
||||||
// Remove from global chart instances
|
|
||||||
if (window.chartInstances) {
|
|
||||||
window.chartInstances.delete(this.el.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderChart() {
|
|
||||||
console.log('Humidity chart renderChart called');
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
|
||||||
const times = data.map(d => new Date(d.timestamp));
|
|
||||||
const humidity = data.map(d => d.humidity);
|
|
||||||
const colors = getThemeColors();
|
|
||||||
console.log('Humidity chart colors:', colors);
|
|
||||||
|
|
||||||
const canvas = this.el.querySelector('canvas');
|
|
||||||
if (!canvas) {
|
|
||||||
console.error('Canvas element not found for humidity chart');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart = new Chart(canvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: times,
|
|
||||||
datasets: [{
|
|
||||||
label: 'Humidity (%)',
|
|
||||||
data: humidity,
|
|
||||||
borderColor: 'green',
|
|
||||||
backgroundColor: 'rgba(0, 255, 0, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Humidity (%)',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: colors.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
displayFormats: {
|
|
||||||
hour: 'HH:mm',
|
|
||||||
minute: 'HH:mm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Time',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: '%',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Hooks.ChartJSPressureChart = {
|
|
||||||
mounted() {
|
|
||||||
console.log('Pressure chart mounted');
|
|
||||||
|
|
||||||
// Initialize global chart instances map if it doesn't exist
|
|
||||||
if (!window.chartInstances) {
|
|
||||||
window.chartInstances = new Map();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Register this chart instance
|
|
||||||
window.chartInstances.set(this.el.id, this);
|
|
||||||
|
|
||||||
this.renderChart();
|
|
||||||
// Listen for theme changes
|
|
||||||
this.themeChangeHandler = () => {
|
|
||||||
console.log('Pressure chart received themeChanged event');
|
|
||||||
if (this.chart) {
|
|
||||||
console.log('Re-rendering pressure chart');
|
|
||||||
this.renderChart();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
},
|
|
||||||
updated() { this.renderChart(); },
|
|
||||||
destroyed() {
|
|
||||||
// Clean up event listener
|
|
||||||
if (this.themeChangeHandler) {
|
|
||||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
}
|
|
||||||
// Remove from global chart instances
|
|
||||||
if (window.chartInstances) {
|
|
||||||
window.chartInstances.delete(this.el.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderChart() {
|
|
||||||
console.log('Pressure chart renderChart called');
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
|
||||||
const times = data.map(d => new Date(d.timestamp));
|
|
||||||
const pressure = data.map(d => d.pressure);
|
|
||||||
const colors = getThemeColors();
|
|
||||||
console.log('Pressure chart colors:', colors);
|
|
||||||
|
|
||||||
const canvas = this.el.querySelector('canvas');
|
|
||||||
if (!canvas) {
|
|
||||||
console.error('Canvas element not found for pressure chart');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart = new Chart(canvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: times,
|
|
||||||
datasets: [{
|
|
||||||
label: 'Pressure (mb)',
|
|
||||||
data: pressure,
|
|
||||||
borderColor: 'purple',
|
|
||||||
backgroundColor: 'rgba(128, 0, 128, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Pressure (mb)',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: colors.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
displayFormats: {
|
|
||||||
hour: 'HH:mm',
|
|
||||||
minute: 'HH:mm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Time',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'mb',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Hooks.ChartJSWindChart = {
|
|
||||||
mounted() {
|
|
||||||
console.log('Wind chart mounted');
|
|
||||||
|
|
||||||
// Initialize global chart instances map if it doesn't exist
|
|
||||||
if (!window.chartInstances) {
|
|
||||||
window.chartInstances = new Map();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Register this chart instance
|
|
||||||
window.chartInstances.set(this.el.id, this);
|
|
||||||
|
|
||||||
this.renderChart();
|
|
||||||
// Listen for theme changes
|
|
||||||
this.themeChangeHandler = () => {
|
|
||||||
console.log('Wind chart received themeChanged event');
|
|
||||||
if (this.chart) {
|
|
||||||
console.log('Re-rendering wind chart');
|
|
||||||
this.renderChart();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
},
|
|
||||||
updated() { this.renderChart(); },
|
|
||||||
destroyed() {
|
|
||||||
// Clean up event listener
|
|
||||||
if (this.themeChangeHandler) {
|
|
||||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
}
|
|
||||||
// Remove from global chart instances
|
|
||||||
if (window.chartInstances) {
|
|
||||||
window.chartInstances.delete(this.el.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderChart() {
|
|
||||||
console.log('Wind chart renderChart called');
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
|
||||||
const times = data.map(d => new Date(d.timestamp));
|
|
||||||
const windSpeed = data.map(d => d.wind_speed);
|
|
||||||
const windGust = data.map(d => d.wind_gust);
|
|
||||||
const colors = getThemeColors();
|
|
||||||
console.log('Wind chart colors:', colors);
|
|
||||||
|
|
||||||
const canvas = this.el.querySelector('canvas');
|
|
||||||
if (!canvas) {
|
|
||||||
console.error('Canvas element not found for wind chart');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart = new Chart(canvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: times,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Wind Speed (mph)',
|
|
||||||
data: windSpeed,
|
|
||||||
borderColor: 'orange',
|
|
||||||
backgroundColor: 'rgba(255, 165, 0, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Wind Gust (mph)',
|
|
||||||
data: windGust,
|
|
||||||
borderColor: 'brown',
|
|
||||||
backgroundColor: 'rgba(165, 42, 42, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Wind Speed & Gust (mph)',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: colors.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
displayFormats: {
|
|
||||||
hour: 'HH:mm',
|
|
||||||
minute: 'HH:mm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Time',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'mph',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Hooks.ChartJSRainChart = {
|
|
||||||
mounted() {
|
|
||||||
console.log('Rain chart mounted');
|
|
||||||
|
|
||||||
// Initialize global chart instances map if it doesn't exist
|
|
||||||
if (!window.chartInstances) {
|
|
||||||
window.chartInstances = new Map();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Register this chart instance
|
|
||||||
window.chartInstances.set(this.el.id, this);
|
|
||||||
|
|
||||||
this.renderChart();
|
|
||||||
// Listen for theme changes
|
|
||||||
this.themeChangeHandler = () => {
|
|
||||||
console.log('Rain chart received themeChanged event');
|
|
||||||
if (this.chart) {
|
|
||||||
console.log('Re-rendering rain chart');
|
|
||||||
this.renderChart();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
},
|
|
||||||
updated() { this.renderChart(); },
|
|
||||||
destroyed() {
|
|
||||||
// Clean up event listener
|
|
||||||
if (this.themeChangeHandler) {
|
|
||||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
}
|
|
||||||
// Remove from global chart instances
|
|
||||||
if (window.chartInstances) {
|
|
||||||
window.chartInstances.delete(this.el.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderChart() {
|
|
||||||
console.log('Rain chart renderChart called');
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
|
||||||
const times = data.map(d => new Date(d.timestamp));
|
|
||||||
const rain1h = data.map(d => d.rain_1h);
|
|
||||||
const rain24h = data.map(d => d.rain_24h);
|
|
||||||
const rainSinceMidnight = data.map(d => d.rain_since_midnight);
|
|
||||||
const colors = getThemeColors();
|
|
||||||
console.log('Rain chart colors:', colors);
|
|
||||||
|
|
||||||
const canvas = this.el.querySelector('canvas');
|
|
||||||
if (!canvas) {
|
|
||||||
console.error('Canvas element not found for rain chart');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart = new Chart(canvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: times,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Rain (1h)',
|
|
||||||
data: rain1h,
|
|
||||||
borderColor: 'blue',
|
|
||||||
backgroundColor: 'rgba(0, 0, 255, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Rain (24h)',
|
|
||||||
data: rain24h,
|
|
||||||
borderColor: 'cyan',
|
|
||||||
backgroundColor: 'rgba(0, 255, 255, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Rain (since midnight)',
|
|
||||||
data: rainSinceMidnight,
|
|
||||||
borderColor: 'navy',
|
|
||||||
backgroundColor: 'rgba(0, 0, 128, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Rainfall (inches)',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: colors.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
displayFormats: {
|
|
||||||
hour: 'HH:mm',
|
|
||||||
minute: 'HH:mm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Time',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'inches',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Hooks.ChartJSLuminosityChart = {
|
|
||||||
mounted() {
|
|
||||||
console.log('Luminosity chart mounted');
|
|
||||||
|
|
||||||
// Initialize global chart instances map if it doesn't exist
|
|
||||||
if (!window.chartInstances) {
|
|
||||||
window.chartInstances = new Map();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Register this chart instance
|
|
||||||
window.chartInstances.set(this.el.id, this);
|
|
||||||
|
|
||||||
this.renderChart();
|
|
||||||
// Listen for theme changes
|
|
||||||
this.themeChangeHandler = () => {
|
|
||||||
console.log('Luminosity chart received themeChanged event');
|
|
||||||
if (this.chart) {
|
|
||||||
console.log('Re-rendering luminosity chart');
|
|
||||||
this.renderChart();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
},
|
|
||||||
updated() { this.renderChart(); },
|
|
||||||
destroyed() {
|
|
||||||
// Clean up event listener
|
|
||||||
if (this.themeChangeHandler) {
|
|
||||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
|
||||||
}
|
|
||||||
// Remove from global chart instances
|
|
||||||
if (window.chartInstances) {
|
|
||||||
window.chartInstances.delete(this.el.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderChart() {
|
|
||||||
console.log('Luminosity chart renderChart called');
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
|
||||||
const times = data.map(d => new Date(d.timestamp));
|
|
||||||
const luminosity = data.map(d => d.luminosity);
|
|
||||||
const colors = getThemeColors();
|
|
||||||
console.log('Luminosity chart colors:', colors);
|
|
||||||
|
|
||||||
const canvas = this.el.querySelector('canvas');
|
|
||||||
if (!canvas) {
|
|
||||||
console.error('Canvas element not found for luminosity chart');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart = new Chart(canvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: times,
|
|
||||||
datasets: [{
|
|
||||||
label: 'Luminosity',
|
|
||||||
data: luminosity,
|
|
||||||
borderColor: 'yellow',
|
|
||||||
backgroundColor: 'rgba(255, 255, 0, 0.1)',
|
|
||||||
tension: 0.1
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Luminosity',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
color: colors.text
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: 'time',
|
|
||||||
time: {
|
|
||||||
displayFormats: {
|
|
||||||
hour: 'HH:mm',
|
|
||||||
minute: 'HH:mm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Time',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Luminosity',
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
color: colors.text
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: colors.grid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper function to get theme-aware colors
|
// Helper function to get theme-aware colors
|
||||||
const getThemeColors = () => {
|
const getThemeColors = () => {
|
||||||
|
|
|
||||||
313
assets/js/features/weather_charts.ts
Normal file
313
assets/js/features/weather_charts.ts
Normal file
|
|
@ -0,0 +1,313 @@
|
||||||
|
/// <reference types="chart.js" />
|
||||||
|
/// <reference types="phoenix_live_view" />
|
||||||
|
// The above triple-slash directives help TypeScript find types for Chart.js and Phoenix LiveView.
|
||||||
|
// If you use a custom build or alias, ensure types are available in node_modules.
|
||||||
|
|
||||||
|
import Chart from 'chart.js/auto';
|
||||||
|
import type { Hook } from 'phoenix_live_view';
|
||||||
|
|
||||||
|
// Type for weather history data
|
||||||
|
interface WeatherHistoryDatum {
|
||||||
|
timestamp: string;
|
||||||
|
temperature?: number;
|
||||||
|
dew_point?: number;
|
||||||
|
humidity?: number;
|
||||||
|
pressure?: number;
|
||||||
|
wind_direction?: number;
|
||||||
|
wind_speed?: number;
|
||||||
|
wind_gust?: number;
|
||||||
|
rain_1h?: number;
|
||||||
|
rain_24h?: number;
|
||||||
|
rain_since_midnight?: number;
|
||||||
|
luminosity?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type for the event payload
|
||||||
|
interface UpdateWeatherChartsPayload {
|
||||||
|
weather_history: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get theme-aware colors
|
||||||
|
const getThemeColors = () => {
|
||||||
|
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||||
|
return {
|
||||||
|
text: isDark ? '#e5e7eb' : '#111827',
|
||||||
|
grid: isDark ? '#374151' : '#9ca3af',
|
||||||
|
background: isDark ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
chartInstances?: Map<string, any>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerChartInstance(el: HTMLElement, hook: any) {
|
||||||
|
if (!window.chartInstances) {
|
||||||
|
window.chartInstances = new Map();
|
||||||
|
}
|
||||||
|
window.chartInstances.set(el.id, hook);
|
||||||
|
}
|
||||||
|
|
||||||
|
function unregisterChartInstance(el: HTMLElement) {
|
||||||
|
if (window.chartInstances) {
|
||||||
|
window.chartInstances.delete(el.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// All hooks are typed as 'any' for LiveView context compatibility
|
||||||
|
export const WeatherChartHooks: Record<string, Hook> = {
|
||||||
|
ChartJSTempChart: {
|
||||||
|
mounted() {
|
||||||
|
const self = this as any;
|
||||||
|
registerChartInstance(self.el as HTMLElement, self);
|
||||||
|
self.renderChart();
|
||||||
|
self.themeChangeHandler = () => self.renderChart();
|
||||||
|
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||||
|
self.el.dataset.weatherHistory = weather_history;
|
||||||
|
self.renderChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() { (this as any).renderChart(); },
|
||||||
|
destroyed() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
unregisterChartInstance(self.el as HTMLElement);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.chart) self.chart.destroy();
|
||||||
|
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||||
|
const times = data.map(d => new Date(d.timestamp));
|
||||||
|
const temps = data.map(d => d.temperature);
|
||||||
|
const dews = data.map(d => d.dew_point);
|
||||||
|
const colors = getThemeColors();
|
||||||
|
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||||
|
if (!canvas) return;
|
||||||
|
self.chart = new Chart(canvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: times,
|
||||||
|
datasets: [
|
||||||
|
{ label: 'Temperature (°F)', data: temps, borderColor: 'red', backgroundColor: 'rgba(255, 0, 0, 0.1)', tension: 0.1 },
|
||||||
|
{ label: 'Dew Point (°F)', data: dews, borderColor: 'blue', backgroundColor: 'rgba(0, 0, 255, 0.1)', tension: 0.1 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
title: { display: true, text: 'Temperature & Dew Point (°F)', color: colors.text },
|
||||||
|
legend: { labels: { color: colors.text } }
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } },
|
||||||
|
y: { title: { display: true, text: '°F', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ChartJSHumidityChart: {
|
||||||
|
mounted() {
|
||||||
|
const self = this as any;
|
||||||
|
registerChartInstance(self.el as HTMLElement, self);
|
||||||
|
self.renderChart();
|
||||||
|
self.themeChangeHandler = () => self.renderChart();
|
||||||
|
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||||
|
self.el.dataset.weatherHistory = weather_history;
|
||||||
|
self.renderChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() { (this as any).renderChart(); },
|
||||||
|
destroyed() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
unregisterChartInstance(self.el as HTMLElement);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.chart) self.chart.destroy();
|
||||||
|
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||||
|
const times = data.map(d => new Date(d.timestamp));
|
||||||
|
const humidity = data.map(d => d.humidity);
|
||||||
|
const colors = getThemeColors();
|
||||||
|
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||||
|
if (!canvas) return;
|
||||||
|
self.chart = new Chart(canvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: { labels: times, datasets: [{ label: 'Humidity (%)', data: humidity, borderColor: 'green', backgroundColor: 'rgba(0, 255, 0, 0.1)', tension: 0.1 }] },
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: { title: { display: true, text: 'Humidity (%)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||||
|
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: '%', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ChartJSPressureChart: {
|
||||||
|
mounted() {
|
||||||
|
const self = this as any;
|
||||||
|
registerChartInstance(self.el as HTMLElement, self);
|
||||||
|
self.renderChart();
|
||||||
|
self.themeChangeHandler = () => self.renderChart();
|
||||||
|
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||||
|
self.el.dataset.weatherHistory = weather_history;
|
||||||
|
self.renderChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() { (this as any).renderChart(); },
|
||||||
|
destroyed() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
unregisterChartInstance(self.el as HTMLElement);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.chart) self.chart.destroy();
|
||||||
|
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||||
|
const times = data.map(d => new Date(d.timestamp));
|
||||||
|
const pressure = data.map(d => d.pressure);
|
||||||
|
const colors = getThemeColors();
|
||||||
|
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||||
|
if (!canvas) return;
|
||||||
|
self.chart = new Chart(canvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: { labels: times, datasets: [{ label: 'Pressure (mb)', data: pressure, borderColor: 'purple', backgroundColor: 'rgba(128, 0, 128, 0.1)', tension: 0.1 }] },
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: { title: { display: true, text: 'Pressure (mb)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||||
|
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'mb', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ChartJSWindChart: {
|
||||||
|
mounted() {
|
||||||
|
const self = this as any;
|
||||||
|
registerChartInstance(self.el as HTMLElement, self);
|
||||||
|
self.renderChart();
|
||||||
|
self.themeChangeHandler = () => self.renderChart();
|
||||||
|
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||||
|
self.el.dataset.weatherHistory = weather_history;
|
||||||
|
self.renderChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() { (this as any).renderChart(); },
|
||||||
|
destroyed() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
unregisterChartInstance(self.el as HTMLElement);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.chart) self.chart.destroy();
|
||||||
|
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||||
|
const times = data.map(d => new Date(d.timestamp));
|
||||||
|
const windSpeed = data.map(d => d.wind_speed);
|
||||||
|
const windGust = data.map(d => d.wind_gust);
|
||||||
|
const colors = getThemeColors();
|
||||||
|
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||||
|
if (!canvas) return;
|
||||||
|
self.chart = new Chart(canvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: { labels: times, datasets: [{ label: 'Wind Speed (mph)', data: windSpeed, borderColor: 'orange', backgroundColor: 'rgba(255, 165, 0, 0.1)', tension: 0.1 }, { label: 'Wind Gust (mph)', data: windGust, borderColor: 'brown', backgroundColor: 'rgba(165, 42, 42, 0.1)', tension: 0.1 }] },
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: { title: { display: true, text: 'Wind Speed & Gust (mph)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||||
|
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'mph', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ChartJSRainChart: {
|
||||||
|
mounted() {
|
||||||
|
const self = this as any;
|
||||||
|
registerChartInstance(self.el as HTMLElement, self);
|
||||||
|
self.renderChart();
|
||||||
|
self.themeChangeHandler = () => self.renderChart();
|
||||||
|
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||||
|
self.el.dataset.weatherHistory = weather_history;
|
||||||
|
self.renderChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() { (this as any).renderChart(); },
|
||||||
|
destroyed() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
unregisterChartInstance(self.el as HTMLElement);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.chart) self.chart.destroy();
|
||||||
|
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||||
|
const times = data.map(d => new Date(d.timestamp));
|
||||||
|
const rain1h = data.map(d => d.rain_1h);
|
||||||
|
const rain24h = data.map(d => d.rain_24h);
|
||||||
|
const rainSinceMidnight = data.map(d => d.rain_since_midnight);
|
||||||
|
const colors = getThemeColors();
|
||||||
|
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||||
|
if (!canvas) return;
|
||||||
|
self.chart = new Chart(canvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: { labels: times, datasets: [{ label: 'Rain (1h)', data: rain1h, borderColor: 'blue', backgroundColor: 'rgba(0, 0, 255, 0.1)', tension: 0.1 }, { label: 'Rain (24h)', data: rain24h, borderColor: 'cyan', backgroundColor: 'rgba(0, 255, 255, 0.1)', tension: 0.1 }, { label: 'Rain (since midnight)', data: rainSinceMidnight, borderColor: 'navy', backgroundColor: 'rgba(0, 0, 128, 0.1)', tension: 0.1 }] },
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: { title: { display: true, text: 'Rainfall (inches)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||||
|
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'inches', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ChartJSLuminosityChart: {
|
||||||
|
mounted() {
|
||||||
|
const self = this as any;
|
||||||
|
registerChartInstance(self.el as HTMLElement, self);
|
||||||
|
self.renderChart();
|
||||||
|
self.themeChangeHandler = () => self.renderChart();
|
||||||
|
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||||
|
self.el.dataset.weatherHistory = weather_history;
|
||||||
|
self.renderChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() { (this as any).renderChart(); },
|
||||||
|
destroyed() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||||
|
unregisterChartInstance(self.el as HTMLElement);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const self = this as any;
|
||||||
|
if (self.chart) self.chart.destroy();
|
||||||
|
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||||
|
const times = data.map(d => new Date(d.timestamp));
|
||||||
|
const luminosity = data.map(d => d.luminosity);
|
||||||
|
const colors = getThemeColors();
|
||||||
|
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||||
|
if (!canvas) return;
|
||||||
|
self.chart = new Chart(canvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: { labels: times, datasets: [{ label: 'Luminosity', data: luminosity, borderColor: 'yellow', backgroundColor: 'rgba(255, 255, 0, 0.1)', tension: 0.1 }] },
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: { title: { display: true, text: 'Luminosity', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||||
|
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'Luminosity', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WeatherChartHooks;
|
||||||
52
assets/package-lock.json
generated
Normal file
52
assets/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
{
|
||||||
|
"name": "assets",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"@types/chart.js": "^4.0.1",
|
||||||
|
"chart.js": "^4.5.0",
|
||||||
|
"phoenix_live_view": "^1.0.17"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@kurkle/color": {
|
||||||
|
"version": "0.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||||
|
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
|
||||||
|
},
|
||||||
|
"node_modules/@types/chart.js": {
|
||||||
|
"version": "4.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-4.0.1.tgz",
|
||||||
|
"integrity": "sha512-OwXJ6Eg14eFpCsTG6sljiGnvVpit5R9rapG7nwDnQlljsdplVIOYVuCSwy07IduCtihrOwvOnbhXKLyp3nvPcw==",
|
||||||
|
"deprecated": "This is a stub types definition. chart.js provides its own type definitions, so you do not need this installed.",
|
||||||
|
"dependencies": {
|
||||||
|
"chart.js": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chart.js": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@kurkle/color": "^0.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"pnpm": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/morphdom": {
|
||||||
|
"version": "2.7.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.5.tgz",
|
||||||
|
"integrity": "sha512-z6bfWFMra7kBqDjQGHud1LSXtq5JJC060viEkQFMBX6baIecpkNr2Ywrn2OQfWP3rXiNFQRPoFjD8/TvJcWcDg=="
|
||||||
|
},
|
||||||
|
"node_modules/phoenix_live_view": {
|
||||||
|
"version": "1.0.17",
|
||||||
|
"resolved": "https://registry.npmjs.org/phoenix_live_view/-/phoenix_live_view-1.0.17.tgz",
|
||||||
|
"integrity": "sha512-ydjiQeMkNrGv8OGYgT7BjIho/XM3eSHrk4FCs6qiLg9EfPf5M8w1W5Ax/E1tF9E0w6VFQsWm1fKFdWqzAezgjQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"morphdom": "2.7.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
7
assets/package.json
Normal file
7
assets/package.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"@types/chart.js": "^4.0.1",
|
||||||
|
"chart.js": "^4.5.0",
|
||||||
|
"phoenix_live_view": "^1.0.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -20,6 +20,7 @@ defmodule AprsmeWeb.InfoLive.Show do
|
||||||
packet = get_latest_packet(normalized_callsign)
|
packet = get_latest_packet(normalized_callsign)
|
||||||
packet = enrich_packet_with_device_info(packet)
|
packet = enrich_packet_with_device_info(packet)
|
||||||
neighbors = get_neighbors(packet, normalized_callsign)
|
neighbors = get_neighbors(packet, normalized_callsign)
|
||||||
|
has_weather_packets = PacketUtils.has_weather_packets?(normalized_callsign)
|
||||||
|
|
||||||
socket =
|
socket =
|
||||||
socket
|
socket
|
||||||
|
|
@ -27,6 +28,7 @@ defmodule AprsmeWeb.InfoLive.Show do
|
||||||
|> assign(:packet, packet)
|
|> assign(:packet, packet)
|
||||||
|> assign(:neighbors, neighbors)
|
|> assign(:neighbors, neighbors)
|
||||||
|> assign(:page_title, "APRS station #{normalized_callsign}")
|
|> assign(:page_title, "APRS station #{normalized_callsign}")
|
||||||
|
|> assign(:has_weather_packets, has_weather_packets)
|
||||||
|
|
||||||
{:ok, socket}
|
{:ok, socket}
|
||||||
end
|
end
|
||||||
|
|
@ -39,11 +41,13 @@ defmodule AprsmeWeb.InfoLive.Show do
|
||||||
packet = get_latest_packet(socket.assigns.callsign)
|
packet = get_latest_packet(socket.assigns.callsign)
|
||||||
packet = enrich_packet_with_device_info(packet)
|
packet = enrich_packet_with_device_info(packet)
|
||||||
neighbors = get_neighbors(packet, socket.assigns.callsign)
|
neighbors = get_neighbors(packet, socket.assigns.callsign)
|
||||||
|
has_weather_packets = PacketUtils.has_weather_packets?(socket.assigns.callsign)
|
||||||
|
|
||||||
socket =
|
socket =
|
||||||
socket
|
socket
|
||||||
|> assign(:packet, packet)
|
|> assign(:packet, packet)
|
||||||
|> assign(:neighbors, neighbors)
|
|> assign(:neighbors, neighbors)
|
||||||
|
|> assign(:has_weather_packets, has_weather_packets)
|
||||||
|
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
else
|
else
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
<.link navigate={~p"/packets/#{@callsign}"} class="btn btn-outline btn-sm">
|
<.link navigate={~p"/packets/#{@callsign}"} class="btn btn-outline btn-sm">
|
||||||
View packets
|
View packets
|
||||||
</.link>
|
</.link>
|
||||||
<%= if AprsmeWeb.MapLive.PacketUtils.has_weather_packets?(@callsign) do %>
|
<%= if @has_weather_packets do %>
|
||||||
<.link navigate={~p"/weather/#{@callsign}"} class="btn btn-primary btn-sm">
|
<.link navigate={~p"/weather/#{@callsign}"} class="btn btn-primary btn-sm">
|
||||||
Weather charts
|
Weather charts
|
||||||
</.link>
|
</.link>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@ defmodule AprsmeWeb.WeatherLive.CallsignView do
|
||||||
@moduledoc false
|
@moduledoc false
|
||||||
use AprsmeWeb, :live_view
|
use AprsmeWeb, :live_view
|
||||||
|
|
||||||
|
import Phoenix.LiveView, only: [push_event: 3, connected?: 1]
|
||||||
|
|
||||||
alias Aprsme.Packets
|
alias Aprsme.Packets
|
||||||
alias AprsmeWeb.MapLive.PacketUtils
|
alias AprsmeWeb.MapLive.PacketUtils
|
||||||
|
|
||||||
|
|
@ -91,6 +93,9 @@ defmodule AprsmeWeb.WeatherLive.CallsignView do
|
||||||
|> assign(:weather_history, weather_history)
|
|> assign(:weather_history, weather_history)
|
||||||
|> assign(:weather_history_json, weather_history_json)
|
|> assign(:weather_history_json, weather_history_json)
|
||||||
|
|
||||||
|
# Push event to update all charts with new data
|
||||||
|
socket = push_event(socket, "update_weather_charts", %{weather_history: weather_history_json})
|
||||||
|
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
@ -133,6 +138,9 @@ defmodule AprsmeWeb.WeatherLive.CallsignView do
|
||||||
|> assign(:weather_history, weather_history)
|
|> assign(:weather_history, weather_history)
|
||||||
|> assign(:weather_history_json, weather_history_json)
|
|> assign(:weather_history_json, weather_history_json)
|
||||||
|
|
||||||
|
# Push event to update all charts with new data
|
||||||
|
socket = push_event(socket, "update_weather_charts", %{weather_history: weather_history_json})
|
||||||
|
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
else
|
else
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
defmodule Aprsme.Repo.Migrations.DropUsersAndUsersTokensTables do
|
|
||||||
use Ecto.Migration
|
|
||||||
|
|
||||||
def change do
|
|
||||||
drop table(:users_tokens)
|
|
||||||
drop table(:users)
|
|
||||||
end
|
|
||||||
end
|
|
||||||
Loading…
Add table
Reference in a new issue