perl Dash
1.0.0
DASH -PERLの分析Webアプリ（Portly's Dash to Perl）
バージョン0.11
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();このパッケージは、PerlへのPlotlyのダッシュのポートです。
Dashは、構築分析Webアプリケーションを非常に簡単にします。 JavaScriptは必要ありません。
JavaScriptインターフェイスを作成し、サーバーやWebフレームワークをセットアップすることなく、データ分析アプリケーションに素敵なインタラクティブなWebインターフェイスを配置するのに最適な方法です。典型的なユースケースは、ML/AIモデルに新しいデータがあるだけで、さまざまなトレーニング方法を調査するか、異なるパラメーター構成の結果を視覚化することです。
ダッシュアプリの主な部分は次のとおりです。
レイアウト
ビューを指定するアプリの宣言的部分。このレイアウトは、HTMLと同様に、階層に配置されたコンポーネントで構成されています。このコンポーネントは、コンポーネントスイート（例：Dash :: HTML :: Components、Dash :: Core :: Components、...など）として利用できます。たとえば、Dash :: HTML :: Components :: H1などです。ほとんどの場合、既に構築され、使用可能なダッシュコンポーネントを使用します。
コールバック
これは、一部のコンポーネントが変更されたときに実行されるPERLコードであり、この実行の結果、別のコンポーネント（またはコンポーネント）が更新されます。すべてのコールバックは、入力のセット、出力のセット、およびオプションで「状態」入力のセットを宣言します。すべての入力、出力、および「状態」入力は、コールバック依存関係として知られています。すべての依存関係は一部のコンポーネントの一部のプロパティに関連しているため、入力は、コールバックで入力として宣言されたコンポーネントのプロパティがそのコールバックをトリガーし、コールバックによって返される出力が出力として宣言されたコンポーネントのプロパティを更新すると判断します。
したがって、ダッシュアプリを作成するには、レイアウトとコールバックをセットアップするだけです。基本的なスケルトンは次のとおりです。
my $app = Dash -> new( app_name => ' My Perl Dash App ' );
$app -> layout(...);
$app -> callback(...);
$app -> run_server();概要では、これがどのように機能するかを味わうことができます。
レイアウトは、アプリの宣言的な部分とアプリのDOMです。ルート要素は任意のコンポーネントである可能性があり、ルート要素が完了した後、残りはこのルートコンポーネントの「子供」です。つまり、子どものコンポーネントの財産の価値であり、子供は1つの「もの」（テキスト、コンポーネント、JSONに変換できる限り）または「物」の配列です。したがって、コンポーネントは好きなだけ作曲できます。例えば：
$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 ' )
]));このパッケージは、次のコンポーネントスイートを出荷し、使用する準備ができています。
計画は、ダッシュバイオ、ダッシュダック、ダッシュカンクス、ダッシュキャントスケープ用にもパッケージを作成することです。
すべてのコンポーネントには、独自のクラスがあります。たとえば、dash-html-component divにはクラスがあります：dash :: html :: components :: divを使用すると、perl標準の方法で使用できます。
use Dash::Html::Components::Div;
...
$app -> layout(Dash::Html::Components::Div -> new( id => ' my-div ' , children => ' This is a simple div ' ));しかし、すべてのコンポーネントスイートは多くのコンポーネントになる可能性があります。したがって、それらをインポートするタスクを容易にするため（1つずつは少し退屈です）、2つの方法を使用できます。
すべてのコンポーネントスイートには、すべてのコンポーネントに工場の方法があります。また、このファクトリメソッドを使用すると、子供が最初の要素である限り、子供のキーワードはオプションです。たとえば、dash :: html ::コンポーネントには、ダッシュをロードして構築するためのファクトリーメソッドdivがあります:: html :: components :: divコンポーネント：
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 ' );しかし、この工場の方法はエイリアスすることを目的としているため、これは冗長になります。
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 ' ));多くのモジュールは、輸出業者と友人を使用してタイピングを減らします。そのように気に入った場合、すべてのコンポーネントスイートが機能パッケージを取得して、このすべての機能を名前空間にインポートします。この関数を使用すると、子供が最初の要素である場合、子供のキーワードを省略することもできます。
たとえば、Dash :: HTML ::コンポーネントの場合、パッケージがありますDash :: HTML :: ComponentsFunctions 1つの工場関数を使用して、同じ名前でコンポーネントをロードおよび構築するために：
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 ' ));コールバックは、Webアプリのリアクティブな部分です。彼らはコンポーネントのプロパティの変化に耳を傾け、それらの変更によって解雇されます。コールバックの出力は、他のコンポーネントのプロパティ（または同じコンポーネントの異なるプロパティ）を更新し、他のコールバックを発射する可能性があります。そのため、アプリは変更に「反応」しています。火が変化するこれらのプロパティと更新されるプロパティは、コールバックの依存関係であり、コンポーネントとコールバック間の「リンク」です。
コールバックを起動すると予想されるすべてのコンポーネントには、一意のIDプロパティが必要です。
コールバックを定義するには、少なくとも必要です。
入力
すべての変更に関するコールバックを発射するコンポーネントプロパティ（またはコンポーネントプロパティ）。このプロパティの値は、コールバックの入力です
出力
プロパティ（またはプロパティ）が更新されるコンポーネント（またはコンポーネント）
折り返し電話
実行されるコード
最小コールバックは次のとおりです。
$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 ' " ;
}
);依存関係コンポーネントとコールバックを「リンク」します。すべてのコールバック依存関係には、次の属性があります。
component_id
コンポーネントのIDプロパティの値
component_property
プロパティの名前
コールバックには1つ以上の入力があり、コールバックに対して宣言されたすべての入力に対して、プロパティの値は、入力依存関係が宣言されるのと同じ順序でコールバックのパラメーターになります。
コールバックには、1つ以上の出力依存関係があります。出力が1つしかない場合、コールバックによって返される値は、コンポーネントのプロパティの値を更新します。 2番目のケースでは、コールバックの出力が返されるリストのリストである必要があります。出力依存関係が宣言されているのと同じ順序で出力に1つずつマッピングされます。
入力とは別に、コールバックには、コールバックを起動することなく、他のコンポーネントの他のプロパティの値が必要になる場合があります。この場合の状態の依存関係があります。したがって、コールバックのために宣言されたすべての州の依存関係について、プロパティは、状態依存関係が宣言されますが、すべての入力の後にコールバックのパラメーターになります。
依存関係は、ハッシュ参照のみを使用して宣言することができますが、コンポーネントと同様に、クラスと工場の方法と機能を使用することです。
オブジェクトの使用：
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 ' " ;
}
);オブジェクトを使用すると、コールバックメソッドでキーワード引数を省略できます。
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 ' " ;
}
);この依存関係を使用する工場の方法もあります。これにより、依存関係のキーワード引数を省略できます。
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 ' " ;
}
);これをエイリアスできます
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 ' " ;
}
);ただし、名前空間で機能のみを使用することを好む場合：
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 ' " ;
}
);最後のステップはアプリの実行です。コールするだけです：
$app->run_server();
また、ポート8080でサーバーを起動し、ブラウザを開いてアプリの使用を開始します！
Python用のコンポーネントがたくさんあります。あなたが貢献したいなら、私は喜んで助けてくれるでしょう。
その間、独自のコンポーネントを構築できます。私はより良いガイドと自動化されたビルダーを作りますが、今すぐあなたはすべてのJavaScriptパーツ（それは反応ベース）にhttps://github.com/plotly/dash-component-boilerplateを使用する必要があります（それは反応ベースです）。
DashNamesPace
コンポーネントの名前空間
_js_dist
コンポーネントのJavaScript依存関係
_CSS_DIST
コンポーネントのCSS依存関係
オプションで、コンポーネントスイートには、使用を容易にするための機能パッケージと工場の方法があります。
その後、コンポーネントスイートをPERLパッケージとして公開する必要があります。新しいコンポーネントスイートの場合は、好きなパッケージ名を使用できますが、Dash :: namespaceを使用する場合は、Dash :: Components ::を使用して、さらなる開発との将来の衝突を回避してください。それに加えて、より多くのコンポーネントを見つけることができます。
早めに述べたように、私は自動化されたビルダーを作りますが、貢献は大歓迎です!!それまでの間、Convinting.mdをチェックしてください
反応に基づいていないダッシュ用のコンポーネントを作成するのは少し難しいので、最初にJavaScriptパーツのReactベースを取得してください。その後、Perl、R、またはPythonと統合するのは簡単です。
この瞬間、このライブラリは実験的であり、まだ積極的な開発中であり、APIは変更されます！
もちろん、究極の目標は、PythonとRバージョンがサポートするすべてをサポートすることです。
使用は、できるだけ近いDASHのPythonバージョンに従うため、Pythonドキュメントはマイナーな変更で使用できます。
概要では、これがどのように機能するか、また配信の例フォルダーまたはリポジトリ内の直接の味を味わうことができます。完全なダッシュチュートリアルは、これらの例フォルダーでPerlに移植されています。
現在、多くの部品がありません：
さらに多くのことがありますが、今すぐそれを使用して素晴らしいアプリを作ることができます！ （インスピレーションが必要な場合は... https://dash-gallery.plotly.host/portal/を確認してください）
警告：このモジュールにはセキュリティがテストされていないため、パブリックサーバーでアプリサーバーを実行する場合は自分でテストしてください。
これは、非公式のプロットパルモジュールです。現在、私はプロットといかなる方法でも所属していません。しかし、ダッシュは素晴らしいライブラリだと思います。Perlで使用したいと思います。
ダッシュが好きなら、プロフェッショナルサービスを購入することをサポートすることを検討してください：Dash Enterprise
PabloRodríguezGonzá[email protected]
このソフトウェアは、PabloRodríguezGonzálezによる著作権（c）2022です。
これはフリーソフトウェアであり、以下のライセンスを取得しています。
The MIT (X11) License
