Verbesserung der Grafiken

[pierre-gilles]

Hallo @Terdious!

Ich nutze die Gelegenheit, um diese Nachricht hier zu hinterlassen:

Historische Verbesserung der Gerätedaten durch Granularität

DuckDB 1.0 est maintenant disponible ! [Screenshot 2024-06-03 at 15.23.20] On va pouvoir avancer sur ces sujets !!

Allerdings denke ich, dass wir diese Themen getrennt halten sollten. Der Teil mit DuckDB ist ziemlich technisch und eine langfristige Änderung, die weit über den grafischen Teil hinausgeht. Ich denke, ich werde mich damit beschäftigen, wenn ich mit meinen laufenden Entwicklungen fertig bin

Was deine Entwicklung angeht, ist das wirklich cool!

Aber ich denke, es gibt eine echte Überlegung, die wir außerhalb von Gladys anstellen müssen, bevor wir überhaupt über Entwicklung sprechen. Ich weiß, dass es immer lustiger ist, den Kopf in die Entwicklung zu stecken, aber wir müssen zuerst wissen, was wir wollen

Wofür soll diese Funktion genau dienen und wer wird sie nutzen?

Beispiel:

• « Ich möchte den Verbrauch meines Hauses in der Woche vom 12. Januar wissen, als ich im Urlaub war, um zu sehen, wie viel ich verbrauche, wenn das Haus leer ist ».
• …?

Danach müssen wir Mockups erstellen (ich verwende persönlich whimsical), und sicherstellen, dass die Mockups unsere Fragen beantworten.

Derzeit hast du im Reiter « Historien » einfach den Reiter « Dashboard » kopiert und eingefügt, und dadurch wird meiner Meinung nach der Bedarf nicht gut erfüllt. Ich verstehe, dass du schnell vorankommen wolltest, um Tests durchzuführen, aber in diesem Fall wäre es schneller gewesen, einfach ein Mockup zu erstellen Denn jetzt wirst du dich wahrscheinlich sechsmal mit der Funktion beschäftigen, das ist schade ^^

Möchtest du, dass wir uns anrufen, um die Entwicklung zu formalisieren?

[Terdious]

Voll und ganz deiner Meinung ^^

Ehrlich gesagt, ich bin mit whimsical, das ich seit du mir davon vor 2 Jahren erzählt hast, mehrere Male getestet habe, überhaupt nicht wohl.

Und es macht mir überhaupt nichts aus, umsonst zu codieren (vor allem Frontend, um ehrlich zu sein ^^), denn … es ist nicht umsonst … ich habe keine Ausbildung als Programmierer und es trainiert mich wirklich. In meinem Kopf ist alles mehr oder weniger klar und was nicht klar ist, kommt, wenn ich es codiere. Also ehrlich gesagt ist es eine Win-Win-Situation ^^

Und trotzdem, was das Kopieren/Einfügen des Dashboards angeht … es ist genau das, was ich im Kopf hatte. Ich wollte genau das machen, aber ja, es ist eine sehr persönliche Sicht. Im Extremfall hat der Kurvenbereich im Dashboard für mich wenig Interesse, vor allem weil er auf dem Telefon und Tablet kaum sichtbar ist oder weil es zu lange dauert, bis man durch Wischen zur richtigen Box gelangt.

Aber ich werde die Sache je nach Bedarf und gemeinsamer Entscheidung weiterentwickeln. Ehrlich. Der Zoom-Bereich ist meiner Meinung nach eine große Bereicherung.

@pierre-gilles

Ich nutze die Gelegenheit, um diese Nachricht hier zu hinterlassen:

DuckDB 1.0 ist jetzt verfügbar! [Screenshot 2024-06-03 at 15.23.20] Wir können mit diesen Themen vorankommen!!

Super ^^

@pierre-gilles

Beispiel:

• „Ich möchte wissen, wie viel Energie mein Haus in der Woche vom 12. Januar verbraucht hat, als ich im Urlaub war, um zu sehen, wie viel Energie mein Haus verbraucht, wenn es leer ist.“
• … ?

• Ich möchte meine Produktion mit meinem Verbrauch vergleichen
• Ich möchte erkennen, welche Geräte wiederkehrende Überverbräuche verursachen
• Ich möchte meine Wetterstationdaten im Zeitverlauf mit Temperatur, Luftfeuchtigkeit und Wind visualisieren
• Ich möchte den Verbrauch meines Elektroautos leicht berechnen können
• Ich habe einen Drehstromanschluss und möchte meine Phasenungleichgewichte überprüfen können
• Ich möchte alle Fenster-/Türöffnungen leicht erkennen und im Zeitverlauf vergleichen können, indem ich sie mit meiner Anwesenheit vergleiche.
• …

Ich höre hier für den Moment auf, aber ich habe noch viele andere Ideen, die mir nicht sofort einfallen.

