perl Dash Download - perl Dash Quellcode Download

NAME

Dash - Analytische Web -Apps in Perl (Port of Plotlys Dash nach Perl)

VERSION

Version 0.11

ZUSAMMENFASSUNG

 use Dash;
use aliased ' Dash::Html::Components ' => ' html ' ;
use aliased ' Dash::Core::Components ' => ' dcc ' ;
use aliased ' Dash::Dependencies ' => ' deps ' ;

my $external_stylesheets = [ ' https://codepen.io/chriddyp/pen/bWLwgP.css ' ];

my $app = Dash -> new(
    app_name             => ' Basic Callbacks ' ,
    external_stylesheets => $external_stylesheets
);

$app -> layout(
    html -> Div([
        dcc -> Input( id => ' my-id ' , value => ' initial value ' , type => ' text ' ),
        html -> Div( id => ' my-div ' )
    ])
);

$app -> callback(
    deps -> Output( ' my-div ' , ' children ' ),
    [deps -> Input( ' my-id ' , ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

$app -> run_server();

use Dash;
use aliased ' Dash::Html::Components ' => ' html ' ;
use aliased ' Dash::Core::Components ' => ' dcc ' ;

my $external_stylesheets = [ ' https://codepen.io/chriddyp/pen/bWLwgP.css ' ];

my $app = Dash -> new(
    app_name             => ' Random chart ' ,
    external_stylesheets => $external_stylesheets
);

my $initial_number_of_values = 20;
$app -> layout(
    html -> Div( children => [
        dcc -> Input( id => ' my-id ' , value => $initial_number_of_values , type => ' number ' ),
        dcc -> Graph( id => ' my-graph ' )
    ])
);

my $serie = [ map { rand (100) } 1 .. $initial_number_of_values ];
$app -> callback(
    Output => { component_id => ' my-graph ' , component_property => ' figure ' },
    Inputs => [{ component_id => ' my-id ' , component_property => ' value ' }],
    callback => sub {
        my $number_of_elements = shift ;
        my $size_of_serie = scalar @$serie ;
        if ( $number_of_elements >= $size_of_serie ) {
            push @$serie , map { rand (100) } $size_of_serie .. $number_of_elements ;
        } else {
            @$serie = @$serie [0 .. $number_of_elements ];
        }
        return { data => [ {
            type => " scatter " ,
            y => $serie
            }]};
    }
);

$app -> run_server();

BESCHREIBUNG

Dieses Paket ist ein Port von Plotlys Dash nach Perl.

Dash das Erstellen analytischer Webanwendungen sehr einfach. Kein JavaScript erforderlich.

Dies ist eine großartige Möglichkeit, Ihrer Datenanalyse -Anwendung eine nette interaktive Weboberfläche zu setzen, ohne eine JavaScript -Schnittstelle erstellen zu müssen und Server oder Web -Frameworks einrichten zu müssen. Der typische Anwendungsfall besteht darin, dass Sie nur neue Daten zu Ihrem ML/AI -Modell haben und verschiedene Trainingsmöglichkeiten untersuchen oder einfach die Ergebnisse verschiedener Parameterkonfigurationen visualisieren möchten.

Grundlagen

Die Hauptteile einer Dash -App sind:

Layout
Deklarativer Teil der App, in dem Sie die Ansicht angeben. Dieses Layout besteht aus Komponenten, die in einer Hierarchie angeordnet sind, genau wie HTML. Diese Komponenten sind als Komponentensuiten erhältlich (zum Beispiel: Dash :: HTML :: Komponenten, Dash :: Core :: Komponenten, ...) und sie können einfache HTML -Elemente sein (zum Beispiel Dash :: Html :: Komponenten :: H1) oder so komplex wie Sie möchten. Meistens verwenden Sie die bereits erstellten und verwenden Sie die DASH -Komponenten.
Rückrufe
Dies ist der Perl -Code, der ausgeführt wird, wenn einige Komponenten ändert und das Ergebnis dieser Ausführung eine andere Komponente (oder Komponenten) aktualisiert wird. Jeder Rückruf deklariert eine Reihe von Eingängen, eine Reihe von Ausgängen und optional eine Reihe von "Status" -Anpuls. Alle Eingänge, Ausgänge und "Status" Eingänge werden als Rückrufabhängigkeiten bezeichnet. Jede Abhängigkeit bezieht sich auf eine Eigenschaft einer Komponente, sodass die Eingänge bestimmen, dass eine Eigenschaft einer als Eingabe in einem Rückruf deklarierten Eigenschaft diesen Rückruf auslöst und die vom Rückruf zurückgegebene Ausgabe die als Ausgabe deklarierte Eigenschaft der Komponente aktualisiert.

Um eine Dash -App zu erstellen, müssen Sie nur das Layout und die Rückrufe einrichten. Das Basis -Skelett wird sein:

 my $app = Dash -> new( app_name => ' My Perl Dash App ' ); 
$app -> layout(...);
$app -> callback(...);
$app -> run_server();

In der Synopse können Sie einen Vorgeschmack darauf erhalten, wie dies funktioniert

Layout

Das Layout ist der deklarative Teil der App und das DOM unserer App. Das Wurzelelement kann eine beliebige Komponente sein, und nachdem das Wurzelelement fertig ist, handelt es sich bei dem Rest "Kinder" dieser Wurzelkomponente, das ist der Wert der Kindereigenschaft der übergeordneten Komponente und Kinder können eine "Sache" (Text, Komponente, was auch immer in JSON konvertiert werden kann) oder ein Arrayref der "Dinge". Die Komponenten können also so viel komponiert werden, wie Sie möchten. Zum Beispiel:

 $app -> layout(html -> Div( children => [
        html -> H1( children => ' Making Perl Dash Apps ' ),
        html -> Img( src => ' https://raw.githubusercontent.com/kraih/perl-raptor/master/example.png ' )
    ]));

Komponenten

Dieses Paket versendet die folgenden Komponenten -Suiten und ist bereit zu verwenden:

Dash Kernkomponenten als Dash :: Core :: Komponenten. Hauptkomponenten für interaktive analytische Web -Apps: Formulare und Diagramme
Dash HTML -Komponenten als Dash :: HTML :: Komponenten. Grundsätzlich die HTML -Elemente.
Dash dataTable als Dash :: Tabelle

Der Plan besteht darin, die Pakete auch für Dash-Bio, Dash-DAQ, Dash-Canvas und Dash-Cytoscape zu erstellen.

Verwenden der Komponenten

Jede Komponente hat eine eigene Klasse. Zum Beispiel hat Dash-HTML-Komponenten Div die Klasse: Dash :: html :: components :: div und Sie können sie den Perl Standard Way verwenden:

 use Dash::Html::Components::Div;
...
$app -> layout(Dash::Html::Components::Div -> new( id => ' my-div ' , children => ' This is a simple div ' ));

Aber mit jeder Komponentensuite könnte viele Komponenten sein. Um die Aufgabe des Imports zu erleichtern (eins nach dem anderen ist ein bisschen langweilig), könnten wir zwei Möglichkeiten nutzen:

Fabrikmethoden

Jede Komponentensuite verfügt über eine Werksmethode für jede Komponente. Und die Verwendung dieser Werksmethoden ist das Schlüsselwort für Kinder von Kindern optional, solange die Kinder das erste Element sind. Zum Beispiel hat Dash :: html :: components die Werksmethode Div zum Laden und Erstellen eines Dash :: html :: components :: Div -Komponente:

 use Dash::Html::Components;
...
$app -> layout(Dash::Html::Components -> Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(Dash::Html::Components -> Div( ' This is a simple div ' , id => ' my-div ' );

Aber diese Fabrikmethoden sollen aliased sein, sodass dies weniger ausführlich wird:

 use aliased ' Dash::Html::Components ' => ' html ' ;
...
$app -> layout(html -> Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(html -> Div( ' This is a simple div ' , id => ' my-div ' ));

Funktionen

Viele Module verwenden den Exporteur und die Freunde, um die Typisierung zu reduzieren. Wenn Ihnen diese Weise gefällt, erhält jede Komponentensuite ein Funktionspaket, um all diese Funktionen in Ihren Namespace zu importieren. Die Verwendung dieser Funktionen ermöglicht es auch, das Schlüsselwort für Kinder zu verbinden, wenn die Kinder das erste Element sind.

Zum Beispiel für Dash :: HTML :: Komponenten gibt es ein Paket Dash :: HTML :: Komponentenfunktionen mit einer Fabrikfunktion zum Laden und Erstellen der Komponente mit demselben Namen:

 use Dash::Html::ComponentsFunctions;
...
$app -> layout(Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(Div( ' This is a simple div ' , id => ' my-div ' ));

Rückrufe

Rückrufe sind der reaktive Teil der Web -App. Sie hören Änderungen der Eigenschaften von Komponenten an und werden von diesen Änderungen abgefeuert. Die Ausgabe der Rückrufe kann Eigenschaften für andere Komponenten (oder verschiedene Eigenschaften für dieselben Komponenten) aktualisieren und möglicherweise andere Rückrufe abfeuern. Ihre App "reagiert" auf Änderungen. Diese Eigenschaften, die Feuerwehr ändert, und die Eigenschaften, die aktualisiert werden, sind Abhängigkeiten des Rückrufs. Sie sind die "Links" zwischen Komponenten und Rückrufe.

Jede Komponente, von der erwartet wird, dass sie einen Rückruf abfeuert, muss eine eindeutige ID -Eigenschaft haben.

Um einen Rückruf zu definieren, ist zumindest erforderlich:

Eingänge
Die Komponenteneigenschaft (oder Komponenteneigenschaften), die den Rückruf bei jeder Änderung abfeuern. Die Werte dieser Eigenschaften sind Eingaben für die Rückrufe
Ausgabe
Die Komponente (oder Komponenten), deren Eigenschaft (oder Eigenschaften) aktualisiert wird
Rückruf
Der Code, der ausgeführt wird

Ein minimaler Rückruf ist:

 $app -> callback(
    Output => { component_id => ' my-div ' , component_property => ' children ' },
    Inputs => [{ component_id => ' my-id ' , component_property => ' value ' }],
    callback => sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

Abhängigkeiten

Abhängigkeiten "Link" Komponenten und Rückrufe. Jede Rückrufabhängigkeit hat die folgenden Attribute:

component_id
Wert der ID -Eigenschaft für die Komponente
component_property
Name der Eigenschaft

Eingänge

Ein Rückruf kann einen oder mehrere Eingänge haben und für jede für einen Rückruf deklarierte Eingabe ist der Wert der Eigenschaft ein Parameter für den Rückruf in derselben Reihenfolge wie die Eingabeabhängigkeiten.

Ausgänge

Ein Rückruf kann eine oder mehrere Ausgangsabhängigkeiten haben. Wenn nur eine Ausgabe vorliegt, wird der Wert, der vom Rückruf zurückgegeben wird, den Wert der Eigenschaft der Komponente aktualisiert. Im zweiten Fall muss die Ausgabe des Rückrufs eine Liste in der zurückgegebenen Liste sein.

Zustand

Abgesehen von Eingaben könnte ein Rückruf den Wert anderer Eigenschaften anderer Komponenten benötigen, ohne den Rückruf zu entlassen. Staatliche Abhängigkeiten sind für diesen Fall. Für jede staatliche Abhängigkeit, die für einen Rückruf deklariert ist, ist das Wert -Betriebssystem die Eigenschaft ein Parameter für den Rückruf in derselben Reihenfolge, die die Zustandsabhängigkeiten jedoch deklariert werden, jedoch nach allen Eingaben.

Abhängigkeiten mit Objekten

Abhängigkeiten können nur mit einer Hash -Referenz deklariert werden, aber die bevorzugte Art und Weise, die Klassen und Fabrikmethoden und Funktionen wie bei den Komponenten zu verwenden.

Verwenden von Objekten:

 use Dash::Dependencies::Input;
use Dash::Dependencies::Output;
...
$app -> callback(
    Output => Dash::Dependencies::Output -> new( component_id => ' my-div ' , component_property => ' children ' ),
    Inputs => [Dash::Dependencies::Input -> new( component_id => ' my-id ' , component_property => ' value ' )],
    callback => sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

Durch die Verwendung von Objekten können die Keyword -Argumente in der Rückrufmethode weglassen:

 use Dash::Dependencies::Input;
use Dash::Dependencies::Output;
...
$app -> callback(
    Dash::Dependencies::Output -> new( component_id => ' my-div ' , component_property => ' children ' ),
    [Dash::Dependencies::Input -> new( component_id => ' my-id ' , component_property => ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

Es gibt auch Fabrikmethoden, um diese Abhängigkeiten zu verwenden, mit denen die Keyword -Argumente für die Abhängigkeiten weggelassen werden können:

 use Dash::Dependencies;
...
$app -> callback(
    Dash::Dependencies -> Output( ' my-div ' , ' children ' ),
    [Dash::Dependencies -> Input( component_id => ' my-id ' , component_property => ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

Dies kann aliasisiert werden

 use aliased ' Dash::Dependencies ' => ' deps ' ;
...
$app -> callback(
    deps -> Output( component_id => ' my-div ' , component_property => ' children ' ),
    [deps -> Input( ' my-id ' , ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

Aber wenn Sie es vorziehen, nur Funktionen in Ihrem Namespace zu verwenden:

 use Dash::DependenciesFunctions;
...
$app -> callback(
    Output( ' my-div ' , ' children ' ),
    [Input( component_id => ' my-id ' , component_property => ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

Auslauf -App

Der letzte Schritt ist die Ausführung der App. Rufen Sie einfach an:

 $app->run_server();

Und es startet einen Server auf Port 8080 und öffnet einen Browser, um mit Ihrer App zu beginnen!

Neue Komponenten machen

Es gibt viele Komponenten ... für Python. Wenn Sie also einen Beitrag leisten wollen, hilft ich gerne.

In der Zwischenzeit können Sie Ihre eigene Komponente erstellen. Ich werde eine bessere Anleitung und einen automatisierten Bauunternehmer erstellen, aber im Moment sollten Sie https://github.com/plotly/dash-component-boilerplate für den gesamten JavaScript-Teil (es reagieren basiert) verwenden und danach ist der Perl-Teil sehr einfach (die Komponenten sind meistens JavaScript oder Typenkript):

Für jede Komponente muss eine Perl -Klasse sein, die von Dash :: Basecomponent erbt, wobei die Hash -Dereferencing %{} mit den Requisiten, die die React -Komponente hat, überlastet (Überprüfen Sie das DASH :: Basicomponent to_json -Methode) und mit diesen Methoden:
- Dashnamespace
  Namespace der Komponente
- _js_dist
  JavaScript -Abhängigkeiten für die Komponente
- _css_dist
  CSS -Abhängigkeiten für die Komponente

Optional verfügt die Komponenten -Suite über das Funktionspaket und die Werksmethoden, um die Verwendung zu erleichtern.

Dann müssen Sie nur die Komponentensuite als Perl -Paket veröffentlichen. Für neue Komponenten -Suites können Sie den von Ihnen gefallenen Paketnamen verwenden. Wenn Sie jedoch den DASH :: Namespace verwenden möchten, verwenden Sie bitte Dash :: Komponenten ::, um zukünftige Kollisionen mit weiterer Entwicklung zu vermeiden. Außerdem erleichtert dies mehr Komponenten.

Wie bereits erwähnt, werde ich einen automatisierten Baumeister machen, aber Beiträge sind mehr als willkommen !! In der Zwischenzeit überprüfen Sie bitte den Beitrag.md

Es ist etwas schwierig, eine Komponente für Dash, die nicht reagbasiert ist, ein bisschen schwierig. Bitte erhalten Sie zuerst den JavaScript -Teil React -basiert. Danach ist es einfach, es in Perl, R oder Python zu integrieren.

STATUS

In diesem Moment ist diese Bibliothek experimentell und immer noch unter aktiver Entwicklung und die API wird sich ändern!

Das ultimative Ziel ist natürlich, alles zu unterstützen, was die Python- und R -Versionen unterstützen.

Die Verwendung folgt der Python -Version von Dash, so nah wie möglich, sodass das Python -Dokument mit geringfügigen Änderungen verwendet werden kann:

Verwendung von -> (Pfeilbetreiber) anstelle von.
Hauptpaket und Klasse für Apps ist Dash
Komponentsuiten verwenden Perl -Paketkonvent
Anstelle von Dekoratoren werden wir einfache alte Rückrufe verwenden
Der Rückrufkontext ist als letzter Parameter des Rückrufs verfügbar, jedoch ohne den Antwortteil
Anstelle von Flask werden wir Mojolicious verwenden (vielleicht in der zukünftigen Dancer2)

In der Synopse können Sie einen Vorgeschmack darauf erhalten, wie dies funktioniert, und auch im Beispiel -Ordner der Verteilung oder direkt im Repository. Das vollständige Dash -Tutorial wird in diesem Beispiel -Ordner auf Perl portiert.

Fehlende Teile

Im Moment fehlen viele Teile:

Präfix -Mount
Debug -Modus und heißes Nachladen
Dash -Konfiguration (unterstützende Umgebungsvariablen)
Rückrufabhängigkeitsprüfung
Clientside -Funktionen
Unterstützung für Komponenteneigenschaften Daten-* und Aria-*
Dynamische Layoutgenerierung

Und noch viel mehr, aber Sie könnten es jetzt nutzen, um großartige Apps zu machen! (Wenn Sie Inspiration benötigen ... überprüfen Sie einfach https://dashgallery.plotly.host/portal/)

Sicherheit

WARNUNG : Dieses Modul wird nicht auf Sicherheit getestet. Testen Sie sich daher selbst, wenn Sie den App -Server auf einem öffentlichen Server ausführen möchten.

HAFTUNGSAUSSCHLUSS

Dies ist ein inoffizielles Plot -Perl -Modul. Derzeit bin ich in keiner Weise mit Plotly verbunden. Aber ich denke, Dash ist eine großartige Bibliothek und ich möchte sie mit Perl verwenden.

Wenn Sie DASH mögen