[FTUI 3] Charts

[Det20]

Ja. Wobei dieser Schatten auch geil aussieht.
Bei mir läuft es aber noch nicht 100%, siehe Post. Bist du gerade am Chart dran?

[OdfFhem]

@Det20

Angenommen, Du meinst mich ...

Erst zum WE komme ich dazu, mich praktisch mit dem Thema zu beschäftigen ...

"Ja" klingt so, als ginge es un eine Einheitsfarbe für die gesamte Linie.
Lt. Deinem letzten Screenshot vermute ich, dass die Linie mehr Farben haben sollte ... richtig ?

[Det20]

Yap, meinte dich, sorry.
An sich wäre ich auch happy mit nur einer Farbe gewesen, aber so sieht das natürlich noch besser aus.

Btw:
Ich habe meine chart.js abgeändert, damit ich auch "hour", 6h, 12h usw habe. Das wäre ein Featurewunsch von mir, neben Pie.

[OdfFhem]

@Det20

Featurewünsche sind immer gut und mögliche Lösungen können auch gemeinsam erarbeitet werden. Die Integration in den Auslieferzustand liegt allerdings ganz allein in den Händen von setstate.

Falls es am WE noch keine Erkenntnisse zu Pie bzw.  Doughnut gibt, würde ich mir das mal anschauen.

[mr_petz]

Sieht auf jeden Fall mal besser aus, aber so ganz klappt das leider immer noch nicht. Die 1.8 (Mauszeiger) müssten ja ne andere Farbe haben also die restlichen.
Nur wenn ich den ersten Wert (green) gegen zb red ändere, ist plötzlich alles rot. Er scheint alle Werte in < 2 einzusortieren.

Code Auswählen Erweitern


        <ftui-chart y-label="kW">
          <ftui-chart-data no-x no-y no-x1 no-y1 fill label="Heizung (Max: $max kW)" background-color="#d6305650"
     log="DB_History_Heizung"
unit="hour"
   file="history"
type="line"
spec="Heizung:S0Counter_Counter_PowerCurrent"
   [update]="Heizung:S0Counter_Counter_PowerCurrent"
[color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: green, 2: warning, 3: danger')"
[background-color]="Heizung:S0Counter_Counter_PowerCurrent | step('0: --green, 2: warning, 3: danger')"
   >
      </ftui-chart-data>
          <ftui-chart-controls units="month, week, day, 12h, 6h, hour"></ftui-chart-controls>


Ja und wegen Pie ... Schade, scheint wohl nicht zu gehen.

Ich hatte zum test type="bar".
Bei type="line" mit fill verhält sich es anders. Er nimmt nur rgb,rgba,hex und basic Farben:

Code Auswählen Erweitern


[background-color]="Device | step('0:`rgba(0,0,0,0.2)`,2:`rgba(133,250,150,0.5)`,3:`rgba(30,60,90,0.7)`')"

Es wird immer alles umgestrickt. Also nicht die einzelnen Chartbalken/Punkte...

[Det20]

Mit RGB ist dann alles schwarz ... Egal ob mit umswitchen.

[mr_petz]

Mit RGB ist dann alles schwarz ... Egal ob mit umswitchen.

Kann ich nicht bestätigen:

Code Auswählen Erweitern


        [color]="Device | step('0: green, 2: danger, 3: warning')"
        background-color="rgba(10,10,10,0.2)"
        [update]="Device"
        [background-color]="Device | step('0:`rgb(255,133,55)`,2:`rgba(133,250,150,0.5)`,3:`rgba(30,60,90,0.7)`')"


[Det20]

Doch, nun geht's. Allerdings sieht der Wert 1.8 immer noch genauso aus wie der Rest.
Wie im vor-vorherigen Thread geschrieben habe ich das Gefühl, es wird nicht zwischen 1.8 und 2.4 unterschieden, sondern alles als < 2 gewertet.

Bar geht bei mir überhaupt nicht, habe also LINE.

[mr_petz]

Ja, es werden immer alle Farben geändert.
Der/ das letzte [update] bestimmt die Farbe für alle...

[Det20]

Plan B ist auch fehlgeschlagen. Eine (neue) Idee war, zwei chart-data's zu verwenden.
Beim ersten "step('0:red, 2:white, 3:white')", beim zweiten"step('0:white, 2:red, 3:white')".

Klappt leider auch nicht. Es ist egal was für Daten kommen, er nimmt immer die erste Farbe (0), auch wenn der Wert überhaupt nicht passt.
Sprich: Er zeichnet alles >=2 immer in der 0'er Farbe, auch wenn die nicht matchen darf.

[mr_petz]

Was steht bei dir im Reading Heizung:S0Counter_Counter_PowerCurrent?

Edit:

Code Auswählen Erweitern

step('0:red, 2:white, 3:white')
würde

Code Auswählen Erweitern

step('0:red, 2:white)
reichen bei step...

Hinweis: Hexwerte so angeben:

Code Auswählen Erweitern

step('0:´#11FF99´, 2:´#99FF11´)

[Det20]

Ein Beispiel von heute früh (mySQL):

Code Auswählen Erweitern


TimeStamp; Device; Type; Event; Reading; Value
2022-10-06 08:40:30 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:40:39 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:09 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:20 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:30 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:40 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:41:50 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:10 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:20 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:30 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:40 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:42:50 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:43:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:43:40 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:43:50 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:44:00 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:44:09 Heizung DUMMY S0Counter_Counter_PowerCurrent: 2.43 S0Counter_Counter_PowerCurrent 2.43
2022-10-06 08:44:20 Heizung DUMMY S0Counter_Counter_PowerCurrent: 0 S0Counter_Counter_PowerCurrent 0


Die Werte sind mehrfach drin, damit der Graph wirklich bis zur 0 (= Ende) eckig ist. Ansonsten würden da Zacken sein (letzter Wert Richtung 0)

[mr_petz]

ja, wenn der letzte wert 0 ist, dann nimmt er ja immer die erste Farbe.
Mhh...

[Det20]

Ach ja ... verdammt, da wäre ich nicht drauf gekommen. Allerdings brauche ich die null. Wenn die Heizung nicht mehr heizt, verbraucht sie ... 0.
Und ohne würde das Rechteck ja in der Luft enden.

Da er aber anscheinend immer den letzten Wert nimmt und die Werte immer mit 0 anfangen/enden, habe ich anscheinend verloren, außer Gant kommt irgendwann.

[OdfFhem]

Die verwendete OpenSource-Bibliothek unterstützt u.a. die im Screenshot gezeigte FTUI3-Darstellung - allerdings nur mit (testweise fixer) Erweiterung der chart-Komponente.

Sollte die Darstellung interessant sein, müsste man frei füllbare Attribute ins Spiel bringen ...