Dashboard - Mise en page flexible : pouvoir mélanger les lignes à 1, 2 et 3 colonnes

Pouvoir mixer des lignes à 1, 2 et 3 colonnes dans un même Dashboard

Description

Actuellement, lors de la configuration d’un Dashboard Gladys, il est possible de choisir le nombre de colonnes utilisées : 1, 2 ou 3.

Ce fonctionnement est très pratique, notamment pour afficher certains widgets en pleine largeur. En revanche, le choix du nombre de colonnes s’applique à l’ensemble du Dashboard.

Je souhaiterais pouvoir définir le nombre de colonnes ligne par ligne, afin de pouvoir mélanger différentes mises en page au sein d’un même Dashboard.

Exemple

L’objectif serait de pouvoir construire un Dashboard comme celui-ci :

┌─────────────────────────────────────────────┐
│                                             │
│          Widget pleine largeur              │
│                                             │
└─────────────────────────────────────────────┘

┌───────────────────────┬─────────────────────┐
│                       │                     │
│       Widget 1        │       Widget 2      │
│                       │                     │
└───────────────────────┴─────────────────────┘

┌───────────────┬───────────────┬─────────────┐
│               │               │             │
│   Widget 1    │   Widget 2    │   Widget 3  │
│               │               │             │
└───────────────┴───────────────┴─────────────┘

┌─────────────────────────────────────────────┐
│                                             │
│          Graphique pleine largeur           │
│                                             │
└─────────────────────────────────────────────┘

Ainsi, une ligne pourrait contenir :

  • 1 colonne → largeur 100 %

  • 2 colonnes → 50 % / 50 %

  • 3 colonnes → 33 % / 33 % / 33 %

Et ces différents types de lignes pourraient être utilisés successivement dans le même Dashboard.

Pourquoi ?

Cela permettrait de construire des Dashboards beaucoup plus lisibles et adaptés au contenu.

Par exemple, dans un Dashboard « Énergie » :

  • une courbe de consommation pourrait occuper toute la largeur ;

  • les différentes puissances ou consommations pourraient être affichées sur 3 colonnes ;

  • un autre graphique pourrait de nouveau prendre toute la largeur ;

  • puis quelques commandes pourraient être affichées sur 2 colonnes.

Aujourd’hui, pour obtenir ce type de présentation, il faut choisir entre un Dashboard en 1, 2 ou 3 colonnes et on ne peut donc pas adapter la largeur à chaque type de contenu.

Proposition d’ergonomie

Lors de l’édition du Dashboard, chaque ligne pourrait simplement avoir un paramètre permettant de choisir son nombre de colonnes :

Ligne 1   [ 1 colonne ▼ ]

Ligne 2   [ 2 colonnes ▼ ]

Ligne 3   [ 3 colonnes ▼ ]

Ligne 4   [ 1 colonne ▼ ]

Une autre possibilité serait de permettre de changer la largeur d’un bloc et de laisser Gladys réorganiser automatiquement les autres widgets de la ligne.

L’important à mon sens est surtout de conserver une logique simple : le nombre de colonnes doit pouvoir être défini indépendamment pour chaque ligne.

Responsive

Le comportement responsive pourrait évidemment continuer à s’appliquer sur les petits écrans.

Par exemple, une ligne configurée en 3 colonnes sur ordinateur pourrait automatiquement passer à 1 ou 2 colonnes sur mobile/tablette selon la largeur disponible.

Intérêt

Cette évolution ne remettrait pas en cause le fonctionnement actuel des Dashboards.

Le choix global de 1, 2 ou 3 colonnes pourrait simplement devenir le comportement par défaut, avec la possibilité de personnaliser certaines lignes.

Cela donnerait beaucoup plus de liberté pour construire des Dashboards complexes tout en conservant la simplicité actuelle pour les utilisateurs qui n’ont pas besoin de personnalisation.

À mon avis, ce serait une évolution assez naturelle du système actuel de Dashboard.

Qu’en pensez-vous ?

Salut @PhilippeMA ! :waving_hand:

