[FTUI 3] Charts

[OdfFhem]

@mr_petz

Der Link ist natürlich nützlich, aber verweist immer auf die neueste Version ... ist also recht dynamisch.

Momentan wird aber in FTUI3 noch eine deutlich ältere (Beta)Version genutzt. Der passendere Link wäre somit eher https://www.chartjs.org/docs/3.0.2/configuration/elements.html#point-styles bzw. noch eher https://www.chartjs.org/docs/2.9.4/configuration/elements.html#point-styles

Im aktuellen Fall unterscheiden sich die Dokus nur im Text, nicht bei den Möglichkeiten.


Interessant könnte übrigens auch noch die Option usePointStyle für die Labels der Legende sein. Hier ist die Doku entscheidend, da sich mittlerweile Einiges geändert hat ... u.a. bzgl. der options-Struktur ...
- FTUI3: options: {legend: {labels: {usePointStyle: true}}}
- latest: options: {plugins: {legend: {labels: {usePointStyle: true}}}}

[mr_petz]

Ok. Aber es funktioniert....

[Dracolein]

Moin zusammen,

im <ftui-chart>, lässt sich der Wertebereich der X-Achse (Zeit!) dynamisch gestalten eventuell?

Beispiel anhand meiner PV-Anlage:
Im Sommer Messwerte von 06:00 - 21:00
Im Winter Messwerte von ~09:00 - 17:00
Aktuell wird mir in meiner zentralen FTUI3 Übersicht das kleine Chart relativ leer dargestellt.
Ohne die Parameter "x-min=7" bzw. "x-max=20" werden volle 24 Stunden auf der X-Achse visualisiert.

Nice to have wäre es, wenn der Wertebereich der X-Achse (Uhrzeit) mit dem ersten Messwerte des Tages beginnt und mit dem letzten Messwert des Tages endet. Analog wie die Y-Achse, dessen Wertebereich dynamisch aus den vorhandenen Daten generiert wird.

[mr_petz]

@Draco

Hier eine Übergangslösung/test für dich:
in der chart.component.js die Zeilen 359 bis 360 durch diese ersetzen:
https://forum.fhem.de/index.php/topic,117779.msg1241368.html#msg1241368

Jetzt sollte bei unit="day" nur deine Start- bis Endzeit der Logeinträge zu sehen sein.
Beim Umswitchen auf 24h oÄ wird alles normal.
Ich habe es nur mit einem chart-data getestet! Sollte auch nur für einen gehen! Logisch.

LG

[Dracolein]

Das funktioniert, prima.

Es wird allerdings nun auf alle Charts angewendet.
Könnte man dem <ftui-chart> noch einen Parameter mitgeben, um dies Feature zu nutzen? Sowas wie x-scale="full" bzw. x-scale="day" oder sowas 

[mr_petz]

Ok.
Füge der chart-data.component.js nach Zeile 57 (yAxisID: 'y',) das ein:

Code Auswählen Erweitern


dayTimeline: false,

Wenn du jetzt im <chart-data> day-timeline angibst wird es dafür gesetzt.

Hinweis: Aber bei jedem UpdateAll ist alles auf Anfang!

Edit: Update
Hier werden immer die min max vom aktuellen Tag angezeigt beim durchklicken der Tage,
in der chart.component.js die Zeilen 359 bis 360 durch diese ersetzen:

Code Auswählen Erweitern


    if (this.unit !== 'day' && !dataset.dayTimeline) {
      this.configuration.options.scales.x.min = this.startDate;
      this.configuration.options.scales.x.max = this.endDate;
    } else {
      const indexStart = dataset.data.findIndex( i => i.x.replace(/_.*/g,'')===this.startDate.replace(/_.*/g,''));
      const indexEnd = dataset.data.findLastIndex( i => i.x.replace(/_.*/g,'')===this.startDate.replace(/_.*/g,''));
      //alternate function for indexStart,indexEnd
      //const indexStart = dataset.data.map(i => {return i.x.replace(/_.*/g,'');}).indexOf(this.startDate.replace(/_.*/g,''));
      //const indexEnd = dataset.data.map(i => {return i.x.replace(/_.*/g,'');}).lastIndexOf(this.startDate.replace(/_.*/g,''));
      this.configuration.options.scales.x.min = indexStart >= 0 ? dataset.data[indexStart].x : this.startDate;
      this.configuration.options.scales.x.max = indexEnd > 0 ? dataset.data[indexEnd].x : this.endDate;
    }

