[FTUI 3] Charts

[Dracolein]

Guten Morgen zusammen,
nachdem ich am Wochenende, abgesehen von obiger offener Frage, eine hübsche neue FTUI3-Seite gebastelt hatte, musste ich heute morgen ernüchtert folgendes Problem feststellen:

Code Auswählen Erweitern

<ftui-chart unit="week">stellt fein die letzten 6-7 Tage dar, bis der Kalender von Sonntag auf Montag (heute!) wechselt. Denn heute morgen ist mein Chart komplett leer und beginnt gerade wieder sich langsam mit Daten zu füllen. Eigentlich wollte ich die "letzten 7 Tage" dargestellt sehen, analog von unit="30d" wo relativ zum Kalendertag immer die letzten 30 Datenpunkte dargestellt werden.

Gibt es hierfür Abhilfe irgendwie?

[Dracolein]

Moin zusammen,

ungewohnt still hier im TabletUI Bereich, gibts Euch freundliche Experten noch @mr_petz & Co ? 

Bin weiter an obiger Frage dran und versuche Lösungen/Workarounds für mich zu finden, aber komme nicht weiter.
Bestünde die Option, "unit=30d" zu nutzen und dafür dann die Darstellungszeiträume auf der X-Achse zu beschränken? start-date und end-date habe ich in vielen Kombinationen erfolglos ausprobiert...

[Dracolein]

Lösung: chart.component.js wie folgt leicht modifizieren:

Suchen:

Code Auswählen Erweitern

if (this.controlsElement) {
      this.controlsElement.addEventListener('ftuiForward', () => this.offset += 1);
      this.controlsElement.addEventListener('ftuiBackward', () => this.offset -= 1);
      ['hour', 'day', 'week', 'month', 'year', '24h', '30d'].forEach(unit => {
        this.controlsElement.addEventListener('ftuiUnit' + unit, () => this.unit = unit);
      });
ersetzen mit:

Code Auswählen Erweitern

if (this.controlsElement) {
      this.controlsElement.addEventListener('ftuiForward', () => this.offset += 1);
      this.controlsElement.addEventListener('ftuiBackward', () => this.offset -= 1);
      ['hour', 'day', 'week', 'month', 'year', '24h', '30d', '5d'].forEach(unit => {
        this.controlsElement.addEventListener('ftuiUnit' + unit, () => this.unit = unit);
      });
und suchen:

Code Auswählen Erweitern

      case '30d':
        date = new Date(ts + (offset * 30 * DAY - 30 * DAY));
        break;
    }
ersetzen mit:

Code Auswählen Erweitern

case '30d':
        date = new Date(ts + (offset * 30 * DAY - 30 * DAY));
        break;
case '5d':
        date = new Date(ts + (offset * 5 * DAY - 5 * DAY));
        break;
    }



[Dracolein]

Anderes Problem: Ein Diagramm, bestehend aus 2 Graphen, soll Daten der letzten 30 Tage darstellen. Eine Datenlinie ist parametriert mit "fill", also ein Liniendiagramm, die andere ist parametriert mit type="bar", einer Balkendarstellung. Das funktioniert soweit. Code hier:

Code Auswählen Erweitern

          <ftui-chart unit="30d">
            <ftui-chart-data file="CURRENT" log="Log_PVErtragAndEinspeisungDay" spec="4:SMATripower6.PVErtragDay" label="Ertrag" [update]="SMATripower6:PVErtragDay:time"
                type="bar" background-color="#ffcc0050" color="#ffcc00"></ftui-chart-data> 
            <ftui-chart-data file="CURRENT" log="Log_PVErtragAndEinspeisungDay" spec="4:HomeManager.PVEinspeisungDayNew" label="Einspeisung" [update]="HomeManager:PVEinspeisungDayNew:time"
                fill background-color="#00cc3350" color="#00cc33"></ftui-chart-data>   
          </ftui-chart>



Wenn ich jedoch die Linien ebenfalls als Balken darstellen möchte, wird gar nichts mehr angezeigt. Mein Wunsch wäre eigentlich eine Darstellung zweier Balken pro Tag.
Was mache ich falsch?

Hierbei könnte ich weiterhin Hilfe brauchen, ich finde weder einen Fehler, noch eine Lösung. Auf Github gibts sogar ein Diagramm mit 2 Bar-Charts als Musterbeispiel...
Ich habe alles durchprobiert; ohne Erfolg. Habe "y-axis-id=y" mit/ohne "y-axis-id=y1" als zusätzlichen Parameter ausprobiert, habe diverse weitere Parameter weggelassen, um den Fokus auf type="bar" zu setzen.... nichts zu machen.
Jede Datenlinie einzeln als Balkendiagramm wird fein dargestellt. Ergo sind die Definitionen korrekt. Beide gemeinsam in einem Diagramm kriege ich einfach nicht hin kopfkratz

[mr_petz]

Für alle die bei 2 Bars (Wird bei 2 Bars per flex automatisch gesetzt) eine größere Breite haben wollen nach Zeile 357 in der chart.component.js das einfügen:

Code Auswählen Erweitern

    this.configuration.data.datasets[dataElement.index].barThickness = 10;
barThickness = Breite in px

Hier die Doku:
https://www.chartjs.org/docs/2.9.4/charts/bar.html#barthickness

Im Anhang ein Besispiel. Wird dann halt überlappt...

LG mr_petz

