Affichage des courbes de capteurs sur le dashboard

[Archive] Demande de fonctionnalités
61

Salut à tous!

C’est lundi, retour au boulot :slight_smile:

Je suis entrain de finir toutes les modifications qu’on s’est dites ici:

  • Correction KW → kW
  • Affichage de la variation pour tous les types d’intervalles
  • Affichage de plusieurs features sur une même courbe (c’est le point le plus complexe)

C’est ce dernier point qui est le plus complexe!

Voilà où j’en suis pour l’instant:

Affichage d’une fonctionnalité

Etat de base, affichage d’une seule fonctionnalité:

Screenshot 2021-10-11 at 14.40.15
Screenshot 2021-10-11 at 14.40.15826×470 24.3 KB

Sélection de plusieurs fonctionnalités

J’ai retiré la sélection de la pièce, maintenant c’est dans tout Gladys qu’on cherche avec un sélecteur multiple:

Screenshot 2021-10-11 at 14.41.00
Screenshot 2021-10-11 at 14.41.00802×1672 88.1 KB

Les couleurs

C’est l’énorme débat: quels couleurs proposer ?

Qu’en pensez-vous si je propose une liste de couleurs qui est attribué aux différents capteurs ? (Pas de possibilité de choisir)
Ou est-ce qu’il est vraiment crucial de pouvoir sélectionner manuellement une couleur pour chaque appareil ?

Pour l’instant ça ressemble à ça :

Screenshot 2021-10-11 at 14.39.51
Screenshot 2021-10-11 at 14.39.51818×548 47.3 KB

J’ai trouvé une palette de couleur un peu pastel sur https://colorhunt.co/

Si quelqu’un a des meilleurs goûts que moi, je suis preneur de tout retour pour trouver des meilleurs sets de couleurs, sachant que la contrainte c’est qu’il faut des couleurs qui soient une bonne balance entre tape à l’oeil et trop sobre.

Calcul de la variation et de la valeur affichée en gras

Pour l’instant, la valeur affichée en gras est la moyenne de toutes les dernières valeurs de chaque série.

La variation est la variation moyenne de toutes les séries.

Qu’en pensez-vous ?

2 « J'aime »
62

Hello,

Pour les couleurs il faut peu être faire attention à un point (c’est pas mon cas), mais : En **France** , la proportion de **daltoniens** est d'environ 8 % chez les hommes

Du coup soit il faut faire le choix des couleurs, soit des couleurs qui soient bien pour les daltoniens. Au boulot j’ai des personnes qui voient rien sur la review de PR :smiley:

En tout cas le rendu est vraiment top ! :slight_smile:

2 « J'aime »
63

Ah oui c’est vrai! Les couleurs sélectionnées ici sont bien ? Tu arrives à voir ?

64

Je suis pas daltonien moi c’est niquel mais j’ai eu le cas au boulot c’est pour ça que je remonte l’information. Soit on a un mec qui est daltonien et qui peut nous aider, soit faut se taper des articles pour savoir c’est quoi le mieux :smiley:

65

Sachant qu’n plus il y’a plusieurs niveau, le mieux étant effectivement qu’une personne ‘colorblind’ nous file un coup de main et donne son avis. ( tes collègues sont dispos ? :smiley: )

1 « J'aime »
66

j’ai fais des tests avec un simulateur, c’est sûr c’est pas aussi visible qu’en voyant les couleurs, mais je trouve ça lisible quand même:

Screenshot 2021-10-11 at 15.04.53
Screenshot 2021-10-11 at 15.04.531638×1610 141 KB

Screenshot 2021-10-11 at 15.04.58
Screenshot 2021-10-11 at 15.04.581616×1614 135 KB

1 « J'aime »
67

AMHA, cette vue comme tu le disais fort bien doit être complète mais le plus simple possible. Il sera très bien voir nécessaire de pouvoir sélectionner les couleurs sur une vue dédiée. Mais sur le dashboard, c’est juste une information rapide que l’on souhaite. Aucune utilité de laisser le choix pour moi. Pour autant si c’est simple à programmer si les couleurs sont liées à l’ordre de sélection pourquoi pas. sinon je n’en vois pas l’utilité.

Très bien pour moi les couleurs pastel

Possible d’avoir une case à cochée pour l’affichage ou non de la valeur et de la variation ? Dans certains cas ça à son utilité, dans d’autres beaucoup moins :

  • 1er cas : Je souhaite la température moyenne de l’étage, j’affiche l’ensemble et la moyenne ainsi que la variation : Intéressant :white_check_mark:
  • 2ème cas : Je suis en triphasé, j’affiche les puissances (idem pour l’énergie totale consommée) de mes 3 phases pour avoir un aperçu direct, ces le cumul dont j’aurais besoin, la moyenne et la variation de cette moyenne ne m’intéresse pas.

Donc avoir la possibilité de sélectionner la moyenne, la somme ou pas d’affichage serait le top du top !!

Bien vu @damalgos pour les daltoniens !!

Edit - Petits liens sur le sujet (surtout la combinaison avec le vert à éviter) :

68

Je suis d’accord :+1: Merci du retour rapide :slight_smile:

C’est possible !

A sinon, j’oubliais, @Terdious j’ai rajouté des logs (temporaires) pour qu’on puisse voir chez toi qu’est ce qui prend du temps dans les requêtes pour essayer d’optimiser si possible :slight_smile:

Dès que je pousserais une nouvelle version je te dirais @Terdious, et tu verras à chaque requête un détail complet de toutes les étapes d’un GET dans les logs :

Screenshot 2021-10-11 at 15.09.47
Screenshot 2021-10-11 at 15.09.471714×574 235 KB

1 « J'aime »
69

Ouep je vais demander :slight_smile:

1 « J'aime »
70

Pour information, je viens de faire un nouveau build sur le tag :chart comme les précédents build !

Je suis preneur de vos retours !

@Terdious Toi en particulier, je serais intéressé d’avoir tes logs serveur quand tu charge ton dashboard :slight_smile: Le but c’est de voir des améliorations de perf possibles !

71

Et voici … ^^

