C56DYYC72SFNR6BSKCOVDY2QW6XNP66EUGGKCBROTCFJVQDB4FUAC
async function updatePlot(puissance: number) {
if(!browser) {
return
}
async function updatePv(puissance: number) {
let d = new Date()
let min_t = (new Date(d.getFullYear(), 0, 1)).getTime() / 1000
let max_t = min_t + 364 * 24 * 3600
somme.hourly = {x: [], y: []};
somme.daily = {x: [], y: []};
somme.weekly = {x: [], y: []};
maxProd = 0
const start = new Date(min_t * 1000)
const janvier = new Date(start.getFullYear(), 0, 1)
for(let t = min_t; t < max_t; t += 3600) {
let tt = new Date(t*1000);
let tts = tt.toLocaleString()
let tds = tt.toLocaleDateString()
let pp = 0
if(pvgis) {
let len = pvgis.outputs.hourly.length
let n = ((t * 1000 - janvier.getTime()) / 3600000) % len
const pvvar = 'P'
pp = pvgis.outputs.hourly[Math.floor(n)][pvvar] * puissance / 1000
soleil.hourly.x.push(tts)
soleil.hourly.y.push(pp)
if((t - min_t) % (24 * 3600) == 0) {
if((t - min_t) % (24 * 7 * 3600) == 0) {
if(soleil.weekly.y.length) {
maxProd = Math.max(maxProd, soleil.weekly.y[soleil.weekly.y.length-1])
}
soleil.weekly.x.push(tds)
soleil.weekly.y.push(pp)
} else {
soleil.weekly.y[soleil.weekly.y.length-1] += pp
}
soleil.daily.x.push(tds)
soleil.daily.y.push(pp)
} else {
soleil.daily.y[soleil.daily.y.length-1] += pp
soleil.weekly.y[soleil.weekly.y.length-1] += pp
}
}
}
prodWeekly = soleil.weekly.y
}
async function updatePlot(puissance: number) {
if(!browser) {
return
}
let pp = 0
if(pvgis) {
let len = pvgis.outputs.hourly.length
let n = ((t * 1000 - janvier.getTime()) / 3600000) % len
const pvvar = 'P'
pp = pvgis.outputs.hourly[Math.floor(n)][pvvar] * puissance / 1000
soleil.hourly.x.push(tts)
soleil.hourly.y.push(pp)
if((t - min_t) % (24 * 3600) == 0) {
if((t - min_t) % (24 * 7 * 3600) == 0) {
soleil.weekly.x.push(tds)
soleil.weekly.y.push(pp)
} else {
soleil.weekly.y[soleil.weekly.y.length-1] += pp
}
soleil.daily.x.push(tds)
soleil.daily.y.push(pp)
} else {
soleil.daily.y[soleil.daily.y.length-1] += pp
soleil.weekly.y[soleil.weekly.y.length-1] += pp
}
totalProd += pp
}
let tts = tt.toLocaleString()
let layout = {}
function relayout(event: any) {
let w = event["xaxis.range[1]"] - Math.max(0, event["xaxis.range[0]"])
let layout_ = JSON.parse(JSON.stringify(layout))
if(isNaN(w)) {
sample(soleil)
sample(somme)
console.log(layout_)
layout_.xaxis.autorange = true
layout_.yaxis.autorange = true
plotStyle = "min-height:450px"
Plotly!.react('plot', [soleil, somme], layout_, { responsive: true })
} else {
let sb = soleil.bucket
if(event.bucket) {
w *= event.bucket
} else {
w *= soleil.bucket
}
sample(soleil, w)
sample(somme, w)
let sb_ = soleil.bucket
event["xaxis.range[0]"] *= sb / sb_
event["xaxis.range[1]"] *= sb / sb_
event.bucket = soleil.bucket
layout_.xaxis.range = [
event["xaxis.range[0]"],
event["xaxis.range[1]"]
]
layout_.yaxis.autorange = true
layout_.yaxis.fixedrange = false
plotStyle = "min-height:450px"
Plotly!.react('plot', [soleil, somme], layout_, { responsive: true })
}
};
let relayout = function(event: any) {
let w = event["xaxis.range[1]"] - Math.max(0, event["xaxis.range[0]"])
let layout_ = JSON.parse(JSON.stringify(layout))
if(isNaN(w)) {
sample(soleil)
sample(somme)
console.log(layout_)
layout_.xaxis.autorange = true
layout_.yaxis.autorange = true
plotStyle = "min-height:450px"
Plotly!.react('plot', [soleil, somme], layout_, { responsive: true })
} else {
let sb = soleil.bucket
if(event.bucket) {
w *= event.bucket
} else {
w *= soleil.bucket
}
sample(soleil, w)
sample(somme, w)
let sb_ = soleil.bucket
event["xaxis.range[0]"] *= sb / sb_
event["xaxis.range[1]"] *= sb / sb_
event.bucket = soleil.bucket
layout_.xaxis.range = [
event["xaxis.range[0]"],
event["xaxis.range[1]"]
]
layout_.yaxis.autorange = true
layout_.yaxis.fixedrange = false
plotStyle = "min-height:450px"
Plotly!.react('plot', [soleil, somme], layout_, { responsive: true })
}
};
<div class="d-flex justify-content-around p-5">
<div class="flex-column justify-content-between text-center ">
<div class="fs-1 fw-bold bg-cc ">
<svg viewBox="0 0 300 50" xmlns="http://www.w3.org/2000/svg" width="200px">
<path d={traceArray(resultatNet,N)} fill="transparent" stroke-width="2" stroke="red" />
<div class="d-flex justify-content-around p-5">
<div class="d-flex flex-column justify-content-between text-center me-3">
<div class="py-3 my-auto">
<svg viewBox="{Math.floor(-N*0.05)} {Math.floor(-maxa - margin)} {Math.ceil(N*1.1)} {Math.ceil(maxa-mina + 2 * margin)}" xmlns="http://www.w3.org/2000/svg" width="250px" height="100px" preserveAspectRatio="none">
<path d={traceArray(resultatNet,N)} fill="transparent" stroke-width="2" vector-effect="non-scaling-stroke" stroke="#b71515" />
<div class="flex-column justify-content-between text-center ">
<div class="fs-1 fw-bold ">
<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" width="60px">
<path d="M 0,49 L 10,49 20,49 30,12 40,5 50,10 60,0 70,15 80,43 90,49 100,49 "
fill="transparent" stroke-width="2" stroke="red" />
<div class="d-flex flex-column justify-content-between text-center ms-3">
<div style="width:250px" class="py-3 my-auto">
<div class="spinner-border ms-3 loading" class:d-none={!pvgis_loading}></div>
<svg class:d-none={pvgis_loading || !maxProd} viewBox="-10 0 270 {maxProd}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="250px" height="100px">
{#each prodWeekly as p, i}
<path d="M {i*5}, {maxProd} L {i*5}, {maxProd-p}" fill="transparent" stroke-width="2" stroke="#ffbf00" />
{/each}
<svg class="donnee" class:d-none={pvgis_loading || maxProd} xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"/>
</svg>