Skip to content

Commit

Permalink
Merge pull request #41 from mtatsuma/round_format
Browse files Browse the repository at this point in the history 
Add datalabelsRoundDecimalPlace option
  • Loading branch information
@mtatsuma
mtatsuma authored Jan 4, 2022
2 parents b8a17e7 + bad9e67 commit 78dbe33
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 17 deletions.
65 changes: 49 additions & 16 deletions MMM-WeatherChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ Module.register("MMM-WeatherChart", {
curveTension: 0.4,
datalabelsDisplay: "auto",
datalabelsOffset: 4,
datalabelsRoundDecimalPlace: 1,
},

requiresVersion: "2.15.0",
Expand Down Expand Up @@ -148,10 +149,9 @@ Module.register("MMM-WeatherChart", {

formatRain: function (rain) {
if (this.config.rainUnit == "inch") {
return Math.round((rain / 25.4) * 100) / 100;
} else {
return Math.round(rain * 10) / 10;
return rain / 25.4;
}
return rain;
},

getIconImage: function (iconId, callback) {
Expand Down Expand Up @@ -310,7 +310,7 @@ Module.register("MMM-WeatherChart", {
data[i].dt * 1000 + this.config.timeOffsetHours * 60 * 60 * 1000
);
let iconID = data[i].weather[0].icon;
let temp = Math.round(data[i].temp * 10) / 10;
let temp = data[i].temp;
if (i === 0) {
dayTime = Boolean(iconID.match(/d$/));
}
Expand Down Expand Up @@ -417,6 +417,11 @@ Module.register("MMM-WeatherChart", {
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: dayTemps,
yAxisID: "y1",
Expand All @@ -435,6 +440,11 @@ Module.register("MMM-WeatherChart", {
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: nightTemps,
yAxisID: "y1",
Expand Down Expand Up @@ -468,9 +478,12 @@ Module.register("MMM-WeatherChart", {
weight: this.config.fontWeight,
},
display: this.config.datalabelsDisplay,
formatter: function (value, context) {
formatter: function (value) {
let place =
10 ** self.config.datalabelsRoundDecimalPlace;
let label = Math.round(value * place) / place;
return self.config.showZeroRain || value > 0
? value
? label
: "";
},
},
Expand All @@ -497,9 +510,12 @@ Module.register("MMM-WeatherChart", {
weight: this.config.fontWeight,
},
display: this.config.datalabelsDisplay,
formatter: function (value, context) {
formatter: function (value) {
let place =
10 ** self.config.datalabelsRoundDecimalPlace;
let label = Math.round(value * place) / place;
return self.config.showZeroSnow || value > 0
? value
? label
: "";
},
},
Expand Down Expand Up @@ -538,6 +554,7 @@ Module.register("MMM-WeatherChart", {
},

getDailyDataset: function () {
const self = this;
const data = this.weatherdata.daily;

// Add dummy data to make space on the left and right side of the chart
Expand Down Expand Up @@ -567,8 +584,8 @@ Module.register("MMM-WeatherChart", {
this.getDayString(dateTime) + " " + dateTime.getDate()
);
}
maxTemps.push(Math.round(data[i].temp.max * 10) / 10);
minTemps.push(Math.round(data[i].temp.min * 10) / 10);
maxTemps.push(data[i].temp.max);
minTemps.push(data[i].temp.min);
if (data[i].rain) {
if (data[i].snow && this.config.includeSnow) {
rains.push(this.formatRain(data[i].rain + data[i].snow));
Expand Down Expand Up @@ -637,7 +654,7 @@ Module.register("MMM-WeatherChart", {

const datasets = [];
datasets.push({
label: "Minimum Temparature",
label: "Minimum Temperature",
backgroundColor: this.config.backgroundColor,
borderColor: this.config.colorMin,
pointBackgroundColor: this.config.colorMin,
Expand All @@ -649,12 +666,17 @@ Module.register("MMM-WeatherChart", {
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: minTemps,
yAxisID: "y1",
});
datasets.push({
label: "Maximum Temparature",
label: "Maximum Temperature",
backgroundColor: this.config.backgroundColor,
borderColor: this.config.colorMax,
pointBackgroundColor: this.config.colorMax,
Expand All @@ -666,6 +688,11 @@ Module.register("MMM-WeatherChart", {
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: maxTemps,
yAxisID: "y1",
Expand Down Expand Up @@ -699,9 +726,12 @@ Module.register("MMM-WeatherChart", {
weight: this.config.fontWeight,
},
display: this.config.datalabelsDisplay,
formatter: function (value, context) {
formatter: function (value) {
let place =
10 ** self.config.datalabelsRoundDecimalPlace;
let label = Math.round(value * place) / place;
return self.config.showZeroRain || value > 0
? value
? label
: "";
},
},
Expand All @@ -728,9 +758,12 @@ Module.register("MMM-WeatherChart", {
weight: this.config.fontWeight,
},
display: this.config.datalabelsDisplay,
formatter: function (value, context) {
formatter: function (value) {
let place =
10 ** self.config.datalabelsRoundDecimalPlace;
let label = Math.round(value * place) / place;
return self.config.showZeroSnow || value > 0
? value
? label
: "";
},
},
Expand Down
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ You can check [available MMM-WeatherChart versions](https://github.com/mtatsuma/
| showIcon | | `false` | Show weather Icon on the top |
| showRain | | `false` | Show rain volume on the bottom |
| showZeroRain | | `true` | Show rain chart even when there is no rain volume. This option is effective only when `showRain` is true. |
| rainUnit | | `mm` | Unit of rain volume (`mm` or `inch`). For `mm` unit, the value is rounded to the first decimal place. For `inch` unit, the value is rounded to the second decimal place. |
| rainUnit | | `mm` | Unit of rain volume (`mm` or `inch`) |
| rainMinHeight | | `0.01` | Minimum height (in mm or inch) of the rain volume chart. When the max rain volume in the chart is less than this value, the height of chart is set as this value. Otherwise, the height of the chart is set acoording to the max rain volume. |
| includeSnow | | `false` | If true, snow volume is included in the rain volume chart and the chart means rain + snow volume (i.e. precipitation). |
| showSnow | | `false` | Show snow volume line in the rain volume chart. If you enable both of showRain and showSnow, datalabels for snow volume is not appeared because those can overlap with the rain volume datalabels. |
Expand All @@ -101,3 +101,4 @@ You can check [available MMM-WeatherChart versions](https://github.com/mtatsuma/
| curveTension | | `0.4` | Tension of line chart in Chart.js. See https://www.chartjs.org/docs/latest/charts/line.html#line-styling for details. |
| datalabelsDisplay | | `auto` | Visibility of data labels. See https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#visibility for details.
| 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). |

0 comments on commit 78dbe33

Please sign in to comment.