Advertisement
Guest User

Untitled

a guest
Jan 21st, 2023
41
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. </style>
  6. <body>
  7. <div>
  8.     <h1>Liittymän teho: <span id="kulutus"></span> kW,  <span id="kulutus_euroa"></span></h1>
  9.    
  10.      <span id="tiedot"></span><br />
  11.      <span id="2AikaMittaus"></span><br />
  12.      Kuuman veden osuus tänään: <span style="color: red;" id="kuuman_veden_laskelma"></span><br />
  13.      <span id="kulutusajakauma"></span><br />
  14.  
  15.      <span id="ilp"></span>
  16.      
  17.  
  18.     <br />
  19.    
  20.      <!-- <p>Siirtohinta: <input type="text" name="siirto" value="4.31" /><br />
  21.      Huomioi siirto hinnoissa: <input type="checkbox" name="huomioi_siirto" checked /></p> -->
  22.     <svg id="kulutus_bars" width='400' height='100' style="border: 1px solid black;" ></svg>
  23.    <div style="float: right;">
  24.  
  25.         <div id="varaajain_tila" style="border: 1px solid black; margin: 10px; padding: 10px;">
  26.             <h3>Varaajain tila:</h3>
  27.  
  28.             <div style="padding-top: 1px;">
  29.                 <button onclick="pakota_varaaja_paalle()">Pakota varaaja päälle</button><br />
  30.                 <span id="varaajan_lataus"></span><br />
  31.  
  32.             </div>
  33.            <canvas id="varaajan_tila" width="200" height="30" style="border:1px solid #d3d3d3; "><br />
  34.  
  35.         </div>
  36.  
  37.         <div style="border: 1px solid black;margin-right: 5%;">
  38.             <span style="text-decoration: underline;">Ajonaikaisia tietoja</span><br /><br />
  39.             <span id="saikeita"></span><br />
  40.             <span id="lahetetty"></span><br />
  41.             <span id="pulsseja"></span><br />
  42.             <span id="nordpool"></span><br />
  43.             <span id="nordpoolaccess"></span>
  44.             <span id="pvm"></span><br />
  45.             <span id="paikalla"></span><br />
  46.             <span id="pyyntoja"></span><br />
  47.             <span id="restartTimes"></span><br />
  48.             <a href="./debug">DEBUG</a>
  49.         </div>
  50.        
  51.  
  52.         <div id="vesimittari" style="float: right; border: 1px solid blue; margin-top: 20px; margin-right: 5%; width: 300px; padding: 30px; padding-top: 5px;">
  53.             <h3 style="padding-top: 5px;">Veden kulutus</h3>
  54.             <span style="color: blue;" id="kylmavesi"></span><br />
  55.             <span style="color: red;" id="kuumavesi"></span><br />
  56.             <span id="lammitysteho"></span><br />
  57.             <span style="color: green;" id="saasto"></span><br />
  58.             <span id="paluulampo"></span><br /><br />
  59.  
  60.             <!-- <span style="color: magenta; text-decoration: underline;">Kuuman veden arvo:</span> -->
  61.             <span id="kuuman_veden_laskelma"></span><br />
  62.             <span>Veden arvo osuuskunnalta ostettuna: </span>
  63.             <span id="veden_arvo"></span>
  64.             <h3>Veden kulutus päivittäin</h3>
  65.             <span id="vesi_paivittain"></span>
  66.  
  67.            
  68.         </div>
  69.     </div>
  70.    
  71. </div>
  72. <div>
  73. <h3 style="text-align: center;">Logi</h3>
  74.     <textarea rows="10" cols="10" id="lastlog" style="width: 60%; height: 100px;"></textarea>
  75. </div>
  76. <div>
  77.     <h1>Lämmöt</h1>
  78.     <br />
  79.     <div id="lammot" style="width:600px; height: 250px; border: 1px solid black;"></div>
  80.     <h1>Sänkön hinta</h1>
  81.     <div id="myPlot" style="width:100%;max-width:600px; height: 400px; border: 1px solid black;"></div>
  82.    
  83.     <h1>ILP kulutus</h1>
  84.     <div id="ILP" style="width:100%;max-width:600px; height: 400px; border: 1px solid black;"></div>
  85.     <h1>Veden kulutus</h1>
  86.     <div id="vesi" style="width:100%;max-width:600px; height: 400px; border: 1px solid black;"></div>
  87.  
  88.  
  89. </div>
  90. <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  91.  
  92.  
  93.  
  94. </body>
  95. </html>
  96.  
  97. <script>
  98. function pakota_varaaja_paalle() {
  99.     fetch("/pakota_varaaja_paalle");
  100. }
  101. function varaaja_canvas(lataus) {
  102.    // console.log("Varaajan lataus:" + lataus);
  103.     var c = document.getElementById("varaajan_tila");
  104.     var ctx = c.getContext("2d");
  105.     var grd = ctx.createLinearGradient(0, 0, 200, 0);
  106.    
  107.     grd.addColorStop(0, "blue");
  108.     grd.addColorStop(1, "red");
  109.  
  110.     // Fill with gradient
  111.     ctx.fillStyle = grd;
  112.     ctx.fillRect(0, 0, 200 * lataus, 20);
  113. }
  114. function viivasto_y (tiheys, max_y, max_x, style = "stroke:black;stroke-width:1 px") {
  115.     let output = "", i, y_pointer = 0 / tiheys, x_offset = 0, x = 0 ;
  116.     for (i = 0; i < tiheys; i++) {
  117.         output += `<line x1="${x_offset}" y1="${y_pointer + (max_y / tiheys)}" x2="${max_x}" y2="${y_pointer + (max_y / tiheys)}" style="${style}" />` + "\n";
  118.         y_pointer += max_y / tiheys;
  119.     }
  120.    
  121.     //console.log(output);
  122.     return output;
  123. }
  124. function viivasto_y (tiheys, max_x, max_y, style = "stroke:black;stroke-width:1 px") {
  125.     let output = "", i, y_pointer = 0 / tiheys, x_offset = 0, x = 0 ;
  126.     for (i = 0; i < tiheys; i++) {
  127.         output += `<line x1="${x_offset}" y1="${y_pointer + (max_y / tiheys)}" x2="${max_x}" y2="${y_pointer + (max_y / tiheys)}" style="${style}" />` + "\n";
  128.         y_pointer += max_y / tiheys;
  129.     }
  130.    
  131.     //console.log(output);
  132.     return output;
  133. }
  134. function arvo_luvut(montako) {
  135.     const a = [];
  136.     for (let i = 0; i < montako; i++) {
  137.          a[i] = Math.floor(Math.random() * 100);
  138.          //console.log(Math.floor(Math.random() * 100));
  139.     }
  140.     console.log(a);
  141.     return a;
  142. }
  143. function generate_points(values, max_y = 600, max_x = 600) {
  144.     //let values = [20,20,50,30,30,20];
  145.     let minmax = get_minMax(values);
  146.     let output = "", i, x_step = Math.trunc(max_x / values.length), y_step = max_y / minmax[1], x_pointer = 0, y_ax = 0;
  147.     //console.log("x-step values : " + values + max_y, max_x);
  148.     //console.log("pituus: " + values.length);
  149.     //console.log(get_minMax(values));
  150.    
  151.     for (i = 0; i < values.length; i++) {
  152.         //console.log(values[i]);
  153.         y_ax = max_y - Math.trunc(values[i] * y_step);
  154.         output += x_pointer + "," + y_ax + " ";
  155.         x_pointer += x_step;
  156.         //console.log("x-step : " + x_step);
  157.         //console.log("x-pointer : " + x_pointer);
  158.         //console.log("y-ax : " + y_ax);
  159.         //console.log("output : " + output);
  160.     }
  161.     output = output.substr(0, output.length);
  162.     //console.log("generate points : " + output);
  163.     return output;
  164. }
  165. function sum_element(a) {
  166.     let s = 0;
  167.     for (i = 0; i < a.length; i++) {
  168.         s += a[i];
  169.     }
  170.     return s;
  171. }
  172. function generate_bars (values, x_max, y_max, style = `style="fill:green;fill-opacity:0.4;stroke:green;stroke-width:1"`, x_margin, y_margin) {
  173.     let output = "", i, x_pointer = x_margin, x_step = 0, y_fact, vaihtelu = 0;
  174.     let minmax = get_minMax(values);
  175.  
  176.     x_step = (x_max / values.length) - 3 ;
  177.  
  178.     y_fact = (  (y_max - y_margin)  / minmax[1]);
  179.     y_line = ( y_max * 0.4) ;
  180.    
  181.     output += `<line x1="0" y1="${y_line}" x2="${x_max}" y2="${y_line}" style="stroke:black" />\n`;
  182.     for (i = 1; i < values.length; i++) {
  183.         output += `<rect width="${x_step }" height="${ ((values[i])  * (y_fact))}" x="${x_pointer}", y="${y_max - (values[i]  * y_fact)}" ${style} />` + "\n";
  184.         x_pointer = x_pointer + x_step + 3;
  185.     }
  186.  
  187.     return output;
  188. }
  189. function precise(x, m = 3) {
  190.   return x.toPrecision(m);
  191. }
  192. function get_minMax(arr) {
  193.     const min = Math.min(...arr);
  194.     const max = Math.max(...arr);
  195.     const index_min = arr.indexOf(min);
  196.     const index_max = arr.indexOf(max);
  197.     return [arr[index_min], arr[index_max], (arr[index_max] - arr[index_min]) ];
  198. }
  199. function ulosta(id, txt) {
  200.     document.getElementById(id).innerHTML = txt;
  201. }
  202.  
  203. let sahkovero = 0.0279372;
  204. let energiahinta = 0.221;
  205.  
  206.  
  207.  
  208. var source = new EventSource("/livestream");
  209. const realTimeMonitorLog = [];
  210. const lastlogLammot = {'imu': [], 'puhallus': [], 'ottoteho': [], 'ottoteho_avg': [], 'lammitysteho' : []};
  211. const lastLog = [];
  212. const hinnat = {'paiva' : {'energia' : 0.2210, 'siirto' : 0.0408}, 'yo' : {'energia' : 0.1490, 'siirto' : 0.0267}, 'sahkovero' : 0.0279372, 'yksAikaHinta' : 0.1990};
  213. const d = new Date();
  214. var laskuri = 0;
  215. var kokonaishinta_paiva = hinnat['paiva']['siirto'] + hinnat['paiva']['energia'] + hinnat['sahkovero'];
  216. var kokonaishinta_yo = hinnat['yo']['siirto'] + hinnat['yo']['energia'] + hinnat['sahkovero'];
  217. var kokonaishinta_yksAika = hinnat['paiva']['siirto'] + hinnat['yksAikaHinta'] + hinnat['sahkovero'];
  218. var energian_hinta_nyt, paivaVaiYo, paivaVaiYo_color;
  219.  
  220.  
  221. source.onmessage = function(event) {
  222.     const obj = JSON.parse(event.data);
  223.     //console.log(obj['lastLogs']);
  224.     let output;
  225.     realTimeMonitorLog.push((obj['realTimeMonitorLog']));
  226.     lastlogLammot['imu'].push(obj['parvi']);
  227.     lastlogLammot['puhallus'].push(obj['sisa_puhallus']);
  228.     lastlogLammot['ottoteho'].push(obj['ilp_teho'] * 1000);
  229.     //lastlogLammot['lammitysteho'].push((((obj['sisa_puhallus'] - obj['parvi']) * 800 * 1.25) / 3600).toFixed(2));
  230.  
  231.     laskuri++;
  232.     if (laskuri == 60) {
  233.         lastlogLammot['ottoteho_avg'].push(lastlogLammot['ottoteho'].reduce((a,c) => a + c, 0) / lastlogLammot['ottoteho'].length);
  234.        
  235.         laskuri = 0;
  236.     }
  237. let COP = ((((obj['sisa_puhallus'] - obj['parvi']) * 800 * 1.25) / 3600).toFixed(2) / ((lastlogLammot['ottoteho'].reduce((a,c) => a + c, 0) / lastlogLammot['ottoteho'].length) / 1000)).toFixed(2);
  238.     console.log(lastlogLammot);
  239.    
  240.     if (d.getHours() < 7 || d.getHours() >= 22) {
  241.         energian_hinta_nyt = kokonaishinta_yo;
  242.         paivaVaiYo = "yötunnilta";
  243.         paivaVaiYo_color = 'blue';
  244.     }
  245.     if (d.getHours() >= 7 && d.getHours() < 22) {
  246.         energian_hinta_nyt = kokonaishinta_paiva;
  247.         paivaVaiYo = "päivätunnilta";
  248.         paivaVaiYo_color = 'OrangeRed';
  249.     }
  250.  
  251.     //const numbers = [3,4,5,2,4,6,78,53,2,1,2];
  252.     //const sum = numbers.reduce((a,c) => a + c, 0);
  253.     //const avg = sum / numbers.length;
  254.  
  255.    
  256.     if (lastlogLammot['imu'].length > 300) {
  257.         lastlogLammot['imu'].shift();
  258.     }
  259.     if (lastlogLammot['puhallus'].length > 300) {
  260.         lastlogLammot['puhallus'].shift();
  261.     }
  262.     if (lastlogLammot['ottoteho'].length > 60) {
  263.         lastlogLammot['ottoteho'].shift();
  264.     }
  265.     if (lastlogLammot['ottoteho_avg'].length > 10) {
  266.         lastlogLammot['ottoteho_avg'].shift();
  267.     }
  268.     if (lastlogLammot['lammitysteho'].length > 60) {
  269.         lastlogLammot['lammitysteho'].shift();
  270.     }
  271.     if (realTimeMonitorLog.length > 100) {
  272.         realTimeMonitorLog.shift();
  273.     }
  274.     if (obj['lastLogs'] != 0) {
  275.         lastLog.unshift(obj['lastLogs']);
  276.     }
  277.     if (lastLog.length > 7000) {
  278.         lastLog.pop();
  279.     }
  280.  
  281.     const someCheckbox = document.getElementById('siirto');
  282.  
  283.     document.getElementById("kulutus").innerHTML = precise(obj['realTimeMonitorLog']);
  284.    
  285.     document.getElementById("kulutus_euroa").innerHTML = (obj['realTimeMonitorLog'] * energian_hinta_nyt).toFixed(2) + " eur/h, == " + (obj['realTimeMonitorLog'] * energian_hinta_nyt * 24).toFixed(2) + " eur/päivä";
  286.  
  287.     ulosta('kulutusajakauma', "<span style='color: OrangeRed;'>Päivätunnit: <b>" + (obj['pulssit_paiva'] / 10000).toFixed(1) + "</b> kWh, <b>" + ((obj['pulssit_paiva'] / 10000) * kokonaishinta_paiva).toFixed(2) + "</b> EUR</span>, <span style='color: blue;'>Yötunnit: <b>" + (obj['pulssit_yo'] / 10000).toFixed(1) + "</b> kWh, <b>" + ((obj['pulssit_yo'] / 10000) * kokonaishinta_yo).toFixed(2) + "</b> EUR, </span><span style='color: magenta;'>== <b>" + ((obj['pulssit_paiva'] / 10000) + (obj['pulssit_yo'] / 10000) + (obj['piirturi_pulssit'] / 10000)).toFixed(1) + "</b> kWh (<b>" + (((obj['pulssit_paiva'] / 10000) * kokonaishinta_paiva) + ((obj['pulssit_yo'] / 10000) * kokonaishinta_yo)).toFixed(2) + "</b> EUR </span>" +
  288.             ",<br /><span style='color: " + paivaVaiYo_color + "'>Kuluvalta " + paivaVaiYo + ": <b>" + (obj['piirturi_pulssit'] / 10000).toFixed(3) + "</b> kWh, <b>" + ((obj['piirturi_pulssit'] / 10000) * energian_hinta_nyt).toFixed(2) + "</b> EUR</span>, hinta 1-aikamittauksella: <b>" + ((obj['pulsseja_laskettu'] / 10000) * (kokonaishinta_yksAika)).toFixed(2) + "</b> EUR");
  289.    
  290.     // Puhallusteho m3/h 800/720/570/620/560/500/450
  291.     ulosta('ilp', "ILP kokonaiskulutus: <b>" + (obj['ilp_count'] / 1000).toFixed(3) + "</b> kWh<br /> " + "Ottoteho: <b>" + (obj['ilp_teho'] * 1000).toFixed(1) + "</b>" + " W / <b>" + (lastlogLammot['ottoteho'].reduce((a,c) => a + c, 0) / lastlogLammot['ottoteho'].length).toFixed(1) +"</b> W/avg, Lämmitysteho: <b>" + ((((obj['sisa_puhallus'] - obj['parvi']) * 800 * 1.25) / 3600).toFixed(2)) + "</b> kW, COP: " + COP + " ,<br />Ottoteho / 10min:" + lastlogLammot['ottoteho_avg'].reduce((a,c) => a + c, 0) / lastlogLammot['ottoteho_avg'].length.toFixed(2) + "<br />Ulkolämpö: <b>" + obj['ulkolampo'].toFixed(2) + "</b> c, sisälämpö: <b>" + obj['sisalampo'].toFixed(2) + "</b> c, lämpö parvella: <b>" + obj['parvi'].toFixed(2) + "</b> c ; Puhalluslämpö: <b>" + obj['sisa_puhallus'].toFixed(2) + "</b> c <br />" + "");
  292.    
  293.    
  294.     // Vesimittarien kertoimet 1/2 = 11 ja 3/4 = 6.6
  295.     style = `style="fill:green;fill-opacity:0.2;stroke:green;stroke-width:1"`;
  296.     output += generate_bars (realTimeMonitorLog, 400, 100, style, x_margin = 10, y_margin = 20);
  297.     document.getElementById("kulutus_bars").innerHTML = output;
  298.     output = "Kumulatiivinen: " + (obj['pulsseja_laskettu'] * 0.0001).toFixed(3) + " kWh, <s>euroja kulunut " + (obj['pulsseja_laskettu'] * 0.0001 * energiahinta).toFixed(2) + " euroa.</s> (Energian hinta: " + (obj['kumul_spot_kokonaishinta'] / 100).toFixed(2) + " eur spot-hinnoin, " + ((obj['pulsseja_laskettu'] * 0.0001) * hinnat['yksAikaHinta']).toFixed(2) + " EUR)";
  299.     document.getElementById("tiedot").innerHTML = output;
  300.     document.getElementById("saikeita").innerHTML = "Säikeitä käynnissä: " + obj['meta']['saikeitaKaynnissa'];
  301.     //document.getElementById("lahetetty").innerHTML = "Dataa lähetetty: " + obj['meta']['broadcastedBytes'];
  302.     ulosta("lahetetty", "Dataa lähetetty: " + ((obj['meta']['broadcastedBytes'] / 1024 / 1024).toFixed(3)) + " MB");
  303.     document.getElementById("pvm").innerHTML = "Päivämäärä: " + obj['meta']['paivamaaraTanaan'];
  304.     document.getElementById("nordpool").innerHTML = "NordPooliin pyynnöt: " + obj['meta']['nordpoolReqTimes'];
  305.     document.getElementById("pulsseja").innerHTML = "Pulsseja laskettu: " + obj['pulsseja_laskettu'];
  306.     document.getElementById("lastlog").innerHTML = "" + lastLog.join("\n");
  307.     document.getElementById("paikalla").innerHTML = "Asiakkaita paikalla: " + obj['meta']['asiakkaitaPaikalla'];
  308.     document.getElementById("pyyntoja").innerHTML = "HTTP pyyntöjä saatu: " + obj['meta']['httpPyyntojaSaatu'];
  309.     document.getElementById("restartTimes").innerHTML = "Datadumppi käynnistetty: " + obj['meta']['restartTimes'] + " kertaa";
  310.  
  311.    
  312.     document.getElementById("kylmavesi").innerHTML = "Kylmä vesi: " + precise(obj['vesi']['kylma_vesi_count'] / 6.6 / 60, 5) + " l (" + precise(obj['vesi']['kylma_vesi_taajuus']/6.6) + " l/min)";
  313.     document.getElementById("kuumavesi").innerHTML = "Kuuma vesi: " + precise(obj['vesi']['ulkokierto_count'] / 11 / 60, 5) + " l (<b>" + precise(obj['vesi']['taajuus'] / 11) + "</b> l/min, <b>" + precise(((obj['vesi']['taajuus'] / 11) / 60) * (80 * 4.2)) + "</b> kW )"; //Hetkellinen teho lämpötilaerolla 80 astetta, X virtauksella
  314.     document.getElementById("lammitysteho").innerHTML = "Ulkokierron lämmitysteho:: " + precise(obj['vesi']['kierron_lammitysteho']) + " kW";
  315.     //document.getElementById("saasto").innerHTML = "Ulkokierron säästö: " + precise(obj['vesi']['kierron_saasto'], 4) + " kWh (" + precise(obj['vesi']['kierron_saasto'] * (0.0279372 + 0.0408 + 0.089), 2) + " eur)";
  316.     //document.getElementById("paluulampo").innerHTML = "Ulkokierron paluulämpö " + precise(obj['vesi']['kierron_paluulampo']) + " c";
  317.     //document.getElementById("kuuman_veden_laskelma").innerHTML = "" + ((((obj['vesi']['ulkokierto_count'] / 11 / 60) * 80 * 4.2)  * (0.0279372 + 0.0408 + energiahinta)) / 3600).toFixed(2) + " EUR, " + ((obj['vesi']['ulkokierto_count'] / 11 / 60) * 80 * 4.2).toFixed(2) + " kWh";
  318.     document.getElementById("varaajan_lataus").innerHTML = "Varaajan latausaste: " + precise(obj['vesi']['varaajan_status'] / obj['vesi']['varaajan_kapasiteetti'] * 100, 4) + " %" + "<br />Ohjauskärjen tila: <b>" + obj['varaajan_karkitieto'] + "</b> (0 = kiinni, 1 = päällä)";
  319.     //let kylman_veden_maara = obj['vesi']['kylma_vesi_count'] / 6.6 / 60;
  320.     //document.getElementById("veden_arvo").innerHTML = "<br /> <b>" + precise(kylman_veden_maara / 1000 * 2.58) + "</b> EUR (<b>" + precise(kylman_veden_maara / 1000 * (2.58 + 3.19)) + "</b> EUR jätevesineen)<br />Porakaivosta kuoletettu <b>" + precise(kylman_veden_maara / 1000 * (2.58 / 4860 * 100)) + "</b> % <br /> <b>" + precise((4860 / 2.58) - (kylman_veden_maara / 1000), 7) + "</b> kuutiota kuoletukseen "  ;
  321.  
  322.  
  323. }
  324.  
  325.  
  326. function sahkon_hinta(txt) {
  327.  
  328.     var hinta_tanaan = (txt['sahko_hinta_tanaan'].map(Number)).slice(0, -1);
  329.     var hinta_huomenna = (txt['sahko_hinta_huomenna'].map(Number)).slice(0, -1);
  330.    
  331.    
  332.    
  333.    
  334.     var kylma_paivittain = (txt['vesi_logi']['kylma_paivittain']);
  335.     var lammin_paivittain = (txt['vesi_logi']['lammin_paivittain']);
  336.     //console.log(lammin_paivittain);
  337.     let output = "";
  338.     let kuuma_vesi_yhteensa = txt['vesi_logi']['lammin_paivittain'].reduce((x, y)=> x+y);
  339.     output += "<span style='color: blue;'>Kylmä vesi yhteensä: " + ((txt['vesi_logi']['kylma_paivittain'].reduce((x, y)=> x+y))/1000).toFixed(2) + " m3 </span><br />";
  340.     output += "<span style='color: red;'>Kuuma vesi yhteensä: " + (kuuma_vesi_yhteensa / 1000).toFixed(2) + " m3,<br />Veden arvo: " + ((80*kuuma_vesi_yhteensa*4.2)/3600) * (kokonaishinta_yo) + " </span><br />";
  341.  
  342.     for (i = 0; i < kylma_paivittain.length; i++) {
  343.        
  344.         output += "<span style='color: blue;'>" + (kylma_paivittain[i]).toFixed(1) + "</span> \n";
  345.         output += "<span style='color: red;'>" + (lammin_paivittain[i]).toFixed(1) + "</span><br />\n";
  346.         output += "<hr />\n";
  347.     }
  348.  
  349.  
  350.     //console.log(output);
  351.     document.getElementById("vesi_paivittain").innerHTML = output;
  352.    
  353.  
  354.    
  355.     //console.log(hinta_huomenna);
  356.    
  357.    
  358.    
  359.    
  360.     const xArray = [];
  361.  
  362.     //if (hinta_huomenna[0] != 0) {
  363.     //    hinta_tanaan = hinta_tanaan.concat(hinta_huomenna);
  364.    //     xArray.concat(xArray);
  365.    // }
  366.    
  367.     for (let i = 0; i < (hinta_tanaan.length); i++){
  368.         xArray.push(i);
  369.     }
  370.     //console.log(hinta_tanaan);
  371.     var data = [{
  372.       x:xArray,
  373.       y:hinta_tanaan,
  374.       type:"bar",
  375.       name: "Hinta tänään"
  376.     }];
  377.     if (hinta_huomenna[0] != 0) {
  378.        data.push({x0: 0, dx: 1, y:hinta_huomenna, type:"bar", name:"Hinta huomenna"});
  379.     }
  380.     let kiintea_hinta = Array(24);
  381.     kiintea_hinta.fill(14.9, 0, 7);
  382.     kiintea_hinta.fill(22.1, 7, 22);
  383.     kiintea_hinta.fill(14.9, 22, 24);
  384.  
  385.     data.push({x0: 0, x1: 1, xref: "paper", y: kiintea_hinta, type: "line", name: "Kiinteä hinta"});
  386.     let timestamp = (txt['sahko']['aloitusaika'] * 1000);
  387.  
  388.    
  389.     var luku = (d - timestamp) / 3600000 | 0;
  390.     //console.log(luku);
  391.     data.push({x0: ((0 - txt['kulutus_spot'].length) + (d.getHours() + 1)), dx: 1, y: txt['kulutus_spot'], type: "line", yaxis: {range: [0,4]}, name:"Kulutus / kWh"});
  392.         data.push({x0: ((0 - txt['kulutus_spot'].length) + (d.getHours() + 1)), dx: 1, y: txt['kulutus_spot'].map(x => x * 21), type: "bar", yaxis: {range: [0,4]}, name:"Hinta / snt"});
  393.  
  394.    
  395.    
  396.    
  397.     var layout = {
  398.         title: "Sähkön hinta ja kulutus",
  399.         margin: {l: 40, r: 0, b: 40, t: 40},
  400.         xaxis: {
  401.             title: "Aika",
  402.             range: [0,24]
  403.         },
  404.         yaxis: {
  405.             title: "Hinta cnt/per kWh",
  406.         }, // Filled Circle
  407.         shapes: [{
  408.             type: "rect",
  409.             x0: (d.getHours()- 0.2 ),
  410.             y0: 0,
  411.             x1: (d.getHours()+ 0.2),
  412.             y1: 1,
  413.             yref: "paper",
  414.             opacity: 0.2,
  415.             fillcolor: 'green',
  416.             borderwidth: 0,
  417.             line: {
  418.                 width: 0
  419.             }
  420.         }
  421.        
  422.        
  423.         ]
  424.     }
  425.  
  426.  
  427.     Plotly.newPlot("myPlot", data, layout, {displayModeBar: false});
  428.     //console.log(txt['vesi']['varaajan_status']);
  429.     varaaja_canvas(txt['vesi']['varaajan_status'] / txt['vesi']['varaajan_kapasiteetti']);
  430.    
  431.    
  432.    
  433.    
  434.    
  435.    
  436.     var ilpLayout = {
  437.         title: "ILP kulutus",
  438.         xaxis: {
  439.             title: "Aika"
  440.         },
  441.         yaxis: {
  442.             title: "Kulutus per h",
  443.         }
  444.     }
  445.     var ilp_kulutus_tunneittain;
  446.     console.log(txt['ilp']['ilp_count_per_h'].slice(-d.getHours()));
  447.     var ilp_data = [
  448.       {
  449.         x: 0,
  450.         y: txt['ilp']['ilp_count_per_h'].map(i => i / 1000),
  451.         type: 'line'
  452.       },
  453.       {
  454.         x: 0,
  455.         y: Array(txt['ilp']['ilp_count_per_h'].length).fill(txt['ilp']['ilp_count_per_h'].reduce((a, b) => (a + b / 1000), 0) / txt['ilp']['ilp_count_per_h'].length),
  456.         type: 'line',
  457.         name: 'teho keskimäärin'
  458.       }
  459.      
  460.     ];
  461.  
  462.     Plotly.newPlot("ILP", ilp_data, ilpLayout);
  463.  
  464.  
  465.  
  466.    txt['vesi_logi']['kylma_paivittain'].shift();
  467.    txt['vesi_logi']['kylma_paivittain'].push(txt['vesi']['kylma_vesi_count'] / 6.6 / 60);
  468.  
  469.     var vesiLayout = {
  470.         title: "Water consumption",
  471.         xaxis: {
  472.             title: "Day",
  473.         },
  474.         yaxis: {
  475.             title: "Liters per day",
  476.         },
  477.         images: [
  478.            {
  479.             x: 0,
  480.             y: 0,
  481.             sizex: 1,
  482.             sizey: 1,
  483.             xanchor: "left",
  484.             xref: "paper",
  485.             yanchor: "bottom",
  486.             yref: "paper",
  487.             opacity: 0.2
  488.             }
  489.         ]
  490.  
  491.     };
  492.     var vesi_data = [
  493.       {
  494.         x: 0,
  495.         y: (txt['vesi_logi']['kylma_paivittain'].map(i =>  i.toFixed(0))),
  496.         type: 'bar',
  497.         name: "Cold ",
  498.         marker: {color: 'blue'}
  499.       },
  500.       {
  501.         x: 0,
  502.         y: (txt['vesi_logi']['lammin_paivittain'].map(i =>  i.toFixed(0))),
  503.         type: 'bar',
  504.         name: "Kuuma ",
  505.         marker: {color: 'red'}
  506.       }
  507.  
  508.  
  509.      
  510.     ];
  511.  
  512.     //Plotly.newPlot("vesi", vesi_data, vesiLayout);
  513.    
  514.     var lammotLayout = {
  515.         margin: {l: 40, r: 0, b: 40, t: 0},
  516.         yaxis: {title: "Astetta"},
  517.         xaxis: {title: "Minuuttia"}
  518.  
  519.     };
  520.     txt['ilp']['sisalampo'].shift();
  521.     txt['ilp']['ulkolampo'].shift();
  522.     txt['ilp']['sisa_puhallus'].shift();
  523.     txt['ilp']['parvi'].shift();
  524.     var lammot_data = [
  525.       {
  526.         y: (txt['ilp']['sisalampo']),
  527.         type: 'line',
  528.         name: "Huonelämpö ",
  529.         marker: {color: 'green'}
  530.       },
  531.       {
  532.         x: 0,
  533.         y: (txt['ilp']['ulkolampo']),
  534.         type: 'bar',
  535.         name: "Imulämpö ulkona",
  536.         marker: {color: 'blue'}
  537.       },
  538.       {
  539.         x: 0,
  540.         y: (txt['ilp']['sisa_puhallus']),
  541.         name: "Puhalluslämpö sisällä ",
  542.         line: {shape: 'linear'},
  543.         marker: {color: 'red'}
  544.       },
  545.       {
  546.         x: 0,
  547.         y: (txt['ilp']['ulko_puhallus']),
  548.         name: "Puhalluslämpö ulkona ",
  549.         line: {shape: 'linear'},
  550.         marker: {color: 'blueviolet'}
  551.       },
  552.       {
  553.         x: 0,
  554.         y: (txt['ilp']['parvi']),
  555.         type: 'line',
  556.         name: "Imulämpö parvella ",
  557.         marker: {color: 'magenta'}
  558.       }
  559.       //},
  560.       //{
  561.         //x: 0,
  562.         //y: (txt['ilp']['ilp_ottoteho_log'].map(i => i * 10 )),
  563.         //type: 'bar',
  564.         //name: "Ottoteho spot ",
  565.         //marker: {color: 'orange'}
  566.         //}
  567.     ];
  568.  
  569.     Plotly.newPlot("lammot", lammot_data, lammotLayout, {displayModeBar: false});
  570.    
  571.    
  572. }
  573.  
  574.  
  575. var hinta;
  576. let data = fetch('/kaikki_data')
  577.     .then(response => response.json())
  578.     .then(data =>  sahkon_hinta(data));
  579.  
  580.  
  581. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement