perl Dash

이름

대시 - Perl의 분석 웹 앱 (Port of Plotly '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();

설명

이 패키지는 PLOT의 DASH 포트입니다.

Dash는 분석 웹 애플리케이션을 매우 쉽게 만듭니다. JavaScript가 필요하지 않습니다.

JavaScript 인터페이스를 만들지 않고 서버 또는 웹 프레임 워크를 설정하지 않고도 데이터 분석 응용 프로그램에 멋진 대화식 웹 인터페이스를 배치하는 좋은 방법입니다. 일반적인 사용 사례는 ML/AI 모델에 새로운 데이터 만 가지고 있으며 다른 매개 변수 구성의 결과를 시각화하거나 다른 매개 변수 구성 결과를 시각화하려고합니다.

기초

대시 앱의 주요 부분은 다음과 같습니다.

• 공들여 나열한 것

  뷰를 지정하는 앱의 선언적 부분. 이 레이아웃은 HTML과 마찬가지로 계층 구조로 배열 된 구성 요소로 구성됩니다. 이 구성 요소는 구성 요소 스위트 (예 : dash :: html :: 구성 요소, dash :: core :: 구성 요소, ...)로 제공되며 간단한 html 요소 (예 : dash :: html :: components :: h1) 또는 Dash :: core :: components :: 그래프가 Plotly를 기반으로하는 차트 구성 요소입니다. 대부분의 경우 이미 구축되고 사용할 준비가 된 대시 구성 요소를 사용하게됩니다.

• 콜백

  이것은 일부 구성 요소가 변경 되고이 실행 결과 다른 구성 요소 (또는 구성 요소)가 업데이트 될 때 실행되는 Perl 코드입니다. 모든 콜백은 입력 세트, 출력 세트 및 선택적으로 "상태"입력 세트를 선언합니다. 모든 입력, 출력 및 "상태"입력을 콜백 종속성이라고합니다. 모든 종속성은 일부 구성 요소의 일부 속성과 관련이 있으므로 입력은 콜백에서 입력으로 선언 된 구성 요소의 속성이 해당 콜백을 트리거하고 콜백에서 반환 한 출력이 출력으로 선언 된 구성 요소의 속성을 업데이트합니다.

따라서 대시 앱을 만들려면 레이아웃과 콜백을 설정하면됩니다. 기본 골격은 다음과 같습니다.

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

시놉시스에서는 이것이 어떻게 작동하는지와 배포의 예제 폴더에서 맛을 맛볼 수 있습니다.

공들여 나열한 것

레이아웃은 앱의 선언적 부분과 앱의 DOM입니다. 루트 요소는 어떤 구성 요소 일 수 있으며, 루트 요소가 완료된 후 나머지는이 루트 구성 요소의 "어린이"입니다. 따라서 구성 요소는 원하는만큼 구성 할 수 있습니다. 예를 들어:

 $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 :: 구성 요소로 대시 html 구성 요소입니다. 기본적으로 HTML 요소.
• 대시 데이터 가능 대시 :: 테이블로

이 계획은 대시 바이오, 대시-다크, 대시 캔버스 및 대시-사이토 스케이프에 대한 패키지를 만드는 것입니다.

구성 요소 사용

모든 구성 요소에는 고유 한 클래스가 있습니다. 예를 들어 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 :: 구성 요소는 dash :: html :: components :: div 구성 요소를로드하고 빌드하는 공장 메소드 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 ' ));

기능

많은 모듈이 Exporter & Friends를 사용하여 타이핑을 줄입니다. 이러한 방식이 마음에 들면 모든 구성 요소 제품군은이 모든 기능을 네임 스페이스로 가져 오는 기능 패키지를 가져옵니다. 이 기능을 사용하면 어린이가 첫 번째 요소 인 경우 어린이 키워드를 추측 할 수 있습니다.

예를 들어 Dash :: html :: 구성 요소의 경우 패키지 대시가 있습니다.

 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 ' ));

콜백

콜백은 웹 앱의 반응적인 부분입니다. 그들은 구성 요소의 속성의 변화를 듣고 그러한 변화에 의해 발사됩니다. 콜백의 출력은 다른 구성 요소 (또는 동일한 구성 요소의 다른 속성)에 대한 속성을 업데이트하고 잠재적으로 다른 콜백을 발사 할 수 있습니다. 따라서 앱이 변경에 "반응"합니다. 화재가 발생하는 속성과 업데이트되는 속성은 콜백의 종속성이며 구성 요소와 콜백 사이의 "링크"입니다.

콜백을 발사 할 것으로 예상되는 모든 구성 요소에는 고유 한 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

  재산의 이름

입력

콜백은 하나 이상의 입력을 가질 수 있으며 콜백에 대해 선언 된 모든 입력에 대해 속성 값은 입력 종속성이 선언되는 것과 동일한 순서로 콜백의 매개 변수가됩니다.

출력

콜백은 하나 이상의 출력 종속성을 가질 수 있습니다. 출력이 하나만 있으면 콜백에 의해 리턴 된 값은 구성 요소의 속성 값을 업데이트합니다. 두 번째 경우 콜백의 출력은 반환 된 목록의 목록이어야합니다. 출력 종속성이 선언 된 것과 동일한 순서로 하나씩 출력에 하나씩 매핑됩니다.

상태

입력 외에도 콜백은 다른 구성 요소의 다른 속성 값이 필요하지만 콜백을 발사하지 않아도됩니다. 이 경우 상태 종속성이 있습니다. 따라서 콜백에 대해 선언 된 모든 주 의존성에 대해 값 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에서 서버를 시작하고 앱을 사용하기 위해 브라우저를 열게됩니다!

새로운 구성 요소 만들기

파이썬에는 많은 구성 요소가 있습니다. 당신이 기여하고 싶다면 나는 기꺼이 도와 드리겠습니다.

한편 자신의 구성 요소를 구축 할 수 있습니다. 더 나은 가이드와 자동화 된 빌더를 만들 것입니다. 그러나 지금 당장은 모든 JavaScript 부분에 https://github.com/plotly/dash-component-boilerplate를 사용해야합니다.

• 모든 구성 요소는 Dash :: BaseComponent의 Perl 클래스 상속, 해시 Dereferencing %{}를 React 구성 요소에 가지고있는 소품 (dash :: basecomponent to_json 메서드)으로 과부하시켜야합니다.

  • dashnamespace

    구성 요소의 네임 스페이스

  • _js_dist

    구성 요소의 JavaScript 종속성

  • _css_dist

    구성 요소에 대한 CSS 종속성

선택적으로 구성 요소 스위트는 기능 패키지와 사용하기 쉬운 공장 방법을 갖습니다.

그런 다음 구성 요소 제품군을 Perl 패키지로 게시하면됩니다. 새로운 구성 요소 스위트의 경우 원하는 패키지 이름을 사용할 수 있지만 Dash :: 네임 스페이스를 사용하려면 Dash :: 구성 요소를 사용하십시오. 이 외에도 더 많은 구성 요소를보다 쉽게 ​​찾을 수 있습니다.

초기에 언급했듯이 자동화 된 빌더를 만들 겠지만 기부금은 환영받는 것 이상입니다 !! 그 동안 Contributing.md를 확인하십시오

반응을 기반으로하지 않는 대시의 구성 요소를 만드는 것은 약간 어렵 기 때문에 먼저 JavaScript 부품을 기반으로 받으십시오. 그 후 Perl, R 또는 Python과 통합하는 것은 쉽습니다.

상태

이 순간이 라이브러리는 실험적이며 여전히 활발한 개발 중이며 API가 변경 될 것입니다!

물론 궁극적 인 목표는 파이썬 및 R 버전이 지원하는 모든 것을 지원하는 것입니다.

사용은 가능한 한 가깝게 파이썬 버전의 대시 버전을 따릅니다. 따라서 Python Doc은 약간의 변경으로 사용할 수 있습니다.

• 대신 -> (화살표 연산자) 사용.
• 앱의 기본 패키지 및 클래스는 Dash입니다
• 구성 요소 스위트는 Perl 패키지 컨벤션을 사용합니다. 내 말 : Dash_html_components는 Dash :: html :: 구성 요소입니다.
• 데코레이터 대신에 우리는 평범한 오래된 콜백을 사용합니다
• 콜백 컨텍스트는 콜백의 마지막 매개 변수로 사용할 수 있지만 응답 부분은 없습니다.
• 플라스크 대신에 우리는 Mojolicious를 사용할 것입니다 (아마도 미래 Dancer2에서).

시놉시스에서는 이것이 어떻게 작동하는지와 배포의 예제 폴더 또는 저장소에서 직접 맛을 낼 수 있습니다. 전체 대시 자습서는 해당 예제 폴더에서 Perl로 포팅됩니다.

누락 된 부분

지금은 많은 부분이 누락되었습니다.

• 접두사 마운트
• 디버그 모드 및 핫 리로딩
• 대시 구성 (지원 환경 변수)
• 콜백 종속성 검사
• Clientside 기능
• 구성 요소 속성 데이터-* 및 aria-*
• 동적 레이아웃 생성

그리고 더 많은 것이지만 지금 당장 훌륭한 앱을 만들 수 있습니다! (영감이 필요한 경우 ... https://dash-gallery.plotly.host/portal/을 확인하십시오.

보안

경고 :이 모듈은 보안을 테스트하지 않으므로 공개 서버에서 앱 서버를 실행할 경우 스스로 테스트하십시오.

부인 성명

이것은 비공식적 인 Perl 모듈입니다. 현재 나는 어떤 식 으로든 Plotly와 제휴하지 않습니다. 그러나 Dash는 훌륭한 도서관이라고 생각하며 Perl과 함께 사용하고 싶습니다.

Dash가 마음에 드시면 전문 서비스 구매 지원을 고려하십시오 : Dash Enterprise

참조하십시오

• 대시
• 대시 저장소
• 차트 :: 줄거리
• 차트 :: ggplot
• alt :: data :: frame :: butmore
• ai :: mxnet

작가

Pablo Rodríguez González [email protected]

저작권 및 라이센스

이 소프트웨어는 Pablo Rodríguez González의 저작권 (C) 2022입니다.

이것은 무료 소프트웨어입니다.

 The MIT (X11) License