smartVISU 2.9 - plot.gauge

[Sisamiwe]

Hallo,
ich bin auf smartVISU 2.9 umgestiegen (von 2.8) und übersetzt nun meine Seiten und füge auch die neuen Features ein.
Bei der Verwendung von plot.gauge in einer Tabelle wird ober- und unterhalb viel Platz gelassen.
Soll das so bzw. kann man das einstellen?

Die Anwendung ist:

            <tr>
                <td align=left>
                    Disk total: {{ basic.print('', 'ssh.nsa325.disk.total', 'float', 'VAR / (1024*1024)') }} GB<br/>
                    Disk used: {{ basic.print('', 'ssh.nsa325.disk.used', 'float', 'VAR / (1024*1024)') }} GB<br/>
                    Disk unused: {{ basic.print('', 'ssh.nsa325.disk.unused', 'float', 'VAR / (1024*1024)') }} GB<br/>
                    Disk usage: {{ basic.print('', 'ssh.nsa325.disk.percent', '%') }}<br>
                </td>
                <td>
                    {{ plot.gauge('', 'ssh.nsa325.disk.used', 0, 2750000000, 'MB', 'Disk', 'solid-half', [30,50,70,90], ['#0DE0EC','#55BF3B','#DDDF0D','#DF5353']) }}
                </td>
            </tr>

Aussehen tut das so:
Unbenannt.JPG

Danke für die Rückmeldung
Michael

[Sisamiwe]

...kann hier keiner unterstützen?

[psilo]

schau halt mal das css an..
zudem kann man menschen die einem job nachgehen auch bis zum wochenende geben
es gibt hier weder SLAs noch geld fuer ,-)

achja und wenn man den develop nutzt sollte man sich auch selber helfen können

[bmx]

Es fehlt die obere Definition der Tabelle. Kannst Du den Code noch nachreichen bitte?

Ach ja, zur Herangehensweise:

1. Firefox starten
2. Webentwickler -> Inspektor
3. Elemente untersuchen und schauen, welches Element das ganze aufbläst
4. angepasstes CSS erstellen und ggf. oberhalb oder im Header einbinden

[psilo]

da gebe ich bmx recht. der fehler liegt eindeutig NICHT am Gauge Widget sondern an dem, was vor Deinem TR kommt.. könnte man übrigens auch ganz toll und einfach testen, in dem man mal nur das Widget irgendwo reinpackt bevor man Hilfe schreit ;-P Ganz ehrlich: wenn solche HTML Strukturen schon Probleme machen würde ich mich nicht auf dem Develop bewegen...

Hier noch der Beweis:

ggg.PNG

Das Macro ist auch nur ein ganz banales DIV:

{% macro gauge(id, item, min, max, unit, label, mode, stop, color) %}

    <div id="{{ uid(page, id) }}" data-widget="plot.gauge" data-mode="{{ mode|default('solid-half') }}" data-item="{{ implode(item) }}"
        data-label="{{ label }}" data-stop="{{ implode(stop) }}" data-color="{{ implode(color) }}" data-min="{{ min|default(0) }}" data-max="{{ max|default(255) }}" data-unit="{{ unit }}"  data-axis="{{ lang('plot.gauge', unit) }}"
        class="gauge"></div>

{% endmacro %}

[smai]

Dein Gauges lassen sich leider nicht so richtig gut skalieren.
Der Container muss eine festgelegte Höhe haben, sonst setzt Highcharts fix 400px.

Du musst deinem zweiten TD also eine fixe Höhe von ca. 200px geben.

Ich schaue noch, ob ich das irgendwie responsive hinkriege. Erste Versuche waren aber nicht sehr erfolgsversprechend.

[smai]

Die dynamische Höhe gibt es erst ab Highcharts 5.0.8. Ich werde die Version wohl updaten und hoffen, dass sonst alles noch funktioniert.

In Version 5 bin ich auf ein weiteres neues Feature namens styled mode getroffen. Damit lassen sich die Charts per CSS stylen und nicht wie bisher per JavaScript. Dadurch würden die .js-Files pro Design überflüssig. Ich werde mir das mal anschauen.

Als Übergangslösung obigen geschriebenes:
Fixe Höhe für den Container setzen, indem man dem Widget eine ID übergibt und darauf per CSS die Höhe definiert.

[Sisamiwe]

bmx smai

Danke für die Rückmeldung. Hier der gesamte Code des Blocks inkl. Tabelle:

<div class="block">
    <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
        <div data-role="collapsible" data-collapsed="false">
            <h3>NAS Zyxel NSA325v1</h3>
            <table width=100%>
            <tr>
                <td colspan="2", align=left>
                <b>Control</b>
                </td>
            </tr>

            <tr>
                <td width=50%, align=left>
                    {{ basic.symbol('', 'ssh.nsa325.online', 'online', 'control_home.svg', 0, '', 'icon0') }}
                    {{ basic.symbol('', 'ssh.nsa325.online', 'online', 'control_clear.svg', 1, '', 'icon1') }}<br>
                </td>
                <td align=left>
                    <span data-role="controlgroup" data-type="horizontal"> 
                    {{ basic.stateswitch('', 'wol.nsa325', 'mini', 1, 'none', 'WOL', 'icon0') }}
                    {{ basic.stateswitch('', 'ssh.nsa325.reboot', 'mini', 1, 'none', 'RBT', 'icon0') }}
                    {{ basic.stateswitch('', 'ssh.nsa325.poweroff', 'mini', 1, 'none', 'P/O', 'icon0') }}
                    </span>
                </td>
            </tr>

            <tr>
                <td align=left, colspan="2">
                <hr>
                </td>
            </tr>
                <tr>
                <td align=left>
                    Model: {{ basic.print('', 'ssh.nsa325.model') }}<br>
                    Temp: {{ basic.print('', 'ssh.nsa325.temp.num', '°') }}<br>
                    Cooler RPM: {{ basic.print('', 'ssh.nsa325.cooler.rpm') }}<br>                        
                </td>
                </tr>

            <tr>
                <td align=left, colspan="2">
                <hr>
                </td>
            </tr>

            <tr>
                <td colspan="2", align=left>
                    <b>Load</b>
                </td>
            </tr>

            <tr>
                <td align=left>
                    CPU Usage: {{ basic.print('', 'ssh.nsa325.cpu_usage' , '%') }}<br>
                    Uptime: {{ basic.print('', 'ssh.nsa325.uptime.up_pretty') }}<br>
                    Idle-time: {{ basic.print('', 'ssh.nsa325.uptime.idle_pretty') }}<br>
                </td>
                <td align=left>
                    Load Avg (1min): {{ basic.print('', 'ssh.nsa325.loadavg.avg1min.percent', '%') }}<br>
                    Load Avg (5min): {{ basic.print('', 'ssh.nsa325.loadavg.avg5min.percent', '%') }}<br>
                    Load Avg (15min): {{ basic.print('', 'ssh.nsa325.loadavg.avg15min.percent', '%') }}
                </td>
            </tr>    

            <tr>
                <td align=left, colspan="2">
                <hr>
                </td>
            </tr>

            <tr>
                <td colspan="2", align=left>
                <b>Memory</b>
                </td>
            </tr>

            <tr>
                <td align=left>
                    Mem total: {{ basic.print('', 'ssh.nsa325.mem.total', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem used: {{ basic.print('', 'ssh.nsa325.mem.used', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem free: {{ basic.print('', 'ssh.nsa325.mem.free', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem buffers: {{ basic.print('', 'ssh.nsa325.mem.buffers', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem shared: {{ basic.print('', 'ssh.nsa325.mem.shared', 'float', 'VAR / (1024)') }} mb<br/>
                </td>
                <td>
                    {{ plot.gauge('', 'ssh.nsa325.mem.used', 0, 500000, 'MB', 'Memory', 'solid-half', [30,50,70,90], ['#0DE0EC','#55BF3B','#DDDF0D','#DF5353']) }}
                </td>
            </tr>

            <tr>
                <td align=left, colspan="2">
                <hr>
                </td>
            </tr>

            <tr>
                <td align=left>
                    <b>Swap</b><br/>
                    Swap total: {{ basic.print('', 'ssh.nsa325.swap.total', 'float', 'VAR / (1024)') }} mb<br/>
                    Swap used: {{ basic.print('', 'ssh.nsa325.swap.used', 'float', 'VAR / (1024)') }} mb<br/>
                    Swap free: {{ basic.print('', 'ssh.nsa325.swap.free', 'float', 'VAR / (1024)') }} mb<br/>                        
                </td>
                <td align=left>
                    <b>Traffic</b><br/>
                    RXbytes: {{ basic.print('', 'ssh.nsa325.interface.RXbytes', 'float', 'VAR / (1024*1024)') }} mb<br/>
                    TXbytes: {{ basic.print('', 'ssh.nsa325.interface.TXbytes', 'float', 'VAR / (1024*1024)') }} mb<br/>
                    <br/>
                </td>
            </tr>

            <tr>
                <td align=left, colspan="2">
                <hr>
                </td>
            </tr>

            <tr>
                <td colspan="2", align=left>
                <b>Disk</b>
                </td>
            </tr>

            <tr>
                <td colspan="2", align=left>
                    Disk total: {{ basic.print('', 'ssh.nsa325.disk.total', 'float', 'VAR / (1024*1024)') }} GB<br/>
                    Disk used: {{ basic.print('', 'ssh.nsa325.disk.used', 'float', 'VAR / (1024*1024)') }} GB<br/>
                    Disk unused: {{ basic.print('', 'ssh.nsa325.disk.unused', 'float', 'VAR / (1024*1024)') }} GB<br/>
                    Disk usage: {{ basic.print('', 'ssh.nsa325.disk.percent', '%') }}<br>
                </td>
            </tr>    

            <tr>
                <td colspan="2">
                    {{ plot.gauge('', 'ssh.nsa325.disk.used', 0, 2750000000, 'MB', 'Disk', 'solid-half', [30,50,70,90], ['#0DE0EC','#55BF3B','#DDDF0D','#DF5353']) }}
                </td>
            </tr>
            </table>
        </div>
    </div>
</div>

1.JPG2.JPG


Dem <td> die Höhe mitzugeben, führt zu keiner Änderung. Wenn ich den Inspector richtig verstehe, wird die Standard-Höhe von highcharts von 400px verwendet.

Auch bei der Verwendung ohne Tabelle passt was nicht. Hier steht der Beschriftung außerhalb des Blocks.
3.JPG

<div class="block">
    <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
        <div data-role="collapsible" data-collapsed="false" >
            <h3>Verlauf</h3>
            Disk total: {{ basic.print('', 'ssh.nsa325.disk.total', 'float', 'VAR / (1024*1024)') }} GB<br/>
            Disk used: {{ basic.print('', 'ssh.nsa325.disk.used', 'float', 'VAR / (1024*1024)') }} GB<br/>
            Disk unused: {{ basic.print('', 'ssh.nsa325.disk.unused', 'float', 'VAR / (1024*1024)') }} GB<br/>
            Disk usage: {{ basic.print('', 'ssh.nsa325.disk.percent', '%') }}<br>
            {{ plot.gauge('', 'ssh.nsa325.disk.used', 0, 2750000000, 'MB', 'Disk', 'solid-half', [30,50,70,90], ['#0DE0EC','#55BF3B','#DDDF0D','#DF5353']) }}
        </div>
    </div>
</div>

Habt ihr noch einen Tip?
Danke Euch.

[smai]

Der Container des Plots ist leider nicht das td, sondern das div des Widgets. Deshalb musst du wie oben geschrieben dem Widget eine ID übergeben und darauf per CSS die Höhe definieren.
Ich bin mit Highcharts 5 im styled mode gut voran gekommen und zuversichtlich für eine baldige Umstellung.

[Sisamiwe]

smai
Danke für die schnelle Rückmeldung.

Ich habe die id vergeben und in der visu.css die Höhe definiert

Auszug aus der Seite mit <div id="gauge1"> (sonst keine Änderung)

            <tr>
                <td align=left>
                    Mem total: {{ basic.print('', 'ssh.nsa325.mem.total', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem used: {{ basic.print('', 'ssh.nsa325.mem.used', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem free: {{ basic.print('', 'ssh.nsa325.mem.free', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem buffers: {{ basic.print('', 'ssh.nsa325.mem.buffers', 'float', 'VAR / (1024)') }} mb<br/>
                    Mem shared: {{ basic.print('', 'ssh.nsa325.mem.shared', 'float', 'VAR / (1024)') }} mb<br/>
                </td>
                <td>
                <div id="gauge1">
                    {{ plot.gauge('', 'ssh.nsa325.mem.used', 0, 500000, 'MB', 'Memory', 'solid-half', [30,50,70,90], ['#0DE0EC','#55BF3B','#DDDF0D','#DF5353']) }}
                </div>
                </td>
            </tr>

Auszug aus visu.css

/* highcharts */
.gauge1 { 
    height: 200px; 
}

Im Inspector sieht man, dass die id mit gauge1 verwendet wird, aber es zeigt sich keine Änderung.
Mhhh.

[smai]

Um in CSS ein Element per ID anzusteuern, musst du #gauge1 schreiben. .gauge1 wäre für ejne Class.

[Sisamiwe]

kaum macht man es richtig, tut sich auch was. Dankeschön
Aber nur die Hälfte, leider.

Über diesen css kann man den Raum unterhalb des plots "schneiden".
4.JPG
Aber nicht den oberen Freiraum.
Hast Du noch eine Idee?

[smai]

Warte doch einfach auf das Highcharts Update. Ehrlich gesagt möchte ich meine Zeit lieber da rein investieren als für dir alte Version noch eine Lösung zu suchen.
Immerhin verwendest du die develop Version, da darfst du eh nicht damit rechnen, dass irgend etwas funktioniert.

[Sisamiwe]

smai
Danke für die Mühe, dass passt schon. Ich warte auf das Update und werde dann wieder testen.

[smai]

So, ich habe soeben das Update auf Highcharts 5.0.14 mit Migration zum styled mode committed.
Es gab einiges umzubauen, dafür entfällt nun das JavaScript je Design und es ist einfacher, wenn man etwas umgestalten will.

Bitte testen.