# Anzeige von Diagrammen für binäre Sensoren **URL:** \ **Category:** Demandes livrées\ **Tags:** dashboard, feature-core, graphique\ **Created:** [13. Oktober 2021 um 10:43 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599 "2021-10-13T10:43:01Z")\ **Posts on this page:** 20\ **Page:** 4
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [10. Juni 2024 um 13:12 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/61 "2024-06-10T13:12:02Z")
Für mich gibt es zwangsläufig zwei Zeitpunkte: den „historischen“ Punkt und die aktuelle Uhrzeit Da wir über einen Zustand sprechen, muss man zwangsläufig die letzte Linie zwischen dem letzten Punkt und jetzt ziehen, oder? ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [10. Juni 2024 um 14:06 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/62 "2024-06-10T14:06:29Z")
Ich habe die Änderung in diesem Sinne vorgenommen. > [@pierre-gilles](#): > > Ah ja tatsächlich, man sollte die Größe dieses Widgets nicht begrenzen, wie hast du das denn geändert? Ich habe (nur für die Binärdateien) hinzugefügt: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/c/4/c4948f949d26c58712406e748d94cbeb0c9bd90d.png) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/1/e/1e1521bc3cc600aca0f711bbf5a8eeda0d24edd8.png) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/1/714a74c6eaa3c7c6b972b6c8705747057c2b17fd.png) Es ist gepusht ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [12. Juni 2024 um 16:57 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/63 "2024-06-12T16:57:13Z")
Hallo @pierre-gilles, Wie oben erwähnt, habe ich die Änderungen so vorgenommen, wie du es dir vorgestellt hast. Du kannst das Review machen. Zur Erinnerung die PR: [Add binary chart by Terdious · Pull Request #2094 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/pull/2094) ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [13. Juni 2024 um 08:12 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/64 "2024-06-13T08:12:59Z")
Hallo @Terdious 🙂 Ich habe dir eine funktionale Review zum Thema gemacht: > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[x\] If your changes affects code, did your write the tests? > \- \[x\] Are tests passing? (\`npm test\` on both front) > \- \[x\] Is the linter passing? (\`npm run eslint\` on both front) > \- \[x\] Did you run prettier? (\`npm run prettier\` on both front) > \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front) > \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[french forum\](https://community.gladysassistant.com/)/\[english forum\](https://en-community.gladysassistant.com/)) for testing before merging. > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com). > \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > > Taken from the original PR: #Binary graph #1948 > Thanks to @callemand for all the work done Noch keine technische Review, solange es nicht funktional in Ordnung ist! ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [17. Juni 2024 um 04:22 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/65 "2024-06-17T04:22:16Z")
Hey @pierre-gilles, Ich habe normalerweise die Anmerkungen angewendet und überprüft, außer: Könntest du mir mehr über diesen Teil sagen: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/6/c/6ca6c615c2865f6c68999d660958f2b8fad47dde.png) Ich habe versucht, es nachzubilden, aber trotz Zoom rein/raus und Auflösung ändern, etc. habe ich nie dein Ergebnis erreicht. Allerdings hatte ich vor meiner letzten Änderung das gleiche Problem, aber ich hatte es vor deiner Überprüfung korrigiert. Deshalb habe ich trotzdem auf maximal 10 Zeichen reduziert, nur für den Fall…^^ ![](https://i.imgur.com/lxt7cSM.gif) Und für den Power Plug habe ich dir auf GitHub geantwortet, aber ich kann es nicht reproduzieren. Ich habe ein Log für die Einheiten hinzugefügt, um mehr zu sehen. ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [17. Juni 2024 um 11:39 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/66 "2024-06-17T11:39:01Z")
Danke für die Korrekturen! > [@Terdious](#): > > Ich habe versucht, es zu reproduzieren, aber trotz Zoomen/Herauszoomen, Auflösung ändern usw. habe ich nie dein Ergebnis erreicht. Allerdings hatte ich vor meiner letzten Änderung dasselbe Problem, aber ich habe es vor deiner Überprüfung behoben. Also habe ich es trotzdem auf maximal 10 Zeichen reduziert, nur für den Fall…^^ Okay, ich kann es auch nicht reproduzieren! Ich habe dir einen Kommentar für den Rest hinterlassen: > > > @Terdious Thanks for the fixes! > > Here is the payload that causes the freeze: … > > \`\`\` > {"id":"e499dd5e-6482-4cbd-a73e-159d53c9b402","name":"Graph","selector":"graph","type":"main","visibility":"private","user\_id":"275faa00-8a9c-4747-8fbe-417ddb966b16","created\_at":"2024-06-10T08:20:20.784Z","updated\_at":"2024-06-17T11:30:17.089Z","boxes":\[\[{"type":"chart","device\_features":\["mqtt-priseonoff"\],"units":\[null\],"title":"Binaire","chart\_type":"","interval":"last-day","display\_axes":true}\],\[\],\[\]\]} > \`\`\` > > The response is 422 : > > \`\`\` > { > "status": 422, > "code": "UNPROCESSABLE\_ENTITY", > "properties": \[ > { > "message": "\\"\[0\]\[0\].chart\_type\\" is not allowed to be empty", > "attribute": "boxes", > "value": \[ > \[ > { > "type": "chart", > "device\_features": \[ > "mqtt-priseonoff" > \], > "units": \[ > null > \], > "title": "Binaire", > "chart\_type": "", > "interval": "last-day", > "display\_axes": true > } > \], > \[\], > \[\] > \], > "type": "Validation error" > } > \] > } > \`\`\` > > It's just because I didn't select the "chart type" ^^ It's maybe not related to this PR, but I wonder if we could make a fix to avoid freezing in this situation... > > I have another feedback, now the date in english is not correct: > > !\[Screenshot 2024-06-17 at 13 29 13\](https://github.com/GladysAssistant/Gladys/assets/7365207/2b32de3d-e0aa-4aae-a710-0d169b20220a) ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [30. August 2024 um 01:35 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/67 "2024-08-30T01:35:51Z")
Hallo @pierre-gilles, Passt dir das für deinen letzten Kommentar zu dieser PR: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/1/21b0c247ba0a371e705da257fe4502bb8e2ffb55.png) ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [30. August 2024 um 08:03 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/68 "2024-08-30T08:03:16Z")
> [@Terdious](#): > > Zu deinem letzten Kommentar zu diesem PR, ist das so in Ordnung für dich: Ja, das ist perfekt 🙂 ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [30. August 2024 um 08:22 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/69 "2024-08-30T08:22:45Z")
Ich glaube, das war der letzte Punkt, der behandelt werden musste. Ich denke, du kannst das überprüfen! ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [30. August 2024 um 13:45 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/70 "2024-08-30T13:45:09Z")
Echt sehr cool 🙂 Ich habe dir 2 Rückmeldungen gegeben. Ich denke, wir können danach einen Cloudflare Pages Build machen, damit Gladys Plus Nutzer mit ihrer Instanz testen können, da es nur Frontend ist, sollte es funktionieren (wenn die Nutzer ihren „binären“ Graphen nach dem Test löschen). ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [30. August 2024 um 14:30 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/71 "2024-08-30T14:30:29Z")
Ok gut für mich (ich habe dir auch dort unten geantwortet) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/6/8/683a6e34f80e3fca34063979561b92ceb6f6553b.png) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/0/4/048e61d73792ef38694291a8658631b96f6027bd.png) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/9/4/943f5f5241dfaf1556b9ae38584481b6c63f40b6.png) Aber bei den WebSockets gibt es bei mir keine Probleme, ich bin 2 Minuten auf der Seite geblieben und die Aktualisierungen erfolgen alle 22s/30s ohne Seitenneuladung … Allerdings wird die Popup nicht automatisch aktualisiert, man muss die Maus bewegen. > [@pierre-gilles](#): > > Ich denke, wir können später einen Cloudflare Pages-Build machen, damit Gladys Plus-Nutzer mit ihrer Instanz testen können, da es nur Frontend ist, sollte es funktionieren (wenn die Nutzer ihren „binären“ Graphen nach dem Test löschen) Ah ja, das wäre wirklich super!!^^ ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [30. August 2024 um 14:37 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/72 "2024-08-30T14:37:35Z")
Danke für die schnelle Änderung! Ich habe dir unten geantwortet, für mich ist beides in Ordnung. Ich habe einen PR für die Cloudflare Pages Builds erstellt (behalte deinen PR): > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[\] If your changes affects code, did your write the tests? > \- \[\] Are tests passing? (\`npm test\` on both front/server) > \- \[\] Is the linter passing? (\`npm run eslint\` on both front/server) > \- \[\] Did you run prettier? (\`npm run prettier\` on both front/server) > \- \[\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front) > \- \[\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[french forum\](https://community.gladysassistant.com/)/\[english forum\](https://en-community.gladysassistant.com/)) for testing before merging. > \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code) > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com). > \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > > Please provide a description of the change here. It's always best with screenshots, so don't hesitate to add some! Die URL sollte in ein paar Minuten bereit sein. ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [30. August 2024 um 14:39 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/73 "2024-08-30T14:39:46Z")
Super !! @guim31, falls du uns liest … ^^ ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [30. August 2024 um 14:52 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/74 "2024-08-30T14:52:28Z")
Das ist hier verfügbar: [https://terdious-add-binary-chart.gladys-plus.pages.dev](https://terdious-add-binary-chart.gladys-plus.pages.dev/) Ich empfehle, es auf einem separaten Dashboard zu testen und das Dashboard nach dem Test zu löschen (um die eigene Produktion nicht zu verschmutzen). ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [30. August 2024 um 15:07 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/75 "2024-08-30T15:07:29Z")
So sieht es bei mir aus: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/b/2b40a8358e65c952a6b6ab9a2f9898d4c1d62fb8.png) Ich hätte meine Funktion gerne umbenennen können (wie bei Gerät des Raums), denn so ist es einfach zu lang ^^ Ansonsten ist bei mir alles gut !! 😉 ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [30. August 2024 um 15:41 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/76 "2024-08-30T15:41:24Z")
Danke für den Test, Guim31!! Am Ende wundert mich das nicht. Ich muss wohl wieder etwas übersehen haben. Es wäre verrückt, wenn man die Titel dieser Achse nicht besser anpassen könnte. Ich habe Stunden in die Dokumentation und Stackoverflow gesteckt… keine Chance, dass « ich » eine nicht hackige Lösung finde… ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [30. August 2024 um 15:49 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/77 "2024-08-30T15:49:17Z")
@Terdious ich weiß nicht, ob du mit den Optionen der y-Achse gespielt hast? ![Screenshot 2024-08-30 at 17.46.18](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/f/f/ff7a699f8fe844a74e602f26bbc73f450cf84d6c.png) > **[Options (Reference) \> yaxis | ApexCharts.js](https://apexcharts.com/docs/options/yaxis/)** > > Set the options for yaxis. The y-axis is the vertical line you see in axis charts. Typischerweise kannst du eine `minWidth` festlegen Aber klar, das wird dann auf dem Diagramm Platz wegnehmen, kein Geheimnis, solche Diagramme würden stark von der Möglichkeit profitieren, 2 oder 1 Spalten zu haben ^^ Ansonsten sollte dem Benutzer die Möglichkeit gegeben werden, das Gerät umzubenennen, wie beim Widget „Geräte“ ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [30. August 2024 um 17:25 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/78 "2024-08-30T17:25:10Z")
> [@pierre-gilles](#): > > Typischerweise kannst du eine `minWidth` angeben > > Danach, okay, das wird natürlich auf dem Diagramm Platz wegnehmen, kein Geheimnis, diese Art von Diagramm wird stark von der Möglichkeit profitieren, 2 oder 1 Spalten zu haben ^^ Ja, und genau das war es, es reduzierte das Diagramm so sehr, dass ich es aufgegeben habe. Aber tatsächlich kann eine Mischung aus beidem die extremen Fälle bewältigen. Und wie du sagst, kein Geheimnis, die Wahl der Anzahl der Spalten ist sehr vorteilhaft (getestet an einer Verbindung der 2 PR. Aber selbst mit 2 Spalten war es noch sehr mittelmäßig … Ich gehe davon aus? ‹ minWidth › + Möglichkeit zur Umbenennung (das Bearbeitungsfeld wird riesig sein 🙈) ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [2. September 2024 um 07:12 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/79 "2024-09-02T07:12:39Z")
> [@Terdious](#): > > Gehe ich da jetzt drauf? ‹ minWidth › + Möglichkeit zum Umbenennen (das Bearbeitungsfeld wird riesig 🙈) Ich wäre auch interessiert, das zu sehen! Ja, das wird ein riesiges Bearbeitungsfeld 😅 ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [2. September 2024 um 15:49 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/80 "2024-09-02T15:49:22Z")
Ich habe einen ersten Kompromiss gefunden, den ich interessant finde, mit ‹ minWidth › und einigen Änderungen. Ich habe eine der Boxen voll ausgelastet, um sie wirklich zu testen. ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/1/3/133680b448c972856efd38551234fc9ab2e3928a.png) Ich habe gerade gepusht, @pierre-gilles startet Cloudflare automatisch neu oder ist das eine manuelle Aktion von dir? Ich arbeite weiter an der Möglichkeit zum Umbenennen, also wenn es eine Aktion von dir ist, ist es vielleicht nicht nötig, ein Bild vorher neu zu starten. Ich sage dir Bescheid. [Vorherige Seite](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599.md?page=3) [Nächste Seite](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599.md?page=5)