Logs à l'affichage 
2021-10-11T13:34:56+0200 <info> device.calculateAggregate.js:105 (ChildProcess.<anonymous>) device.calculateAggregate: Finishing processing for interval daily
2021-10-11T13:34:56+0200 <info> device.calculateAggregate.js:38 (DeviceManager.calculateAggregate) Calculating aggregates device feature state for interval monthly
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(puissance-phase-1-centre-equitherapie): 3.76ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(puissance-phase-1-centre-equitherapie): 546.242ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(puissance-phase-1-centre-equitherapie): 0.065ms
getDeviceFeaturesAggregates.downsamplingData(puissance-phase-1-centre-equitherapie): 0.029ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(puissance-phase-3-centre-equitherapie): 16.096ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-phase-2-centre-equitherapie): 17.111ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-phase-3-centre-equitherapie): 22.345ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(puissance-phase-2-centre-equitherapie): 25.22ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-phase-1-centre-equitherapie): 27.017ms
2021-10-11T13:34:57+0200 <warn> message.connect.js:19 (TelegramBot.<anonymous>) Telegram polling error, code = ETELEGRAM, message = ETELEGRAM: 409 Conflict: terminated by other getUpdates request; make sure that only one bot instance is running
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(puissance-phase-3-centre-equitherapie): 1.533s
getDeviceFeaturesAggregates.buildingDownsamplingArray(puissance-phase-3-centre-equitherapie): 0.064ms
getDeviceFeaturesAggregates.downsamplingData(puissance-phase-3-centre-equitherapie): 0.042ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(puissance-phase-2-centre-equitherapie): 1.612s
getDeviceFeaturesAggregates.buildingDownsamplingArray(puissance-phase-2-centre-equitherapie): 0.064ms
getDeviceFeaturesAggregates.downsamplingData(puissance-phase-2-centre-equitherapie): 0.045ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-totale-phase-1-centre-equitherapie): 1.609s
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-phase-1-centre-equitherapie): 1.614s
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-phase-1-centre-equitherapie): 0.035ms
getDeviceFeaturesAggregates.downsamplingData(energie-phase-1-centre-equitherapie): 0.045ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-phase-2-centre-equitherapie): 1.625s
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-phase-2-centre-equitherapie): 0.041ms
getDeviceFeaturesAggregates.downsamplingData(energie-phase-2-centre-equitherapie): 0.045ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-phase-3-centre-equitherapie): 1.627s
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-phase-3-centre-equitherapie): 0.046ms
getDeviceFeaturesAggregates.downsamplingData(energie-phase-3-centre-equitherapie): 0.028ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-totale-phase-1-centre-equitherapie): 540.866ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-totale-phase-1-centre-equitherapie): 0.066ms
getDeviceFeaturesAggregates.downsamplingData(energie-totale-phase-1-centre-equitherapie): 0.027ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-totale-phase-2-centre-equitherapie): 12.678ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-phase-1-centre-equitherapie): 16.289ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-totale-phase-3-centre-equitherapie): 101.751ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-phase-1-centre-equitherapie): 91.539ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-phase-1-centre-equitherapie): 0.045ms
getDeviceFeaturesAggregates.downsamplingData(energie-phase-1-centre-equitherapie): 0.028ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-totale-phase-2-centre-equitherapie): 627.045ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-totale-phase-2-centre-equitherapie): 0.067ms
getDeviceFeaturesAggregates.downsamplingData(energie-totale-phase-2-centre-equitherapie): 0.03ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(puissance-phase-1-centre-equitherapie): 625.273ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-totale-phase-1-centre-equitherapie): 968.222ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-totale-phase-3-centre-equitherapie): 2.072s
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-totale-phase-3-centre-equitherapie): 0.087ms
getDeviceFeaturesAggregates.downsamplingData(energie-totale-phase-3-centre-equitherapie): 0.031ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(puissance-phase-1-centre-equitherapie): 1.551s
getDeviceFeaturesAggregates.buildingDownsamplingArray(puissance-phase-1-centre-equitherapie): 0.077ms
getDeviceFeaturesAggregates.downsamplingData(puissance-phase-1-centre-equitherapie): 0.079ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-totale-phase-1-centre-equitherapie): 1.111s
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-totale-phase-1-centre-equitherapie): 0.086ms
getDeviceFeaturesAggregates.downsamplingData(energie-totale-phase-1-centre-equitherapie): 0.033ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-phase-1-centre-equitherapie): 541.133ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-phase-1-centre-equitherapie): 105.614ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-phase-1-centre-equitherapie): 0.047ms
getDeviceFeaturesAggregates.downsamplingData(energie-phase-1-centre-equitherapie): 0.03ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(puissance-phase-1-centre-equitherapie): 23.194ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(puissance-phase-1-centre-equitherapie): 584.53ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(puissance-phase-1-centre-equitherapie): 0.078ms
getDeviceFeaturesAggregates.downsamplingData(puissance-phase-1-centre-equitherapie): 0.055ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-totale-phase-1-centre-equitherapie): 592.441ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-phase-1-centre-equitherapie): 533.246ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-totale-phase-1-centre-equitherapie): 539.664ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-totale-phase-1-centre-equitherapie): 0.077ms
getDeviceFeaturesAggregates.downsamplingData(energie-totale-phase-1-centre-equitherapie): 0.063ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-phase-1-centre-equitherapie): 111.254ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-phase-1-centre-equitherapie): 0.06ms
getDeviceFeaturesAggregates.downsamplingData(energie-phase-1-centre-equitherapie): 0.037ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(puissance-phase-1-centre-equitherapie): 10.362ms
getDeviceFeaturesAggregates.findingDeviceFeatureInDb(energie-totale-phase-1-centre-equitherapie): 564.358ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(puissance-phase-1-centre-equitherapie): 564.743ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(puissance-phase-1-centre-equitherapie): 0.066ms
getDeviceFeaturesAggregates.downsamplingData(puissance-phase-1-centre-equitherapie): 0.029ms
getDeviceFeaturesAggregates.gettingRowsFromLiveDb(energie-totale-phase-1-centre-equitherapie): 507.625ms
getDeviceFeaturesAggregates.buildingDownsamplingArray(energie-totale-phase-1-centre-equitherapie): 0.072ms
getDeviceFeaturesAggregates.downsamplingData(energie-totale-phase-1-centre-equitherapie): 0.042ms
1 « J'aime »
72

Magnifique! Je te fais un retour dans la semaine, et j’essaie de voir quelles améliorations sont possibles :+1:

73

Screenshot_20211012-070245
Screenshot_20211012-0702451440×3120 179 KB

J’ai toujours un problème d’affichage dans les tâches. Mais il peut aussi s’agir des anciennes notifications :thinking:
@Terdious tu as pu constater la même chose ?

Côté graphiques je peux enfin afficher les données des capteurs d’ouverture ou de mouvement. Par contre je n’ai encore aucune données. Le calcul se fait donc lorsque l’on créé un graphique ?

74

Avec la dernière mise à jour, le problème de NaN semble résolu.

photo_2021-10-12_11-15-34
photo_2021-10-12_11-15-34590×1280 53.3 KB

