pmeunier/grain - Change O63TXA57OHFIPUDT4QQBDVXRQA64CUIT7XU4G6MSQPMDRFJPM7IAC

Refactorisation des fonctions de redimensionnement du graphique

Created by pmeunier on December 30, 2023

O63TXA57OHFIPUDT4QQBDVXRQA64CUIT7XU4G6MSQPMDRFJPM7IAC

Dependencies

In channels

main

Change contents

Insertion in src/routes/projet/[id]/Simulation.svelte at line 7 [6.784923]
[4.4953]
[5.25894]
```
    import { sample, chooseScale, relayout } from '../../../plot'
```
Insertion in src/routes/projet/[id]/Simulation.svelte at line 241 [6.784923]
[5.31403]
[5.31403]
Deletion in src/routes/projet/[id]/Simulation.svelte at line 384 [6.784923]
B:BD[5.36007] → [5.36007:36017]
∅:D[5.36017] → [7.28087:28088]
B:BD[7.28087] → [7.28087:28088]
B:BD[7.28088] → [5.36018:36080]
∅:D[5.36080] → [6.789573:789574]
B:BD[6.789573] → [6.789573:789574]
B:BD[6.789574] → [5.36081:36200]
∅:D[5.36200] → [6.789600:789601]
∅:D[8.354680] → [6.789600:789601]
B:BD[6.789600] → [6.789600:789601]
B:BD[6.789601] → [5.36201:36246]
B:BD[5.36306] → [5.36306:36397]
```
        }
        auto = 0
        totalProd = 0
        totalConso = 0
        somme.hourly = { x: [], y: [] }
        somme.daily = { x: [], y: [] }
        somme.weekly = { x: [], y: [] }
        const start = new Date(min_t * 1000)
        let i = 0
        for (let [_, r] of Object.entries(annee_)) {
            r.i = 0
```

Replacement in src/routes/projet/[id]/Simulation.svelte at line 385 [6.784923]

B:BD[5.36407] → [5.36407:37630]

B:BD[5.37630] → [2.0:96]

∅:D[2.96] → [5.37750:37779]

B:BD[5.37750] → [5.37750:37779]

        for (let t = min_t; t < max_t; t += 3600) {
            let tt = new Date(t * 1000)
            let tds = tt.toLocaleDateString()
            let tts = tt.toLocaleString()
            let y = 0
            for (let [_, r] of Object.entries(annee_)) {
                // Les profils Enedis sont échantillonnés à la
                // demi-heure, il faut ajouter deux points consécutifs
                while (r.i < r.t.length && r.t[r.i] < t + 3600) {
                    if (!isNaN(r.y[r.i])) y += r.y[r.i]
                    r.i += 1
                }
            }
            somme.hourly.x.push(tts)
            somme.hourly.y.push(y)
            if ((t - min_t) % (24 * 3600) == 0) {
                if ((t - min_t) % (24 * 7 * 3600) == 0) {
                    somme.weekly.x.push(tds)
                    somme.weekly.y.push(y)
                } else {
                    somme.weekly.y[somme.weekly.y.length - 1] += y
                }
                somme.daily.x.push(tds)
                somme.daily.y.push(y)
            } else {
                somme.daily.y[somme.daily.y.length - 1] += y
                somme.weekly.y[somme.weekly.y.length - 1] += y
            }
            totalConso += y
            totalProd += soleil.hourly.y[i]
            auto += Math.min(y, soleil.hourly.y[i])
            i += 1
        }

[5.36407]

[5.37779]

        let auto_ = sample(min_t, max_t, annee_, somme, soleil)
        auto = auto_.auto
        totalProd = auto_.totalProd
        totalConso = auto_.totalConso

Deletion in src/routes/projet/[id]/Simulation.svelte at line 395 [6.784923]

B:BD[5.37916] → [5.37916:37922]

∅:D[5.37922] → [6.792820:792821]

B:BD[6.792820] → [6.792820:792821]

