# Verbesserung der Grafiken

**URL:** <https://community.gladysassistant.com/t/amelioration-des-graphiques/8954>\
**Category:** Développement\
**Created:** [23. Mai 2024 um 20:51 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954 "2024-05-23T20:51:31Z")\
**Posts on this page:** 20\
**Page:** 6

<div class="post-metadata">

**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:** [13. Juni 2024 um 11:44 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/101 "2024-06-13T11:44:15Z")

</div>

@pierre-gilles,

Könntest du mal einen Blick auf den Fix werfen? Ist das so besser für dich?

---

<div class="post-metadata">

**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 12:38 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/102 "2024-06-13T12:38:16Z")

</div>

@Terdious Ich habe dir eine Review gemacht:

> <https://github.com/GladysAssistant/Gladys/pull/2097#pullrequestreview-2115658359>
>
> \### 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)~~
> \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[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
> 
> Adding the deletion or addition of columns to the dashboard

---

<div class="post-metadata">

**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:** [13. Juni 2024 um 14:55 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/103 "2024-06-13T14:55:46Z")

</div>

Ich habe dir auf deine Fragen zum PR geantwortet.

Ich habe die Änderungen vorgenommen, um mich vom Overkill-Teil zu trennen, aber ich komme zum gleichen Punkt zurück, an dem ich nicht verstehe, warum ich ein falsches Ergebnis habe:  
Bei einigen meiner Dashboards (ich habe das Gefühl, dass es passiert, wenn viele Elemente vorhanden sind, ist die beim Laden der Seite abgerufene Höhe falsch. Anschließend übernimmt `componentDidUpdate` und der Wert wird wieder korrekt. Ich denke also, dass die Höhe abgerufen wird, während die Seite noch nicht vollständig geladen ist… Aber ich finde nicht die richtige Funktionalität. ‹&nbsp;resizeObserver&nbsp;› und ‹&nbsp;mutationObserver&nbsp;› funktionierten, ich war zufrieden. Und ich habe auf Stackoverflow gesehen, dass es veraltet ist, aber auch, dass es sehr schnell ist.

Zum Beispiel gibt mir hier das console.log 2371, obwohl die tatsächliche Höhe 3385 beträgt. Sobald ein Update erfolgt, erhalte ich den richtigen Wert.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/d/0/d0c49e4ab7c1ee0391d9cb9d7abe28d01d6b9be2.png)  
 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/f/6/f60ed374ebefa6ad1ac2f3abc2bbd6bf335b7855.png)

Zögere nicht, mich auf bessere Spuren zu lenken, wenn du im Kopf hast, wie man die Position ‹&nbsp;sticky&nbsp;› in diesem Fall besser verwalten kann.

Ich habe die Änderungen gepusht.

---

<div class="post-metadata">

**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 15:01 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/104 "2024-06-13T15:01:44Z")

</div>

Nachdem ich es getestet habe, muss ich zugeben, dass ich nicht unbedingt einen Nutzen im Kleben sehe. Wenn man unten auf dem Bildschirm ist, ist es sogar etwas verwirrend für den Nutzer:

Man klickt, aber es passiert nichts visuell.

Deshalb hinterfrage ich am Ende seinen Nutzen ^^

Was denkst du?

---

<div class="post-metadata">

**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:** [13. Juni 2024 um 15:03 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/105 "2024-06-13T15:03:05Z")

</div>

Das passt mir gut ^^

---

<div class="post-metadata">

**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 15:03 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/106 "2024-06-13T15:03:39Z")

</div>

Lass das einfach weg, behalte nur den Button oben, das reicht mir und ich finde, es funktioniert besser 🙂

---

<div class="post-metadata">

**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:** [13. Juni 2024 um 15:14 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/107 "2024-06-13T15:14:10Z")

</div>

Erledigt und gepusht!! Du hast recht, ich mochte es ja, aber am Ende ist es so gar nicht so schlecht^^

Danke für deine Analyse!!

---

<div class="post-metadata">

**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 15:18 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/108 "2024-06-13T15:18:21Z")

</div>

Ich habe auf deinen Kommentar geantwortet:

