Styling von plot.period mit columnstacked (z.B. Border weg)

[aldaris]

Hallo, ich versuche mich an einem Plot. Technisch geht es, aber man erkennt noch nicht genug.
Ist Stand:

{{ plot.period('item.PV', ['item.PV', 'item.Netzbezug', 'item.Akkuentladen', 'item.Netzeinspeisung', 'item.Auto', 'item.Akkuladen'], 'raw', '1m', 'now', '', '', '', ['PV', 'Netzbezug', 'Akkuentladen', 'Netzeinspeisung', 'Auto', 'Akkuladen'], ['#F79A1F', '#FF0000', '#FFFF00', '#00AA00', '#CCCCCC', '#00FFFF'], ['columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack'], '', '','','','','','', { column: { pointPadding: 0.00, borderWidth: 0 }},'',['0', '0', '0', '1', '1', '1']) }}

image.png

Ich versuche entsprechend mit den ChartOptions die Border (als ersten Schritt zu entfernen). Leider mache ich was falsch, meine Änderung hat keinen Einfluß (weder größere noch kleinere Border). Laut Fiddle müsste das eigentlich gehen?
https://jsfiddle.net/o2vdrpny/

Dann mir jemand helfen?

Gruß
aldaris

[wvhn]

Moin aldaris,

hier gibt es zwei Probleme:

• Die chartOptions werden in Highcharts auf der Ebene „chart“ mit den Optionen verschmolzen. Es fehlt in Deinem Code deshalb noch das Attribut „plotOptions“ vor bzw. um „column “ herum.
• smartVISU verwendet Highcharts im „styled mode“. Da greifen einige Optionen nicht und man muss diese mit CSS realisieren. Das geht in der visu.css, aber ich kann Dir nicht auswendig sagen, welche Klassen dort benötigt werden.

https://api.highcharts.com/highchart...mn.borderWidth

Gruß
Wolfram

[wvhn]

Okay - so geht es:

• in der Highcharts-Doku steht, man solle die Regel ".highcharts-point" verwenden. Da wir das nur auf die Säulendiagramme anwenden wollen, nehmen wir ".highcharts-column-series .highcharts-point"
• nehmen wir an, der Seitenname ist "technik.html". Dann wird aus der von Dir vergebenen id für das Widget der Selektor "#technik-item_PV" (der Punkt wird durch einen Unterstrich ersetzt, weil das sonst mit den Klassen kollidiert).

In der visu.css wird für die Kombination aus id und Klassen die Regel festgelegt:

#technik-item_PV .highcharts-column-series .highcharts-point {
    stroke-width: 0;
}​

Das lässt die Ränder der Säulen verschwinden.

Gruß
Wolfram

[aldaris]

Hi, danke für den Tipp.

Leider sind meine HTML Kenntnisse nicht sehr gut. Ich würde die Einstellung gerne "lokal" für das plot machen, am besten auf smarthomeNG sv_widget. Da muss ich nochmal weiter probieren. Manuell hab ich den Parameter aber gefunden.

Dann noch etwas am den plotOptions geschraubt und schon geht es viel besser:

{{ plot.period('item.PV', ['item.PV', 'item.Netzbezug', 'item.Akkuentladen', 'item.Netzeinspeisung', 'item.Auto', 'item.Akkuladen'], 'raw', '1m', 'now', '', '', '', ['PV', 'Netzbezug', 'Akkuentladen', 'Netzeinspeisung', 'Auto', 'Akkuladen'], ['#F79A1F', '#FF0000', '#FFFF00', '#00AA00', '#CCCCCC', '#00FFFF'], ['columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack'], '', '','','','','','', { plotOptions: { column: { pointPadding: 0.0, groupPadding: -0.2 } } },'',['0', '0', '0', '1', '1', '1']) }}

image.png

[aldaris]

Leider musste ich feststellen, dass das überhaupt nicht funktioniert auf dem Handy. Das Responsive Design scheint mir hier schlecht beeinflußt zu sein.
Also mal wieder weg vom probieren hin zum verstehen. Ich habe das mal in einer jsFiddle probiert. Die Daten sind nicht korrekt, aber den effekt sollte man sehen.
https://jsfiddle.net/1o3a7upr/1/

Die Abstände passen, auch bei Veränderungen der Breite. Ich habe auch den StyledMode benutzt.
Leider kriege ich das in keiner Art in smartVISU / smarthomeNG rein.

Kann mir jemand helfen, das zu übertragen?

[wvhn]

Dann hast Du auf dem Handy wahrscheinlich den Browser-Cache bzw. die Website-Daten für die smartVISU-IP nicht gelöscht.
Bei mir zeigt das iPhone den Plot korrekt an.

