Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@grenagit
grenagit committed Dec 28, 2019
1 parent 9a3db2f commit b6a8bb5
Show file tree
Hide file tree
Showing 7 changed files with 156 additions and 91 deletions.
4 changes: 4 additions & 0 deletions MMM-VigiCrues.css
View file
@@ -0,0 +1,4 @@
.MMM-VigiCrues .level,
.MMM-VigiCrues .comparison {
padding-bottom: 10px;
}
210 changes: 128 additions & 82 deletions MMM-VigiCrues.js
View file
Expand Up @@ -21,6 +21,9 @@ Module.register("MMM-VigiCrues",{
maxChartWidth: 0,
maxChartHeight: 0,
useColorLegend: true,
showChart: true,

alertTable: [],

initialLoadDelay: 0, // 0 seconds delay
retryDelay: 2500, // 2,5 seconds
Expand All @@ -36,7 +39,7 @@ Module.register("MMM-VigiCrues",{

// Define required scripts
getStyles: function() {
return ["font-awesome.css"];
return ["font-awesome.css", "MMM-VigiCrues.css"];
},

// Define start sequence
Expand All @@ -45,11 +48,13 @@ Module.register("MMM-VigiCrues",{

moment.locale(config.language);

this.title = null;
this.description = null;
this.copyright = null;
this.type = null;
this.url = null;
this.levelCurrent = null;
this.alertColor = null;
this.average = null;
this.minimum = null;
this.maximum = null;
this.comparison = null;

this.loaded = false;
this.scheduleUpdate(this.config.initialLoadDelay);
},
Expand All @@ -71,13 +76,15 @@ Module.register("MMM-VigiCrues",{
}

var medium = document.createElement("div");
medium.className = "normal medium";
medium.className = "normal medium level";

var levelIcon = document.createElement('span');

levelIcon.className = "fas fa-ruler-vertical dimmed";
if (this.config.useColorLegend && false) {
levelIcon.style = "color: " + this.level2color(this.vigiWeatherLevel) + ";";
if (this.config.useColorLegend && this.alertColor != null) {
levelIcon.className = "fas fa-exclamation-triangle dimmed";
levelIcon.style = "color: " + this.alertColor + ";";
} else {
levelIcon.className = "fas fa-ruler-vertical dimmed";
}
medium.appendChild(levelIcon);

Expand All @@ -86,6 +93,7 @@ Module.register("MMM-VigiCrues",{
medium.appendChild(spacer);

var levelValue = document.createElement("span");
levelValue.className = "bright";
levelValue.innerHTML = this.levelCurrent + "<span class=\"xsmall\">m</span>";;
medium.appendChild(levelValue);

Expand All @@ -111,14 +119,15 @@ Module.register("MMM-VigiCrues",{
medium.appendChild(spacer);

var levelValue = document.createElement("span");
levelValue.className = "bright";
levelValue.innerHTML = this.comparison + "<span class=\"xsmall\">m</span>";;
medium.appendChild(levelValue);

wrapper.appendChild(medium);


var small = document.createElement("div");
small.className = "normal small";
small.className = "normal small comparison";

var levelStats = document.createElement("span");
levelStats.innerHTML = "Sur 30 jours :";
Expand Down Expand Up @@ -151,78 +160,98 @@ Module.register("MMM-VigiCrues",{

wrapper.appendChild(small);

var history = document.createElement("canvas");
new Chart(history, {
type: 'line',
data: {
datasets: [
{
data: this.chartData,
borderColor: "#999",
fill: true,
pointRadius: 0,
borderWidth: 2
}
]
},
options: {
legend: {
display: false,
if(this.config.showChart) {
var chartWrapper = document.createElement("div");

var history = document.createElement("canvas");
var chart = new Chart(history, {
type: 'line',
data: {
datasets: [
{
label: "Hauteur d'eau",
data: this.chartData,
backgroundColor: "#666",
borderColor: "#999",
borderWidth: 2,
fill: true,
pointRadius: 0,
}
]
},
scales: {
yAxes: [{
options: {
maintainAspectRatio: false,
legend: {
display: true,
ticks: {
maxTicksLimit: 6,
min: 0,
padding: 5,
},
scaleLabel: {
position: "bottom",
},
scales: {
yAxes: [{
display: true,
labelString: "Hauteur (m)",
},
gridLines: {
color: "#666",
drawOnChartArea: false,
}
}],
xAxes: [{
display: true,
type: 'time',

ticks: {
maxTicksLimit: 6,
padding: 5,
},
time: {
displayFormats: {
hour: "DD/MM HH:mm",
day: "DD/MM",
week: "DD/MM",
month: "MMM YY",
}
},
gridLines: {
color: "#666",
drawOnChartArea: false,
}
}]
ticks: {
maxTicksLimit: 6,
min: 0,
padding: 5,
},
scaleLabel: {
display: true,
labelString: "Hauteur (m)",
},
gridLines: {
color: "#999",
drawOnChartArea: false,
}
}],
xAxes: [{
display: true,
type: 'time',

ticks: {
maxTicksLimit: 6,
padding: 5,
},
time: {
displayFormats: {
hour: "DD/MM HH:mm",
day: "DD/MM",
week: "DD/MM",
month: "MMM YY",
}
},
gridLines: {
color: "#999",
drawOnChartArea: false,
}
}]
}
}
});

if (this.config.maxChartWidth != 0) {
chart.canvas.style.width = this.config.maxChartWidth + 'px';
chartWrapper.style.width = this.config.maxChartWidth + 'px';
}
if (this.config.maxChartHeight != 0) {
chart.canvas.style.height = this.config.maxChartHeight + 'px';
chartWrapper.style.height = this.config.maxChartHeight + 'px';
}
});

var styleString = '';
if (this.config.maxChartWidth != 0) {
styleString += 'width: ' + this.config.maxChartWidth + 'px;';
}
if (this.config.maxChartHeight != 0) {
styleString += 'height: ' + this.config.maxChartHeight + 'px;';
}
if (styleString != '') {
history.style = styleString; Log.error(styleString);
}

wrapper.appendChild(history);
chartWrapper.appendChild(history);
wrapper.appendChild(chartWrapper);

for(let i = 0; i < this.config.alertTable.length; i++) {
chart.data.datasets.push({
label: this.config.alertTable[i].title,
data: this.referenceData[i],
borderColor: this.config.alertTable[i].color,
borderWidth: 2,
borderDash: [10, 10],
fill: true,
pointRadius: 0
});
chart.update();
}
}

return wrapper;
},
Expand All @@ -234,7 +263,7 @@ Module.register("MMM-VigiCrues",{
return;
}

var url = this.config.apiBase + "/" + this.config.hydroEndpoint + this.getParams(); Log.error(url);
var url = this.config.apiBase + "/" + this.config.hydroEndpoint + this.getParams();
var self = this;
var retry = true;

Expand Down Expand Up @@ -268,15 +297,27 @@ Module.register("MMM-VigiCrues",{
return;
}

this.config.alertTable.sort((a, b) => Number(a.value) - Number(b.value));

this.levelCurrent = this.roundValue(data.data[0].resultat_obs / 1000, 2);

this.levelValues = [];
this.chartData = [];
this.referenceData = [];
for (let j = 0; j < this.config.alertTable.length; j++) {
this.referenceData[j] = [];
if(data.data[0].resultat_obs >= this.config.alertTable[j].value) {
this.alertColor = this.config.alertTable[j].color;
}
}
for (let i = 0; i < data.data.length; i++) {
this.levelValues.push(parseInt(data.data[i].resultat_obs));

if(i < (this.config.dataPeriod / this.config.dataInterval)) {
if(i < Math.round(this.config.dataPeriod / this.config.dataInterval)) {
this.chartData.push({"t": data.data[i].date_obs, "y": this.roundValue(data.data[i].resultat_obs / 1000, 2)});
for (let j = 0; j < this.config.alertTable.length; j++) {
this.referenceData[j].push({"t": data.data[i].date_obs, "y": this.roundValue(this.config.alertTable[j].value / 1000, 2)});
}
}
}

Expand All @@ -285,7 +326,7 @@ Module.register("MMM-VigiCrues",{
this.minimum = this.roundValue(Math.min(...this.levelValues) / 1000, 2);
this.maximum = this.roundValue(Math.max(...this.levelValues) / 1000, 2);

this.comparison = this.roundValue((data.data[0].resultat_obs - data.data[this.config.comparisonPeriod / this.config.dataInterval].resultat_obs) / 1000, 1);
this.comparison = this.roundValue((data.data[0].resultat_obs - data.data[this.config.comparisonPeriod / this.config.dataInterval].resultat_obs) / 1000, 1);

this.loaded = true;
this.updateDom(this.config.animationSpeed);
Expand All @@ -306,7 +347,7 @@ Module.register("MMM-VigiCrues",{


getParams: function() {
var params = "?";
let params = "?";

params += "code_entite=" + this.config.stationid;
params += "&timestep=" + this.config.dataInterval;
Expand All @@ -319,7 +360,12 @@ Module.register("MMM-VigiCrues",{

// Round a value to n decimal
roundValue: function(value, decimals) {
return parseFloat(value).toFixed(decimals);
let round = parseFloat(value).toFixed(decimals);
if(round == 0) {
round = parseFloat(0).toFixed(decimals);
}

return round;
}

});
Binary file added MMM-VigiCrues_screenshot1.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added MMM-VigiCrues_screenshot2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added MMM-VigiCrues_screenshot3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added MMM-VigiCrues_screenshots.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 24 additions & 9 deletions README.md
View file
@@ -1,13 +1,13 @@
# Module: MMM-VigiCrues
This module displays the last valeu of water level at a station in the Vigicrues network in France, including chart and statistical information (minimum, average, maximum).
This module displays the last value of water level at a station in the Vigicrues network in France, including chart and statistical information (minimum, average, maximum).

The max-height and max-width of the chart can be fixed. The amplitude and interval of the graph data and the age of the data used to determine the level assessment can also be fixed. Color Legend display may be enabled or disabled.
The max-height and max-width of the chart can be fixed. The amplitude and interval of the graph data and the age of the data used to determine the level assessment can also be fixed. Color Legend and chart display may be enabled or disabled independently.

<!--<p align="left">
<img alt="MMM-VigiCrues Screenshot #1" src="MMM-VigiCrues_screenshot1.png" height="250px">
<img alt="MMM-VigiCrues Screenshot #2" src="MMM-VigiCrues_screenshot2.png" height="250px">
<img alt="MMM-VigiCrues Screenshot #3" src="MMM-VigiCrues_screenshot3.png" height="250px">
</p>-->
<p align="left">
<img alt="MMM-VigiCrues Screenshot #1" src="MMM-VigiCrues_screenshot1.png" height="200px">
<img alt="MMM-VigiCrues Screenshot #2" src="MMM-VigiCrues_screenshot2.png" height="73px">
<img alt="MMM-VigiCrues Screenshot #3" src="MMM-VigiCrues_screenshot3.png" height="200px">
</p>

[MagicMirror Project on Github](https://github.com/MichMich/MagicMirror) | [Vigicrues](https://www.vigicrues.gouv.fr/)

Expand Down Expand Up @@ -69,14 +69,29 @@ The following properties can be configured:
| `maxChartWidth` | Maximum width for chart display. If set to 0, the chart's default width is used. (Pixels) <br><br> **Possible values:**`0` - `5000` <br> **Default value:** `0` (default width)
| `maxChartHeight` | Maximum height for chart display. If set to 0, the chart's default height is used. (Pixels) <br><br> **Possible values:**`0` - `5000` <br> **Default value:** `0` (default height)
| `useColorLegend` | Use the colored icons. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
| `showChart` | Show the chart. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
| `alertTable` | Your alerts (water level, title, colour). <br><br> **Possible values:** view details below <br> **Default value:** `[]`
| `initialLoadDelay` | The initial delay before loading. If you have multiple modules that use the same API key, you might want to delay one of the requests. (Milliseconds) <br><br> **Possible values:** `1000` - `5000` <br> **Default value:** `0`
| `retryDelay` | The delay before retrying after a request failure. (Milliseconds) <br><br> **Possible values:** `1000` - `60000` <br> **Default value:** `2500`
| `apiBase` | The Hub'Eau API base URL. <br><br> **Default value:** `'https://hubeau.eaufrance.fr'`
| `hydroEndpoint` | The Hydrometry API endPoint. <br><br> **Default value:** `'api/v1/hydrometrie/observations_tr'`

### Todo
### Alert Table

With `alertTable` , you can create your own alerts based on water level. This information will be added on the chart and an alert will be displayed if the current water level exceeds the water level corresponding to the alert.

### License
You can create one or more alerts within the following structure :

```sh
alertTable: [
{ "value": 5430, "title": "Flood 2017", "color": "red" }, // Alert set to 5430 mm displayed in red with the title "Flood 2017"
{ "value": 3120, "title": "Flood 2014", "color": "orange" }, // Alert set to 3120 mm displayed in orange with the title "Flood 2014"
]
```
## Todo
## License
This module is licensed under the MIT License

0 comments on commit b6a8bb5

Please sign in to comment.