Quiq
view release on metacpan or search on metacpan
lib/Quiq/PlotlyJs/XY/DiagramGroup.pm view on Meta::CPAN
=item id="NAME-rN"
Id der Nten Rangeslider-Checkbox.
=item class="rangeslider"
Klasse aller Rangeslider.
=back
=cut
# -----------------------------------------------------------------------------
package Quiq::PlotlyJs::XY::DiagramGroup;
use base qw/Quiq::Hash/;
use v5.10;
use strict;
use warnings;
use utf8;
our $VERSION = '1.238';
use Quiq::Math;
use Quiq::Json::Code;
use Quiq::JavaScript;
use Quiq::Html::Table::Simple;
use Quiq::JQuery::Function;
use Quiq::Html::Widget::CheckBox;
use Quiq::Html::Widget::SelectMenu;
use Quiq::Html::Widget::Button;
# -----------------------------------------------------------------------------
=head1 METHODS
=head2 Konstruktor
=head3 new() - Instantiiere Objekt
=head4 Synopsis
$dgr = $class->new(@attVal);
=head4 Attributes
=over 4
=item debug => $bool (Default: 0)
Zeige über dem Diagramm die Formatierungsgrößen an, die bei
unterschiedlicher Höhe oder Fontgröße angepasst werden müssen.
=item diagrams => \@diagrams
Liste der Diagramm-Objekte. Die Diagramm-Objekte sind vom Typ
B<< Quiq::PlotlyJs::XY::Diagram >> und definieren die Metadaten
für die einzelnen Diagramme der Diagramm-Gruppe.
=item downloadPng => $bool (Default: 1)
Biete einen Button zum Herunterladen der Diagramm-Grafik an.
=item fillArea => $bool (Default: 1)
Biete eine Checkbox zum An- und Abschalten der Fill Area
unter der Kurve an.
=item fontSize => $n
Fontgröße der Achsenbeschriftungen. Aus dieser Größe wird die Größe
der sonstigen Fonts (Titel, Y-Titel) abgeleitet.
=item height => $n (Default: 300)
Höhe eines Diagramms in Pixeln.
=item name => $name (Default: 'dgr')
Name der Diagramm-Gruppe. Der Name wird als CSS-Id für den
äußeren div-Container der Diagramm-Gruppe und als Namespace
für die Funktionen genutzt.
=item scaleY => $bool (Default: 1)
Biete einen Button zur Y-Skalierung der Kurvendaten an.
=item shape => $shape (Default: scatter: 'Spline', scattergl: 'Linear')
Anfangsauswahl des Shape-Menüs auf allen Diagrammen. Der Default
hängt von Attribut type ab. Mögliche Werte: 'Spline', 'Linear', 'Marker'.
=item strict => $bool (Default: 1)
Melde Fehler mittels alert(), nicht nur via console.log().
=item type => 'scatter'|'scattergl' (Default: 'scatter')
Art des Diagramms. Bei 'scattergl' ist der Umgang mit größeren Datenmengen
performanter, insbesondere bei der Anzeige von Markert. Allerdings wird
die Kurvenform 'spline' nicht unterstützt und im Rangeslider
wird keine verkleinerte Form des Graphs angezeigt.
=item xAxisType => 'date'|'linear' (Default: 'date')
Art der X-Achse: date=Zeit, linear=numerisch
=item xTitle => $str
Text unterhalb der X-Achse.
=back
=head4 Returns
Objekt
=head4 Description
Instantiiere ein Objekt der Klasse und liefere eine Referenz auf
dieses Objekt zurück.
=cut
# -----------------------------------------------------------------------------
sub new {
my $class = shift;
# @_: @attVal
my $self = $class->SUPER::new(
debug => 0,
diagrams => [],
downloadPng => 1,
fillArea => 1,
fontSize => 11,
height => 300,
name => 'dgr',
scaleY => 1,
shape => undef,
strict => 1,
type => 'scatter',
width => undef,
xAxisType => 'date',
xAxisHoverFormat => '%Y-%m-%d %H:%M:%S', # Format der
# Spike-Beschriftung für die X-Koordinate. Siehe:
# https://github.com/d3/d3-3.x-api-reference/blob/master/\
# Time-Formatting.md#format
xTitle => undef,
);
$self->set(@_);
return $self;
}
# -----------------------------------------------------------------------------
=head2 Objektmethoden
=head3 html() - Generiere HTML
=head4 Synopsis
$html = $dgr->html($h);
=head4 Returns
HTML-Code (String)
=head4 Description
Liefere den HTML-Code der Diagramm-Gruppe.
B<Leere Diagrammgruppe>
Wenn die Liste der Parameter leer ist, liefert die Methode html()
einen Leerstring.
B<Leeres Diagramm>
Besitzt ein Parameter keine Daten (die Arrays x und y sind leer),
wird der Plot-Bereich des betreffenden Diagramms leer dargestellt.
Die Achsen werden gemäß xMin, xMax, yMin, yMax skaliert. Fehlen
auch diese Angaben, nimmt Plotly.js eine Default-Achsen-Skalierung
vor (Zeitbereich: C<2000-01-01 00:00:00> bis C<2001-01-01 00:00:00>,
Y-Wertebereich: C<-1> bis C<4>).
=cut
# -----------------------------------------------------------------------------
sub html {
my ($self,$h) = @_;
lib/Quiq/PlotlyJs/XY/DiagramGroup.pm view on Meta::CPAN
'mode': 'lines',
'line.shape': 'spline',
});
}
else if (shape == 'Linear') {
Plotly.restyle('$name-d$i',{
'mode': 'lines',
'line.shape': 'linear',
});
}
else if (shape == 'Marker') {
Plotly.restyle('$name-d$i',{
'mode': 'markers',
'marker.color': '$color',
});
}
else if (shape == '$zName') {
let z = $name.getZArray($i);
// console.log(z);
Plotly.restyle('$name-d$i',{
mode: 'markers',
marker: {
color: z,
size: 3,
symbol: 'circle',
},
});
}
~),
title => 'Connect data points with straight lines,'.
' splines or show markers',
).
(
!$self->fillArea? '':
' | FillArea:'.Quiq::Html::Widget::CheckBox->html(
$h,
id => "$name-f$i",
option => 1,
value => 1,
style => 'vertical-align: middle',
title => 'Toggle colored area above or below'.
' graph',
onClick => qq~
let fill = this.checked? 'tozeroy': 'none';
Plotly.restyle('$name-d$i',{
'fill': fill,
});
~,
)
).(
!$self->scaleY? '':
' | '.Quiq::Html::Widget::Button->html($h,
id => "$name-y$i",
content => 'Scale Y Axis',
onClick => sprintf("%s.rescaleY('%s',%s,%s)",
$name,"$name-d$i",$par->yMin,$par->yMax),
title => 'Rescale Y axis according to visible'.
' data or original state',
)
).(
!$self->downloadPng? '':
' | '.Quiq::Html::Widget::Button->html($h,
content => 'Download as PNG',
onClick => qq~
let plot = \$('#$name-d$i');
Plotly.downloadImage(plot[0],{
format: 'png',
width: plot.width(),
height: plot.height(),
filename: '$parameterName',
});
~,
title => 'Download plot graphic as PNG',
)
).
$h->tag('div',
id => "$name-c$i",
style => 'position: absolute; bottom: 7px; right: 10px',
''
).
($par->get('html') // ''), # optionaler HTML-Code
]]
]);
}
# -----------------------------------------------------------------------------
=head3 jsDiagram() - Generiere JavaScript für ein Diagramm
=head4 Synopsis
$js = $dgr->jsDiagram($j,$i,$par);
=head4 Arguments
=over 4
=item $j
JSON-Generator
=item $i
Nummer des Diagramms.
=item $par
Zeitreihen-Objekt.
=back
=head4 Returns
JavaScript-Code (String)
=head4 Description
Genererie den JavaScript-Code für ein Diagramm und liefere diesen zurück.
=cut
( run in 2.325 seconds using v1.01-cache-2.11-cpan-97f6503c9c8 )