> <https://github.com/GladysAssistant/Gladys/pull/2097/files#r1638401299>
>
> \### 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)~~
> \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[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
> 
> Adding the deletion or addition of columns to the dashboard

---

<div class="post-metadata">

**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:** [13. Juni 2024 um 15:23 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/109 "2024-06-13T15:23:27Z")

</div>

Hmmm ^^ Du stellst mir da eine Frage ^^ Eigentlich war das gut, um den Boden dynamisch vorzubereiten!! Ich dachte, wenn du eines Tages die Anzeigegröße vergrößerst (das wäre toll ^^), dann könnte man leicht auf 4 oder 5 Spalten umstellen ^^

Aber stimmt schon, wenn wir bei drei Spalten bleiben, funktioniert das gut!!

---

<div class="post-metadata">

**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 15:26 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/110 "2024-06-13T15:26:00Z")

</div>

Oder warum nicht einfach ein klassisches Flexbox-Layout?

---

<div class="post-metadata">

**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:** [13. Juni 2024 um 15:32 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/111 "2024-06-13T15:32:03Z")

</div>

Das ist wirklich damit verbunden, so viel Platz wie möglich für die auszufüllenden Spalten zu behalten. Ich bin auf Prozent umgestiegen:

```auto
  const columnStyle = {
    '--column-width': boxesLength === maxBoxes ? `calc(100% / ${maxBoxes})` : `calc(93% / ${boxesLength})`
  };
  const addButtonStyle = {
    '--add-button-width': boxesLength < maxBoxes ? 'calc(7%)' : '0'
  };

```

Aber ansonsten, egal, man kann bei 2 oder weniger Spalten bei ‹&nbsp;col-lg-10&nbsp;› / ‹&nbsp;col-lg-2&nbsp;› bleiben. Das Problem stellt sich nur bei 2 Spalten, wo ich kein ‹&nbsp;col-lg-(11/2)&nbsp;› machen kann ^^

---

<div class="post-metadata">

**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 15:38 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/112 "2024-06-13T15:38:27Z")

</div>

Oui oui, ich hinterfrage nicht die Funktionsweise ^^

Aber warum CSS-Flexbox nicht verwenden, um das zu machen?

Du hast eine feste Spalte: die letzte Spalte mit dem Button

Und 1, 2 oder 3 Spalten, die eine dynamische Größe haben müssen, die einfach der verbleibende Platz geteilt durch die Anzahl der Spalten ist (und das ist automatisch, nichts zu codieren, das ist CSS).

---

<div class="post-metadata">

**Author:** ![BZH](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/bzh/32/16519_2.png) [@BZH](https://community.gladysassistant.com/u/BZH)\
**Post date:** [15. Juni 2024 um 15:41 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/113 "2024-06-15T15:41:54Z")

</div>

Ich möchte gerne meinen kleinen Beitrag leisten und unterstütze die Idee, die Möglichkeit zu haben, 1 bis N Spalten zu erstellen. Das hilft dabei, eine Richtung vorzugeben, wie die Spalten verwaltet werden sollen, insbesondere bei immer hochauflösenderen Bildschirmen. Auf großen Bildschirmen nehmen die 3 Spalten 50% der Seitenbreite ein.

Soweit ich verstanden habe, basiert das auf Bootstrap. Ein kleiner col-xl-N, der von der Anzahl der Spalten abhängt, wäre denkbar, auch wenn man von 1 bis 4 Spalten erlauben könnte, um ein Vielfaches von 12 zu behalten. Aber meiner Meinung nach sind 3 Spalten auf großen Bildschirmen etwas zu wenig. Das Problem bei 5 Spalten ist die Verwaltung dieses Vielfachen unter Bootstrap, viele Probleme für wenig Nutzen. Aber 4 Spalten erscheinen mir ein guter Kompromiss.

Ein weiterer Rückmeldung, nicht direkt zur Spaltenfunktion, aber es wäre interessant, ein Ausklapp-Panel im Bearbeitungsbereich für die Karten in den Spalten zu haben. Zum Beispiel für große Karten wie Grafiken, wenn man 3/4 davon hat, wird es schnell schwierig, die Karten zu verschieben. Man könnte einfach einen Button links neben dem Verschiebe-Button hinzufügen, der ‹&nbsp;Zusammenklappen&nbsp;› heißt. Nur eine Idee 🙂

---

<div class="post-metadata">

**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:** [16. Juni 2024 um 07:35 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/114 "2024-06-16T07:35:39Z")

</div>

> [@BZH](#):
>
> Ein weiterer Vorschlag, nicht direkt zur Spaltenfunktion, aber es wäre interessant, ein Ausklappfeld im Bearbeitungsbereich für die Karten in den Spalten zu haben. Zum Beispiel für große Karten wie Diagramme, wenn du 3/4 davon hast, wird es schnell schwierig, Karten zu verschieben. Man könnte einfach einen Knopf links neben dem Verschiebeknopf hinzufügen, der „Zusammenklappen“ wäre. Nur eine Idee 🙂

Letztlich schlägtst du vor, den Umorganisationsmodus („Neu anordnen“) beizubehalten, der für mobile Geräte (oder kleine Bildschirme) von @pierre-gilles initiiert wurde!!

 ![1000020407](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/b/9/b9f0ce605d32f10f570716dbd94b75a69d9453fa.jpeg)

Tatsächlich finde ich, dass das Sinn ergibt, umso mehr, wie du sagst, wenn es bereits viele große Blöcke gibt.

---

<div class="post-metadata">

**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:** [16. Juni 2024 um 08:36 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/115 "2024-06-16T08:36:15Z")

</div>

Ich habe persönlich den CSS-Code angepasst, um die Breite der Blöcke zu vergrößern, denn sonst gibt es, wie du sagst, viel zu viel leeren Raum auf dem Bildschirm…

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/d/2d690197711774ff2055afc3cccde24161ad9e90.png)

```auto
.container {
max-width: 90%; 
}

```

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/f/7ff37a9f145d35bb31db9014b8258f36979968aa.png)

