Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pull request to enable display of barometric pressure #49

Merged
merged 3 commits into from
Jan 18, 2023
Merged

Pull request to enable display of barometric pressure #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5378faa
Added support for displaying barometric pressure
stavefan Jan 5, 2023
85b15c9
Added pressure related documentation
stavefan Jan 5, 2023
90dff89
Modifcations suggested by mtatsuma: 1) Rename of yPressure+* to y3_*,…
stavefan Jan 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 105 additions & 4 deletions MMM-WeatherChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ Module.register("MMM-WeatherChart", {
iconURLBase: "https://openweathermap.org/img/wn/",
dataType: "hourly",
nightBorderDash: [5, 1],
pressureBorderDash: [5,1],
showIcon: false,
showPressure: false,
showRain: false,
showZeroRain: true,
rainUnit: "mm",
Expand All @@ -45,6 +47,7 @@ Module.register("MMM-WeatherChart", {
colorMax: "rgba(255, 255, 255, 1)",
colorRain: "rgba(255, 255, 255, 1)",
colorSnow: "rgba(255, 255, 255, 1)",
colorPressure: "rgba(255, 255, 255, 1)",
backgroundColor: "rgba(0, 0, 0, 0)",
fillColor: "rgba(255, 255, 255, 0.1)",
dailyLabel: "date",
Expand Down Expand Up @@ -199,6 +202,14 @@ Module.register("MMM-WeatherChart", {
}
return max;
},

getPressureValue( hPa ){
if( this.config.units == "imperial" ){
return hPa * 0.029529983071445; // return value as inHg
} else {
return hPa;
}
},

// Calculate MarginFactors from the simultanious equations
//
Expand Down Expand Up @@ -302,7 +313,8 @@ Module.register("MMM-WeatherChart", {
dayTemps = [NaN],
nightTemps = [NaN],
labels = [""],
iconIDs = [NaN];
iconIDs = [NaN],
pressures = [NaN];

data.sort(function (a, b) {
if (a.dt < b.dt) return -1;
Expand All @@ -311,6 +323,9 @@ Module.register("MMM-WeatherChart", {
});
let dayTime;
for (let i = 0; i < Math.min(this.config.dataNum, data.length); i++) {

pressures.push( this.getPressureValue(data[i].pressure) );

let dateTime = new Date(
data[i].dt * 1000 + this.config.timeOffsetHours * 60 * 60 * 1000
);
Expand Down Expand Up @@ -371,11 +386,14 @@ Module.register("MMM-WeatherChart", {
nightTemps.push(NaN);
labels.push("");
iconIDs.push(NaN);
pressures.push(NaN);

const minTemp = this.getMin(temps),
maxTemp = this.getMax(temps),
maxRain = this.getMax(rains),
maxSnow = this.getMax(snows),
maxPressure = this.getMax(pressures),
minPressure = this.getMin(pressures),
iconLine = [],
icons = [];

Expand Down Expand Up @@ -452,6 +470,32 @@ Module.register("MMM-WeatherChart", {
data: nightTemps,
yAxisID: "y1",
});
if (this.config.showPressure) {
datasets.push({
label: "Pressure",
borderColor: this.config.colorPressure,
pointBackgroundColor: this.config.colorPressure,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cloud you set borderDash so that the line style is selectable by users? The pressure line should be easily distinguishable because the pressure line overwrap with the other lines.

For example:

borderDash: this.config.pressureBorderDash

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit: 90dff89

borderDash: this.config.pressureBorderDash,
datalabels: {
color: this.config.color,
align: "top",
offset: this.config.datalabelsOffset,
font: {
weight: this.config.fontWeight,
},
display: this.config.datalabelsDisplay,
formatter: function (value) {
let place = 10 ** self.config.datalabelsRoundDecimalPlace;
let label = Math.round(value * place) / place;
return label;
},
},
data: pressures,
//pointStyle: "star",
//fill: true,
yAxisID: "y3",
});
}
if (this.config.showIcon) {
datasets.push({
label: "Icons",
Expand Down Expand Up @@ -539,7 +583,10 @@ Module.register("MMM-WeatherChart", {
y2_max =
Math.max(maxRain, maxSnow, this.config.rainMinHeight) *
(2 + iconTopMargin + iconBelowMargin + tempRainMargin),
y2_min = 0;
y2_min = 0,
y3_min = minPressure - (maxPressure - minPressure) * iconTopMargin,
y3_max = maxPressure + ((maxPressure - minPressure) * iconTopMargin);

if (showRainSnow) y1_min = y1_min - (maxTemp - minTemp);
const ranges = {
y1: {
Expand All @@ -550,6 +597,10 @@ Module.register("MMM-WeatherChart", {
min: y2_min,
max: y2_max,
},
y3: {
min: y3_min,
max: y3_max,
},
};

return { labels: labels, datasets: datasets, ranges: ranges };
Expand All @@ -566,14 +617,18 @@ Module.register("MMM-WeatherChart", {
rains = [NaN],
snows = [NaN],
labels = [""],
iconIDs = [NaN];
iconIDs = [NaN],
pressures = [NaN];

data.sort(function (a, b) {
if (a.dt < b.dt) return -1;
if (a.dt > b.dt) return 1;
return 0;
});
for (let i = 0; i < Math.min(this.config.dataNum, data.length); i++) {

pressures.push( this.getPressureValue(data[i].pressure) );

const dateTime = new Date(
data[i].dt * 1000 + this.config.timeOffsetHours * 60 * 60 * 1000
);
Expand Down Expand Up @@ -607,6 +662,7 @@ Module.register("MMM-WeatherChart", {
snows.push(0);
}
iconIDs.push(data[i].weather[0].icon);

}

// Add dummy data to make space on the left and right side of the chart
Expand All @@ -617,6 +673,7 @@ Module.register("MMM-WeatherChart", {
snows.push(NaN);
labels.push("");
iconIDs.push(NaN);
pressures.push(NaN);

const minValue = this.getMin(minTemps),
maxValue = this.getMax(maxTemps),
Expand Down Expand Up @@ -697,6 +754,33 @@ Module.register("MMM-WeatherChart", {
data: maxTemps,
yAxisID: "y1",
});
if (this.config.showPressure) {

datasets.push({
label: "Pressure",
borderColor: this.config.colorPressure,
pointBackgroundColor: this.config.colorPressure,
borderDash: this.config.pressureBorderDash,
datalabels: {
color: this.config.colorPressure,
align: "top",
offset: this.config.datalabelsOffset,
font: {
weight: this.config.fontWeight,
},
display: this.config.datalabelsDisplay,
formatter: function (value) {
let place = 10 ** self.config.datalabelsRoundDecimalPlace;
let label = Math.round(value * place) / place;
return label;
},
},
data: pressures,
yAxisID: "y3",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hide the y3 axis at the far left side.

y1, y2 axis is hide by the below code.
https://github.com/mtatsuma/MMM-WeatherChart/blob/master/MMM-WeatherChart.js#L880-L884

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit: 90dff89

});


}
if (this.config.showIcon) {
datasets.push({
label: "Icons",
Expand Down Expand Up @@ -777,14 +861,20 @@ Module.register("MMM-WeatherChart", {
});
}
}

minPressure = this.getMin(pressures);
maxPressure = this.getMax(pressures);

// Set Y-Axis range not to overlap each other
let y1_max = iconLine[0] + (maxValue - minValue) * iconTopMargin,
y1_min = minValue - (maxValue - minValue) * tempRainMargin,
y2_max =
Math.max(maxRain, maxSnow, this.config.rainMinHeight) *
(2 + (iconTopMargin + iconBelowMargin + tempRainMargin) * 2),
y2_min = 0;
y2_min = 0,
y3_min = minPressure - (maxPressure - minPressure) * iconTopMargin,
y3_max = maxPressure + ((maxPressure - minPressure) * iconTopMargin);

if (showRainSnow) y1_min = y1_min - (maxValue - minValue);
const ranges = {
y1: {
Expand All @@ -795,6 +885,11 @@ Module.register("MMM-WeatherChart", {
min: y2_min,
max: y2_max,
},
y3: {
min: y3_min,
max: y3_max,
},

};

return { labels: labels, datasets: datasets, ranges: ranges };
Expand Down Expand Up @@ -882,6 +977,12 @@ Module.register("MMM-WeatherChart", {
min: dataset.ranges.y2.min,
max: dataset.ranges.y2.max,
},
y3: {
display: false,
min: dataset.ranges.y3.min,
max: dataset.ranges.y3.max,
},

},
animation: { duration: 500 },
},
Expand Down
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,6 @@ You can check [available MMM-WeatherChart versions](https://github.com/mtatsuma/
| datalabelsOffset | | `4` | Offset of data labels. See https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#alignment-and-offset for details.
| datalabelsRoundDecimalPlace | | `1` | Decimal place to which round for data labels on charts. When you set this option as `0`, the labels are rounded to integer. This option is affected only on the labels (not affected on the data values). |
| largeOpenWeatherIcon | | `false` | `true` or `false`. Weather Icons from OpenWeather becomes 2 times larger (100 x 100) if true. |
| showPressure | | `false` | `true` or `false`. Toggles display of pressure values. Notes if units is 'imperial', will display in inHg |
| colorPressure | | `rgba(255, 255, 225, 1)` | Color of the pressure line, if shown |
|pressureBorderDash | | `[5, 1]` | Style of dash line for pressure (`[<line length>, <blank length>]`). This option is available only for `hourly` data type. |