Amélioration des graphiques

Développement
41

Salut @Terdious !

J’en profite pour mettre ce message ici :

Néanmoins, je pense qu’on doit garder ces sujets séparés, la partie DuckDB est assez technique et c’est un changement long terme qui a des impacts bien au delà de la partie graphique. Je pense que je me lancerais dessus quand je suis allé au bout de mes développements en cours :slight_smile:

Concernant ton développement, c’est vraiment cool !

Par contre je pense qu’il y a une vrai réflexion à avoir hors de Gladys avant même de parler de développement. Je sais que c’est toujours plus drôle d’être tête baissé dans le développement mais il faut d’abord savoir ce qu’on veut :smiley:

A quoi cette fonctionnalité va servir exactement et qui va l’utiliser ?

Exemple:

  • « Je veux savoir la consommation de ma maison la semaine du 12 janvier quand j’étais en vacances pour voir ma consommation quand ma maison est vide ».
  • … ?

Ensuite, il faut faire des maquettes (j’utilise personnellement whimsical), et s’assurer que les maquettes permettent de répondre à nos questions.

Pour l’instant l’onglet « Historiques » tu as juste copié collé l’onglet tableau de bord, et du coup ça ne répond pas bien au besoin à mon sens. Je comprend que tu es allé au plus vite pour faire des tests, mais pour le coup ça aurait été encore plus vite de juste faire une maquette :joy: Parce que là du coup tu vas te retrouver à coder 6 fois la fonctionnalité, c’est dommage ^^

Est-ce que tu veux qu’on s’appelle pour formaliser le développement ?

1 « J'aime »
42

Entièrement d’accord avec tout ce que tu dis ^^

Sincèrement, je ne suis mais alors pas du tout à l’aise avec whimsical que j’ai testé plusieurs fois depuis que tu m’en avais parlé il y a 2 ans.

Et ça ne me dérange pas du tout de coder pour rien (surtout du front à vrai dire ^^) car … ce n’est pas pour rien… je n’ai pas une formation de codeur et clairement ça m’entraine réellement. Dans ma tete tout est à peu près clair et ce qui ne l’est pas vient quand je le code. Ducoup franchement c’est gagnant/gagnant ^^

Et pourtant pour ce qui est du copier/collé du dashboard … c’est exactement ce que j’avais en tete. Je cherchais exactement à faire ça mais oui, c’est une vision toute personnelle. A la limite pour moi la partie courbe sur le dashboard n’a que peut d’intérêt notamment parce que peu visible sur téléphone et tablette ou alors parce que trop long d’y accéder en glissant jusqu’à la bonne box.

Mais je développerais la chose selon le besoin et la décision commune. Sincèrement. La partie zoom est un grand ajout je trouve.

Trop bien ^^

  • Je veux comparer ma production à ma consommation
  • Je veux repérer quel équipement(s) déclenchent des sur-consommations récurrentes
  • Je veux visualiser les données de ma station météo dans le temps avec température humidité et vent
  • Je veux pouvoir calculer facilement la consommation de ma voiture électrique
  • Je suis en triphasé et je veux pouvoir vérifier mes déséquilibre de phases
  • Je veux voir toutes les ouvertures de fenêtres / portes facilement et pouvoir remonter dans le temps en le comparant à ma présence.
  • …

Je m’arrête là pour le moment mais j’en ai plein d’autres qui ne me viennent pas comme ça.

