[FTUI 3] Charts

[Wolfgang Hochweller]

Darf ich den Code zu diesem Beispiel mal sehen ?

Wenn ich das so hinkriegen wuerde, waere ich schon sehr weit.

Das sieht ja anders aus als auf GitHub.

[StephanFHEM]

das klappt soweit schon alles super. Danke dafür!

ich möchte jetzt gerne für bestimmte Charts noch folgendes einstellen, weiß aber nicht wie:

- Navigation ausblenden um Platz zu sparen. Ich benötige nur den aktuellen Tag
- Die Farbe der Achsenbeschriftung etc. auf weiß ändern

Gibt es dafür Attribute?

edit (hier noch zwei Bugs?):
- wenn ich Attribut fill setze dann füllt er immer von 0 aus... bei dem Gefrierschrank lasse ich mir von -30 bis -10 anzeigen. Die Füllung kommt dann von oben was komisch aussieht. Kann das geändert werden? Bei FTUI2 war das anders
- wenn in dem Log-Device zum Beispiel %Y-%m-%d definiert habe wird in dem Device jeden Tag eine neue Log-Datei geschrieben. Es wird im Chart dann immer nur die aktuelle angezeigt. Wenn ich einen Tag zurückgehe hat er die Daten nicht

[OdfFhem]

@StephanFHEM

Navigation ausblenden um Platz zu sparen. Ich benötige nur den aktuellen Tag

Vermutlich reicht der Verzicht auf ftui-chart-controls ...

[setstate]

Farben werden per Theme festgelegt. Man sollte vermeiden, Farben direkt auf die Elemente zu setzen. Wenn man dann Tag/Nacht Umschaltung realisieren will oder den Style ändern möchte, würde man anfangen, alles wieder von Hand zu suchen und zu ersetzen.
Für eine gute Usability sollte man eh nur wenige Grundfarben benutzen, sonnst leidet die Übersichtlichkeit.
Im Theme-File gibt es dafür

  --primary-color:
  --secondary-color:

  --success-color:
  --info-color:
  --warning-color:
  --danger-color:
  --light-color:
  --medium-color:
  --dark-color:

Light, Medium, Dark sind Grauabstufungen

Diese 9 Grundfarben werden dann auf die Funktions-Variablen angewendet:

  --checkbox-off-color: var(--dark-color);

Dort sollten dann keine zusätzlichen Farben benutzt werden.

Für Chart kann man im Theme-File folgende Variablen benutzen:

--chart-legend-font-size
--chart-legend-color
--chart-title-color
--chart-title-font-style
--chart-text-color
--chart-grid-line-color
--chart-tick-font-size
--chart-font-style
--chart-font-family

Man kann die Variablen auch nur in einem HTML File direkt per style Tag setzen:

Code Auswählen Erweitern

  <style>
    #mychart1 {
      --chart-text-color: #ffdd44;
    }
  </style>


Das gilt dann für ein Chart mit ID=mychart1

Code Auswählen Erweitern


<ftui-chart id="mychart1"


Oder mit

Code Auswählen Erweitern

  <style>
    ftui-chart {
      --chart-text-color: #ffdd44;
    }
  </style>


für alle Charts auf der Seite.

[StephanFHEM]

Danke für die ersten Antworten:

- den Tag ftui-control wegzulassen sorgt tatsächlich dafür, dass die komplette Navigation nicht mehr angezeigt wird. Super!
- Farbe funktioniert für alle Charts wenn ich es in style/body packe. Wenn ich das mit der Chart-ID versuche geht es leider nicht. Da ich es auch nur für einen sehr kleinen Anteil meiner Charts gebraucht hätte und es bei den anderen bescheiden aussieht lass ich es jetzt wie es ist:-)

@setstate: ich arbeite auch mit wenigen Farben damit es stimmig ist aber es sind halt nicht die selben die du bei dir benutzt hast... halt ein anderes Design:-) schaust du dir die von mir genannten Probleme/Bugs auch noch an? Gerade der Fill im Minus-Bereich ist zwar mathematisch richtig, sieht aber komisch aus.. die Tages-Logs könnte ich notfalls FHEM-seitig auch auf wöchentliche Log-Dateien umstellen. Ich glaube auch so ein Thema gab es damals schonmal bei FTUI2

[Dracolein]

Gibt es Möglichkeiten, die Bezüge z.B. zur X-Achse zu konfigurieren?
Beispielsweise möchte ich meinen Gasverbrauch über die letzten 30 Tage darstellen.

In FTUI 2 lief das über

Code Auswählen Erweitern


                                data-daysago_start="30d"
                                data-daysago_end="-1"


[grossmaggul]

Du kannst zumindest in <ftui-chart> unit="month" angeben, dann werden Dir die Daten des letzten bzw. laufenden Monats angegeben.

Code Auswählen Erweitern

