Bueno, en todo caso, a mí me encanta el resultado. Y combinado con el otro ajuste en las esquinas redondeadas, ¡va a ser lo mejor!
Te lo preparo…
@pierre-gilles, creo que deberías reemplazar el final de tu código por esto:
// Opcional: Limitar el tamaño del paso
const nbTheoreticalStep = (maxY - minY) / f;
let stepSize = f; // Tamaño de paso predeterminado
// Ajustar el número de pasos para mejores visuales
if (nbTheoreticalStep > 5) {
stepSize = f * 2; // si hay demasiados pasos, aumentar el tamaño del paso
} else if (nbTheoreticalStep < 3) {
stepSize = f / 2; // si hay muy pocos pasos, reducir el tamaño del paso
}
return { minY, maxY, stepSize };
@StephaneB ¡Está actualizado!
Sigue en la misma URL:
https://fix-chart-min-max.gladys-plus.pages.dev
Aceptando nuevos comentarios 
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…
@pierre-gilles Para el primer gráfico, el código a continuación debería ser mejor. En resumen, cuando la amplitud de las abscisas no es un múltiplo exacto del paso, se ‹ desplaza › hacia arriba o hacia abajo la amplitud de las abscisas.
// Opcional: Restringir el tamaño del paso
const nbTheoreticalStep = (maxY - minY) / f;
let stepSize = f; // Tamaño de paso predeterminado
// Ajustar el número de pasos para mejores visuales
if (nbTheoreticalStep > 5) {
stepSize = f * 2; // si hay demasiados pasos, aumentar el tamaño del paso
if (!(isInteger((maxY - minY) / stepSize)) {
// Si el rango no es un múltiplo del tamaño del paso, minY o maxY deben ajustarse.
// El ajuste se elige para un buen centrado del gráfico
if ((maxY - maxVal) < (minVal - minY)) {
maxY = maxY + stepSize / 2;
} else {
minY = minY - stepSize / 2;
}
}
} else if (nbTheoreticalStep < 3) {
stepSize = f / 2; // si hay muy pocos pasos, reducir el tamaño del paso
}
return { minY, maxY, stepSize };
@pierre-gilles, acabo de revisar las opciones de ApexCharts. ¿No se habría tratado esto directamente con la opción ‹ forceNiceScale ›?
Otro detalle: si los valores del gráfico son negativos y positivos (por ejemplo, de -28 a +26), tendremos los siguientes valores en el eje: -30, -10, 10, 30. Y es una lástima no ver el cero.
Mi herramienta de IA favorita me dice que se puede hacer esto con anotaciones (para tener una línea punteada ligera en y=0):
var options = {
// ... otras opciones del gráfico ...
annotations: {
yaxis: [{
y: 0,
borderColor: '#00E396',
strokeDashArray: 5, // Crea una línea punteada
borderWidth: 1, // Grosor de la línea
opacity: 0.7, // Opacidad de la línea (opcional)
label: {
show: false // Oculta la etiqueta
}
}]
}
};
¿Qué opinas?
La idea sería añadirlo solo si minY es negativo y maxY es positivo, porque no tiene sentido si todo está ‹ lejos › del cero…
Acabo de probar forceNiceScale, ¡no veo ninguna diferencia con la opción actualmente en producción!
Tu código no es válido, para tu información, aquí está el código actualmente en la PR:
calculateYAxisRange = () => {
const { series } = this.props;
// Extraer todos los valores de todas las 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)))); // Factor de escala
const minY = Math.floor(minVal / f) * f;
const maxY = Math.ceil(maxVal / f) * f;
// Opcional: Restringir el tamaño del paso
const nbTheoreticalStep = (maxY - minY) / f;
let step = f; // Tamaño de paso predeterminado
// Ajustar el número de pasos para mejores visuales
if (nbTheoreticalStep > 5) {
step = f * 2; // si hay demasiados pasos, aumentar el tamaño del paso
} else if (nbTheoreticalStep < 3) {
step = f / 2; // si hay muy pocos pasos, reducir el tamaño del paso
}
return { minY, maxY, step };
};
Me encantaría que modificaras este fragmento de código y me lo enviaras después
PS: Es una lástima que no puedas probarlo directamente ^^ No sé si tienes una cuenta de Github, pero puedes lanzar un entorno Gladys en un solo clic desde Github, eso evitaría los viajes de ida y vuelta
Esta vez debería funcionar. Lo probé en Codepen y encontré mis 3 errores 
calculateYAxisRange = () => {
const { series } = this.props;
// Extraer todos los valores de todas las 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)))); // Factor de escala
let minY = Math.floor(minVal / f) * f;
let maxY = Math.ceil(maxVal / f) * f;
// Opcional: Limitar el tamaño del paso
const nbTheoreticalStep = (maxY - minY) / f;
let step = f; // Tamaño del paso por defecto
// Ajustar el número de pasos para una mejor visualización
if (nbTheoreticalStep > 5) {
step = f * 2; // si hay demasiados pasos, aumentar el tamaño del paso
if (! Number.isInteger((maxY - minY) / step)) {
// Si el rango no es un múltiplo del tamaño del paso, minY o maxY deben ajustarse.
// El ajuste se elige para un buen centrado del gráfico
if ((maxY - maxVal) < (minVal - minY)) {
maxY = maxY + step / 2;
} else {
minY = minY - step / 2;
}
}
} else if (nbTheoreticalStep < 3) {
step = f / 2; // si hay muy pocos pasos, reducir el tamaño del paso
}
return { minY, maxY, step };
};
Tengo una cuenta de Github, creada cuando me pediste que creara una issue pero no he hecho nada más con ella.
Cuando dices ‹ lanzar un entorno Gladys en un solo clic ›, ¿es para recuperar un entorno de desarrollo para ejecutar en mi ordenador con Windows, o es un ‹ bac à sable › completo que está en línea?
De hecho, el ordenador no es mío, sino de mi empresa, no instalo exactamente lo que quiero
Manipular pequeños trucos en línea (como aquí, por ejemplo, este fragmento de código, probándolo en codepen.io, eso sí puedo…)
¡Gracias! Acabo de modificar la PR, esto es lo que obtengo con los datos que me pasaste:
Sigue disponible en la misma URL: https://fix-chart-min-max.gladys-plus.pages.dev
Es un entorno de desarrollo completamente en el navegador, al estilo de Codepen. Se llama « Github CodeSpace », hay un plan gratuito con 120 horas de núcleo gratuitas por mes
El repositorio Gladys está bien configurado para soportar esta herramienta, se lanza en un clic aquí:
Luego aterrizarás en un VSCode en tu navegador, y es un entorno listo para usar que permite hacer lo mismo que localmente (todas las dependencias ya están allí)
Luego, todo está explicado en la documentación de Gladys:
Si no, recomiendo en YouTube los live coding que he hecho, donde explico en video todo lo que hago
¡Vale, parece bien! ¡Voy a probarlo!
Lo probé con tu URL (¡muy práctico, por cierto!), y ¡quedan realmente bien todos estos gráficos con escalas legibles! Según yo, está listo para integrarse
Me parece bien (electricidad, temperatura, calidad del aire) en varios intervalos de tiempo 
Efectivamente, antes lo gestionaba ApexChart, pero ahora hay que volver a codificar todo ese comportamiento ya que gestionamos manualmente el min/max. Hay un evento legendClick que permite hacerlo.
Me encantaría encargarme de volver a hacerlo todo, pero empiezo a preguntarme: ¿realmente es útil lo que estamos haciendo? 
Tengo la impresión de que estamos recodificando externamente todo lo que hace ApexChart, y hasta ahora confieso que solo copio y pego lo que me da @StephaneB sin cuestionarlo, pero hasta ahora no veo casi ninguna diferencia con lo que hay en producción ^^
@StephaneB ¿realmente te parece mejor lo que propones?
Todavía no he entendido cuál era el problema en realidad
Algunos ejemplos de gráficos que, en mi opinión, son mucho más legibles porque el eje de las ordenadas se ha vuelto ‹ lógico ›:
No me gusta mucho quitar curvas. Cuando tengo un caso como el que muestra @GBoulvin, con dispositivos que no están en absoluto en la misma escala de valores, prefiero hacer dos gráficos para que siempre sean legibles.
Pero entiendo perfectamente la preocupación…
Si a la izquierda está la producción, estás comparando dos cosas, por lo que es difícil comparar. Hice modificaciones en el eje vertical en otra PR, que aún no está en producción, pero ya está activa en master, por lo que en esta PR ^^
Si nos referimos más bien a la cabeza de la curva, apenas veo diferencias…