Discussion :

[Ushuango]

Bonjour,

voici mon script React qui fonctionne, mais pas exactement que je le voudrais:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
import React from 'react'
import DataFieldText from './DataFieldText.js'
 
class ChartGetDatas extends React.Component {
 
    state = {
        "size": "",
        "min": "",
        "max": "",
        "type": "",
        "types": [
            "",
            "bar",
            "line",
            "radar"
        ]
    }
 
    handleMin = (min) => {
        this.setState({
            min: min,
        })
    }
 
    handleMax = (max) => {
        this.setState({
            max: max,
        })
    }
 
    handleSize = (sizeValue) => {
        this.setState({
            size: sizeValue,
        })
    }
 
    handleSubmit = (ev ) => {
        ev.preventDefault()
        console.log("c'est parti !")
        const{size, min, max} = this.state
        console.log(size, min, max)
        const url = "https://127.0.0.1:8000/stats/" + size + "/" + min + "/" + max
        fetch(url)
        .then(response => response.json())
        .then(res => {
            let chart = new Chart(document.getElementById('chartGraph'), {
                type: this.state.type,
                data: {
                    labels: res[0],
                    datasets: [{
                        label: "mois",
                        data: res[1],
                        backgroundColor: ['red', 'blue', 'yellow'],
                    }]
                }
            })
        })
        .catch(err => console.log(err))
    }
 
    handleChange = ev => {
        this.setState({
            type: ev.target.value
        })
    }
 
    render() {
        return <form onSubmit={this.handleSubmit}>
                    <h1>Renseignements pour générer des données</h1>
                    <div className="data-item">
                        <div className="form-group">
                            <label htmlFor="types">Type de graphique</label>
                            <select value={this.state.type} onChange={this.handleChange} id="types">
                                {this.state.types.map( (type, index) => {return <option key={index} value={type}>{type}</option>})}
                            </select>
                        </div>
                        <DataFieldText textLabel="taille du jeu de données" onSubmit={this.handleSize}/>
                        <DataFieldText textLabel="valeur minimum" onSubmit={this.handleMin}/>
                        <DataFieldText textLabel="valeur maximum" onSubmit={this.handleMax}/>
                    </div>
                    <button className="btn btn-primary"> Génerer le graphique</button>
                </form>
    }
}
 
export default ChartGetDatas;

le résultat est un formulaire qui renseigne quelques paramètres pour afficher un graphique avec la librairie Chart.js
L'id 'chartGraph', est celui de la balise canvas dans ma page html, là où Chart affiche le graphique.
Chart.js demande de créer un objet Chart avec l'id et la configuration ( l'objet qui suit )
je rentre des données (qui vont servir pour la configuration), je clique , et le graphique s'affiche !
Les données récupérées par la requête sont aléatoires: si je clique à nouveau, sans changer les paramètres renseignés, j'obtiens un graphique différent.

Tout ça me convient bien sauf:
si j'ai généré plusieurs graphiques à la suite, lorsque que je balade ma souris sur le canvas, par moment, les graphiques générés avant le dernier en date réapparaissent !!
Lorsque j'affiche l'objet chart dans la console, je remarque qu'il possède un id ( entre autres ).
J'imagine que tous les graphiques générés sont les uns sur les autres... il faudrait supprimer le graphique avant d'en afficher un autre.
Mais je ne sais pas comment faire !
On peut détruire l'objet précédent ? ou bien placer le canvas dans le render et en faire un "nouveau" à chaque graphique ?

Si quelqu'un à une idée de la démarche à suivre pour supprimer le graphique d'avant, je suis preneur !
Merci d'avance,

Laurent.

[Ushuango]

Alors , j'ai avancé un peu depuis:
il y a une méthode de chartjs pour supprimer un graphique
.destroy()

mais comment m'en servir dans ReactJs ?

Je continue de chercher !!

[Ushuango]

Trouvé finalement !

Je passe une variable chart en state.
puis je l'initialise sur le onSubmit, et j'utilise la méthode destroy si cette variable n'est pas nulle

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
import React from 'react'
import DataFieldText from './DataFieldText.js'
//import ChartGraph from './ChartGraph.js'
 
class ChartGetDatas extends React.Component {
 
    state = {
        "chart": null,
        "ab": [],
        "ord": [],
        "size": "",
        "min": "",
        "max": "",
        "type": "bar",
        "types": [
            "",
            "bar",
            "line",
            "radar"
        ]
    }
 
    handleMin = (min) => {
        this.setState({
            min: min,
        })
    }
 
    handleMax = (max) => {
        this.setState({
            max: max,
        })
    }
 
    handleSize = (sizeValue) => {
        this.setState({
            size: sizeValue,
        })
    }
 
    handleSubmit = (ev ) => {
        ev.preventDefault()
        // remove the first graph before create a new one
        if (this.state.chart) {
            this.state.chart.destroy()
        }
        const{size, min, max} = this.state
        const url = "https://127.0.0.1:8000/stats/" + size + "/" + min + "/" + max
        fetch(url)
        .then(response => response.json())
        .then(res => {
            this.setState({
            ab: res[0],
            ord: res[1],
            chart:  new Chart(document.getElementById('chartGraph'), {
                type: this.state.type,
                data: {
                    labels: res[0],
                    datasets: [{
                        label: "mois",
                        data: res[1],
                        backgroundColor: ['red', 'blue', 'yellow'],
                    }]
                }
            })
            })
        })
        .catch(err => console.log(err));
    }
 
    handleChange = ev => {
        this.setState({
            type: ev.target.value
        })
    }
 
    render() {
        const{ab, ord, type} = this.state
        console.log(ab, ord, type)
        return <form onSubmit={this.handleSubmit}>
                    <h1>Renseignements pour générer des données</h1>
                    <div className="data-item">
                        <div className="form-group">
                            <label htmlFor="types">Type de graphique</label>
                            <select value={this.state.type} onChange={this.handleChange} id="types">
                                {this.state.types.map( (type, index) => {return <option key={index} value={type}>{type}</option>})}
                            </select>
                        </div>
                        <DataFieldText textLabel="taille du jeu de données" onSubmit={this.handleSize}/>
                        <DataFieldText textLabel="valeur minimum" onSubmit={this.handleMin}/>
                        <DataFieldText textLabel="valeur maximum" onSubmit={this.handleMax}/>
                    </div>
                    <button className="btn btn-primary"> Génerer le graphique</button>
                    {/* <ChartGraph type={type} ab={ab} ord={ord} /> */}
                </form>
    }
}
 
export default ChartGetDatas;

Voilà, donc merci à tous