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集成非常容易。