<ftui-chart unit="month">
   <ftui-chart-data>....</ftui-chart-data>
   <ftui-chart-control>...</ftui-chart-control>
</ftui-chart>


[setstate]

Ich probiere gerade eine unit="30d" einzubauen

Code Auswählen Erweitern

<ftui-chart unit="30d">
   <ftui-chart-data>....</ftui-chart-data>
</ftui-chart>

Teste noch etwas und laden das dann hoch.

Edit: unit=30d und 24h ist jetzt verfügbar.

[Dracolein]

Du kannst zumindest in <ftui-chart> unit="month" angeben, dann werden Dir die Daten des letzten bzw. laufenden Monats angegeben.

Code Auswählen Erweitern

<ftui-chart unit="month">
   <ftui-chart-data>....</ftui-chart-data>
   <ftui-chart-control>...</ftui-chart-control>
</ftui-chart>


Prima, das funktioniert. Zwar ist das Diagramm jetzt zum Monatsbeginn erstmal leer, aber ich könnte die "Vorspulen / Zurückspulen"-Knöpfe unter dem Diagramm einbinden, um rückwirkenden Content zu betrachten. Ich probier das später sofort nochmal aus.

Ansonsten sehen meine ersten "Prototypen" schon zufriedenstellend und hübsch aus.


by the way:
Wie wärs mit einem Thread über FTUI3, wo jeder mal ein paar Screenshots seiner eigenen Schöpfungen zeigt? Ich wäre total gespannt, um coole Ideen zu übernehmen. (oder gibts so einen Thread vll. schon?)

[grossmaggul]

Ich probiere gerade eine unit="30d" einzubauen

Jetzt sehen "week" und "month" aber ein wenig seltsam aus.

[LuGu]

Ich habe Probleme mit den Charts und hoffe auf eure Hilfe.
Immer wenn ich meine FTUI3 Seite mit Charts öffne, erhalte ich folgende Logeinträge:

Code Auswählen Erweitern


2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Heizung_2_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 28.
2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Heizung_1_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 33.
2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Klima_2_ZB" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 31.
2021.11.05 19:40:01 1:  PERL WARNING: Argument "eg_wz_Klima_1_ZB" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 33.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_th_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 26.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_ku_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 27.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wc_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 29.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wz_Heizung_2_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 30.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wz_Heizung_1_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887,  line 34.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_th_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_wc_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.
2021.11.05 19:40:02 1:  PERL WARNING: Argument "eg_ku_Heizung_HM" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 887.


Wenn ich <ftui-chart> ... </ftui-chart> lösche, ist im Log wieder alles ok.
Hier das Konstrukt für die Seite:

Code Auswählen Erweitern


<ftui-chart title="Temperatur (Innen)" height="250px" prefetch="86400" extend>
  <ftui-chart-data label="Flur" point-radius="0" color="green" log="FileLog_eg_th_Heizung" spec="eg_th_Heizung_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="WC" point-radius="0" color="blue" log="FileLog_eg_wc_Heizung" spec="eg_wc_Heizung_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="Küche" point-radius="0" color="red" log="FileLog_eg_ku_Heizung" spec="eg_ku_Heizung_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="Essen" point-radius="0" color="yellow" log="FileLog_eg_wz_Heizung_2" spec="eg_wz_Heizung_2_HM:actTemp"></ftui-chart-data>
  <ftui-chart-data label="Wohnen" point-radius="0" color="violet" log="FileLog_eg_wz_Heizung_1" spec="eg_wz_Heizung_1_HM:actTemp"></ftui-chart-data>
  <ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>


Die gleichen Filelogs benutze ich auch in fhem für Plots. Dort gibt es keine Logeiträge.

Ich hoffe mich kann jemand in die richtige Richtung schubben!

Gruß Lutz

[grossmaggul]

Wie es die Fehlermeldung schon sagt, musst Du einen numerischen Wert bei spec benutzen, also beispielsweise 4:actTemp
Das bedeutet, daß die actTemp an vierter Stelle der Zeile im Log steht.

Beispiel, im Logfile hat man folgende Zeile:

Code Auswählen Erweitern

2021-01-01_00:02:02 wz.heizkoerper desired-temp: 16.0

Position 1 ist die Timestamp
Position 2 das Device
Position 3 desired-temp
Position 4 ist der Wert den Du darstellen möchtest.

[LuGu]

Wie es die Fehlermeldung schon sagt, musst Du einen numerischen Wert bei spec benutzen, also beispielsweise 4:actTemp
Das bedeutet, daß die actTemp an vierter Stelle der Zeile im Log steht.

Danke grossmoggul,

das hat gepasst. Wieder was gelernt.

Gruß Lutz

[setstate]

Jetzt sehen "week" und "month" aber ein wenig seltsam aus.

week ist jetzt wieder gut, bei month sehe ich keinen Fehler

[Dracolein]

Klappt perfekt, dankeschön