Me encanta esta idea. Es lo más « lógico » en mi situación, donde uso gráficos para seguir mi consumo eléctrico. Esto permitiría pasar de un día al anterior/siguiente fácilmente (especialmente en móvil).
No tengo más votos, pero ¡apoyo!
¡Limpio! Totalmente 
Por otro lado, el diseño hay que revisarlo ^^
Me gusta lo que hace HelloWatt:
Pero no tenemos exactamente el mismo caso de uso, así que hay que adaptarlo, pero podría funcionar así
Boceto rápido:
Sabiendo que si el usuario pulsa la flecha de la izquierda, hay que cambiar « Últimas 24 horas » por « 15/01 08:43 - 16/01 8:43 » creo
@pierre-gilles Tengo un poco de tiempo a partir de mañana, y me gustaría explorar esta solicitud de funcionalidad para afinar el requisito. Tengo dos preguntas antes de empezar:
¡Genial 
Hay que pensar en todas las interacciones Por ejemplo: En mi prototipo rápido, se muestra « últimas 24 horas ». ¿Y si quiero cambiar a « último mes », cómo lo hago?
De hecho, no debe haber ninguna duda, la única diferencia entre el prototipo y el desarrollo final es que el desarrollo final está en Gladys
Hay que explorar la documentación de ApexChart y solo hacer propuestas posibles
¡Hola!
Entonces, he estado pensando en esta solicitud de evolución. Hago una propuesta gráfica a continuación para mostrar cómo se colocarán los nuevos elementos que permiten la navegación en el tiempo. Y sobre todo, en un segundo mensaje, añado una lista de reglas a implementar para que la navegación sea lo más 'lógica’ posible.
Las novedades añadidas:
La casilla de verificación es una propuesta, porque creo que la navegación, por ejemplo en el período de ‹ 7 días ›, debería tener dos modos posibles:
=> Y propongo, por lo tanto, añadir la posibilidad de cambiar de un modo a otro.
Nota 1: Los elementos se colocan todos encima del gráfico, por lo que creo que es independiente de lo que Apexcharts pueda hacer o no…
Nota 2: Para volver a ahora y para el cambio ‹ regular/deslizante ›, no he hecho una elección visual: botón, texto clicable, icono, casilla de verificación, lista desplegable,… Me digo que el desarrollador sabrá hacer la buena elección en función del espacio disponible…
Visualmente, podría quedar así:
Las reglas (en negrita a continuación) son bastante pocas, creo, para que el código a implementar no sea una máquina de vapor. Pero doy muchas precisiones y ejemplos, para que cada uno pueda hacerse una idea y detectar comportamientos que no serían pertinentes. ¡Estoy abierto a sus comentarios para afinar!
====== Navegación con las flechas : ======
Nota: Dos acciones sucesivas de flecha izquierda y luego flecha derecha (o al revés) son ‹ simétricas ›; esto devuelve el eje de las abscisas exactamente al mismo período
Caso particular: Si la fecha de fin es >= ahora, la flecha de navegación derecha se desactiva (para no ir a explorar el futuro que aún no tiene datos)
====== Cambio de modo ‹ regular/deslizante ›: ======
En modo regular, los períodos se definen de la siguiente manera:
Cuando se pasa al modo ‹ regular ›: el nuevo período incluye la fecha de fin anterior (por lo tanto, se desplaza un poco hacia el futuro)
Cuando se pasa al modo ‹ deslizante ›: el nuevo período « se alinea » con el día y la hora actuales (por lo tanto, se desplaza un poco hacia el pasado)
Precisión: la nueva fecha de fin será la más reciente posible, sin superar la fecha de fin anterior
nota: el alineamiento con el día y la hora actuales permite volver a ‹ ahora › cuando se navegue con la flecha derecha…
El alineamiento del final del período se hace de la siguiente manera, según el tipo de período (tomando como ejemplo que la fecha actual es jueves 3 de abril 18h25):
Ejemplos:
====== Cambio de tipo de período: ======
Cuando se cambia el período para ampliarlo:
Nota: en general el nuevo período más amplio incluye completamente el período anterior, excepto a veces cuando se parte de un período de ‹ 7 días ›
Cuando se cambia el período para reducirlo:
Caso particular: si este cambio sitúa el nuevo período completamente en el futuro, entonces el nuevo período será en realidad el que incluye ‹ ahora ›.
Nota: en general el nuevo período más reducido está completamente incluido en el período anterior, excepto a veces cuando se va hacia un período de ‹ 7 días ›
Un pequeño defecto con la navegación en ‹ zigzag › en al menos 2 casos:
Por ejemplo: 6-12/1 => 1-31/1 => 27/1-2/2 => 1-28/2 => 24/2-2/3 => 1-31/3 … Pero el caso es raro, y se acabará ‹ topando › con un domingo de fin de mes o con ‹ ahora ›, por lo que no me parece muy grave…¡Hola @StephaneB Gracias por ocuparte de este tema!
Hay buenas ideas en tu propuesta, pero creo que la interfaz de usuario (UI/UX) aún necesita un poco de trabajo para ser más intuitiva.
Algunas observaciones:
En este tipo de interfaz, que ya existe en muchas aplicaciones, creo que realmente podemos inspirarnos en lo que se hace en otros lugares. No hay necesidad de reinventar la rueda ¿Te basaste en ejemplos concretos existentes?
Gracias por abordar este tema, mis comentarios son francos, pero nada personal ¡aja!
¡No hay problema, me parece bien
Yo lo querría Pero eso no es suficiente para convertirlo en una necesidad de la comunidad, eso es seguro. Me interesaría conocer las opiniones de los demás, en particular de quienes votaron por este tema…
Lo entiendo… Bueno, no soy diseñador gráfico, pero acabo de intentar crear iconos para hacerlo más intuitivo. Si hay diseñadores gráficos en la comunidad, no duden en proponer otra cosa
Para aclarar el impacto del cambio regular/deslizante, podría ser esto:
y 
Y para el retorno a ‹ ahora ›, podría ser un icono de este estilo:
Integración en un gráfico, quedaría así:
¿Qué opinan?
Pero bueno, no…
El ejemplo del panel de control de Stripe no me parece pertinente: funciona con una especie de barra de configuración que abre diferentes ventanas grandes para definir el período observado y el período con el que hacer la comparación, y lo que se configura luego se aplica a todos los gráficos de la página. No es en absoluto la lógica de Gladys, y hacer que el método de configuración de Stripe sea ‹ limpio › en cada uno de los gráficos de un panel de Gladys no me parece en absoluto pertinente.
Y por otro lado, Stripe no ofrece una forma sencilla de navegar por el pasado/futuro: no hay flechas de anterior/siguiente para moverse en el tiempo, cuando ese es el objetivo de esta solicitud en el boceto inicial de @Tolkyen y también en el tuyo…
Para resumir, la interfaz de Stripe no me inspira en absoluto para hacer evolucionar Gladys…
¿Tienes otras ideas de interfaces existentes? Porque yo no tengo ideas por mi parte, y no tengo tiempo de explorar ‹ al azar ›… Si me das otras pistas, estaré encantado de mirar
Todas las opciones expuestas me convienen, gracias @StephaneB por todo el trabajo
También acabo de ver la interfaz propuesta en HelloWatt, que ya habías mencionado. Es limpia e intuitiva, pero mucho más simplificada en comparación con lo que queremos hacer en Gladys. En su caso:
Por lo tanto, es difícil mantener su interfaz simple para ofrecer la funcionalidad más rica de Gladys.
Me quedo disponible para estudiar otras interfaces existentes que hagan este tipo de recorrido en el tiempo en gráficos, para intentar inspirarme… ¿Alguien tendría ideas?
hola @StephaneB
no tengo ideas de diseño por el momento, pero ¿no podríamos implementar ya algunas funciones ya presentes en Apexcharts?
No sé muy bien cómo responderte, @mutmut, quizá sea mejor que @pierre-gilles reaccione en función de lo que conoce de ApexCharts. Al no ser desarrollador, no he profundizado en la documentación de ApexCharts para saber qué es posible.
Y es un poco intencional: creo que para hacer un buen trabajo en software, hay que separar a priori la reflexión sobre la necesidad (lo que he intentado hacer) y la de la implementación (que dejo a los desarrolladores). Y, por supuesto, si la necesidad descrita no es técnicamente realizable de manera razonable, hay que intercambiar ideas para encontrar el mejor compromiso
Pero, en cuanto a este tema, sigo disponible para explorar otras interfaces si tenéis ideas y inspirarme para revisar la necesidad que he dibujado, o para discutir con el/los desarrolladores si algunos puntos que he propuesto son demasiado complejos de realizar.
El objetivo no es copiar exactamente lo que hacen Stripe, HelloWatt u otros productos, sino más bien inspirarse en ciertas mecánicas de interfaz de usuario probadas, que funcionan bien.
Por ejemplo, en Stripe, me gusta su selector de intervalo: combina rangos fijos con intervalos deslizantes:
Me parece que su enfoque es más claro que tu propuesta.
Pero estoy de acuerdo en que el selector de Stripe no tiene sentido para Gladys, es solo un ejemplo.
Puedo pasar tiempo en esta especificación, pero entonces me ayuda menos 
De mi lado, toda mi energía está en Matter en este momento.
¡Totalmente de acuerdo!
La implementación es un detalle. Lo más difícil es hacer la especificación.
Gracias @pierre-gilles por estas precisiones
Vale, lo entiendo. Pero eso significa que estás de acuerdo si hago un boceto que se atreve a integrar funcionalidades bastante diferentes a las actuales. Porque hasta ahora hacía propuestas para que fueran funcionales, pero sin tener que cambiar demasiado la interfaz (a la vez para limitar el desarrollo gráfico y para no introducir demasiada ‹ ruptura › en los hábitos de los usuarios)…
No, no era la idea, quiero seguir trabajando en ello. Solo pedía pistas para explorar, pero no solo a ti Voy a explorar un poco por mi cuenta, pero sigo abierto a las ideas de todos para sitios que muestren gráficos ‹ navegables › y que podrían inspirarme…
Propón lo que quieras
Sé que es un poco restrictivo, pero justo ahí está todo el desafío del trabajo de especificación 
¡No es broma cuando digo que es la etapa más compleja!
Hay que investigar: buscar en Google, inspirarse en productos cotidianos, hacerle preguntas a la IA si es necesario, o explorar sitios que agrupan patrones de UX o ejemplos de diseño inspiradores.
Bueno, debo admitir que es un caso de uso en el que la IA realmente ahorra tiempo: describí lo que quería hacer y le pedí ejemplos de sitios y componentes… ¡y me ayudó mucho!
De esto he aprendido varias cosas:
Por lo tanto, basta con colocar:
Y para una navegación fluida y lógica, se necesita una sincronización automática entre el gráfico y el selector. Es decir:
He hecho bastantes pruebas de configuración con un componente que me parece interesante, y del cual la IA me dice que será bien compatible con Gladys: DateRangePicker. Pero la compatibilidad, por supuesto, debe ser confirmada por @pierre-gilles u otros desarrolladores
Con este componente DateRangePicker, he elegido las siguientes opciones para crear el boceto de abajo:
Y he predefinido los períodos deslizantes que existen actualmente en Gladys, seguidos de los calendarios periódicos equivalentes
- 60 últimas minutos / esta hora
- 12 últimas horas / esta media jornada
- 24 últimas horas / este día
- 3 últimos días / (sin equivalente calendario)
- 7 últimos días / esta semana
- 30 últimos días / este mes
- 90 últimos días / este trimestre
- 365 últimos días / este año
(Si es necesario, podré proporcionar el código de configuración del DateRangePicker que he utilizado)