Edit:
Ist so nicht updatesicher!
@Draco
Bei mir im test funzen 2 Bars.
Hier auch:
https://forum.fhem.de/index.php?topic=117779.msg1271298#msg1271298

[Dracolein]

Du hast meinen Codeschnipsel zum Test verwendet?
Oder ist bei mir ein Fehler drin?

Ich habs im Chromium aufm Raspi sowie unter Firefox auf ner Windowskiste ausprobiert. Nirgendwo werden mir 2 Bars dargestellt.

[mr_petz]

@Dracolein
Hatte jetzt erst wieder Zeit. Sorry.
Ich habe nochmal mit gleichen settings getestet.
30d
background-color="#00cc3350" color="#00cc33" type="bar" fill label="Ertrag"
background-color="#ffcc0050" color="#ffcc00" type="bar" fill label="Einspeisung"
und ohne controls.
Es werden 2 Bars angezeigt wenn du das wie oben erwähnt einfügst Bsp.:

Code Auswählen Erweitern

    this.configuration.data.datasets[dataElement.index].barThickness = 10;https://forum.fhem.de/index.php?topic=117779.msg1275588#msg1275588
Breite musst du halt testen.
Wenn ich das nicht drin habe, dann werden mir auch keine Bars angezeigt. Warum? Durch das flex im barThickness denke ich.
Scheint sich bei 30d extrem auszuwirken...

LG mr_petz

[Dracolein]

Ne keine Chance bei mir. Auch nicht, wenn ich "30d" beispielsweise durch "week" ersetzen, um bei gleicher Diagrammbreite weniger Balken zu haben. Egal, wie ich es drehe, ich sehe maximal eine Datenreihe als Balkendiagramm.
Das gilt auch für andere FTUI3 Seiten mit anderen Datenreihen.

Seis drum, ich finde mich mit einer Niederlage ab 

[M.Piet]

Moin,

ich bekomme eine Sache bei FTUI3 nicht umgesetzt, und ich weiß nicht warum.

In den Logs zu Chart 3 (Pool_Solar_Stellmotor) habe ich keine Werte, sondern "on" und "off":

Code Auswählen Erweitern

2023-06-09_17:46:13 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-09_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_13:09:26 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
Darum benutze ich in FTUI2 die folgenden Zeilen, die ich dank des Forums so zum laufen bekommen hatte:

Code Auswählen Erweitern

data-columnspec='["3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[2]=~\\x22on\\x22?0:1"Dies machte aus den "on/off" eine "1/0" und ich konnte prima den Status des Stellmotors anzeogen lassen (siehe Screenshot aus FTUI2).

Nun funktioniert aber genau das in FTUI3 nicht.
Hat jemand eine Idee?
Vielen Dank.

Code Auswählen Erweitern

      <ftui-chart y-label="Temperaturen" y1-label="Solar" y-unit="°C" unit="week">
 
<ftui-chart-data fill line label="Pooltemperatur" color="blue" log="Log_Temp_Pool" spec="4:ext_temperature_1"
y-axis-id="y"></ftui-chart-data>

<ftui-chart-data line label="Außentemperatur" color="danger" log="Log_Temp_Aussentemperatur" spec="4:ext_temperature_0"
y-axis-id="y"></ftui-chart-data>

<ftui-chart-data line label="Solar aktiv" color="warning" log="Pool_Solar_Stellmotor" spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$fld[2]=~\\x22on\\x22?0:1"
y-axis-id="y1"></ftui-chart-data>

        <ftui-chart-controls units="day, week"></ftui-chart-controls>
      </ftui-chart>

[Eisix]

Hallo,

das sollte genau das machen was du suchst aber mit logdb.

Code Auswählen Erweitern

<ftui-chart-data [update]="HK_VR:actorState:time" label="Heizung" fill stepped fill color="white" log="logdb" file="-" spec="HK_VR:actorState:0::$val=($val=~'on'?1:0)"></ftui-chart-data>

Gruß
Eisix

[Eisix]

Du mußt den Anfang der spec leicht umbauen, so in der Art denke ich.Eventuell ein ":" zu viel.

Code Auswählen Erweitern

spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01::$val=($val=~'on'?1:0)"

[M.Piet]

Du warst zu schnell. Bin da selbst drauf gekommen, weil ich erst gepostet und dann nachgedacht hatte.

Danke! Ich habe nun eine gelbe Linie.
Was mir nur wundert: diese ist dauerhaft auf 0

Laut den Logs hat der Status aber mehrfach gewechselt. In FTUI2 wird es auch nach wie vor richtig angezeigt.

Code Auswählen Erweitern

2023-06-09_17:46:13 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-09_20:30:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_10:00:00 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_13:09:26 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_13:15:31 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_14:22:04 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_14:22:38 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_14:24:57 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_14:27:55 HMW_IO_12_Sw14_DR_NEQ0308160_01 on
2023-06-10_15:03:21 HMW_IO_12_Sw14_DR_NEQ0308160_01 off
2023-06-10_15:06:33 HMW_IO_12_Sw14_DR_NEQ0308160_01 on

[Eisix]

Experimentier mal mit den Feldern also mal ein ":" weglassen.

Code Auswählen Erweitern

spec="3:HMW_IO_12_Sw14_DR_NEQ0308160_01:$val=($val=~'on'?1:0)"


[M.Piet]

Jetzt ist die gelbe Linie komplett weg.

[Eisix]

Somit waren die zwei "::" korrekt. Der String on wird nicht erkannt und somit auf default 0 gesetzt. Wir sind nah an der Lösung.