Bonjour à tous,

J'ai pris la décision de me reconvertir vers le web dev il y a quelques mois. Initialement je suis chef de projets informatiques, service delivery manager, etc... Sauf que je n'aime pas ce travail, je n'ai pas l'impression de créer de la valeur, j'en ai marre de passer ma vie en réunion, à envoyer des mails, bref...
Je vais pas aller plus loin sur mes motivations parce que je ne veux pas vous écrire un pavé indigeste.

Quoi qu'il en soit j'ai appris le HTML5, le CSS3, et je viens de finir un cours vidéo de 8 heures sur le JavaScript : là j'en suis à l'étape où j'essai de mettre en application tout ce que j'ai appris au travers de quelques projets.

Le soucis c'est que je me retrouve parfois bloqué, et même avec des recherches je ne comprend pas bien l'idée et ce que je fais. C'est actuellement mon cas, j'essai d'utiliser un fichier JSON (donc en local) pour afficher mes données dynamiquement sur ma page sous la forme d'un graphic chart en barre. J'ai trouvé la méthode fetch, mais je l'utilise très mal.

Du coup je suis à la recherche d'un mentor, qui pourra m'aider. L'idée ce serait de s'appeler sur discord (ou le service de votre choix), et de partager mon écran par exemple, qu'il m'explique ce que je fait de mal, pourquoi pas me donner des bonnes pratiques.

Je suis sûr que vous serez bienveillant les kheys, vous pouvez me MP, ou m'ajouter sur Discord directement si vous voulez !
Discord : Kamiyasho#6233

Montre ton code et dis nous l'erreur que tu as

Le 01 juillet 2022 à 16:21:27 :
Montre ton code et dis nous l'erreur que tu as

Ok voici mon code : https://codepen.io/jilaniyazidi/pen/LYdVLvq

J'ai aussi un fichier data.JSON mais malheureusement je ne peux pas le mettre sur codepen, donc je vous met son contenu ci-dessous :

[
{
"day": "mon",
"amount": 17.45
},
{
"day": "tue",
"amount": 34.91
},
{
"day": "wed",
"amount": 52.36
},
{
"day": "thu",
"amount": 31.07
},
{
"day": "fri",
"amount": 23.39
},
{
"day": "sat",
"amount": 43.28
},
{
"day": "sun",
"amount": 25.48
}
]

Voici le résultat actuel sur mon navigateur :

Voici le résultat final que je dois afficher :

Quel est ton problème du coup, vu que tu récupères bien les informations de ton JSON ?

Si j'ai bien compris tu veux afficher des graphiques à colonne selon les données que tu récupères via ton JSON.
Pour cela il va falloir que tu t'aides du CSS pour représenter la hauteur des colonnes sur ton graphique dynamiquement.

Il y a plusieurs solutions, admettons que ton graphique soit comme suit (0, 50), 50 étant le montant maximal.
( tu peux bien évidemment jouer avec ça et partir sur une base 100 mais je pense qu'à vu de nez c'est bien 50 que tu dois faire ).

Il te faut récupérer le pourcentage sur 50 d'un montant X ou Y sur ton JSON pour y appliquer ensuite via le CSS sa hauteur, même flex-basis pourrait faire l'affaire si tu travailles avec Flexbox.

Si je récapitule, 50 étant une height de 100%, 25% une height de 50%, 0 une height de 0 %.
Et je serais toi j'arrondirais le tout à l'entier supérieur en veillant à ne pas dépasser 50, ça fait moins brouillon après.

EDIT : j'ai vu que t'avais un montant à 52 et des poussières, donc naturellement passe à 60, j'ai lu trop vite.

Je n'ai pas précisé, pour l'implémentation de la logique au dessus, je suppose que tu le fais via le JS en manipulant le style CSS de tes éléments.
Le CSS " stand-alone " ne permet pas pour l'heure de faire cela, même en s'aidant des Custom Props.

Sinon Chart.js
https://www.chartjs.org/

Là pour le coup c'est un exercice pour s'entrainer, c'est un peu contreproductif d'utiliser une librairie sans savoir ce qui tourne sous le capot et la logique derrière.

Essaye ça:
fetch(url) .then(function(res){ return res.json(); }) .then(function(data) { divChart.textContent = data; })

Hello tout le monde, je m'attendais vraiment pas à recevoir autant de réponse
Sur les conseils d'un khey (coucou si t'es encore là) j'ai laissé le JS de côté, et j'ai construit mon graphique en barres en CSS pur :

Ensuite il m'a donné quelques pistes, et j'ai pensé à "injecter" la valeur "amont" de mon JSON dans la propriété CSS "height" de mes rectangles.
Pour ce faire, j'ai modifié mon JS comme suit :