Wenn Du in der fiddle im CSS-Teil die o.g. CSS-Regel einfügst, siehst Du den Effekt. Der Unterschied ist hier nur, dass die Umrandungen in der fiddle schwarz sind.

.highcharts-column-series .highcharts-point {stroke-width: 0;}

Gruß
Wolfram

EDIT: zum Test kannst Du die Umrandungen weiß machen. Dann zeigt die fiddle ein der Visu sehr ähnliches Ergebnis:

.highcharts-column-series path.highcharts-point {stroke: #FFFFFF;}

Beachte den "path"-Selektor vor highcharts-point.

[aldaris]

Hi, also das mit der Border klappt. Aber die Column Breite ist total kaputt.
Screenshot_20241112_155444_Samsung Internet.jpg

Hier in dem Screenshot ist jetzt die Border nur bei dem weißen. Die anderen haben eine denselben klasse zusätzlich.

Die Bars sind ja als svg gerendert, das kann ja nicht nachträglich durch Stalingrad "verbreitert" werden. Die schmalen Bars sind in svg nur ein Pixel.

Hilft evtl. der generierte HTML Code von smartvisu?

[aldaris]

Ok, ich habe das Problem weiter eingrenzen können. Erstnochmal das akutekke Item:

{{ plot.period('item.PV', ['item.PV', 'item.Netzbezug', 'item.Akkuentladen', 'item.Netzeinspeisung', 'item.Auto', 'item.Akkuladen', 'item.Verbrauch'], 'raw', '1m', 'now', '', '', '', ['PV', 'Netzbezug', 'Akkuentladen', 'Netzeinspeisung', 'Auto', 'Akkuladen', 'Verbrauch'], ['#F79A1F', '#FF0000', '#FFFF00', '#00AA00', '#CCCCCC', '#00FFFF', '#222222'], ['columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack'], '', '','','','','','',{plotOptions:{series:{stacking:normal,pointPadding:0, groupPadding:0}}},'',['0', '0', '0', '1', '1', '1', '1']) }}

Sowohl auf dem Handy als auch auf dem Desktop ist das Problem "Zoomabhängig" (Browerzoom).

120%: Alles gut
grafik.png
170%: Alles gut
grafik.png
Erst wenn mal "rauszoomt" wird es falscher (Die Balken rücken auseinander)
110%:
grafik.png

Bei 100% ist dann alles kaput:
grafik.png

Interessant ist, dass sich der Tooltip verändert, bei 110% und 100%. Irgendetwas schaltet also um. Keiner eine Idee?

[wvhn]

Highcharts fasst die Daten selbständig anhand verschiedener Kriterien wie z.B. Bildschirmauflösung zusammen. Das ist sinnvoll für eine übersichtliche Darstellung, aber man kann das mit der Option "dataGrouping" abschalten.

Ich empfehle stattdessen, die Menge der Daten zu begrenzen und vor allem die Zeitstempel der Messwerte synchron zu halten. Mit der Breite der Balken orientiert sich Highcharts am kürzesten in den Daten vorkommenden Intervall. Die Darstellung schmaler Balken wird begünstigt, wenn Du "raw" als Datenbank-Modus verwendest, denn dann werden alle Daten für den angegebenen Zeitraum aus der Datenbank gezogen und an Highcharts übergeben. Wählst Du als Datenbankmodus "avg" oder "max", dann kannst Du über den Parameter "count" die Anzahl der dargestellten Messwerte vorgeben und Intervalle sinnvoll zusammenfassen.

Wenn Du das im Widgetassitenten ausprobierst, kannst Du live mit echten Daten an der Parametrierung spielen. Du musst dann nur den Seitennamen in der visu.css von "technik" (aus dem Beispiel oben) in "assistant" ändern, oder zum Testen den Selektor für die ID (beginnend mit "#") ganz weglassen.

Zudem haben wir immer noch das Problem im database-Plugin von shNG, dass Werte künstlich generiert werden, die die Abstände beeinflussen. Abhilfe: siehe hier.

Gruß
Wolfram

[aldaris]

Kapiert. Ich sehe jetzt für mich zwei Wege: Die Zeitwerte der Items zu synchronisieren (wie in dem Thread nebenan) oder die Werte direkt in ein List Item im Cache (ohne Datenbank) zu legen. Wäre sogar besser, aber mehr Arbeit. Ich prüfe. Um was zurückzugeben kann ich am WE evtl. den precision PR anlegen.

[Cannon]

{{ plot.period('item.PV', ['item.PV', 'item.Netzbezug', 'item.Akkuentladen', 'item.Netzeinspeisung', 'item.Auto', 'item.Akkuladen'], 'raw', '1m', 'now', '', '', '', ['PV', 'Netzbezug', 'Akkuentladen', 'Netzeinspeisung', 'Auto', 'Akkuladen'], ['#F79A1F', '#FF0000', '#FFFF00', '#00AA00', '#CCCCCC', '#00FFFF'], ['columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack'], '', '','','','','','', { plotOptions: { column: { pointPadding: 0.0, groupPadding: -0.2 } } },'',['0', '0', '0', '1', '1', '1']) }}

Das sieht sehr gut aus. Mit den weißen Rändern sieht es nicht wirklich toll aus. Was ich aber nicht verstanden habe, wie man das global im gesamten Design ändert. Also wie und in welchem CSS?

[wvhn]

Das ist in #3 eigentlich ziemlich genau erklärt. Wenn Du eine CSS-Regel nicht auf eine Seite beschränken willst, lässt Du den Selektor für die ID einfach weg.

[aldaris]

Ok, ich habe es umgebaut auf in Memory, sehe aber leider gar nichts:
image.png
Das Item sieht jetzt so aus:

Test2:
    visu_acl: rw
    sv_widget: "{{ plot.period('item.PV', ['paradigma.TestPV', 'paradigma.TestNetzbezug', 'paradigma.TestAkkuentladen', 'paradigma.TestNetzeinspeisung', 'paradigma.TestAuto', 'paradigma.TestAkkuladen', 'paradigma.TestVerbrauch'], 'raw', '1m', 'now', '', '', '', ['PV', 'Netzbezug', 'Akkuentladen', 'Netzeinspeisung', 'Auto', 'Akkuladen', 'Verbrauch'], ['#F79A1F', '#FF0000', '#FFFF00', '#00AA00', '#CCCCCC', '#00FFFF', '#222222'], ['columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack', 'columnstack' ], '', '','','','','','','','',['0', '0', '0', '1', '1', '1', '1'],2,'item') }}"
TestPV:
    type: list
TestNetzbezug:
    type: list
TestAkkuentladen:
    type: list
TestNetzeinspeisung:
    type: list
TestAuto:
    type: list
TestAkkuladen:
    type: list
TestVerbrauch:
    type: list

Die Listen werden per Logik erzeugt. Ich lade mal das "Export" Ergebnis dazu. (CSV)
Ich hätte gesagt, so ist richtig?
image.png

[[1731495600000.0, 13.5], [1731409200000.0, 14.599999999999909], [1731322800000.0, 10.0], [1731236400000.0, 4.900000000000091], [1731150000000.0, 7.7999999999999545], [1731063600000.0, 5.099999999999909], [1730977200000.0, 5.0], [1730890800000.0, 6.900000000000091], [1730804400000.0, 29.299999999999955], [1730718000000.0, 28.5], [1730631600000.0, 26.09999999999991], [1730545200000.0, 8.400000000000091], [1730458800000.0, 8.5], [1730372400000.0, 26.299999999999955], [1730286000000.0, 9.600000000000136], [1730199600000.0, 21.0], [1730113200000.0, 24.299999999999955], [1730026800000.0, 12.799999999999955], [1729940400000.0, 32.700000000000045], [1729854000000.0, 28.0], [1729767600000.0, 36.899999999999864], [1729681200000.0, 37.5], [1729594800000.0, 36.600000000000136], [1729508400000.0, 8.899999999999864], [1729422000000.0, 26.300000000000182], [1729335600000.0, 19.399999999999864], [1729249200000.0, 17.0], [1729162800000.0, 26.90000000000009], [1729076400000.0, 24.09999999999991], [1728990000000.0, 28.600000000000136], [1728903600000.0, 0.0], [1728817200000.0, 0.0], [1728730800000.0, 0.0], [1728644400000.0, 0.0], [1728558000000.0, 0.0], [1728471600000.0, 0.0], [1728385200000.0, 0.0], [1728298800000.0, 0.0], [1728212400000.0, 0.0], [1728126000000.0, 0.0]]

Was mache ich jetzt noch falsch?

[wvhn]

Der Widget-Code ist hinten abgeschnitten. Kannst Du den bitte vollständig kopieren und auch gleich die Einrückungen in Ordnung bringen?

Das geht mit diesem Button vor dem Einfügen:
grafik.png

Gruß
Wolfram

[wvhn]

Ich sehe gerade noch, dass die Daten in zeitlich absteigender Reihenfolge in der Liste stehen. Highcharts braucht die Daten in aufsteigender Reihenfolge.