Diagramm: X-Achsen-Beschriftung nicht sichtbar - bei relativer Größe

[alexbeer]

Hallo,
ich bin gerade dabei meine Visu unter Version 11.2 neu aufzubauen.
Ziel ist es, für unterschiedliche Clients nur eine Config zu haben - also komplett responsive.
In Summe bin ich auch recht zufrieden.

Diagramme habe ich wie folgt eingebunden - ich habe die Größe des Diagramms also nicht in px - sondern über das Layout mit colspan = "6" definiert.

<diagram series="week" title="Zählerstand" legend="inline" legendposition="nw" period="2" previewlabels="true" timeformat="%d.%m - %H:%M" timeformatTooltip="%H:%M" tooltip="true" popup="true">
<layout colspan="6" colspan-m="6" colspan-s="12" rowspan="6"/>
<axis label="Verbrauch" position="left" unit="Wh" decimals="0"/>
<influx field="*" consolidationFunction="MEAN" measurement="timeseries_db/TS00036" style="lines" fill="false" steps="false" fillMissing="none" color="red" resolution="60"/>
</diagram>

Ergebnis: - die X-Achse ist quasi nicht sichtbar.
Diagramm_relativeGröße.png
Am unteren Rand ist noch etwas von der Beschriftung der x-Achse erkennbar.


In der CSS-Klasse "actor clickable" habe ich zwecks Test die Höhe auf 95% gesetzt - dann sind einzeilige X-Achsen wieder richtig sichtbar. Mehrzeilige noch nicht.
Diagramm_css_clickable_actor.png

Ich habe das Gefühl, dass in einem der übergeordneten DIV-Container die 100%-Höhe ohne die x-Achse definiert ist.
Ist das ein Bug?

VG Alex

[peuter]

Ein Bug ist das tatsächlich. Das Problem liegt wohl darin dass der Titel des Diagrams irgendwie die Höhenbereichnung durcheinander bringt. Als Workaround kann ich Dir momentan nur anbieten, den Titel als extra Text-Widget über das Diagram zu setzen. Dann hast Du zwar etwas Abstand zwischen Diagram und Titel, aber die X-Achsenbeschriftung sollte dann wieder zu sehen sein.

[peuter]

Bzw. nach weiterer Nachforschung für einen Fix wäre die korrekte Herangehensweise diese hier:

<diagram series="week" legend="inline" legendposition="nw" period="2" previewlabels="true" timeformat="%d.%m - %H:%M" timeformatTooltip="%H:%M" tooltip="true" popup="true">
   <layout colspan="6" colspan-m="6" colspan-s="12" rowspan="6"/>
   <label>Zählerstand</label>
   <axis label="Verbrauch" position="left" unit="Wh" decimals="0"/>
   <influx field="*" consolidationFunction="MEAN" measurement="timeseries_db/TS00036" style="lines" fill="false" steps="false" fillMissing="none" color="red" resolution="60"/>
</diagram>

Dann wäre das Label korrekterweise links neben dem Diagram (wie bei anderen Widgets auch).

Und sobald https://github.com/CometVisu/CometVisu/pull/986 gemerged wurde wird das auch beim Title funktionieren.

[alexbeer]

Hi,
oh cool.
Mit einem so schnellen fix habe ich nicht gerechnet! Vielen Dank! Persönlich lege ich keinen Wert auf pixelgenaue Darstellung. Unterschiedliche Abstände sind mir daher nicht so wichtig.
Der Workaround ist daher vollkommen ok!
Ich habe aktuell kein development Version - nur die 11.2 (Docker) im Einsatz.
Ich muss mir da erstmal wieder eine development Version auf meinem TWS aufsetzen.
Dann probiere ich das aus.
Viele Grüße Alex

[alexbeer]

Hi, habe das jetzt mal gerade getestet.
Ganz passt es noch nicht.

Auf großen Displays (colspan = 6) wird die X-Achse nun dargestellt,
kann man hier die räumliche Aufteilung von label und diagramm noch beeinflussen, so dass der whitespace für die Diagrammfläche genutzt wird?


Diagramm_label_colspan6.png

Verkleinere ich das Browser-Fenster, so dass die Defintion für kleine Screens (hier colspan-s = 12) greift, dann ist die X-Achse nicht mehr vollständig sichtbar:
Diagramm_label_colspan12.png

[peuter]

Um beide Probleme zu lösen. bleibt eigentlich nur die Möglichkeit aus meinem ersten Workaround: Das Label komplett aus dem Diagram-Widget entfernen und als extra Text Widget drüber schreiben. Dann kannst Du beides individuell per <layout> steuern und es kommt sich gegenseitig nicht in die Quere bei kleinen Bildschirmen.