const divChart = document.querySelector('#divChart');
const url = './data.json';
const rect1 = document.querySelector('#rect1');

//Import of my datas from my JSON file

fetch(url)
.then(function(res){
return res.json();
})
.then(function(data) {
console.log(data[0]['amount'])
rect1.style.height = data[0]["amount"] + 'px';
})

Voici mon résultat :
D'après la réponse de Marav, je crois que je suis sur la bonne voie,
qu'en pensez-vous ?
C'est comme ça qu'on est sensé utiliser un JSON ?

En ce qui concerne les librairies, j'en ai encore jamais utilisé, et oui effectivement je préfère ne pas dépendre de ces-dernières, je préfère savoir me débrouiller sans et m'en reserver l'usage juste pour gagner du temps ou s'il y a des choses vraiment très spécifiques que je me sens capable de faire mais trop chronophage.

Le 02 juillet 2022 à 18:38:17 :
Si j'ai bien compris tu veux afficher des graphiques à colonne selon les données que tu récupères via ton JSON.
Pour cela il va falloir que tu t'aides du CSS pour représenter la hauteur des colonnes sur ton graphique dynamiquement.

Il y a plusieurs solutions, admettons que ton graphique soit comme suit (0, 50), 50 étant le montant maximal.
( tu peux bien évidemment jouer avec ça et partir sur une base 100 mais je pense qu'à vu de nez c'est bien 50 que tu dois faire ).

Il te faut récupérer le pourcentage sur 50 d'un montant X ou Y sur ton JSON pour y appliquer ensuite via le CSS sa hauteur, même flex-basis pourrait faire l'affaire si tu travailles avec Flexbox.

Si je récapitule, 50 étant une height de 100%, 25% une height de 50%, 0 une height de 0 %.
Et je serais toi j'arrondirais le tout à l'entier supérieur en veillant à ne pas dépasser 50, ça fait moins brouillon après.

EDIT : j'ai vu que t'avais un montant à 52 et des poussières, donc naturellement passe à 60, j'ai lu trop vite.

ton idée de pourcentage est très intéressante, je vais essayer de voir comment mettre ça en place !
d'autant plus que pour le coup avec ce que j'ai fait (= c'est à dire injecter la valeur numérique de "amount" et d'y concaténer "px" pour affecter une valeur à la propriété height, mes rectangles sont trop petit).
Sinon j'avais pensé à ajouter un coefficient multiplication pour chaque valeur, genre faire *2 ou *3 genre comme ça :

rect1.style.height = (data[0]["amount"] * 2) + 'px';

Le 02 juillet 2022 à 18:43:44 :
Je n'ai pas précisé, pour l'implémentation de la logique au dessus, je suppose que tu le fais via le JS en manipulant le style CSS de tes éléments.
Le CSS " stand-alone " ne permet pas pour l'heure de faire cela, même en s'aidant des Custom Props.

Oui je manipule le style CSS de mes éléments.
Je ne comprend pas ta dernière phrase, qu'est-ce que le CSS 'stand-alone' ne permet pas de faire à l'heure actuelle?
Pour le coup je viens d'essayer de définir la valeur max de mes "amont" de manière "intelligente", c'est-à-dire sans la définir manuellement, voilà ce que ça donne :

.then(function(data) {
        console.log(data[0]['amount'])
        divChart.style.maxHeight = Math.max(data);
        rect1.style.height = data[0]["amount"] + '%';
    })

Malheureusement je ne sais pas pourquoi mais lorsque je fait ça, mon rect1 disparait de mon graphique, on dirait qu'il n'aime pas que je lui concatène le pourcentage à la fin

Le 03 juillet 2022 à 01:16:38 :

Le 02 juillet 2022 à 18:43:44 :
Je n'ai pas précisé, pour l'implémentation de la logique au dessus, je suppose que tu le fais via le JS en manipulant le style CSS de tes éléments.
Le CSS " stand-alone " ne permet pas pour l'heure de faire cela, même en s'aidant des Custom Props.

Oui je manipule le style CSS de mes éléments.
Je ne comprend pas ta dernière phrase, qu'est-ce que le CSS 'stand-alone' ne permet pas de faire à l'heure actuelle?
Pour le coup je viens d'essayer de définir la valeur max de mes "amont" de manière "intelligente", c'est-à-dire sans la définir manuellement, voilà ce que ça donne :

.then(function(data) {
        console.log(data[0]['amount'])
        divChart.style.maxHeight = Math.max(data);
        rect1.style.height = data[0]["amount"] + '%';
    })

Malheureusement je ne sais pas pourquoi mais lorsque je fait ça, mon rect1 disparait de mon graphique, on dirait qu'il n'aime pas que je lui concatène le pourcentage à la fin

