[FTUI 3] Charts

[OdfFhem]

@Sailor

Magst du mir den Code fuer diese Beispiele reinstellen?

Chart.js verwendet je nach Darstellung verschiedene Anzeigeformate. Bei "unserer" Darstellung year wird das Anzeigeformat month verwendet. Dieses existiert nicht im Original-Modul und fällt auf den Chart.js-Standard zurück.

Temporär kann folgende Stelle in chart.component.js

Code Auswählen Erweitern


  displayFormats: { millisecond: 'HH:mm:ss.SSS', second: 'HH:mm:ss', minute: 'HH:mm', hour: 'HH:mm', day: 'd. MMM' }

erweitert werden zu

Code Auswählen Erweitern


  displayFormats: { millisecond: 'HH:mm:ss.SSS', second: 'HH:mm:ss', minute: 'HH:mm', hour: 'HH:mm', day: 'd. MMM', month: 'MMMM' }


Bei der Darstellung year wird dann nur noch der volle Monatsname ohne Jahresangabe angezeigt.


Die Bereitstellung für die eigentlichen Beispiele macht keinen Sinn, da eine temporäre Übernahme in das Original-Modul alle Charts beeinflussen würde. Eigentlich wäre dies nur bei Erweiterung der Original-Module um das Durchreichen der "unbekannten" Eigenschaften möglich.

[OdfFhem]

@Eisix

Kann schon mal bestätigen mit FilLog funktioniert es wie erwartet.

Irgendwie hat mich das logdb-Thema neugierig gemacht und deshalb habe ich dies auf einem Testsystem aktiviert.

Anschließend habe ich zwei logdb-Charts mit $val-Anpassung integriert und konnte keine Probleme feststellen ...

Code Auswählen Erweitern


<ftui-chart-data
  [update]="Gateway:connection:time"
  log="logdb"
  spec="Gateway:connection:0::$val=((($ts)=~':.8:..$')?8:(($val)=~'active'?4:0))"
  ></ftui-chart-data>

Eigentlich geht es um den Wert von $val, aber um die Darstellung flexibler zu gestalten, werden bestimmte Zeitstempel speziell behandelt.
- endet die Minute vom Zeitstempel auf 8, dann ist der resultierende Wert 8.
- ist die Verbindung aktiv, dann ist der resultierende Wert 4
- ansonsten ist der resultierende Wert 0
Beispiel im Screenshot_connection.

Code Auswählen Erweitern


<ftui-chart-data
  [update]="Bridge:outgoing-count:time"
  log="logdb"
  spec="Bridge:outgoing-count:0::$val=((''.$val)=~'[13579]00$'?500:((''.$val)=~'[02468]00$'?700:600))"
  ></ftui-chart-data>

$val ist in diesem Fall eigentlich numerisch, wird aber zum Test in eine Zeichenkette "gezwängt".
- sind die letzten Ziffern des Zählers 100|300|500|700|900, dann ist der resultierende Wert 500.
- sind die letzten Ziffern des Zählers 000|200|400|600|800, dann ist der resultierende Wert 700.
- ansonsten ist der resultierende Wert 600
Beispiel im Screenshot_count.

[Sailor]

Hi OdfFhem

Chart.js verwendet je nach Darstellung verschiedene Anzeigeformate. Bei "unserer" Darstellung year wird das Anzeigeformat month verwendet. Dieses existiert nicht im Original-Modul und fällt auf den Chart.js-Standard zurück.
Bei der Darstellung year wird dann nur noch der volle Monatsname ohne Jahresangabe angezeigt.

Danke, werde ich ausprobieren.

Die Bereitstellung für die eigentlichen Beispiele macht keinen Sinn, da eine temporäre Übernahme in das Original-Modul alle Charts beeinflussen würde. Eigentlich wäre dies nur bei Erweiterung der Original-Module um das Durchreichen der "unbekannten" Eigenschaften möglich.

Da müssen wir uns wohl noch gedulden bis setstate etwas Zeit dafür findet.

Gruß
    Sailor

[Eisix]

Hallo OdfFhem,

sorry, aber dein Beispiel ist mir leider zu kompliziert 
Mein reading actorState springt zwischen on/off hin und her und soll in 0/1 umgesetzt werden.

Habs so probiert aber das funktioniert nicht.

Code Auswählen Erweitern


spec="HK_VR.actorState:0::$val=(($val)=~'on'?1:0)"


Gruß
Eisix

[OdfFhem]

@Eisix

Bei Deiner spec liegt es vermutlich an dem Punkt ...

