The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
 / 
Quiq-1.191
River stage zero No dependents
3 ++
/ Quiq::PlotlyJs

NAME

Quiq::PlotlyJs - Basisfunktionalität/Notizen zu Plotly.js

BASE CLASS

Quiq::Object

DESCRIPTION

Diese Modul enthält Basisfunktionalität und Notizen zur JavaScript Plot-Bibliothek Plotly.js.

Verweise

Notizen

Umschaltung einzelne Marker-Farbe, Array von Markerfarben

Ist der Plot auf eine einzelne Markerfarbe eingestellt worden, kann nicht auf ein Array von Markerfarben umgeschaltet werden, ohne die gesamte Marker-Struktur zu setzen. Die Komponente color von einem String auf ein Array umzusetzen reicht nicht!

Falsch:

  'marker.color': [...],

Richtig:

  marker: {
      color: [...],
      ...
  },

Beliebige Hover-Texte definieren

Hover-Texte können ohne Events nicht dynamisch berechnet werden, da Plotly.js nur JSON-serialisierare Strukturkomponenten besitzt und keine Funktionsattribute vorgesehen sind. Das Trace-Attribut text: [...] kann aber genutzt werden, um jedem Wert ein individuelles Label zuzuweisen (Axis hover formatting).

Zeit-Werte

Zeit-Werte werden am besten als Strings der Form YYYY-MM-DD HH:MM:SS an Plotly.js übergeben. Nur dann ist gesichert, dass diese Zeit auch im Plot erscheint. Übergibt man die Zeit als Epoch-Wert (Millisekunden seit 01.01.1970) oder JavaScript Date-Objekt, wird diese von UTC in die Zeitzone des Browsers umgerechnet. Darauf kann laut der Plotly-Entwickler kein Einfluss genommen werden, da Plotly keine Zeitzonen kennt: Issue 1532.

Diagramm-Höhe

Die Diagramm-Höhe kann im div-Container, in der Layout-Konfiguration oder in beiden gesetzt werden. Die Auswirkungen:

  • Wird die Höhe nur beim div-Container gesetzt, füllt Plotly die Höhe immer ganz aus. Wird z.B. der Rangeslider entfernt, rendert Plotly das Diagramm neu, so dass es wieder die gesamte Höhe ausfüllt. D.h. der Plotbereich wird höher. Der Inhalt des Diagramms ist nicht statisch. Das wollen wir nicht.

  • Wird die Höhe nur in der Layout-Konfiguration gesetzt, hat der div-Container zunächst die Höhe 0, bis das Diagramm (typischerweise im ready-Handler) aufgebaut wird. Das wollen wir auch nicht.

  • Wird die Höhe im div-Container und in der Layout-Konfiguration gesetzt, ist der Bereich des Diagramms auf der Seite sofort sichtbar, der Inhalt kann aber aber statisch gehalten werden, indem beide Angaben gemeinsam geändert werden.

Unterer Rand

Im unteren Rand ist die Beschriftung der X-Achse und der Rangeslider angesiedelt. Die Beschriftung hat einen Platzbedarf von 55 Pixeln, die Dicke des Rangesliders ist auf 20% der Plothöhe eingestellt. Wir nutzen folgende Formel, um aus der Höhe des Diagramms die Höhe des unteren Rands zu berechnen:

  bottomMargin = (height - 300) / 50 * 10 + 110;

Das ergibt folgende Werte (height->marginBottom):

  250->100, 300->110, 350->120, 400->130, 450->140,...

Wenn wir den Rangeslider entfernen, reduzieren wir die Höhe des Diagramms und den unteren Rand um

  marginBottom - 55

Titel-Positionierung

Der Diagramm-Titel wird per Default leider ungünstig positioniert, daher positionieren wir ihn selbst. Damit der Titel oberhalb des Plot-Bereichs positioniert werden kann, muss im Layout container als Bezugsbereich vereinbart werden:

  title: {
      yref: 'container',
      yanchor => 'top',
      y => $y0,
  }

Hierbei ist $y0 ein Wert zwischen 0 und 1, der die vertikale Position innerhalb des Diagramms festlegt. 1 -> ganz oben unter dem Rand, 0 -> ganz unten unter (!) dem Rand.

Ändert sich die Höhe des Diagramms, muss der Wert y auf die neue Höhe y1 umgerechnet werden:

  y1 = 1 - (height0 * (1 - y0) / height1);

Raum unter der Achse einfärben

Ist beim Trace-Layout das Füllen unter der Achse angegeben mit

  fill: 'tozeroy',
  fillcolor: '#e0e0e0',

wird der Y-Wertebereich nach unten bis 0 ausgedehnt, wenn kein Y-Wertebereich explizit vorgegeben ist. Ist für die Y-Achse (im Diagramm-Layout!) explizit ein Wertebereich vorgegeben, z.B.

  range => [900,1000],

findet die Ausdehnung bis 0 nicht statt, der Raum unter der Kurve wird dennoch wie gewünscht gefüllt.

METHODS

Klassenmethoden

cdnUrl() - Liefere CDN URL

Synopsis

  $url = $this->cdnUrl;

Returns

URL (String)

Description

Liefere den CDN URL der neusten Version von Plotly.js.

Example

  $url = Quiq::PlotlyJs->cdnUrl;
  ==>
  https://cdn.plot.ly/plotly-latest.min.js

VERSION

1.191

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2020 Frank Seitz

LICENSE

This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.