J’ai beaucoup d’autre axes d’améliorations en-tête notamment exposés par d’autre contributeurs qui feront d’autres PR par la suite (export xlsx/xlsm prenant un fichier modèle xltm ou xltx en entrée ; ajout d’une fonctionnalité sur une courbe live à la volée ; Ajouter une case dans l’édition pour pouvoir utiliser les min/max de la fonctionnalité ; Ajouter le multi legende (exemple températures + humidité ou encore vent+températures + humidité) voir https://codepen.io/apexcharts/pen/LBadXo)
Mais comme je t’écoute :wink:, je me suis limité je pense au strict minimum.

Je suis très chaud pour un appel de formalisation !! :sweat_smile:

43

Ok, j’aimerais comprendre ce point : pourquoi ? Quelle est la différence avec ce que tu as fais du coup ?

Merci pour les exemples ! Je suis preneur d’exemples d’autres utilisateurs qui ont des installations plus « classiques » :slight_smile:

Pour moi la grande question, c’est quelle est la proportion de question ponctuelles vs de question récurrentes ?

Avoir un fonctionnement « tableau de bord » n’a pas de sens si les questions sont en majorité ponctuelles, et dans de cas il faudrait plutôt avoir un écran simple qui permet de répondre à des questions « à la volée » sans configuration.

Pour les questions récurrentes, le fonctionnement tableau de bord fait sens.

On peut sûrement attendre un peu d’avoir des retours d’autres utilisateurs, pour moi il nous manque de la data pour décider.

Sinon disponible à tous mes jours Gladys pour échanger et formaliser tout ça !

1 « J'aime »
44

Besoins :

  • Analyse ponctuelle de la consommation électrique sur une plage de données passées
  • Visualisation de l’historique de température sur la journée d’hier
3 « J'aime »
45

Je corrige ma phrase à laquelle il manque des mots et qui du coup donne l’inverse de ma pensée ^^ :
« […] n’a que peut d’intérêt notamment parce que peu visible contrairement à sur téléphone et tablette […] »
… la dimension ^^ sur PC en 3 colonnes est beaucoup trop petite.
Ensuite en l’etat meme si on sort le zoom on ne peut pas facilement voir plusieurs courbes / comparer avec du binaire …
… mais du coup … ca me fait penser … et si juste pour le point de depart je developpais la possibilité de selection du nombre de colonne (parce qu en soit j’ai pas touché grand chose pour développer la partie du nouveau menu ^^) ?

46

Ok je comprend mieux !

C’est tout mon point ! Si c’est juste pour une histoire de largeur de colonne, allons-y pour rendre le nombre de colonnes variables :joy: Inutile de créer un nouvel onglet juste pour ça

2 « J'aime »
47

Merci pour ton analyse !!
Je propose les 2 PR prochainement

  • PR1 : juste le zoom
  • PR2 : juste la selection du nombre de colonnes
    Et on voit pour le côté fonctionnel des PR suivantes.
1 « J'aime »
48

Si vous parlez du fait de pouvoir choisir le nombre de colonnes, il faut penser que si je veux 2 colonnes, alors il faut pouvoir choisir la répartition 2/3 1/3, ou bien 1/3 2/3 … vous voyez ce que je veux dire ? ^^

Pour autant je trouve aussi que pour les choses visuelles comme les graphiques ou les cameras, un affichage en plus grand serait un gros plus pour Gladys, en tout cas pour une utilisation sur ordi ou grande tablette.

1 « J'aime »
49

Non ^^ désolé je n’ai pas compris ^^

  • Soit un new dashboard, tu selectionne 2 colonnes: l’ensemble sera juste reparti sur la totalité de l ecran disponible (taille actuelle) sur 2 colonnes.
  • soit tu veux transformer un dashboard actuel en 2 colonnes et dans ce cas il faut qu on mette des gardes fou pour ne pouvoir supprimer qu’une colonne vide (donc il faudra deplacer ou supprimer les box existante avant).

Mais ce n’est peut-être pas ce que tu voulais dire !!

50

Je viens de comprendre ^^… disons que pour le 1er dev on separe en 2 ? Et ensuite on pourra faire un dev en plus pour donner la possibilité de choisir 1/3-2/3;2/3-1/3;1/2-1/2 ?

51

Bonjour,

  • Analyse et comparaison de consommation pour chaque device à des dates différentes
  • Visualisation pour comparaison de températures (chiffrées et sur graphiques) de n’importe quelles dates dans le passé
2 « J'aime »
52

Oui je pense que dans un premier temps, juste proposer 1, 2 ou 3 colonnes, et séparer l’écran équitablement c’est très bien !

3 « J'aime »
53

J’avoue que j’ai pas été super clair ! C’est tout à fait ce que Pierre-Gilles et toi avez évoqué dans vos posts :slight_smile:

2 « J'aime »
54

@pierre-gilles, et tous ^^

Est ce que quelque chose comme cela conviendrait (bon en sachant qu’il faut revoir les alignements dans l’édition avec l’ajout du bouton … mais je me bat avec l’alignement des boxes :sleepy: :sleepy: :thinking: tout conseil sera bien entendu le bienvenu ^^) :

Le code me posant soucis : 
              <div
                class={cx('d-flex flex-column', columnClass, style.removePadding, {
                  [style.removePaddingFirstCol]: x === 0,
                  [style.removePaddingLastCol]: x === 2
                })}
              >

                <h3 class="text-center">
                  <Text id="dashboard.boxes.column" fields={{ index: x + 1 }} />
                </h3>
                <div class="d-flex flex-row justify-content-center">
                  {x === nbColumns - 1 && (
                    <div class="d-flex justify-content-center align-item-center mb-2">
                      {!props.askDeleteColumn && nbColumns > 1 && (
                        <button onClick={props.askDeleteCurrentColumn} className="btn btn-outline-danger btn-sm">
                          <Text id="dashboard.editDashboardDeleteColumnButton" /> <i class="fe fe-trash" />
                        </button>
                      )}
                      <div class="mr-2" />
                      {!props.askDeleteColumn && nbColumns < 3 && (
                        <button class="btn btn-outline-primary btn-sm" onClick={() => props.addColumn(x)}>
                          <Text id="dashboard.editDashboardAddColumnButton" /> <i class="fe fe-plus" />
                        </button>
                      )}
                      {props.askDeleteColumn && (
                        <div>
                          <Text id="dashboard.editDashboardDeleteText" />
                          <button onClick={props.deleteCurrentColumn} className="btn btn-outline-danger btn-sm ml-2">
                            <Text id="dashboard.editDashboardDeleteButton" /> <i class="fe fe-trash" />
                          </button>
                          <button onClick={props.cancelDeleteCurrentColumn} className="btn btn-outline-secondary btn-sm ml-2">
                            <Text id="dashboard.editDashboardCancelButton" /> <i class="fe fe-slash" />
                          </button>
                        </div>
                      )}
                    </div>
                  )}
                </div>
                {x === nbColumns - 1 && props.boxNotEmptyError && (
                  <div class="alert alert-danger">
                    <Text id="dashboard.editDashboardBoxNotEmpty" />
                  </div>
                )}
                {column.length > 0 && (
                  <div>
                    {column.map((box, y) => (
                      <EditBox {...props} box={box} x={x} y={y} isMobileReordering={props.isMobileReordering} />
                    ))}
                    <BottomDropZone
                      moveCard={props.moveCard}
                      x={x}
                      y={column.length}
                      isMobileReordering={props.isMobileReordering}
                    />
                  </div>
                )}

                {column.length === 0 && <EmptyColumnDropZone moveCard={props.moveCard} x={x} />}

                {props.isMobileReordering && <AutoScrollMobile position="bottom" box_type={DASHBOARD_EDIT_BOX_TYPE} />}
                <div class="d-flex justify-content-center mb-4">
                  <button class="btn btn-primary" onClick={() => props.addBox(x)}>
                    <Text id="dashboard.addBoxButton" /> <i class="fe fe-plus" />
                  </button>
                </div>
              </div>

choice number columns and dashboard short

Bon au final pour ma part j’aime beaucoup !!^^

En tout cas @pierre-gilles, à part les derniers petits réglages, les 3 PR sont prêtes à review.

2 « J'aime »
55

Je me régale !!! :smiley:

image
image1201×985 58.2 KB

2 « J'aime »
56

J’aime beaucoup aussi mais faudrait voir le rendu en mixant avec d’autres box non graphique et le rendu sur mobile quand la box fait 2/3 ou la largeur complète.

57

En fait sur mobile ca ne changera rien… on est deja sur 1 seul colonne ^^

1000020026
10000200261080×2316 148 KB

1000020027
10000200272316×1080 103 KB

1 « J'aime »
58

Bon je pense avoir trouvé … je me battais dans le vent, j’appelais le mauvais fichier pour les styles.
Ca donnerais ça en version web ( >992 pixels) :
choice number columns and dashboard ok short

Et ça donnerais ça en version mobile ou affichage < 992px :
choice number columns and dashboard ok version mobile short

1 « J'aime »
59

Rapide @Terdious :slight_smile: Cool que tu ai géré le cas des colonnes déjà remplie !

Au niveau du design, il faut que les 3 colonnes soient au même niveau sinon c’est pas très propre.

Tu peux par exemple mettre une icône (ou bouton) de suppression à côté du titre

Pour le bouton « Ajouter une colonne », je pense que ça peut-être un bouton « + » à droite des colonnes, qui ne serait affiché que quand nécessaire :

Exemple 2 colonnes :

Screenshot 2024-06-04 at 17.01.21
Screenshot 2024-06-04 at 17.01.211256×1150 7.15 KB

Exemple 3 colonnes :

Screenshot 2024-06-04 at 17.01.18
Screenshot 2024-06-04 at 17.01.181626×1178 7.31 KB

Qu’en penses tu ?

60

Hihi !!

Alors le cas du même niveau de colonne a été géré, mais pour le coup j’aime beaucoup ton design qui est sans fioritures et plus léger.

Je fais les modifs en ce sens !! Avec le + à droite !

Merci pour ton message rapide !!

EDIT : @pierre-gilles j’aimais bien la disposition du ‹ + › mais si il y a des boxs renseignées dans les autres colonnes … on ne le voit plus et il faut scroller … peut-être juste l’afficher sur la meme ligne que les colonnes mais à droite, non ?
image

Comme cela ?
choice number columns and dashboard (1) short