---

<div class="post-metadata">

**Author:** ![BZH](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/bzh/32/16519_2.png) [@BZH](https://community.gladysassistant.com/u/BZH)\
**Post date:** [16. Juni 2024 um 09:42 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/116 "2024-06-16T09:42:29Z")

</div>

Ah, ausgezeichnet, ich habe es gerade mit 80% getestet, es ist wirklich toll.

Hast du eine Dockerfile erstellt, in der du das Docker-Gladys-Image verwendest und jedes Mal die CSS-Datei änderst? 😊

---

<div class="post-metadata">

**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:** [16. Juni 2024 um 21:24 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/117 "2024-06-16T21:24:32Z")

</div>

Pierre-Gilles hatte mir geraten, eine Erweiterung wie CustomCSS zu verwenden, mit der sich das CSS beim Laden der Seite automatisch ändern lässt.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/b/ab10a8ebd116dad1a5570b1cc6b1c11db1df29c2.png)

---

<div class="post-metadata">

**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 02:21 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/118 "2024-06-17T02:21:24Z")

</div>

Hallo @pierre-gilles,

Danke für deine Hilfe und entschuldige bitte das anfängliche Missverständnis. Die Korrekturen sind erledigt, alles in CSS und es funktioniert bei mir sehr gut. Ich habe sogar noch 4 ESLint-Warnungen mitgenommen.

Ich lasse dich die PR überprüfen (und schauen, ob es das ist, was du im Sinn hattest) und dir dann Bescheid geben.

Ich gehe jetzt zur Überprüfung der Binärdateien ^^

---

<div class="post-metadata">

**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 12:06 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/119 "2024-06-17T12:06:29Z")

</div>

Danke @Terdious für die Korrekturen, es ist viel besser so 🙂

Es ist viel sauberer, wir sind von einem riesigen PR in Bezug auf Code zu fast nichts übergegangen, es ist perfekt 👌 Weniger Code = weniger Bugs!

Ich habe einen kleinen Kommentar zu einer sehr kleinen Sache, aber der Rest ist für mich in Ordnung:

> <https://github.com/GladysAssistant/Gladys/pull/2097#pullrequestreview-2122721212>
>
> \### 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)~~
> \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[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
> 
> Adding the deletion or addition of columns to the dashboard

---

<div class="post-metadata">

**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:** [29. August 2024 um 14:40 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/120 "2024-08-29T14:40:08Z")

</div>

Hallo @Terdious 🙂 Ich melde mich wegen meiner letzten Nachricht.

Es wäre cool, wenn das schnell in Gladys umgesetzt wird, das ist wirklich eine super Funktion!

[Vorherige Seite](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954.md?page=5)

[Nächste Seite](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954.md?page=7)