-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
234 lines (192 loc) · 14.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!doctype html>
<html lang="fr">
<head>
<link rel="icon" type="image/svg+xml" href="https://www.svgrepo.com/show/115911/energy.svg" sizes="any">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="">
<title>TrackMyWatt</title>
<meta name="twitter:card" content="TrackMyWatt est un site internet permettant de suivre la consommation et production d'électricité en France." />
<meta name="twitter:site" content="@TrackMyWatt" />
<meta name="twitter:title" content="TrackMyWatt : données de consommation et production d'électricité en direct" />
<meta name="twitter:description" content="Suivi de la consommation et production d'électricité en France." />
<meta name="twitter:image" content="https://raw.githubusercontent.com/rozierguillaume/trackwatt-web/main/assets/brand/banniere.png" />
<meta property="og:url" content="http://www.TrackMyWatt.fr" />
<meta property="og:title" content="TrackMyWatt" />
<meta property="og:description" content="Suivi de la consommation et production d'électricité en France." />
<meta property="og:image" content="" />
<script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://trackmywatt.matomo.cloud/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='//cdn.matomo.cloud/trackmywatt.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Custom styles for this template -->
<link href="headers.css" rel="stylesheet">
<!-- Styles de la page -->
<link rel="stylesheet" href="https://cdn.rawgit.com/rozierguillaume/trackwatt-web/main/styles.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="home" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</symbol>
</svg>
<main>
<h1 class="visually-hidden">TrackMyWatt</h1>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<object type="image/svg+xml" data="https://www.svgrepo.com/show/115911/energy.svg" width="50" height="50" style="margin-right: 10px;"></object>
<span class="fs-4" STYLE="margin-right: 10px;">TrackMyWatt</span>
</a>
<ul class="nav nav-pills">
</ul>
</header>
</div>
<div class="container" style="max-width: 1100px;">
<h1>Consommation électrique en temps réel</h1>
<p>TrackMyWatt est un site internet permettant de suivre la consommation et production d'électricité en France. Les données proviennent de <a href="https://www.rte-france.com/">RTE</a>,
le réseau de transport de l'électricité en France. Elles sont mises à jour en temps réel.</p>
<div class="card">
<h2 id="puissance">Puissance électrique consommée</h2>
<div class="inner-card">
<span style="font-size: 15px;">
<span id="instant_power" style="font-size: 35px; font-weight: bold;">--</span>
<span style="font-size: 20px; margin-bottom: 50px; font-weight: bold;"> MW</span>
<br>
<span id="instant_power_level" style="color: black; font-size: 12px;">--</span> •
<span id="instant_power_level_evolution" style="color: black; font-size: 12px;">--</span>
<br>
<span id="instant_power_datetime" style="font-size: 15px;">--h--</span>
<br>
<span style="font-size: 20px; margin-top: 20px;"><b>Puissance consommée</b></span>
</span>
</div>
<p><b>Cela correspond à la puissance actuellement consommée (en MW)</b>, c'est-à-dire la quantité d'énergie consommée à chaque seconde.
<br><br>
Par analogie avec un randonneur :
s'il avance vite (vitesse, intensité électrique) et si la pente est raide, alors il doit produire un gros effort (force musculaire, tension électrique)
ce qui se traduit par une puissance développée importante. La puissance (en Watt) dépend donc de la tension (en Volt) et de l'intensité (en Ampère).</p>
<p>MW signifie Mega Watts, cela correspond à un million de Watts. Pour comparaison, un sèche-cheveux ou un four consomme environ 2 kW.</p>
<div id="consumptionShortTerm" class="centered"></div>
<!--
<div class='parent'>
<div class='child'>
<input type="checkbox" id="switch_max" /><label for="switch"></label>
</div>
<div class='child'> Afficher le maximum</div>
</div>
-->
<p>La puissance consommée est obtenue par RTE à partir des données recueillies en temps réel, ainsi que des estimations pour les infrastructures ne transmettant pas de données.</p>
<p>© TrackMyWatt.fr • Données : RTE.</p>
</div>
<div class="card">
<h2 id="puissance">Prévision de pics de puissance</h2>
<p>Ces prévisions réalisées par RTE permettent d'évaluer le niveau maximum de puissance électrique consommée lors des deux prochains jours. Celles-ci dépendent de facteurs comme la consommation habituelle, et de la météo.
La puissance réelle peut différer légèrement, notamment en raison d'évolution de la météo ou du comportement des consommateurs.</p>
<div class="inner-card">
<span style="font-size: 15px;">
<span id="max_forecast_d_1" style="font-size: 35px; font-weight: bold;">--</span>
<span style="font-size: 20px; margin-bottom: 50px; font-weight: bold;"> MW</span>
<br>
<span id="max_forecast_d_1_level" style="color: black; font-size: 12px;">--</span>
<br>
<span id="max_forecast_d_1_date" style="font-size: 15px;">--h--</span>
<br>
<span style="font-size: 20px; margin-top: 20px;"><b>Demain</b></span>
</span>
</div>
<div class="inner-card">
<span style="font-size: 15px;">
<span id="max_forecast_d_2" style="font-size: 35px; font-weight: bold;">--</span>
<span style="font-size: 20px; margin-bottom: 50px; font-weight: bold;"> MW</span>
<br>
<span id="max_forecast_d_2_level" style="color: black; font-size: 12px;">--</span>
<br>
<span id="max_forecast_d_2_date" style="font-size: 15px;">--h--</span>
<br>
<span style="font-size: 20px; margin-top: 20px;"><b>Après-demain</b></span>
</span>
</div>
</div>
<h1>Énergie consommée</h1>
<p>L'énergie consommée correspond à la quantité totale d'électricité qui a été utilisée par les Français. L'objectif fixé par le gouvernement est de consommer 10% moins d'électricité cet hiver par rapport aux années habituelles.</p>
<div class="card">
<h2 id="puissance">Depuis le début du mois</h2>
<div class="inner-card" id="inner_card_current_month_energy_consumption_evolution">
<span style="font-size: 15px;">
<span id="current_month_energy_consumption_evolution" style="font-size: 35px; font-weight: bold;">--</span>
<span style="font-size: 20px; margin-bottom: 50px; font-weight: bold;"> %</span>
<br>du
<span id="current_month_energy_consumption_evolution_day" style="font-size: 15px;">--/--/--</span>
<br>
<span style="font-size: 20px; margin-top: 20px;"><b>Évolution de consommation d'énergie</b></span>
<br>
<span>par rapport à la moyenne des autres années</span>
</span>
</div>
<p>Comparaison de l'énergie consommée en France depuis le 1er du mois actuel, avec la consommation habituelle sur le même mois des années précédentes.
Lorsque la courbe bleue est située au-dessus de la ligne noire, cela signifique que l'on a consommé plus d'électricité depuis le début du mois actuel, par rapport à un mois habituel.
</p>
<div id="currentMonthEnergyConsumption" class="centered"></div>
<p>La moyenne des années précédentes est calculée sur les années 2016 à 2021. La consommation estimée peut différer de la consommation réelle consolidée (publiée par RTE avec plusieurs mois de délai).</p>
<p>© TrackMyWatt.fr • Données : RTE.</p>
</div>
<h1>Quels sont les pics de puissance électrique ?</h1>
<p>Des pics de puissances interviennent à certains moments de la journée, et certains mois de l'année. Si la production d'électricité n'est pas suffisante, certaines actions doivent être mises en place par RTE comme des baisses de tension ou des délestages (coupures tournantes de lignes pendant 2h).</p>
<div class="card">
<h2 id="puissance_max">Pic mensuel de puissance</h2>
<p>Cela correspond à la puissance d'électricité consommée au plus haut de chaque mois. Ce pic de puissance est plus élevé en hiver, entre autres du fait d'une utilisation de chauffage.</p>
<div id="consumptionMaxDaily" class="centered"></div>
<p>© TrackMyWatt.fr • Données : RTE.</p>
</div>
<h1>Et bientôt...</h1>
<div class="card">
<h2>De nouvelles fonctionnalités arrivent</h2>
<p>TrackMyWatt est en cours de construction, de nouvelles fonctionnalités arrivent bientôt dans le domaine de la consommation et production d'énergie. Pensez à revenir régulièrement !</p>
<button type="button" onclick="location.href='https://twitter.com/TrackMyWatt'">S'abonner à @TrackMyWatt</button>
<button type="button" onclick="location.href='https://twitter.com/guillaumerozier'">S'abonner à @GuillaumeRozier</button>
</div>
<h2 id="APropos">À propos</h2>
<p>© TrackMyWatt.fr - @GuillaumeRozier - <a href="https://TrackMyWatt.fr/mentions_legales.html">mentions légales</a></p>
</div>
</main>
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<!-- Scripts de création des graphiques -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/rozierguillaume/trackwatt-web/scripts.js"></script>
</body>
</html>