Nicht schön, aber funktioniert...

LG

[Dracolein]

Ok danke, es wäre nice, wenn das Feature den Weg in das reguläre Modul finden würde, um im Update-Falle nicht erneut alles manuell nachtragen zu müssen

[mr_petz]

Habe nochmal oben geändert.
Jetzt wird bei jedem Tag nur min max angezeigt wenn man durchblättert...

LG

[mr_petz]

Hi,
gibt es Möglichkeiten, die Dichte der Gitternetzlinien und/oder die Anzahl der Achsenbeschriftungen zu beeinflussen?
Ich würde gern mehr horizontale Linien im Diagramm einfügen wollen, als es die automatische Darstellung tut.

Habe wieder gespielt
in der chart.component die Zeile 89
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/chart/chart.component.js#L89
ersetzen dürch:

Code Auswählen Erweitern


autoSkipPadding: this.xTickPadding,


und hinter Zeile 207
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/chart/chart.component.js#L207
das einfügen:

Code Auswählen Erweitern


xTickPadding: 30,

30 ist Standard bei der x-Achse.

Jetzt im <ftui-chart> das einfügen:

Code Auswählen Erweitern

x-tick-padding="240"
und es werden die Ticks mit größeren Abstand gesetzt.

Für die y-Achse kannst du es genauso machen.

LG

[Dracolein]

Coole Idee, danke.

[Dracolein]

Laut Github Übersicht gibt es auch

Area chart or mixed types

Bestünde auch die Möglichkeit eines sogenannten "stacked area chart"?

Beispiel:
Besitze 3 verschiedene PV-Flächen, die unterschiedlich starke Leistungen zur gleichen Zeit produzieren. Derzeit laufen alle Kurven in einem Diagramm relativ wild "hintereinander" verschachtelt umher.
Zur Übersichtlichkeit lasse ich ein FileLog laufen, was die Summe aller PV-Leistungen beinhaltet und ebenfalls im Chart enthalen ist.
Erst jetzt kam mir die Idee, dass ich die Summe aller PV-Kurven, wenn selbige "stacked" übereinander, quasi "grafisch aufsummiert" dargestellt würden, es sogar cooler aussehen würde.

Beispiel aus der Google-Bildersuche verlinke ich:
https://static.anychart.com/images/gallery/v8/area-charts-stacked-area-chart.png

[mr_petz]

Ja, laut samples gibt es stacked in der 3.0.2:
https://www.chartjs.org/docs/3.0.2/samples/area/line-stacked.html

Wie und ob es geht weis ich leider auch nicht.

LG

[Dracolein]

Was muss ich denn (wo) dafür definieren?

type=stacked  oder vergleichbares funktioniert nicht.

[mr_petz]

Ok ich habs.
im <ftui-chart> einfach:
stacked-y
reinsetzen und schon geht es...

Es gibt auch noch:
stacked-x und
stacked-y1

LG

[Dracolein]

Hmm, das optische Ergebnis ergibt irgendwie keinen Sinn. Ich mache später mal Screenshots.

Die Linien sind weiterhin hintereinander, beginnen weiterhin alle auf der Nullinie der X-Achse und nichts wird grafisch aufeinander aufgestacked.
Mein Code enthält ausser bgcolor= und color= eigentlich keine relevanten Parameter.

edit:

Code Auswählen Erweitern


   <ftui-chart height="95px" width="100%" popup-target="pvleistung" x-min="7" x-max="20">

        <ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower5.String1_PAC" [update]="SMATripower5:String1_PAC:time"
             fill background-color="#fa58f450" color="#fa58f4" point-radius="0"></ftui-chart-data>

        <ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower5.String2_PAC" [update]="SMATripower5:String2_PAC:time"
             fill background-color="#1c86ee99" color="#1c86ee" point-radius="0"></ftui-chart-data>     
   
         <ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower6.SPOT_PACTOT" [update]="SMATripower6:SPOT_PACTOT:time"
             fill background-color="#ffcc0050" color="#ffcc00" point-radius="0"></ftui-chart-data>   
               
     </ftui-chart>


Geändert auf (Ausschnitt):

Code Auswählen Erweitern

   <ftui-chart stacked-y height="95px" width="100%" popup-target="pvleistung" x-min="7" x-max="20">