Ich habe noch viele andere Verbesserungsvorschläge im Kopf, die von anderen Mitwirkenden vorgebracht wurden und die später andere Pull Requests einreichen werden (Export nach xlsx/xlsm mit einer Vorlage xltm oder xltx als Eingabe; Hinzufügen einer Funktion zu einer Live-Kurve; Hinzufügen eines Kontrollkästchens im Editor, um die Min/Max-Funktion zu verwenden; Hinzufügen mehrerer Legenden (Beispiel Temperaturen + Luftfeuchtigkeit oder Wind + Temperaturen + Luftfeuchtigkeit) siehe https://codepen.io/apexcharts/pen/LBadXo)
Aber da ich dir zuhöre , habe ich mich, glaube ich, auf das absolute Minimum beschränkt.

Ich bin sehr heiß auf einen Formalisierungsanruf!!

[pierre-gilles]

@Terdious

Für mich ist der gekrümmte Teil im Dashboard nur von begrenztem Interesse, insbesondere weil er auf dem Telefon und Tablet kaum sichtbar ist oder weil es zu lange dauert, bis man durch Wischen zur richtigen Box gelangt.

Okay, ich würde diesen Punkt gerne verstehen: Warum? Was ist der Unterschied zu dem, was du gemacht hast?

@Terdious

Ich höre hier erstmal auf, aber ich habe noch viele andere Punkte, die mir nicht sofort einfallen.

Danke für die Beispiele! Ich bin offen für Beispiele anderer Nutzer, die „klassischere“ Installationen haben

Für mich ist die große Frage, wie hoch der Anteil an einmaligen Fragen im Vergleich zu wiederkehrenden Fragen ist?

Ein „Dashboard“-Funktionsweise macht keinen Sinn, wenn die meisten Fragen einmalig sind. In diesem Fall sollte es eher einen einfachen Bildschirm geben, der es ermöglicht, Fragen „im Vorbeigehen“ ohne Konfiguration zu beantworten.

Für wiederkehrende Fragen macht die Dashboard-Funktionsweise Sinn.

@Terdious

Ich bin total dabei für einen Call zur Formalisierung!!

Wir können sicher noch etwas warten, bis wir Feedback von anderen Nutzern haben. Für mich fehlen uns noch Daten, um eine Entscheidung zu treffen.

Ansonsten bin ich jeden Tag für Gladys verfügbar, um darüber zu sprechen und alles zu formalisieren!

[cicoub13]

Anforderungen:

• Punktuelle Analyse des Stromverbrauchs in einem historischen Datensatz
• Visualisierung des Temperaturverlaufs vom Vortag

[Terdious]

@pierre-gilles

Okay, ich würde diesen Punkt gerne verstehen: Warum? Was ist der Unterschied zu dem, was du gemacht hast?

Ich korrigiere meinen Satz, dem Wörter fehlen und der deshalb das Gegenteil von dem ausdrückt, was ich meine ^^:
« […] hat nur wenig Interesse, insbesondere weil es wenig sichtbar ist im Gegensatz zu auf Telefon und Tablet […] »
… die Dimension ^^ auf dem PC in 3 Spalten ist viel zu klein.
Dann ist es im aktuellen Zustand, selbst wenn man den Zoom rausnimmt, nicht einfach, mehrere Kurven zu sehen / mit Binärdaten zu vergleichen …
… aber dadurch … kommt mir eine Idee … und wenn ich für den Ausgangspunkt einfach die Möglichkeit der Auswahl der Spaltenanzahl entwickle (weil ich eigentlich nicht viel verändert habe, um den Teil des neuen Menüs zu entwickeln ^^)?

[pierre-gilles]

@Terdious

Ich korrigiere meinen Satz, dem es an Wörtern fehlt und der deshalb das Gegenteil meiner Meinung ausdrückt ^^ :

Ok, jetzt verstehe ich besser!

@Terdious

… aber dadurch … das lässt mich denken … und wenn ich nur für den Startpunkt die Möglichkeit der Auswahl der Spaltenanzahl entwickeln würde (denn im Grunde habe ich nicht viel verändert, um den Teil des neuen Menüs zu entwickeln ^^) ?

Genau mein Punkt! Wenn es nur um die Spaltenbreite geht, dann machen wir die Spaltenanzahl variabel Es ist unnötig, ein neues Tabblatt nur dafür zu erstellen.

[Terdious]

Danke für deine Analyse!!
Ich schlage vor, dass ich die 2 PRs in Kürze einreiche

• PR1: nur der Zoom
• PR2: nur die Auswahl der Spaltenanzahl
  Und dann sehen wir uns die funktionale Seite der folgenden PRs an.

[guim31]

Wenn Sie von der Möglichkeit sprechen, die Anzahl der Spalten auszuwählen, müssen Sie bedenken, dass, wenn ich 2 Spalten möchte, dann die Aufteilung 2/3 1/3 oder 1/3 2/3 wählbar sein sollte … Sie verstehen, was ich meine? ^^

Trotzdem finde ich auch, dass für visuelle Dinge wie Diagramme oder Kameras eine größere Anzeige ein großes Plus für Gladys wäre, zumindest für die Nutzung am PC oder auf einem großen Tablet.

[Terdious]

@guim31

Falls du die Möglichkeit meinst, die Anzahl der Spalten auszuwählen, dann muss man bedenken, dass wenn ich 2 Spalten möchte, dann muss man die Aufteilung 2/3 1/3 oder 1/3 2/3 wählen können … du weißt, was ich meine? ^^

Nein ^^ Entschuldigung, ich habe es nicht verstanden ^^

• Entweder ein neues Dashboard, du wählst 2 Spalten: die gesamte Anordnung wird einfach auf die gesamte verfügbare Bildschirmfläche (aktuelle Größe) auf 2 Spalten verteilt.
• Oder du möchtest ein aktuelles Dashboard in 2 Spalten umwandeln, und in diesem Fall müssen wir Schutzvorrichtungen einbauen, um nur eine leere Spalte löschen zu können (daher müssen die vorhandenen Boxen zuerst verschoben oder gelöscht werden).

Aber vielleicht war das nicht, was du meinst!!

[Terdious]

Ich habe es gerade verstanden ^^… sagen wir für den ersten Entwickler teilen wir in 2? Und dann können wir einen weiteren Entwickler hinzufügen, um die Möglichkeit zu geben, 1/3-2/3; 2/3-1/3; 1/2-1/2 zu wählen?

[Jluc]

Hallo,

• Analyse und Vergleich des Verbrauchs für jedes Gerät an verschiedenen Daten
• Visualisierung zum Vergleich der Temperaturen (in Zahlen und in Diagrammen) für beliebige Daten in der Vergangenheit

[pierre-gilles]

@Terdious

Was hältst du davon, für den ersten Entwicklungszyklus in zwei Teile zu splitten?

Ja, ich denke, es ist gut, zunächst nur 1, 2 oder 3 Spalten anzubieten und den Bildschirm gleichmäßig zu teilen!

[guim31]

Ich gebe zu, ich war nicht besonders klar! Genau das haben Pierre-Gilles und du in euren Beiträgen angesprochen

[Terdious]

@pierre-gilles, und alle anderen ^^

Wäre so etwas passend (okay, man muss die Ausrichtungen in der Bearbeitung mit der Hinzufügung des Buttons überarbeiten … aber ich kämpfe mit der Ausrichtung der Boxen Jeder Rat ist willkommen ^^) :

Der Code, der mir Probleme bereitet:

              <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>

Also, ich mag es am Ende sehr !!^^

Auf jeden Fall, @pierre-gilles, abgesehen von den letzten kleinen Einstellungen, sind die 3 PRs bereit für die Überprüfung.

[guim31]

Ich lebe auf !!!

[Will_71]

@Terdious

Gut, ich mag es sehr!!^^

Ich mag es auch sehr, aber man sollte mal sehen, wie es aussieht, wenn man es mit anderen nicht-grafischen Boxen mischt und wie es auf dem Handy aussieht, wenn die Box 2/3 oder die volle Breite hat.

[Terdious]

Auf dem Handy ändert sich dadurch nichts… wir haben bereits nur eine Spalte ^^

[Terdious]

@Terdious

(schön zu wissen, dass die Ausrichtungen in der Bearbeitung mit der Hinzufügung des Buttons überarbeitet werden müssen … aber ich kämpfe mit der Ausrichtung der Boxen Jeder Rat ist herzlich willkommen ^^):

Der Code, der mir Probleme bereitet:

              <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>

Okay, ich denke, ich habe es gefunden … ich habe mich in Luft geschlagen, ich habe die falsche Datei für die Styles aufgerufen.
So würde es in der Webversion ( >992 Pixel) aussehen:

Und so würde es in der mobilen Version oder Anzeige < 992px aussehen:

[pierre-gilles]

Rapide @Terdious Cool, dass du den Fall bereits gefüllter Spalten geregelt hast!

In Sachen Design müssen die 3 Spalten auf einer Höhe sein, sonst sieht es nicht sehr sauber aus.

Du könntest zum Beispiel ein Symbol (oder einen Knopf) zum Löschen neben dem Titel platzieren

Für den „Spalte hinzufügen“-Knopf denke ich, dass es ein „+“-Knopf rechts neben den Spalten sein könnte, der nur bei Bedarf angezeigt wird:

Beispiel 2 Spalten:

Beispiel 3 Spalten:

Was hältst du davon?

[Terdious]

Hihi !!

Also, der Fall mit der gleichen Spaltenebene wurde behandelt, aber ich mag dein Design, das ohne Schnörkel und leichter ist, sehr.

Ich mache die Änderungen in diesem Sinne!! Mit dem + rechts!

Danke für deine schnelle Nachricht!!

EDIT: @pierre-gilles ich mochte die Anordnung des ‹ + › aber wenn in den anderen Spalten Boxen ausgefüllt sind … sieht man es nicht mehr und man muss scrollen … vielleicht einfach auf derselben Zeile wie die Spalten anzeigen, aber rechts, oder?

So?