# 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:** 3
**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:** [3. Juni 2024 um 08:54 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/41 "2024-06-03T08:54:16Z")
Alles klar, ich nehme das, was ich gemacht habe, wieder auf. Das sollte schnell gehen. @pierre-gilles In solchen Fällen, muss ich dann einen neuen PR starten? (Ich glaube, da gibt es keine große Wahl, da ich nicht von seinem Branch arbeiten kann?) Ich muss nur noch das Tooltip finalisieren =\> schwer, Infos zu solchen Daten zu finden!! Aber ich denke, ich habe die richtige Quelle gefunden ^^ [https://codepen.io/andrussuitsu/pen/qBKEqzr?editors=1111](https://codepen.io/andrussuitsu/pen/qBKEqzr?editors=1111) Wäre das so in Ordnung? ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/d/2/d280706ba8ea0ae7e9144c10e80dc509ae2c1779.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:** [3. Juni 2024 um 09:27 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/42 "2024-06-03T09:27:07Z")
> [@Terdious](#): > > In solchen Fällen, muss ich dann einen neuen PR erstellen (ich denke, es gibt da keine große Wahl, da ich nicht von seinem Branch arbeiten kann)? Ja, natürlich einen neuen PR! ---
**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:** [3. Juni 2024 um 11:46 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/43 "2024-06-03T11:46:29Z")
> [@Lokkye](#): > > [Binary graph by callemand · Pull Request #1948 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/pull/1948) PR: [Add binary chart by Terdious · Pull Request #2094 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/pull/2094) Aber die Namen sind wirklich winzig: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/8/28933380ce051e6ffa6ebdfcc1f531f62dbf41b2.png) An sich ist die PR für die zoombare Anzeige im Dashboard relativ einfach, ohne die gesamte Historie und die Datumsangaben zu implementieren! Vielleicht lohnt es sich, eine kleine PR dazu zu machen @pierre-gilles? Und dann können wir das Thema „Verbesserung der Kurven“ in einem zweiten Schritt anhängen? ---
**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:** [3. Juni 2024 um 13:26 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/44 "2024-06-03T13:26:34Z")
> [@Terdious](#): > > Aber sie sind wirklich winzig bei der Anzeige der Namen: Gibt es keine andere Möglichkeit, die Titel anzuzeigen? > [@Terdious](#): > > Vielleicht lohnt es sich, hier einen kleinen PR zu machen @pierre-gilles, oder? Und dann können wir später das Thema „Verbesserung der Kurven“ in einem zweiten Schritt daran anhängen? Ja 100%, ich bin für kleine PRs, das ist das Beste, um zu debuggen, und damit die Funktionen so schnell wie möglich beim Endnutzer ankommen. ---
**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:** [3. Juni 2024 um 13:28 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/45 "2024-06-03T13:28:24Z")
> [@Terdious](#): > > Aber sie sind wirklich winzig bei der Anzeige der Namen: Kann der Name direkt unter der Grafik-Linie 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:** [3. Juni 2024 um 13:39 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/46 "2024-06-03T13:39:06Z")
Ich suche alles, was man in der Dokumentation machen kann ^^ Nicht einfach, aber wir werden es finden ^^ ---
**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:** [6. Juni 2024 um 05:21 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/47 "2024-06-06T05:21:42Z")
@pierre-gilles, wäre das hier passend: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/9/795ec74ea9177934590c381516ea3260ee583e67.png) Ihr Ansatz ist schon etwas hacky, um wie gewünscht auf alle meine Suchanfragen einzuwirken. Trotz einer Option `yaxis.labels.style.cssClass` ([Options (Reference) \> yaxis | ApexCharts.js](https://apexcharts.com/docs/options/yaxis/)) muss man direkt am SVG herumfummeln. Ich habe also den „device“-Teil vom „feature“-Teil getrennt, um einen Zeilenumbruch zu erzeugen. Ich wollte die Schriftgröße im Diagramm unter 2 Binärstellen reduzieren. Was denkst du? Auf dem Bild sind die Namen der rechten Grafik doch total zusammengedrückt, oder? ---
**Author:** ![Hizo](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/h/51bf81/32.png) [@Hizo](https://community.gladysassistant.com/u/Hizo)\ **Post date:** [6. Juni 2024 um 07:13 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/48 "2024-06-06T07:13:46Z")
Ehrlich gesagt ist das schon mal gar nicht so schlecht 🙂 ---
**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:** [6. Juni 2024 um 16:09 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/49 "2024-06-06T16:09:14Z")
Das ist ja richtig gut, finde ich! Tolle Arbeit! Ist das alles im PR? 🙂 ---
**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:** [6. Juni 2024 um 16:53 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/50 "2024-06-06T16:53:43Z")
Ich finde, der Zeilenumbruch sieht gut aus, ich bin persönlich nicht schockiert vom rechten Diagramm. Auf jeden Fall ist es unmöglich, einen Gerätenamen + eine Funktion in allen Fällen vollständig unterzubringen, meiner Meinung nach! ---
**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:** [6. Juni 2024 um 17:53 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/51 "2024-06-06T17:53:06Z")
Noch nicht ^^ ich warte auf die Freigabe ^^ ich versuche es heute Abend!! Aber der Schreibstil stört mich, oder? EDIT: Es ist push. @pierre-gilles, denkst du, du könntest das schnell für mich ü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:** [7. Juni 2024 um 07:45 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/52 "2024-06-07T07:45:05Z")
Ich habe dir gerade eine Review gemacht, momentan nur funktional, leider nicht sehr aussagekräftig ^^ Die UI friert bei mir komplett ein, ich kann die Funktion nicht zum Laufen bringen 😛 Details zu meinem Test: > > > \### 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 ---
**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:** [7. Juni 2024 um 07:54 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/53 "2024-06-07T07:54:07Z")
Vielen Dank, ich führe die Tests mit wenig Wert fort. ---
**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:** [7. Juni 2024 um 09:25 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/54 "2024-06-07T09:25:35Z")
> [@pierre-gilles](#): > > Bei mir friert die UI komplett ein, ich bekomme die Funktion nicht zum Laufen 😛 Ich kann es reproduzieren … Aber was ich nicht verstehe, ist, dass das nichts direkt mit dem PR zu tun hat. Es ist die Anfrage, laut dem console.log, den ich direkt danach eingefügt habe, die sehr lange dauert, nur wenn nicht genug Werte vorhanden sind (\< 3 oder 5 Werte) … trotzdem haben wir auf dieser Seite nichts verändert .. ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/1/2/12e1e3f539afecc83146f3bad4bba71760adc533.png) Ich werde auf der Serverseite nachschauen, ob es einen besonderen Grund gibt. EDIT: Leer: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/c/3/c3e373be87d7aecdfe8f40343f4ed3a2fb292784.png) et beim Laden der Daten: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/5/e/5ecdbc2033c9f7de432095ec61244632f2d0efba.png) Daher ist es die Frontend-Darstellung: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/5/a/5a4bb3f812f8b99ba4372d2532260bbabc289aca.png) Ich mache weiter ---
**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:** [8. Juni 2024 um 06:00 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/55 "2024-06-08T06:00:47Z")
Hallo @pierre-gilles, Es handelte sich also um einen grafischen Bug, die Erstellung des Diagramms läuft vermutlich ins Leere, weil es das rangeBar-Diagramm nicht erstellen kann, wenn die Daten unter dem Min/Max-Bereich der Grundeinstellung (die 5 Minuten betragen sollten) liegen. Sobald es mehr als 3/4 Minuten Daten hatte, war es nicht in der Lage, die Daten im richtigen Format darzustellen und zeigte keine Daten an, obwohl die Kurve erschien. Und das bis zu 10 Minuten Daten. Laut allen meinen Tests (die Zeit, die ich damit verbracht habe 🤦‍♂️ ^^) sollte die Hinzufügung in den Optionen von: ```auto min: Math.min(...series.flatMap(s => s.data.map(d => d.y[0]))), max: Math.max(...series.flatMap(s => s.data.map(d => d.y[1]))), ``` Funktionieren. Ich lasse es den ganzen Tag laufen, um sicherzugehen. EDIT: Die Änderungen wurden gepusht ---
**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 08:23 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/56 "2024-06-10T08:23:25Z")
@Terdious Danke für die Untersuchung und die Änderungen! Ich habe gerade gepullt, habe deinen PR getestet, aber es wird nichts angezeigt, obwohl die API Werte zurückgibt: ![Screenshot 2024-06-10 at 10.22.52](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/d/1/d1128b3871cb6ddf4fc2672f97881db213167ecf.png) ---
**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 08:28 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/57 "2024-06-10T08:28:50Z")
Hallo @pierre-gilles, Entschuldigung, ich hatte den Minimalwert für die Anzeige der Kurve (\>1) nach meinen Tests nicht wieder geändert. Das ist jetzt erledigt. Entschuldige die Umstände. Soll ich eine spezifische Nachricht für die Binärdatei hinzufügen, um darauf hinzuweisen, dass mindestens 2 Werte benötigt werden (sonst wird eine leere Kurve angezeigt)? ---
**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 10:23 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/58 "2024-06-10T10:23:16Z")
@pierre-gilles, Ich würde gerne eine ‹ heightAdditional › für die Anzeige der Binärdateien hinzufügen, wenn mehr als 3 ausgewählt sind. So in etwa: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/8/a87319b40b69bc481d1a52aaeb0f70739c1ca4fe.png) Denn sonst sieht man so etwas: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/e/b/eb94df59671f297b47c03626c72a2d7a44d1c654.png) Was hältst du davon? (Bitte beachte das Icon oben rechts nicht, das ist mir während der Tests im PR für die erweiterte Kurvenansicht aufgefallen.) ---
**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 12:22 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/59 "2024-06-10T12:22:02Z")
> [@Terdious](#): > > Was denkst du? Ach ja, tatsächlich sollte man die Größe dieses Widgets nicht begrenzen. Wie hast du das geändert? > [@Terdious](#): > > Soll ich eine spezifische Nachricht für die Binärdatei einfügen, um zu warnen, dass mindestens 2 Werte benötigt werden (sonst wird eine leere Kurve angezeigt)? Warum würde eine einzelne Wert eine leere Kurve anzeigen? Wenn dein Sensor die Tür gerade geöffnet hat, sollte die Tür dann nicht als „geöffnet“ markiert werden? ---
**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 12:38 UTC](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599/60 "2024-06-10T12:38:57Z")
Das ist ein rangeBar, also müssen zwingend 2 Zeitpunkte angegeben werden. Das Diagramm zeigt ‹ an › von Datum zu Datum oder ‹ aus › von Datum zu Datum. Das war die Grundentwicklung von @Lokkye und mir scheint, dass dies auch das erwartete Verhalten ist. Oder? ![1000020261](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/f/2ffdb434eb9d7ac8fc22541a6fc1fbf12cdf81d4.jpeg) EDIT: Lol, ich habe mich in deinen Antworten verheddert ^^ Ich push die Änderung und sage dir Bescheid. [Vorherige Seite](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599.md?page=2) [Nächste Seite](https://community.gladysassistant.com/t/affichage-des-graphiques-pour-les-capteurs-binaires/6599.md?page=4)