Merci pour ce retour très bien construit, le cas d’usage du dashboard énergie est parlant, et c’est une demande qui revient régulièrement : aujourd’hui le nombre de colonnes s’applique à tout le dashboard, et c’est vrai qu’une courbe de consommation coincée dans une colonne à 33 % de largeur, ce n’est pas idéal. :slightly_smiling_face:

Je suis favorable à l’idée sur le fond. Quelques éléments de contexte technique pour expliquer pourquoi ce n’est pas juste un menu déroulant à ajouter :

Le dashboard actuel est organisé en colonnes, pas en lignes. En base de données, un dashboard c’est une liste de colonnes, chacune contenant une pile de boxes qui s’empilent de façon dense (sans trous, même si les boxes ont des hauteurs différentes). Ta proposition décrit une organisation en lignes, ce qui est un changement de modèle de données, avec migration de l’existant, refonte de l’éditeur drag & drop, etc. C’est un chantier conséquent, pas un quick win.

La piste que je privilégierais : des « sections ». Plutôt qu’un réglage ligne par ligne, le dashboard deviendrait une liste de sections empilées, chaque section ayant son propre nombre de colonnes (1, 2 ou 3) et fonctionnant en interne comme le dashboard actuel. Ton exemple serait donc : une section 1 colonne (la courbe), une section 3 colonnes (les métriques), une section 1 colonne (le graphique), une section 2 colonnes (les commandes). Ça couvre exactement ton besoin, et ça a deux gros avantages :

  • Rétrocompatibilité totale : un dashboard existant devient simplement une section unique avec ses colonnes actuelles, aucun changement visuel pour personne.
  • Réutilisation du code existant pour le rendu et l’édition à l’intérieur d’une section.

Côté responsive, bonne nouvelle : ce modèle améliorerait même le mobile. Aujourd’hui, sur petit écran, les colonnes s’empilent colonne par colonne (toute la colonne 1, puis toute la colonne 2…), ce qui casse parfois la logique de lecture. Avec des sections, l’empilement suivrait l’ordre de lecture : la courbe, puis les métriques, puis les commandes. Sur petit écran tout passerait en 1 colonne comme aujourd’hui, en gardant l’ordre des sections.

Un compromis à avoir en tête quand même : dans une section à plusieurs colonnes, si les boxes ont des hauteurs différentes, la section suivante démarre sous la plus haute, donc un peu d’espace blanc peut apparaître, là où l’empilement actuel est parfaitement dense. C’est inhérent à toute mise en page « en lignes », et c’est le prix à payer pour pouvoir mélanger les largeurs.

Qu’en pensez-vous la communauté ? :smiley:

J’avais commencé quelque chose la dessus il y a quelque temps, je pourrais poster un apercu de ce que cela pourrait donner. Mais forcement comme @pierre-gilles l’explique il peut y avoir des espaces qu’on ne peux pas combler.

Effectivement pour une mise en page plus efficace et lisible, ce serait très bien

NB :
@PhilippeMA un grand merci à toi car je viens d’apprendre que l’on pouvait supprimer des colonnes !!
Comme je travaille toujours en mode sombre, je n’avais pas remarqué l’icone « poubelle » que l’on voit très bien en mode clair ! Et je pense (sauf erreur de ma part) que cette possibilité n’est pas documentée


Voila un apercu vraiment très rapide car dans mon gladys de test que j’ai monté vite fait j’ai pas de datas.

En mode Edition, les widget sont dans leur état réel, plus facile quand on veut les déplacer et se rendre compte du rendu.

Avec un bouton qui apparait quand on survole le widget, qui permet de le modifier, supprimer. On peut imaginer ajouter un bouton Dupliquer (demande sur le forum)

Si on fait modifier, alors le menu de paramètrage du widget s’ouvre

Merci d’avoir testé ! C’est sympa mais effectivement on voit bien ce problème :

Je me demande si on ne pourrait pas adapter dynamiquement les widgets pour que ça remplisse à 100%

à tester. Je serais pas dispo ces 4 prochains jours mais dès que je peux je lancerais Claude dessus.