Pour la partie affichage des données binaires (ouverture de porte + capteur de mouvement), j’ai quelques remarques.

  1. Le graphique ne fonctionne pas si je n’affiche pas les axes (possible retour en arrière ?), voir le dernier graphique “MOUVEMENT ENTREE”.
    photo_2021-10-12_11-15-36
    photo_2021-10-12_11-15-36590×1280 38.2 KB

    photo_2021-10-12_11-15-42
    photo_2021-10-12_11-15-42590×1280 43 KB
  1. L’affichage des axes permet l’affichage du graphique en mode barre.

photo_2021-10-12_11-15-41
photo_2021-10-12_11-15-41590×1280 35.9 KB

  1. La valeur affichée sur 24h, 7j, etc. n’a pas de sens (une moyenne des valeurs je pense). Il faudrait peut-être plutôt calculer le nombre total de valeur à 1 reçues.
    Par exemple, c’est plus intéressant de savoir que la porte a été ouverte en moyenne 9x chaque jour, plutôt que la valeur “0.75” qui ne semble avoir aucune logique.
    photo_2021-10-12_11-15-27
    photo_2021-10-12_11-15-27590×1280 39.2 KB

    photo_2021-10-12_11-15-31
    photo_2021-10-12_11-15-31590×1280 39.5 KB
1 « J'aime »
75

Merci d’avoir testé!

Ok, ça doit être un bug d’UI qui n’apparait que sur ta data, je vais regarder. Tu as une erreur dans la console du navigateur pour m’aider?

C’est bien ce que je pensais, l’affichage des capteurs binaires n’a pas de sens sur cette vue graphique.

J’avoue que j’avais activé les capteurs binaires pour te faire plaisir et voir comment ça rend chez toi, mais ce n’est clairement pas fait pour ça.

Ce que tu décris est un développement a part entière qui est hors du scope de celui-ci. On créé une feature request spécifique ? :slight_smile:

Je vais désactiver à nouveau l’affichage des capteurs binaires dans cette vue :slight_smile:

76

En soit je trouve que ça a du sens sur 24h puisque ce sont des données brut. Mais l’agrégation n’en a pas, il faudrait faire une somme / période a la place.
Tu penses que c’est trop de modifications pour adapter la fonctionnalité et qu’il en faut une dédié ?

77

Clairement, je pense que l’idéal ce serait d’avoir une vue un peu à la home assistant :

Screenshot 2021-10-13 at 14.17.51

6a41fe35293fb1cd96a3f79bf500f19d1f1adee4
6a41fe35293fb1cd96a3f79bf500f19d1f1adee4394×547 6.59 KB

Là au moins c’est fait pour ça :slight_smile:

Ce développement n’est pas pensé pour des capteurs binaires, tout le fonctionnement interne est basé sur de l’échantillonnage, ce qui fait sens pour des valeurs de température, mais n’a aucun sens pour des binaires: comme tu disais, ça sert à rien d’avoir une valeur de 0.75 pour un capteur d’ouverture de porte.

Je pense que pour les capteurs binaires il faut qu’on se mette autour d’une feuille, faire l’étude du besoin, trouver une solution, et ensuite développement. C’est un beau chantier, et je pense pas qu’on arrivera à faire un truc satisfaisant avec ce qui a été fait là (qui est un tout autre chantier)

2 « J'aime »
78

Du coup suite à ce qu’on s’est dit @lmilcent, j’ai désactivé à nouveau les graphiques pour les appareils suivants:

  • Binaires
  • Push
  • Camera
  • Couleur

Pour les binaires/Push, on fera un développement spécifique bien fait, je sais que c’est frustrant de pas avoir la fonctionnalité tout de suite, mais bon c’est plus dans la philosophie de la v4 de faire bien les choses plutôt que d’essayer de mettre du scotch à droite à gauche :slight_smile:

@lmilcent Tu nous créé une demande de fonctionnalité ?

2 « J'aime »
79

D’ailleurs je suis toujours preneur de tes logs navigateurs pour ça :stuck_out_tongue: (J’ai pas le bug chez moi)

80

Petit feedback avec comparaison HA

image
image842×313 18.7 KB

image
image1009×266 21.6 KB

  • Je trouve que ça manque de contraste ( plus épais / pas de pointillés ? )

  • Lorsque que l’on affiche plusieurs features une légende est un + non négligeable car l’infobulle n’aide pas
    image

  • Avec plusieurs courbes + variation, comment est calculée cette variation ? car au ‘mouse over’ sur une des courbe la variation ne change pas.
    image

Je continue de faire joujou mais ça commence à avoir de la gueule :slight_smile:

3 « J'aime »