Skip to content

Commit

Permalink
Merge pull request #188 from mlamberts78/develop
Browse files Browse the repository at this point in the history 
Added automscroll
  • Loading branch information
@mlamberts78
mlamberts78 authored Jun 13, 2024
2 parents 00d0a61 + 03bd3a9 commit 84f5bb8
Showing 1 changed file with 95 additions and 59 deletions.
154 changes: 95 additions & 59 deletions dist/weather-chart-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1384,6 +1384,15 @@ class WeatherChartCardEditor extends s {
Use 12-Hour Format
</label>
</div>
<div class="switch-container">
<ha-switch
@change="${(e) => this._valueChanged(e, 'autoscroll')}"
.checked="${this._config.autoscroll !== false}"
></ha-switch>
<label class="switch-label">
Autoscroll
</label>
</div>
<div class="time-container">
<div class="switch-right">
<ha-switch
Expand Down Expand Up @@ -17822,6 +17831,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
icons_size: 25,
animated_icons: false,
icon_style: 'style1',
autoscroll: false,
forecast: {
precipitation_type: 'rainfall',
show_probability: false,
Expand Down Expand Up @@ -18153,6 +18163,10 @@ async firstUpdated(changedProperties) {
this.measureCard();
await new Promise(resolve => setTimeout(resolve, 0));
this.drawChart();

if (this.config.autoscroll) {
this.autoscroll();
}
}


Expand All @@ -18164,6 +18178,7 @@ async updated(changedProperties) {

const entityChanged = oldConfig && this.config.entity !== oldConfig.entity;
const forecastTypeChanged = oldConfig && this.config.forecast.type !== oldConfig.forecast.type;
const autoscrollChanged = oldConfig && this.config.autoscroll !== oldConfig.autoscroll;

if (entityChanged || forecastTypeChanged) {
if (this.forecastSubscriber && typeof this.forecastSubscriber === 'function') {
Expand All @@ -18176,13 +18191,51 @@ async updated(changedProperties) {
if (this.forecasts && this.forecasts.length) {
this.drawChart();
}

if (autoscrollChanged) {
if (!this.config.autoscroll) {
this.autoscroll();
} else {
this.cancelAutoscroll();
}
}
}

if (changedProperties.has('weather')) {
this.updateChart();
}
}

autoscroll() {
if (this.autoscrollTimeout) {
// Autscroll already set, nothing to do
return;
}

const updateChartOncePerHour = () => {
const now = new Date();
const nextHour = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
now.getHours()+1,
);
this.autoscrollTimeout = setTimeout(() => {
this.autoscrollTimeout = null;
this.updateChart();
drawChartOncePerHour();
}, nextHour - now);
};

updateChartOncePerHour();
}

cancelAutoscroll() {
if (this.autoscrollTimeout) {
clearTimeout(this.autoscrollTimeout);
}
}

drawChart({ config, language, weather, forecastItems } = this) {
if (!this.forecasts || !this.forecasts.length) {
return [];
Expand All @@ -18204,43 +18257,8 @@ drawChart({ config, language, weather, forecastItems } = this) {
} else {
var precipUnit = lengthUnit === 'km' ? this.ll('units')['mm'] : this.ll('units')['in'];
}
var forecast = this.forecasts ? this.forecasts.slice(0, forecastItems) : [];
if (forecast.length >= 3) {
var date1 = new Date(forecast[1].datetime).toISOString().split('T')[0];
var date2 = new Date(forecast[2].datetime).toISOString().split('T')[0];
if (date1 !== date2) {
var mode = 'daily';
} else {
var mode = 'hourly';
}
} else {
console.log("Insufficient forecast data.");
}
var roundTemp = config.forecast.round_temp == true;
var i;
var dateTime = [];
var tempHigh = [];
var tempLow = [];
var precip = [];
for (i = 0; i < forecast.length; i++) {
var d = forecast[i];
dateTime.push(d.datetime);
tempHigh.push(d.temperature);
if (typeof d.templow !== 'undefined') {
tempLow.push(d.templow);
}
if (roundTemp) {
tempHigh[i] = Math.round(tempHigh[i]);
if (typeof d.templow !== 'undefined') {
tempLow[i] = Math.round(tempLow[i]);
}
}
if (config.forecast.precipitation_type === 'probability') {
precip.push(d.precipitation_probability);
} else {
precip.push(d.precipitation);
}
}
const data = this.computeForecastData();

var style = getComputedStyle(document.body);
var backgroundColor = style.getPropertyValue('--card-background-color');
var textColor = style.getPropertyValue('--primary-text-color');
Expand All @@ -18258,7 +18276,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
if (config.forecast.precipitation_type === 'probability') {
precipMax = 100;
} else {
if (mode === 'hourly') {
if (config.forecast.type === 'hourly') {
precipMax = lengthUnit === 'km' ? 4 : 1;
} else {
precipMax = lengthUnit === 'km' ? 20 : 1;
Expand All @@ -18277,23 +18295,23 @@ drawChart({ config, language, weather, forecastItems } = this) {
{
label: this.ll('tempHi'),
type: 'line',
data: tempHigh,
data: data.tempHigh,
yAxisID: 'TempAxis',
borderColor: config.forecast.temperature1_color,
backgroundColor: config.forecast.temperature1_color,
},
{
label: this.ll('tempLo'),
type: 'line',
data: tempLow,
data: data.tempLow,
yAxisID: 'TempAxis',
borderColor: config.forecast.temperature2_color,
backgroundColor: config.forecast.temperature2_color,
},
{
label: this.ll('precip'),
type: 'bar',
data: precip,
data: data.precip,
yAxisID: 'PrecipAxis',
borderColor: config.forecast.precipitation_color,
backgroundColor: config.forecast.precipitation_color,
Expand All @@ -18307,7 +18325,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
const precipitationType = config.forecast.precipitation_type;

const rainfall = context.dataset.data[context.dataIndex];
const probability = forecast[context.dataIndex].precipitation_probability;
const probability = data.forecast[context.dataIndex].precipitation_probability;

let formattedValue;
if (precipitationType === 'rainfall') {
Expand Down Expand Up @@ -18374,7 +18392,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
this.forecastChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dateTime,
labels: data.dateTime,
datasets: datasets,
},
options: {
Expand Down Expand Up @@ -18411,7 +18429,7 @@ drawChart({ config, language, weather, forecastItems } = this) {

var time = dateObj.toLocaleTimeString(language, timeFormatOptions);

if (dateObj.getHours() === 0 && dateObj.getMinutes() === 0 && mode === 'hourly') {
if (dateObj.getHours() === 0 && dateObj.getMinutes() === 0 && config.forecast.type === 'hourly') {
var dateFormatOptions = {
day: 'numeric',
month: 'short',
Expand All @@ -18421,7 +18439,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
return [date, time];
}

if (mode !== 'hourly') {
if (config.forecast.type !== 'hourly') {
var weekday = dateObj.toLocaleString(language, { weekday: 'short' }).toUpperCase();
return weekday;
}
Expand All @@ -18434,8 +18452,8 @@ drawChart({ config, language, weather, forecastItems } = this) {
TempAxis: {
position: 'left',
beginAtZero: false,
suggestedMin: Math.min(...tempHigh, ...tempLow) - 5,
suggestedMax: Math.max(...tempHigh, ...tempLow) + 3,
suggestedMin: Math.min(...data.tempHigh, ...data.tempLow) - 5,
suggestedMax: Math.max(...data.tempHigh, ...data.tempLow) + 3,
grid: {
display: false,
drawTicks: false,
Expand Down Expand Up @@ -18493,7 +18511,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
label: function (context) {
var label = context.dataset.label;
var value = context.formattedValue;
var probability = forecast[context.dataIndex].precipitation_probability;
var probability = data.forecast[context.dataIndex].precipitation_probability;
var unit = context.datasetIndex === 2 ? precipUnit : tempUnit;

if (config.forecast.precipitation_type === 'rainfall' && context.datasetIndex === 2 && config.forecast.show_probability && probability !== undefined && probability !== null) {
Expand All @@ -18509,11 +18527,7 @@ drawChart({ config, language, weather, forecastItems } = this) {
});
}

updateChart({ config, language, weather, forecastItems } = this) {
if (!this.forecasts || !this.forecasts.length) {
return [];
}

computeForecastData({ config, forecastItems } = this) {
var forecast = this.forecasts ? this.forecasts.slice(0, forecastItems) : [];
var roundTemp = config.forecast.round_temp == true;
var dateTime = [];
Expand All @@ -18523,6 +18537,12 @@ updateChart({ config, language, weather, forecastItems } = this) {

for (var i = 0; i < forecast.length; i++) {
var d = forecast[i];
if (config.autoscroll) {
const cutoff = (config.forecast.type === 'hourly' ? 1 : 24) * 60 * 60 * 1000;
if (new Date() - new Date(d.datetime) > cutoff) {
continue;
}
}
dateTime.push(d.datetime);
tempHigh.push(d.temperature);
if (typeof d.templow !== 'undefined') {
Expand All @@ -18542,12 +18562,28 @@ updateChart({ config, language, weather, forecastItems } = this) {
}
}

if (this.forecastChart) {
this.forecastChart.data.labels = dateTime;
this.forecastChart.data.datasets[0].data = tempHigh;
this.forecastChart.data.datasets[1].data = tempLow;
this.forecastChart.data.datasets[2].data = precip;
this.forecastChart.update();
return {
forecast,
dateTime,
tempHigh,
tempLow,
precip,
}
}

updateChart({ forecasts, forecastChart } = this) {
if (!forecasts || !forecasts.length) {
return [];
}

const data = this.computeForecastData();

if (forecastChart) {
forecastChart.data.labels = data.dateTime;
forecastChart.data.datasets[0].data = data.tempHigh;
forecastChart.data.datasets[1].data = data.tempLow;
forecastChart.data.datasets[2].data = data.precip;
forecastChart.update();
}
}

Expand Down

0 comments on commit 84f5bb8

Please sign in to comment.