Müsste es statt HK_VR.actorState nicht HK_VR:actorState heissen ?

[Eisix]

@OdfFhem

ja da hast du recht da hat sich irgendwann beim testen ein "." eingeschlichen. Leider geht es dann immer noch nicht und ich denke ich habe auch die Ursache gefunden.

Wenn ich direkt das device anspreche funktioniert es so.

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>


Bei mir wird es aber als Variable einem Template uebergeben, das funktioniert nicht

Code Auswählen Erweitern


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


Jemand eine Idee?

Gruß
Eisix

[Eisix]

Hallo,

kaum macht man es richtig geht es!
Mein Fehler, geht auch mit Variable, wenn man die richtige benutzt.

Danke für die Hilfe!

Gruß
Eisix

[vaulie]

Hi,
ich habe gestern auch mal ein bißchen mit den Charts rumgespielt und tatsächlich auch eine "7-Tage"-Ansicht hinbekommen. Dazu habe ich fleißig in den component.js-Dateien gestöbert Falls sich dafür jemand interessiert, siehe Anhang. Ich kann mich aber nicht erinnern, wo ich überall geändert/ergänzt habe 

Mein nächstes Ziel, diese Ansicht als Standard ("active") vorzubelegen, habe ich nicht geschafft. Kann mir da jemand ein Tipp geben?
Außerdem habe ich mich gefragt, ob eine gemeinsame chart-controls für mehrere Charts auf einer Seite möglich ist. Kann man die irgendwie gruppieren?

Danke!
Gruß Volker

[OdfFhem]

@vaulie

... eine "7-Tage"-Ansicht hinbekommen ...

Ähnlich wie 'day' und '24h' oder 'month' und '30d' kann man auch 'week' und '7d' in chart-controls.component.js identisch behandeln.

Mein nächstes Ziel, diese Ansicht als Standard ("active") vorzubelegen, habe ich nicht geschafft. Kann mir da jemand ein Tipp geben?

In ftui-chart-controls gibt man mit Attribut units die verwendbaren Modi an.
In ftui-chart gibt man mit Attribut unit den gewünschten (Start)Modus an - vorbelegt mit "day".

Außerdem habe ich mich gefragt, ob eine gemeinsame chart-controls für mehrere Charts auf einer Seite möglich ist. Kann man die irgendwie gruppieren?

Ein ftui-chart-controls gilt immer nur für das umgebende ftui-chart. Innerhalb von ftui-chart können neben einem ftui-chart-controls (beliebig) viele ftui-chart-data verwendet werden. Somit kann ftui-chart-controls für mehrere Datenlieferanten gelten.


Generell immer gut, wenn man sich zur Orientierung ein mitgeliefertes Beispiel zur Komponente näher ansieht (in diesem Fall: examples/chart.html) ...

[vaulie]

Hi OdfFhem,
vielen Dank für Deine Hinweise!
Die 7d habe ich tatsächlich ähnlich zu 24h und 30d dort implementiert. Wäre super, wenn jemand mit Schreibzugriff das ins github übernehmen kann, oder kann das nur setstate alleine?

Der Unterschied zwischen units im controls und unit im chart hatte ich übersehen, nun sehe ich die Charts wie gewünscht. Danke!

Wegen der Gruppierung kenne ich das aus dem "normalen" fhem-web, dass dort nur einmal Kontrollelemente vorhanden sind und alle Charts gemeinsam verändert werden. In ftui3 möchte ich gerne mehrere Diagramme darstellen und nicht alle chart-data in ein Diagramm malen lassen. Weiß jemand, ob das möglich ist und/oder das mit dem bestehenden externen js chart modul vielleicht mal möglich sein wird?

[stefanru]

Hi,

ich habe noch 2 Probleme mit FTUI3 Chart.
Ich hoffe ihr könnt mir helfen.

1. geht es um den "unit" Tag am "ftui-chart-data"
Ich möchte also an meine Werte ein Einheitenbezeichner haben wie z.b. unit="°C".
Leider hat es keine Auswirkung. Hier ein Beispiel:

Code Auswählen Erweitern


          <ftui-chart class="row" width="150px" height="100px" color="primary">
            <ftui-chart-data fill log="logdb" unit="°C" file="history" spec="TempWohnzimmer:temperature"
                             [update]="{{device}}:state:time"></ftui-chart-data>
          </ftui-chart>


2. Die angezeigte Zeit wenn man auf einen Datenpunkt fährt.
Hier bekomme ich die Zeit immer mit am / pm angezeigt.
Ich habe hier einiges zu locale und sprache gelesen.
Habe alles ausprobiert, leider hilft nichts.

