[Featurewunsch] plot.period: export = 3 (viewFullscreen) // yAxis Einheiten

[ares72]

Auf meinem Smartphone sind die Charts recht klein, daher wollte ich diese mit menuItems "viewFullscreen" im Vollbild mit chartoptions anzeigen.

Da das nicht klappen wollte habe ich widgets\plot.js um den Parameter 3 ergänzt:

exporting: {
    buttons: {
        contextButton: {
            //menuItems: (this.options.exportmenu == 2 ? ['downloadPNG', 'downloadPDF', 'downloadCSV', 'downloadXLS'] : ['downloadPNG', 'downloadPDF']) // TODO: add 'viewFullscreen' when styling is improved
            menuItems: (this.options.exportmenu == 3 ? ['viewFullscreen'] :this.options.exportmenu == 2 ? ['downloadPNG', 'downloadPDF', 'downloadCSV', 'downloadXLS'] : ['downloadPNG', 'downloadPDF'])
        }
    }
},

Das Ergebnis nur am PC nicht prickelnd, unter Android (und nur da nutzt es meine Frau) im Querformat aber perfekt.
Das ist für den Anfang schon mal besser als nichts, da das TODO eventuell etwas mehr Aufwand bedeutet.

Was mir aber weiterhin nicht klappt ist die Möglichkeit, Einheiten auf der yAxis anzuzeigen.
Hier mein Plot, vielleicht sieht da ja jemand sofort meinen Fehler?

<style>
    .plot {
        height: 300px;
    }
</style>

{{ plot.period( '',
    ['plot.ISGweb_2.0_03', 'plot.ISGweb_1.0_11', 'plot.ISGweb_1.0_12', 'plot.ISGweb_2.0_05', 'plot.ISGweb_1.0_07', 'plot.ISGweb_1.0_10'],
    'raw',
    '1d',
    'now',
    ['', 0],
    ['', 4],
    '',
    ['Heizen', 'Ist-Heizen', 'Soll-Heizen', 'Heizen-WW', 'WW', 'Außen'],
    ['#f004', 'red', '#f90', '#00fa', 'blue', '#af2'],
    ['areastair', 'line', 'line', 'areastair', 'line', 'line'],
    ['', '°C', '0/1'],
    '1h',
    [2, 1, 1, 2, 1, 1],
    [0, 1],
    ['#ffffff00', '#ffffff00'],
    '',
    '°C',
    { yAxis: [ {labels: {align: 'left', x: 3, y: -2},
                         endOnTick: true,
                         startOnTick: true
               }
             ],
      xAxis: {crosshair: true},
      chart: {marginTop: 30,
              marginLeft: 0,
              marginRight: 0},
      legend: {y: -17 },
      lang: {viewFullscreen: 'Vollbild (Handy drehen!)',
             exitFullscreen: 'Vollbild verlassen'}
      },
      '',
      '',
      3)
}}

[wvhn]

Die Fullscreen-Ansicht war beim Testen auf dem PC so grottenschlecht (wie Du ja auch schreibst), dass ich das Feature wieder rausgeschmissen habe. Probier doch mal, ob Du mit dem Supersize-Widget in v3.2.x auf dem Smartphone nicht mindestens ebenso gute Ergebnisse erzielst. Das skaliert auf Knopfdruck den umgebenden Block auf Bildschirmgröße und vergrößert den Plot entsprechend. In der Doku ist das in der Rubrik Design -> Blocks beschrieben.

Einheiten an den Achsen habe ich bisher auch noch nicht gesehen. Lediglich der Tooltip zeigt Werte mit den festgelegten Einheiten an. Das wäre ein Thema für das nächste Release.
Laut dieser jsFiddle müsste es gehen, wenn Du bei den Chartoptions für z.B. die Einheit °C folgendes angibst:

 yAxis: [{ labels: {format: '{value}°C'} }]

bzw. die Klammer mit dem format-Ausdruck in Deine Optionen integrierst. Wenn das nicht auf Anhieb geht, muss ggfls. noch ein Modul geladen werden. Die Fiddle verwendet das Modul series-label.js. Das ist jetzt aber nur angelesen und nicht selbst getestet.

Gruß
Wolfram

[ares72]

Hallo Wolfram,

das Supersize-Widget hatte ich in der Doku irgendwie komplett übersehen. Entweder war ich komplett blind oder habe den schwarzen(!) Pfeil im Design Darkblue auch nur übersehen, weil im Design Darkblue ansonsten alles in weiß/blau gehalten ist. Eventuell fehlt da noch der Style in darkblue.css?

Das löst aber bei mir zumindest am Smartphone den Vollbildmodus nicht komplett ab. Dort wird zumindest mit meiner Auflösung ohnehin die volle Breite genutzt (siehe Screenshot oben) und da bringt das Supersize-Widget weder im Hoch- noch im Querformat etwas. Die Höhe passt sich nicht automatisch an und die Anzeige muss manuell nach oben/unten verschoben werden damit das in der Höhe angepasste Widget komplett angezeigt wird. NUR im Querformat am Smartphone funktioniert der Vollbildmodus aber wirklich perfekt, da dort das Chart perfekt passt und im Vollbildmodus ohne Android-Titelleiste (Batterie, WLAN, Uhr, ...) angezeigt wird. Mir stellt sich auch noch die Frage, warum das am Smartphone nur im Querformat funktioniert.

Bei der Achsenbeschriftung lag wieder einmal zwischen meinen Ohren, das funktioniert natürlich wie von Dir beschrieben.
Ich hatte format und formatter getestet und bin fast verzweifelt... letztendlich bin ich aber nur über meine fehlerhafte Einrückung gestolpert:

{ yAxis: [ {labels: {align: 'left', x: 3, y: -2},
                     endOnTick: true,
                     startOnTick: true,
                     format: '{value}°C'
           }
         ],

So hätte es natürlich funtkioniert:

:
{ yAxis: [ {labels: {align: 'left', x: 3, y: -2,
                     format: '{value}°C'
                    },
            endOnTick: true,
            startOnTick: true
           }
         ],

[wvhn]

Das Design darkblue ist tatsächlich das einzige, das keine hellen Überschriftenfelder hat. Da muss ich mir etwas einfallen lassen. Mittels CSS geht das leider nicht so einfach, weil das schwarze Icon direkt als Bildquelle geladen wird.

Gruß
Wolfram

[ares72]

Bei mir hat folgende Änderung in lib.html funktioniert:
alt:

<img class="supersize" src="icons/sw/control_centr_arrow_up_right.svg" ...

neu:

<img class="supersize" src="{{ icon0 }}control_centr_arrow_up_right.svg" ...

Danke auch für den Support im fhem-Forum. ;-)
Manfred