Neues Widget für Sparklines

[wvhn]

Moin zusammen,

im develop branch auf github ist das Widget plot.sparklines. Sparklines sind einfache Trendlinien, die man z.B. in Tabellen integrieren kann.
grafik.png
Das Widget ist eine abgespeckte Variante von plot.period und verwendet dessen javaScript-Teil. Es kann nur eine Kurve darstellen und dazu die Daten aus aus der Datenbank oder aus einem item vom Typ List beziehen. Höhe und Breite können eingestellt werden.

Die Idee kommt aus einem sehr alten github issue. Ich habe sie einfach mal umgesetzt, weil der Aufwand überschaubar war. Ideen für eine sinnvolle Anwendung sowie Testerfahrungen und Erweiterungswünsche nehme ich hier gerne entgegen.

Gruß
Wolfram

[manhartm]

Hallo Wolfram,

sehr gute Idee. Habe ich gleich für meine Energie-Seite benutzt:

pv1.jpg

Aktuell skaliert die vertikale Achse automatisch gemäss dem sichtbaren Wertebereich. In meinem Beispiel wäre es aber hilfreich, wenn ich den maximalen vertikalen Wert fix vorgehen könnte, so dass die Kurven untereinander vergleichbar werden. Wäre also hilfreich, wenn es für Ymin und Ymax eine Möglichkeit analog plot.period geben könnte.

Gruss

Matthias

[wvhn]

manhartm Moin Mathias,

kannst Du die hier abgelegte Datei mal testen? ymin und ymax sind dort nachgerüstet, in der gleichen Reihenfolge wie bei plot.period.
Die Datei musst Du anstelle der vorhandenen plot.html in den Ordner ./widgets kopieren.

Nutzung:

plot.sparkline(id, item, mode, tmin, tmax, ymin, ymax, count, width, height, exposure, unit, source)

Gruß
Wolfram

[manhartm]

Wunderbar. Sieht für mich nun sehr gut aus: links die alte Version ohne Ymax, rechts die neue Version für alle Plots mit gleichem Ymax.

e0.jpg

[wvhn]

Danke fürs Testen. Die Änderung ist jetzt im develop branch.

Gruß
Wolfram

[Sipple]

Moin

Die Sparklines gefallen mir sehr gut und ich habe sie jetzt mit 3.4 mal an manchen Stellen eingebaut.
Was so richtig klasse wäre: Wenn man bei einem Klick oder Touch auf eine Sparkline eine große plot.period Darstellung wie mit supersize bekommen könnte.
Aktuell kann man z.B. mit der Maus einzelne Punkte der Kurve abfahren und den jeweiligen Wert sehen. Das ist mir aber zu filigran.
Bekommt man das bereits mit Bordmitteln hin (lib.supersize oder popup o.ä.), oder müsste dafür das plot.sparkline Widget selbst geändert werden?

[wvhn]

Moin Martin,

man kann das Widget in einen anchor-tag setzen und auf ein Popup verlinken. Hier mal ein proof-of-concept auf Basis der Doku-Seite, das man natürlich noch beliebig aufhübschen und mit supersize versehen kann.

 <table>
    <tr style="height: 25px;">
        <td style="width: 140px; text-align: left;">PV actual Power</td>
        <td style="width: 100px;">27.3 kWh</td>
        <td><a href="#plot1" data-rel="popup" style="text-decoration:none; stroke:none;">{{ plot.sparkline('', 'bath_plot_value', 'avg', '3h', 'now', '','',10) }}</a><td>
    </tr>
    <tr style="height: 25px;">
        <td style="width: 140px; text-align: left;">actual Consumption</td>
        <td style="width: 100px;">23.5 kWh</td>
        <td><a href="#plot2" data-rel="popup" style="text-decoration:none; stroke:none;">{{ plot.sparkline('', 'bath_plot_value2', 'avg', '3h', 'now', '','', 10) }}</a><td>
    </td>
</table>

<div id="plot1" data-role="popup">
    {{ plot.period('', 'bath_plot_value', 'avg', '3h', 'now', '','',10) }}
</div>

<div id="plot2" data-role="popup">
    {{ plot.period('', 'bath_plot_value2', 'avg', '3h', 'now', '','',10) }}
</div>

sparklinepopup.gif

Gruß
Wolfram

[Sipple]

Wunderbar, genau so habe ich mir das vorgestellt.

Zwei Kleinigkeiten:
In den Sparklines selbst wird der Wert immer als Item1 angezeigt. Kann man das über irgendwelche Highchart Options (Parameter source im Widget) oder sogar noch einfacher setzen?

Die Größe des popups läßt sich ja einstellen, allerdings ignoriert der Plot auch hier wieder die Höhe. Breite wird sauber skaliert. Das ist ein altes Problem, das es seit Einführung der Plots gibt. Die Höhe ist wie festgenagelt. Nur beim supersize klappt das.
Gibt es da inzwischen eine Lösung, dass sich der Plot auch an die zur Verfügung stehende Höhe anpasst? Das hatte ich vor Jahren schon mal wegen Plots in standard Blocks gefragt, aber damals gab es da keine Lösung.

[wvhn]

Die Sparklines sind eine abgespeckte Variante von plot.period. Es unterscheidet sich nur der html-Teil des widgets, in dem lediglich die plot options für eine minimalistische Darstellung gesetzt werden. Eigentlich ist schon der Cursor mit der Wertanzeige zu viel, aber den habe ich nicht extra entfernen wollen.

Grundsätzlich kann man das gleiche Ergebnis mit plot.period erzielen, wenn man die plot options aus dem html Code kopiert und als Parameter bei plot.period angibt. Dann kann man auch wieder den item-Namen am Cursor darstellen. Da das Handhaben der Optionen immer eine knifflige Sache ist und man ziemlich viel mit Klammern zählen beschäftigt ist, hatte ich das als sparklines vereinfacht und bewusst auf einige Parameter verzichtet.

Die Höhe des Plots bestimmt die Klasse "plot". Die kann man in der visu.css beeinflussen. Beispiel für das erste Popup:

#plot1 div.plot {
    height: 400 px;
}

Gruß
Wolfram

[wvhn]

Im develop branch ist jetzt eine Version mit den zusätzlichen Optionen "href" und "rel". Wie z.B. bei basic.print kann man damit Links und Popups öffnen. Das ersetzt den in #7 genannten Code.
Außerdem wird der Parameter "id" zusätzlich als Label / Kurvenname im Tooltip angezeigt. Ist der Parameter leer, wird im Tooltip kein Name angezeigt, also auch nicht mehr "item1", was eh überflüssig ist wenn man nur eine Kurve darstellen kann.

Gruß
Wolfram