Code Auswählen Erweitern


  <meta name="lang" content="de">
  <meta name="language" content="German">
  <meta http-equiv="content-language" content="de-DE">
  <meta property="og:locale" content="de-DE">



Im Anhang ein Screenshot des Charts mit den 2 Problemen.

Viele Grüße und Danke,
Stefan

[OdfFhem]

@stefanru

zu 1) Bei ftui-chart könnte ein neues Attribut namens ytickunit (beispielhaft für die y-Achse) das Problem lösen.

Code Auswählen Erweitern


ytickunit=" °C"


In chart.component.js wären dann 2 Änderungen notwendig.

Temporär könnte "ticks: {" innerhalb von "y:" erweitert werden zu

Code Auswählen Erweitern


  ticks: {
    callback: (val, index) => { return val + this.ytickunit; },


Temporär könnte der return-Wert von "static get properties" von

Code Auswählen Erweitern


    noX: false
  };

erweitert werden zu

Code Auswählen Erweitern


    noX: false,
    ytickunit: ''
  };


Dadurch wird der Skalenwert um den in ytickunit hinterlegten Wert ergänzt.


zu 2) Wenn kein explizites tooltipformat vorgegeben wird, greift chart.js bei der Anzeige auf seinen "englischen" Standardwert zurück.

Temporär könnte folgende Stelle in chart.component.js

Code Auswählen Erweitern


  time: {

erweitert werden zu

Code Auswählen Erweitern


  time: {
    "tooltipFormat":"d.MMMM yyyy, HH:mm:ss",


Dann zeigt chart.js ein "deutsches" Format an ... die Monatsnamen bleiben allerdings "englisch".

[stefanru]

Hi OdfFhem,

danke für die Erklärung.
Ok, dann müsste ich wohl die js anpassen oder besser meine eigenen neben dran stellen.

Vielen Dank, ich spiel mal etwas damit rum.

Gruß,
Stefan

[presskopf]

Hallo zusammen,

Ich bin da auf eine Fehlermeldung gestoßen, die ich mir nicht so recht erklären kann.
Rumgespielt habe ich mit folgendem:

Code Auswählen Erweitern

          <ftui-chart title="Stromverbrauch pro Tag" y-label="Energy in kWh" width="900px" height="180px" unit="month">
            <ftui-chart-data
            log="logdb"
                file="history"
                spec="MYSENSOR_77:statEnergy1DayLast"
    type="bar"
>
        </ftui-chart-data>
        <ftui-chart-controls units="month, year">
        </ftui-chart-controls>
          </ftui-chart>

Die Fehlermeldung im roten FTUI-Kästchen besagt:
chart-component.js:316
TypeError: dataElement.fetch is not a function

Sie hängt anscheinend mit dem unit zusammen, welches im <ftui-chart> definiert ist. Egal was ich eintrage, es kommt diese Meldung; nur wenn ich nix eintrage erscheint sie nicht.

Was habe ich da falsch gemacht?

[LuGu]

Hallo zusammen,

Ich bin da auf eine Fehlermeldung gestoßen, die ich mir nicht so recht erklären kann.

Die Fehlermeldung im roten FTUI-Kästchen besagt:
chart-component.js:316
TypeError: dataElement.fetch is not a function

Sie hängt anscheinend mit dem unit zusammen, welches im <ftui-chart> definiert ist. Egal was ich eintrage, es kommt diese Meldung; nur wenn ich nix eintrage erscheint sie nicht.

Was habe ich da falsch gemacht?

Ich habe das gleiche Problem. Hat bei mir aber nichts mit unit zu tun.
Wenn ich folgendes Chart auf der intex.html plaziere kommt es zur Fehlermeldung. Wenn ich das gleiche Chart auf einer nachgeladenen content.html plaziere, gibt es keine Probleme.

Code Auswählen Erweitern


<ftui-chart height="130px" width="300px">
<ftui-chart-data label="Essen" point-radius="0" color="yellow" log="FileLog_eg_wz_Heizung_2" spec="4:actTemp" [update]="eg_wz_Heizung_2:actTemp:time"></ftui-chart-data>
<ftui-chart-data label="Wohnen   Temperatur" point-radius="0" color="violet" log="FileLog_eg_wz_Heizung_1" spec="4:actTemp" [update]="eg_wz_Heizung_1:actTemp:time"></ftui-chart-data>
<ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>


Hat jemand eine Idee oder die gleiche Beobachtung gemacht?

Gruß LuGu