Ben en tout cas chez moi, j’aime beaucoup le résultat. Et combiné avec l’autre ajustement sur les arrondis, ça va être au top !
Je te prépare ça…
@pierre-gilles , je pense qu’il faut remplacer la fin de ton code par ça:
// Optional: Constrain the step size
const nbTheoreticalStep = (maxY - minY) / f;
let stepSize = f; // Default step size
// Adjust number of steps for better visuals
if (nbTheoreticalStep > 5) {
stepSize = f * 2; // if too much steps, increase step size
} else if (nbTheoreticalStep < 3) {
stepSize = f / 2; // if too few steps, reduce step size
}
return { minY, maxY, stepSize };
1 « J'aime »
@StephaneB C’est mis à jour !
Toujours sur la même URL :
https://fix-chart-min-max.gladys-plus.pages.dev
Preneur de nouveaux retours du coup 
1 « J'aime »
C’est bien quasiment sur tous mes graphes. Sauf 2 en fait.
Sur celui-là, le graphe est coupé en haut. Mais je sais d’où ça vient, c’est un cas où le nombre de pas théorique est de 7 et où l’ajustement le fait passer à 3,5, et ça entraine un souci… Je regarde pour te proposer une correction de code
Sur celui-là par contre, je ne comprends pas comment le calcul aboutit à une échelle -4;0;4;8;12. C’est propre, mais avec le code je m’attendais à -10;0;10;20. Je vais essayer de comprendre, et je te redis…
1 « J'aime »
@pierre-gilles Pour le premier graphique, le code ci-dessous devrait être mieux. En gros, quand l’amplitude des abscisses n’est pas multiple exact du pas, on ‹ écarte › vers le haut ou le bas l’amplitude des abscisses.
// Optional: Constrain the step size
const nbTheoreticalStep = (maxY - minY) / f;
let stepSize = f; // Default step size
// Adjust number of steps for better visuals
if (nbTheoreticalStep > 5) {
stepSize = f * 2; // if too much steps, increase step size
if !(isInteger((maxY - minY) / stepSize) {
// If the range is not a multiple of step size, minY or maxY must be adjusted.
// Adjustement is choosen for a good centering of the graph
if ((maxY - maxVal) < (minVal - minY)) {
maxY = maxY + stepSize / 2;
} else {
minY = minY - stepSize / 2;
}
}
} else if (nbTheoreticalStep < 3) {
stepSize = f / 2; // if too few steps, reduce step size
}
return { minY, maxY, stepSize };
@pierre-gilles, je viens de parcourir les options de ApexCharts. Est-ce que ce qu’on code-là n’aurait pas en fait été traité directement avec l’option ‹ forceNiceScale › ?
Autre détail : si les valeurs du graphes sont négatives et positives (je prends pour exemple de -28 à +26), on aura les valeurs suivantes sur l’axe : -30 -10 10 30. Et c’est dommage je trouve de ne pas voir le zéro.
Mon outil IA préféré me dit qu’on peut faire ça avec des annotations (pour avoir un trait pointillé léger au niveau du y=0) :
var options = {
// ... autres options du graphique ...
annotations: {
yaxis: [{
y: 0,
borderColor: '#00E396',
strokeDashArray: 5, // Crée une ligne en pointillés
borderWidth: 1, // Épaisseur de la ligne
opacity: 0.7, // Opacité de la ligne (optionnel)
label: {
show: false // Masque le libellé
}
}]
}
};
Qu’en penses-tu ?
Le truc serait de ne l’ajouter que si minY est négatif et maxY est positif, car ça n’a pas d’intérêt si tout se passe ‹ loin › du zéro…
Je viens de tester forceNiceScale, je ne vois aucune différence avec l’option actuellement en prod !
Ton code n’est pas valide, pour info voilà le code actuellement sur la PR :
calculateYAxisRange = () => {
const { series } = this.props;
// Extract all values from all series
const allValues = series.flatMap(serie => serie.data.map(([, value]) => value));
const minVal = Math.min(...allValues);
const maxVal = Math.max(...allValues);
const range = maxVal - minVal;
const f = Math.pow(10, Math.floor(Math.log10(Math.abs(range)))); // Scaling factor
const minY = Math.floor(minVal / f) * f;
const maxY = Math.ceil(maxVal / f) * f;
// Optional: Constrain the step size
const nbTheoreticalStep = (maxY - minY) / f;
let step = f; // Default step size
// Adjust number of steps for better visuals
if (nbTheoreticalStep > 5) {
step = f * 2; // if too much steps, increase step size
} else if (nbTheoreticalStep < 3) {
step = f / 2; // if too few steps, reduce step size
}
return { minY, maxY, step };
};
Je veux bien que tu modifie ce bout de code et que tu me l’envoie ensuite
PS: dommage que tu puisses pas tester directement ^^ Je ne sais pas si tu as un compte Github, mais tu peux lancer un environnement Gladys en un seul clic depuis Github, ça éviterait les allers retour
Cette fois, ça devrait marcher. J’ai testé dans Codepen, et repéré mes 3 erreurs 
calculateYAxisRange = () => {
const { series } = this.props;
// Extract all values from all series
const allValues = series.flatMap(serie => serie.data.map(([, value]) => value));
const minVal = Math.min(...allValues);
const maxVal = Math.max(...allValues);
const range = maxVal - minVal;
const f = Math.pow(10, Math.floor(Math.log10(Math.abs(range)))); // Scaling factor
let minY = Math.floor(minVal / f) * f;
let maxY = Math.ceil(maxVal / f) * f;
// Optional: Constrain the step size
const nbTheoreticalStep = (maxY - minY) / f;
let step = f; // Default step size
// Adjust number of steps for better visuals
if (nbTheoreticalStep > 5) {
step = f * 2; // if too much steps, increase step size
if (! Number.isInteger((maxY - minY) / step)) {
// If the range is not a multiple of step size, minY or maxY must be adjusted.
// Adjustement is choosen for a good centering of the graph
if ((maxY - maxVal) < (minVal - minY)) {
maxY = maxY + step / 2;
} else {
minY = minY - step / 2;
}
}
} else if (nbTheoreticalStep < 3) {
step = f / 2; // if too few steps, reduce step size
}
return { minY, maxY, step };
};
J’ai un compte Github, créé quand tu m’avais demandé d’y créer une issue mais je n’ai rien fait de plus avec.
Quand tu dis ‹ lancer un environnement Gladys en un seul clic ›, c’est pour récupérer un environnement de devt à faire tourner sur mon ordi Windows, ou c’est un ‹ bac à sable › complet qui est en ligne ?
En fait, l’ordi n’est pas à moi mais à ma boite, je n’y installe pas tout à fait ce que je veux
Bricoler des p’tits trucs en ligne (comme là par exemple ce bout de code, en le testant dans codepen.io, ça je peux…)
Merci ! Je viens de modifier la PR, ça donne ça sur la donnée que tu m’avais passé :
Toujours dispo sur la même URL : https://fix-chart-min-max.gladys-plus.pages.dev
C’est un environnement de dev entièrement dans le navigateur, façon codepen. ça s’appelle « Github CodeSpace », il y a un plan gratuit avec 120 core-heure gratuit par mois
Le repo Gladys est bien configuré pour supporter cet outil, ça se lance en un clic ici :
Ensuite tu vas atterrir dans un VSCode dans ton navigateur, et c’est un environnement tout prêt qui permet de faire la même chose qu’en local (toutes les dépendances sont déjà là)
Ensuite, tout est expliqué sur la documentation Gladys :
Je recommande sur Youtube sinon les live coding que j’ai fais, où j’explique en vidéo tout ce que je fais
ok, ça semble bien, ça. Je vais tester !
1 « J'aime »
Testé avec ton URL (très pratique, ça, d’ailleurs!), et ça rend vraiment bien tous ces graphiques avec des échelles lisibles !! D’après moi, c’est prêt à être intégré
1 « J'aime »
C’est bon pour moi (electricité, température, qualité de l’air) sur plusieurs intervalles de temps 
1 « J'aime »
Moi j’ai un souci évoqué plus haut :
Les axes ne sont plus redimensionnés automatiquement et ça ne va pas !
J’ai ça :
Au lieu de ça :
Effectivement, avant c’était géré par ApexChart mais là du coup il faut re-coder tout ce comportement vu qu’on gère manuellement le min/max. Il y a un évènement legendClick qui permet de faire ça.
Je veux bien m’occuper de tout refaire, mais je commence à me poser la question: est-ce que c’est vraiment utile ce qu’on fait ? 
J’ai l’impression qu’on re-code en externe tout ce que fait ApexChart, et pour l’instant j’avoue que je copie colle juste ce que me donne @StephaneB sans me poser de questions, mais pour l’instant je ne vois quasi aucune différence avec ce qui est en prod ^^
@StephaneB ça te parait vraiment mieux ce que tu proposes ?
J’ai toujours pas compris quel était le problème en fait
Quelques exemples de graphiques qui sont vraiment plus lisibles, je trouve, parce que l’axe des ordonnées est devenu ‹ logique › :
Je joue très peu avec le fait d’enlever des courbes. Quand j’ai un cas comme le montre @GBoulvin , avec des appareils qui ne jouent pas du tout dans la même échelle de valeurs, je préfère faire deux graphes pour qu’ils soient toujours lisibles.
Mais je comprends bien sûr le souci…
Si à gauche c’est la prod, tu compares 2 choses là du coup c’est dur de comparer. J’ai fais des modifications sur l’axe des ordonnées dans une autre PR, pas encore en prod, mais déjà actif sur master donc dans cette PR ^^
Si on se réfère plutôt à la tête de la courbe du coup, je ne vois quasi pas de différences…