B:BD[6.792821] → [5.37923:38880]

    }
    function sample(
        s: {
            weekly: { x: (number | string)[]; y: number[] }
            daily: { x: (number | string)[]; y: number[] }
            hourly: { x: (number | string)[]; y: number[] }
            x: (number | string)[]
            y: number[]
            bucket: number
        },
        w?: number
    ) {
        // ww: nombre d'échantillons bruts à afficher
        let ww = w || s.hourly.x.length
        let bbox = (<SVGGraphicsElement | undefined>(
            document.getElementsByClassName('bglayer')[0]
        ))?.getBBox()
        let width = (bbox?.width || 10) / 3
        if (ww <= width) {
            s.x = s.hourly.x
            s.y = s.hourly.y
            s.bucket = 1
        } else if (ww / 24 <= width) {
            s.x = s.daily.x
            s.y = s.daily.y
            s.bucket = 24
        } else {
            s.x = s.weekly.x
            s.y = s.weekly.y
            s.bucket = 24 * 7
        }

Replacement in src/routes/projet/[id]/Simulation.svelte at line 397 [6.784923]
B:BD[6.793331] → [5.38887:38912]
```
    let has_plot = false
```
[6.793331]
[5.38912]
```
    let has_plot = { has_plot: false }
```

Replacement in src/routes/projet/[id]/Simulation.svelte at line 399 [6.784923]

B:BD[5.38932] → [5.38932:39161]

B:BD[5.39161] → [3.354:455]

∅:D[3.455] → [5.39161:39436]

B:BD[5.39161] → [5.39161:39436]

B:BD[5.39436] → [3.456:519]

∅:D[3.519] → [5.39501:39522]

B:BD[5.39501] → [5.39501:39522]

B:BD[5.39522] → [3.520:586]

∅:D[3.586] → [5.39590:39676]

B:BD[5.39590] → [5.39590:39676]

B:BD[5.39676] → [3.587:640]

∅:D[3.640] → [5.39757:40816]

B:BD[5.39757] → [5.39757:40816]

B:BD[5.40816] → [3.641:704]

∅:D[3.704] → [5.40881:40902]

B:BD[5.40881] → [5.40881:40902]

B:BD[5.40902] → [3.705:771]

∅:D[3.771] → [5.40970:41056]

B:BD[5.40970] → [5.40970:41056]

B:BD[5.41056] → [3.772:825]

∅:D[3.825] → [5.41137:41193]

B:BD[5.41137] → [5.41137:41193]

    function relayout(event: any) {
        if (event.bucket) {
            return
        }
        let w = event['xaxis.range[1]'] - Math.max(0, event['xaxis.range[0]'])
        let layout_ = JSON.parse(JSON.stringify(layout))
        let plot = document.getElementById('plot')
        if (!plot) {
            return
        }
        if (isNaN(w)) {
            sample(soleil)
            sample(somme)
            layout_.xaxis.autorange = true
            layout_.yaxis.autorange = true
            event.bucket = soleil.bucket
            plotStyle = 'min-height:450px'
            if (has_plot) {
                Plotly!.update(plot, [soleil, somme], layout_)
            } else {
                Plotly!.newPlot(plot, [soleil, somme], layout_, {
                    responsive: true,
                })
                //@ts-ignore
                plot.on('plotly_relayout', relayout)
                has_plot = 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]'],
            ]
            let unite: string
            if (soleil.bucket == 24) {
                unite = 'kWh/jour'
            } else if (soleil.bucket == 24 * 7) {
                unite = 'kWh/semaine'
            } else {
                unite = 'kWh'
            }
            layout_.yaxis.title.text = unite
            layout_.yaxis.autorange = true
            layout_.yaxis.fixedrange = false
            plotStyle = 'min-height:450px'
            if (has_plot) {
                Plotly!.update(plot, [soleil, somme], layout_)
            } else {
                Plotly!.newPlot(plot, [soleil, somme], layout_, {
                    responsive: true,
                })
                //@ts-ignore
                plot.on('plotly_relayout', relayout)
                has_plot = true
            }
        }

[5.38932]

[5.41193]


    function relayout_(
        event: any,
    ) {
        console.log("relayout_");
        relayout(event, Plotly, layout, has_plot, soleil, somme)

Replacement in src/routes/projet/[id]/Simulation.svelte at line 410 [6.784923]
∅:D[3.905] → [5.41224:41269]
B:BD[5.41224] → [5.41224:41269]
```
        sample(soleil)
        sample(somme)
```
[3.905]
[5.41269]
```
        chooseScale(soleil)
        chooseScale(somme)
```
Replacement in src/routes/projet/[id]/Simulation.svelte at line 449 [6.784923]
B:BD[5.42383] → [5.42383:42407]
```
        if (has_plot) {
```
[5.42383]
[3.906]
```
        if (has_plot.has_plot) {
```

Replacement in src/routes/projet/[id]/Simulation.svelte at line 456 [6.784923]

B:BD[5.42723] → [3.1027:1076]

∅:D[3.1076] → [5.42800:42828]

B:BD[5.42800] → [5.42800:42828]

            plot.on('plotly_relayout', relayout)
            has_plot = true

[5.42723]

[5.42828]

            plot.on('plotly_relayout', relayout_)
            has_plot.has_plot = true

Replacement in src/routes/Donnees.svelte at line 2 [9.39]

B:BD[9.59] → [5.113538:113646]

    export let donnees: {
        projets: number
        puissance: number
        economies: number
    }

[9.59]

[5.113646]

    export let donnees:
        | undefined
        | {
              projets: number
              puissance: number
              economies: number
          }

Replacement in src/routes/+page.svelte at line 10 [6.855919]

B:BD[5.128635] → [5.128635:128665]

    export let data: PageData

[5.128635]

[5.128665]

    export let data: PageData & {
        donnees?: {
            projets: number
            puissance: number
            economies: number
        }
    }

Deletion in src/routes/+page.svelte at line 102 [6.855919]
B:BD[5.131709] → [5.131709:131746]
```
                Créez votre futur !
```

File addition: plot.ts (----------)

[6.762577]

export type Annee = Record<string, { t: number[]; y: number[]; i: number }>
export type Sample = {
    hourly: { x: string[]; y: number[] }
    daily: { x: string[]; y: number[] }
    weekly: { x: string[]; y: number[] }
}
export function sample(
    min_t: number,
    max_t: number,
    annee: Annee,
    somme: Sample,
    soleil: Sample
): { auto: number; totalProd: number; totalConso: number }
export function sample(
    min_t: number,
    max_t: number,
    annee: Annee,
    somme: Sample
): undefined
export function sample(
    min_t: number,
    max_t: number,
    annee: Annee,
    somme: Sample,
    soleil?: Sample
): undefined | { auto: number; totalProd: number; totalConso: number } {
    let auto = 0
    let totalProd = 0
    let totalConso = 0
    somme.hourly = { x: [], y: [] }
    somme.daily = { x: [], y: [] }
    somme.weekly = { x: [], y: [] }
    let i = 0
    for (let [_, r] of Object.entries(annee)) {
        r.i = 0
    }
    for (let t = min_t; t < max_t; t += 3600) {
        let tt = new Date(t * 1000)
        let tds = tt.toLocaleDateString()
        let tts = tt.toLocaleString()
        let y = 0
        for (let [_, r] of Object.entries(annee)) {
            // Les profils Enedis sont échantillonnés à la
            // demi-heure, il faut ajouter deux points consécutifs
            while (r.i < r.t.length && r.t[r.i] < t + 3600) {
                if (!isNaN(r.y[r.i])) y += r.y[r.i]
                r.i += 1
            }
        }
        somme.hourly.x.push(tts)
        somme.hourly.y.push(y)
        if ((t - min_t) % (24 * 3600) == 0) {
            if ((t - min_t) % (24 * 7 * 3600) == 0) {
                somme.weekly.x.push(tds)
                somme.weekly.y.push(y)
            } else {
                somme.weekly.y[somme.weekly.y.length - 1] += y
            }
            somme.daily.x.push(tds)
            somme.daily.y.push(y)
        } else {
            somme.daily.y[somme.daily.y.length - 1] += y
            somme.weekly.y[somme.weekly.y.length - 1] += y
        }
        totalConso += y
        if (soleil) {
            totalProd += soleil.hourly.y[i]
            auto += Math.min(y, soleil.hourly.y[i])
        }
        i += 1
    }
    if (soleil) {
        return {
            auto,
            totalProd,
            totalConso,
        }
    }
}
export type PlotSample = {
    x: (number | string)[]
    y: number[]
    bucket: number
}
export function chooseScale(s: Sample & PlotSample, w?: number) {
    console.log('chooseScale', w)
    // ww: nombre d'échantillons bruts à afficher
    let ww = w || s.hourly.x.length
    let bbox = (<SVGGraphicsElement | undefined>(
        document.getElementsByClassName('bglayer')[0]
    ))?.getBBox()
    let width = (bbox?.width || 100) / 3
    console.log(bbox?.width)
    if (ww <= width) {
        s.x = s.hourly.x
        s.y = s.hourly.y
        s.bucket = 1
    } else if (ww / 24 <= width) {
        s.x = s.daily.x
        s.y = s.daily.y
        s.bucket = 24
    } else {
        s.x = s.weekly.x
        s.y = s.weekly.y
        s.bucket = 24 * 7
    }
}
export function relayout(
    event: any,
    Plotly: any,
    layout: any,
    has_plot: { has_plot: boolean },
    soleil: Sample & PlotSample,
    somme: Sample & PlotSample
) {
    console.log('relayout')
    if (event.bucket) {
        return false
    }
    let w = event['xaxis.range[1]'] - Math.max(0, event['xaxis.range[0]'])
    let layout_ = JSON.parse(JSON.stringify(layout))
    let plot = document.getElementById('plot')
    if (!plot) {
        return false
    }
    if (isNaN(w)) {
        chooseScale(soleil)
        chooseScale(somme)
        layout_.xaxis.autorange = true
        layout_.yaxis.autorange = true
        event.bucket = soleil.bucket
    } else {
        let sb = soleil.bucket
        if (event.bucket) {
            w *= event.bucket
        } else {
            w *= soleil.bucket
        }
        chooseScale(soleil, w)
        chooseScale(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]']]
        let unite: string
        if (soleil.bucket == 24) {
            unite = 'kWh/jour'
        } else if (soleil.bucket == 24 * 7) {
            unite = 'kWh/semaine'
        } else {
            unite = 'kWh'
        }
        layout_.yaxis.title.text = unite
        layout_.yaxis.autorange = true
        layout_.yaxis.fixedrange = false
    }
    if (has_plot.has_plot) {
        Plotly!.update(plot, [soleil, somme], layout_)
    } else {
        Plotly!.newPlot(plot, [soleil, somme], layout_, {
            responsive: true,
        })
        //@ts-ignore
        plot.on('plotly_relayout', (event: any) =>
            relayout(event, Plotly, layout, has_plot, soleil, somme)
        )
        has_plot.has_plot = true
    }
}

Refactorisation des fonctions de redimensionnement du graphique

Dependencies

In channels

Change contents

Insertion in src/routes/projet/[id]/Simulation.svelte at line 7 [6.784923]

Insertion in src/routes/projet/[id]/Simulation.svelte at line 241 [6.784923]

Deletion in src/routes/projet/[id]/Simulation.svelte at line 384 [6.784923]

Replacement in src/routes/projet/[id]/Simulation.svelte at line 385 [6.784923]

Deletion in src/routes/projet/[id]/Simulation.svelte at line 395 [6.784923]

Replacement in src/routes/projet/[id]/Simulation.svelte at line 397 [6.784923]

Replacement in src/routes/projet/[id]/Simulation.svelte at line 399 [6.784923]

Replacement in src/routes/projet/[id]/Simulation.svelte at line 410 [6.784923]

Replacement in src/routes/projet/[id]/Simulation.svelte at line 449 [6.784923]

Replacement in src/routes/projet/[id]/Simulation.svelte at line 456 [6.784923]

Replacement in src/routes/Donnees.svelte at line 2 [9.39]

Replacement in src/routes/+page.svelte at line 10 [6.855919]

Deletion in src/routes/+page.svelte at line 102 [6.855919]

File addition: plot.ts (----------)