T'as regardé dans l'inspecteur sa valeur pour la propriété height ?
Et aussi, tu veux une pourcentage de X%, mais X% de combien ? L'élément parent a bien une taille déjà ?

Le 03 juillet 2022 à 04:05:59 :

Le 03 juillet 2022 à 01:16:38 :

Le 02 juillet 2022 à 18:43:44 :
Je n'ai pas précisé, pour l'implémentation de la logique au dessus, je suppose que tu le fais via le JS en manipulant le style CSS de tes éléments.
Le CSS " stand-alone " ne permet pas pour l'heure de faire cela, même en s'aidant des Custom Props.

Oui je manipule le style CSS de mes éléments.
Je ne comprend pas ta dernière phrase, qu'est-ce que le CSS 'stand-alone' ne permet pas de faire à l'heure actuelle?
Pour le coup je viens d'essayer de définir la valeur max de mes "amont" de manière "intelligente", c'est-à-dire sans la définir manuellement, voilà ce que ça donne :

.then(function(data) {
        console.log(data[0]['amount'])
        divChart.style.maxHeight = Math.max(data);
        rect1.style.height = data[0]["amount"] + '%';
    })

Malheureusement je ne sais pas pourquoi mais lorsque je fait ça, mon rect1 disparait de mon graphique, on dirait qu'il n'aime pas que je lui concatène le pourcentage à la fin

T'as regardé dans l'inspecteur sa valeur pour la propriété height ?
Et aussi, tu veux une pourcentage de X%, mais X% de combien ? L'élément parent a bien une taille déjà ?

Sa valeur pour la propriété height ? J'ai pas compris de quoi tu parles, du rectangle1 ou de mon container (="divChart")?
En fait sur mon CSS j'ai définit la taille de mon container comme suit :

#divChart{
    height: fit-content;
}

Et ensuite sur mon JS :

divChart.style.maxHeight = Math.max(data);

Là je lui dis d'assigné la plus grande valeur liée à la clé "amount" du tableau "data" dans le champs "maxi-height" du container divChart. Ainsi, le container ne pourra pas avoir une valeur supérieure à celle-ci
Donc pour moi là le 100% c'est la plus grande valeur donc 52 et des poussières comme tu me disais hier.

Le 03 juillet 2022 à 15:09:59 :

Le 03 juillet 2022 à 04:05:59 :

Le 03 juillet 2022 à 01:16:38 :

Le 02 juillet 2022 à 18:43:44 :
Je n'ai pas précisé, pour l'implémentation de la logique au dessus, je suppose que tu le fais via le JS en manipulant le style CSS de tes éléments.
Le CSS " stand-alone " ne permet pas pour l'heure de faire cela, même en s'aidant des Custom Props.

Oui je manipule le style CSS de mes éléments.
Je ne comprend pas ta dernière phrase, qu'est-ce que le CSS 'stand-alone' ne permet pas de faire à l'heure actuelle?
Pour le coup je viens d'essayer de définir la valeur max de mes "amont" de manière "intelligente", c'est-à-dire sans la définir manuellement, voilà ce que ça donne :

.then(function(data) {
        console.log(data[0]['amount'])
        divChart.style.maxHeight = Math.max(data);
        rect1.style.height = data[0]["amount"] + '%';
    })

Malheureusement je ne sais pas pourquoi mais lorsque je fait ça, mon rect1 disparait de mon graphique, on dirait qu'il n'aime pas que je lui concatène le pourcentage à la fin

T'as regardé dans l'inspecteur sa valeur pour la propriété height ?
Et aussi, tu veux une pourcentage de X%, mais X% de combien ? L'élément parent a bien une taille déjà ?

Sa valeur pour la propriété height ? J'ai pas compris de quoi tu parles, du rectangle1 ou de mon container (="divChart")?
En fait sur mon CSS j'ai définit la taille de mon container comme suit :

#divChart{
    height: fit-content;
}

Et ensuite sur mon JS :

divChart.style.maxHeight = Math.max(data);

Là je lui dis d'assigné la plus grande valeur liée à la clé "amount" du tableau "data" dans le champs "maxi-height" du container divChart. Ainsi, le container ne pourra pas avoir une valeur supérieure à celle-ci
Donc pour moi là le 100% c'est la plus grande valeur donc 52 et des poussières comme tu me disais hier.

Je viens de modifié ma ligne sur mon JS pour insister sur la valeur "amount", pour qu'il comprenne bien "parcours mon tableau et prend la plus grande valeur pour la clé amount"

ça donne ça :
divChart.style.maxHeight = Math.max(data["amount"]);

Ca me renvoit pas d'erreur dans la console, mais ça ne change rien non plus ensuite quand je met le "%" pour mon premier rectangle