perl Dash下載 - perl Dash源代碼下載

姓名

DASH- PERL中的分析Web應用程序（Plotly's Dash到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();

描述

該軟件包是Plotly dash to Perl的一個港口。

破折號使構建分析網絡應用程序非常容易。無需JavaScript。

這是將一個不錯的交互式Web界面放置到數據分析應用程序的好方法，而無需製作JavaScript界面，而無需設置服務器或Web框架。典型的用例是，您只有ML/AI模型的新數據，您想探索訓練的不同方法，或者只是可視化不同參數配置的結果。

基礎

儀表板應用的主要部分是：

佈局
您指定視圖的應用程序的聲明部分。該佈局由像HTML一樣以層次結構排列的組件組成。 This components are available as component suites (for example: Dash::Html::Components, Dash::Core::Components, ...) and they can be simple html elements (for example Dash::Html::Components::H1) or as complex as you want like Dash::Core::Components::Graph that is a charting component based on Plotly.js.大多數時候，您將使用已經構建並準備使用的儀表板組件。
回調
這是當某些組件更改時執行的PERL代碼，並且此執行的結果另一個組件（或組件）被更新。每個回調都會聲明一組輸入，一組輸出和一組“狀態”輸入。所有輸入，輸出和“狀態”輸入都稱為回調依賴項。每個依賴性都與某些組件的某些屬性有關，因此輸入確定是否將組件的屬性聲明為回調中的輸入，將觸發該回調，而回調返回的輸出將更新聲明為輸出的組件的屬性。

因此，要製作dash應用程序，您只需要設置佈局和回調即可。基本骨架將是：

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

在概要中，您可以品嚐到它的工作原理以及在分發的示例文件夾中

佈局

佈局是應用程序的聲明部分及其應用程序的DOM。根元素可以是任何組件，並且在完成根部元素後，其餘的是該根組件的“孩子”，那就是它們的價值，父母的屬性的價值可以是一個“事物”（文本，組件，只要可以轉換為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 :: core ::組件。交互式分析網絡應用程序的主要組件：表單和圖表
DASH HTML組件作為DASH :: HTML ::組件。基本上是HTML元素。
dash datatable作為dash ::表

該計劃還將製作用於Dash-Bio，Dash-Daq，Dash-Canvas和Dash-Cytoscape的包裝。

使用組件

每個組件都有自己的類。例如，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 ' ));

但是，每個組件套件都可能是很多組件。因此，要簡化導入它們的任務（一個一個一個乏味）我們可以使用兩種方法：

工廠方法

每個組件套件都有每個組件的工廠方法。只要孩子是第一個元素，使用這種工廠方法，孩子是可選的。例如，dash :: html ::組件具有工廠方法div來加載和構建dash :: 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具有一個工廠功能，以加載並構建具有相同名稱的組件：

 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屬性。

至少必須定義回調：

輸入
零件屬性（或組件屬性）在每個更改上發射回調。此屬性的值是回調的輸入
輸出
其屬性（或屬性）更新的組件（或組件）
打回來
執行的代碼

minimun回調將是：

 $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
屬性的名稱

輸入

回調可以具有一個或多個輸入，對於回調的每個輸入，屬性的值將是與聲明輸入依賴關係相同的順序的回調參數。

輸出

回調可以具有一個或多個輸出依賴關係。當只有一個輸出一個回調的值時，回調會更新組件屬性的值。在第二種情況下，回調的輸出必須是返回的列表中的列表，將以與聲明輸出依賴關係相同的順序將輸出映射到輸出。

狀態

除了輸入外，回調可能需要其他組件的其他屬性的值，而無需觸發回調。國家依賴性是針對這種情況的。因此，對於每個聲明回調的狀態依賴項，值OS屬性將以相同的順序宣告，但在所有輸入之後，屬性將是回調的參數。

使用對象的依賴關係

依賴項可以僅使用哈希參考來聲明，但是首選的方法是使用類別和組件的類別方法和功能。

使用對象：

 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。因此，如果您想貢獻，我會很高興為您提供幫助。

同時，您可以構建自己的組件。我將做一個更好的指南和一個自動化的構建器，但現在您應該使用https://github.com/plotly/dash-component-boilerplate用於所有JavaScript部分（基於React的部分）（之後perl部分非常容易）

對於每個組件，必須是一個從dash :: basecomponent繼承的perl類，將哈希指定％{}與react組件具有的props重載（檢查dash :: basecomponent to_json方法），並使用此方法：
- dashnamespace
  組件的名稱空間
- _js_dist
  組件的JavaScript依賴關係
- _css_dist
  組件的CSS依賴關係

可選的組件套件將具有功能包和工廠方法，以便於使用。

然後，您只需要將組件套件作為Perl軟件包發布。對於新組件套件，您可以使用您喜歡的任何包裝名稱，但是如果要使用Dash ::名稱空間，請使用Dash :: Components ::避免將來的碰撞以及進一步開發。除此之外，可以更容易找到更多組件。

如前所述，我將做一個自動化的建築商，但貢獻非常歡迎！！同時，請檢查貢獻。

製作一個不是基於反應的組件有點困難，因此請首先獲得基於JavaScript零件的反應，然後將其與Perl，R或Python集成非常容易。