[FTUI 3] Charts

[OdfFhem]

Eine weitere Variante mit der farbigen Nur-Punkt-Darstellung einer Datenreihe ... s. Screenshot

[Det20]

Sieht gut aus. Hast du was zum testen?

[OdfFhem]

Für die testweise Umsetzung wären folgende Anpassungen notwendig:

*** chart-data.component.js (gemäß dem gestrigen GitHub-Stand hinter Zeile #57 einfügen)

Code Auswählen Erweitern


      borderMultiColor: false,


*** chart.component.js (gemäß dem gestrigen GitHub-Stand hinter Zeile #350 einfügen)

Code Auswählen Erweitern


      if ((property === 'borderColor') && dataElement['borderMultiColor']) {
        let gradient;
        function getGradient(ctx, chartArea) {
          if (gradient === undefined) {
            gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
            gradient.addColorStop(0, 'rgba(0, 0, 255, 1)');
            gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)');
            gradient.addColorStop(1, 'rgba(255, 0, 0, 1)');
          }
          return gradient;
        }
        dataset[property] = function(context) {
          const chart = context.chart;
          const {ctx, chartArea} = chart;
          if (!chartArea) { return null; }
          return getGradient(ctx, chartArea);
        }
      }


Beispiele für Nutzung der Anpassungen:

Code Auswählen Erweitern


*** Liniendarstellung
<ftui-chart title="Power" unit="24h">
  <ftui-chart-data log="FileLog_ftuitest" spec="4:MQTT2_zigbee3_innrPlug3.statUserRead_energyConsHourLast"
                            type="line" border-width="5" border-multi-color>
  </ftui-chart-data>
</ftui-chart>

*** Punktdarstellung
<ftui-chart title="Power" unit="24h">
  <ftui-chart-data log="FileLog_ftuitest" spec="4:MQTT2_zigbee3_innrPlug3.statUserRead_energyConsHourLast"
                            type="scatter" border-width="5" border-multi-color>
  </ftui-chart-data>
</ftui-chart>

Das Attribut border-multi-color steuert, ob die (bislang fix) implementierte Sonderfärbung genutzt werden soll oder nicht.

[mr_petz]

@setstate und/oder @OdfFhem

Könnte man in der aktuellen Version dem fill das mitgeben Bsp.:

Code Auswählen Erweitern


fill: {value: 0.5,below: 'rgba(0, 0, 255, 0.2)'},

sieht dann so aus wie auf dem Bild.
Ich habe mal die neuste Version geladen:
https://cdn.jsdelivr.net/npm/chart.js
und temporär Eingebunden zum testen.

Wenn ich im chart.component das mitgebe:

Code Auswählen Erweitern


dataElement.fill={'value':0.5};

funzt es nicht.
Oder geht es auch anders?

LG

[OdfFhem]

@mr_petz

fill wird als true/false-Variable genutzt ... fill muss da sein oder nicht, der eigentliche Wert hat so gut wie keine Bedeutung - Ausnahme z.B. "false".

Im Grunde könnte man das JSON-Konstrukt auch via speziellem fillJson-Attribut transportieren und bei Bedarf konvertieren.

Code Auswählen Erweitern


fill-json='{"value": 16,"above": "rgba(255, 0, 0, 1)","below": "rgba(0, 0, 255, 1)"}'


Heraus kommt letztlich dann eine Darstellung wie im angehängten Screenshot ...

[mr_petz]

Danke dir. Woher kommt das Attribute

Code Auswählen Erweitern


fill-json

?
LG

[OdfFhem]

Neues, frei erfundenes, zusätzliches Attribut in chart-data.component.js ...

[mr_petz]

Dann macht das lineargradient mit nur 2 Farben und dem fill einen besseren Eindruck.
Jetzt könnte man noch das backgroundcolor und das color als array übergeben (geht im original) und man hat dann im Wechsel die Farben. Besonders wenn man nur 2 Zustände loggt...
Ist aber alles nur so ein Gedanke.
LG

[OdfFhem]

Ist aber alles nur so ein Gedanke.

Im Grunde kann man noch ein wenig "weiterspinnen" und öffnet mit einem allgemeinen json-Attribut den Zugang zu noch mehr Möglichkeiten ...

***

Noch ein (ganz) anderes Thema:
Du hast jetzt mit der aktuellen Version getestet; verglichen mit der von FTUI3 verteilten Version, wurde u.a. die options-Welt großzügig umgestaltet.
Gab es neben dem Austausch noch Anpassungsbedarf ?

[mr_petz]

Du sagst also meine Gedanken sind gespinnste...
Spass

Ich habe nicht alle Definition und Options der neuen Version durchprobiert.
Ich habe es auch nicht direkt ins Modul eingebunden.
War ein trockentest mit eigenen tags und script in ftui3. Mich hat nur der donat und pie interessiert. Ist aber für mich nicht brauchbar und braucht man im allgemeinen eigentlich nicht. Line, bar scatter sind denke ich am optimalsten für die meisten.
LG

[Det20]

Ok, jetzt verstehe ich nur noch Bahnhof

[mr_petz]

@Det20

Wir philosophieren nur ein wenig was man noch integrieren könnte...

[OdfFhem]

Du sagst also meine Gedanken sind gespinnste...

Man soll ja immer die Wahrheit sagen ... ääh ... denken

***

Ich verwende auch gerne mal "polarArea" bzw. "radar" ... finde ich relativ informativ/ansehnlich ... s. angehängte Screenshots.

***

Bzgl. eines allgemeinen json-Attributs habe ich etwas rumexperimentiert mit z.B.:

Code Auswählen Erweitern


xyz-json='{
                  "backgroundColor":"rgba(99, 255, 132, 0.2)",
                  "borderColor":"rgb(99, 255, 132)",
                  "fill":true,
                  "label":"X",
                  "pointBackgroundColor":"rgb(99, 255, 132)",
                  "pointBorderColor":"#fff",
                  "pointHoverBackgroundColor":"#fff",
                  "pointHoverBorderColor":"rgb(99, 255, 132)"
                 }'

Eigene Attribute braucht man dann nur noch, wenn man Pipes, o.ä. nutzen möchte ...

[mr_petz]

Ja hatte ich mir auch angesehen...
aber nein. Da fehlt mir die Inspiration...
Das json finde ich gut. Muss man nur richtig definieren und wissen was man da reinschreibt.

[mr_petz]

https://forum.fhem.de/index.php/topic,115259.msg1144582.html#msg1144582
Hier habe ich auch noch was zum hinzufügen.
Einfach in der chart-data.component.js hinter yAxisID: 'y', bei static get properties() das:

Code Auswählen Erweitern


pointStyle: 'circle',

einfügen und man kann die Points anpassen. Mögliche Varianten:
https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles
https://www.chartjs.org/docs/3.0.2/configuration/elements.html#point-styles
Das könnte setstate mit übernehmen.

LG

Edit: Link geändert