Unduh perl Dash - Unduh Kode Sumber perl Dash

NAMA

Dash - Aplikasi Web Analitik di Perl (Port of Plotly's Dash to Perl)

VERSI

Versi 0.11

RINGKASAN

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

KETERANGAN

Paket ini adalah port dari dasbor Plotly ke Perl.

DASH Make Building Aplikasi Web Analitik Sangat Mudah. Tidak diperlukan javascript.

Ini adalah cara yang bagus untuk menempatkan antarmuka web interaktif yang bagus untuk aplikasi analisis data Anda tanpa harus membuat antarmuka JavaScript dan tanpa harus mengatur server atau kerangka kerja web. Kasing penggunaan yang khas adalah Anda hanya memiliki data baru untuk model ML/AI Anda dan Anda ingin mengeksplorasi cara pelatihan yang berbeda atau hanya memvisualisasikan hasil konfigurasi parameter yang berbeda.

Dasar -dasar

Bagian utama dari aplikasi dasbor adalah:

Tata letak
Bagian deklaratif dari aplikasi tempat Anda menentukan tampilan. Tata letak ini terdiri dari komponen yang disusun dalam hierarki, seperti HTML. Komponen ini tersedia sebagai suite komponen (misalnya: dash :: html :: komponen, dash :: core :: komponen, ...) dan mereka bisa menjadi elemen html sederhana (misalnya dasbor :: html :: grafik yang dikomponen: H1) atau kompleks seperti dasbor :: core :: components :: grafik yang merupakan grafik yang dikomponen. Sebagian besar waktu Anda akan menggunakan komponen Dash yang sudah dibangun dan siap digunakan.
Panggilan balik
Ini adalah kode perl yang dieksekusi ketika beberapa komponen berubah dan hasil eksekusi ini komponen lain (atau komponen) diperbarui. Setiap panggilan balik menyatakan satu set input, satu set output dan secara opsional satu set input "status". Semua input, output dan input "status" dikenal sebagai dependensi panggilan balik. Setiap ketergantungan terkait dengan beberapa properti dari beberapa komponen, sehingga input menentukan bahwa jika properti komponen yang dinyatakan sebagai input dalam panggilan balik akan memicu panggilan balik itu, dan output yang dikembalikan oleh callback akan memperbarui properti komponen yang dinyatakan sebagai output.

Jadi untuk membuat aplikasi dasbor Anda hanya perlu mengatur tata letak dan callback. Kerangka dasarnya adalah:

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

Di sinopsis Anda bisa merasakan cara kerjanya dan juga dalam folder contoh distribusi

Tata letak

Tata letak adalah bagian deklaratif dari aplikasi dan dom dari aplikasi kami. Elemen root dapat berupa komponen apa pun, dan setelah elemen root dilakukan, sisanya adalah "anak -anak" dari komponen akar ini, yaitu mereka adalah nilai properti anak -anak dari komponen induk dan anak -anak dapat menjadi satu "benda" (teks, komponen, apa pun selama dapat dikonversi menjadi JSON) atau arrayref dari "benda". Jadi komponen dapat disusun sebanyak yang Anda inginkan. Misalnya:

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

Komponen

Paket ini mengirimkan suite komponen berikut dan siap digunakan:

Komponen Dash Core sebagai Dash :: Core :: Komponen. Komponen Utama untuk Aplikasi Web Analitik Interaktif: Formulir dan Bagan
Komponen Dash HTML sebagai Dash :: html :: komponen. Pada dasarnya elemen HTML.
Dasbor datatable sebagai dasbor :: tabel

Rencananya adalah membuat paket juga untuk dash-bio, dash-daq, dash-canvas dan dash-cytoscape.

Menggunakan komponen

Setiap komponen memiliki kelasnya sendiri. Misalnya Dash-HTML-Component Div memiliki kelas: dash :: html :: components :: div dan Anda dapat menggunakannya dengan cara standar perl:

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

Tetapi dengan setiap komponen suite bisa menjadi banyak komponen. Jadi untuk memudahkan tugas mengimpornya (satu per satu agak membosankan) kami bisa menggunakan dua cara:

Metode pabrik

Setiap komponen suite memiliki metode pabrik untuk setiap komponen. Dan menggunakan metode pabrik ini kata kunci anak -anak adalah opsional selama anak -anak adalah elemen pertama. Misalnya dasbor :: html :: komponen memiliki metode div pabrik untuk memuat dan membangun dasbor :: html :: komponen :: div komponen:

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

Tetapi metode pabrik ini dimaksudkan untuk alias sehingga ini menjadi lebih sedikit verbose:

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

Fungsi

Banyak modul menggunakan eksportir & teman untuk mengurangi pengetikan. Jika Anda suka dengan cara itu setiap komponen suite mendapatkan paket fungsi untuk mengimpor semua fungsi ini ke namespace Anda. Menggunakan fungsi ini juga memungkinkan untuk membuat ommmiting kata kunci anak -anak jika anak -anak adalah elemen pertama.

Jadi misalnya untuk dasbor :: html :: komponen ada paket dasbor :: html :: componentsFunctions dengan satu fungsi pabrik untuk memuat dan membangun komponen dengan nama yang sama:

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

Panggilan balik

Callbacks adalah bagian reaktif dari aplikasi web. Mereka mendengarkan perubahan sifat -sifat komponen dan dipecat oleh perubahan itu. Output dari callback dapat memperbarui properti untuk komponen lain (atau properti yang berbeda untuk komponen yang sama) dan berpotensi menembakkan panggilan balik lainnya. Jadi aplikasi Anda "bereaksi" terhadap perubahan. Properti ini yang berubah menjadi perubahan dan properti yang diperbarui adalah dependensi dari panggilan balik, mereka adalah "tautan" antara komponen dan panggilan balik.

Setiap komponen yang diharapkan untuk memecat panggilan balik harus memiliki properti ID yang unik.

Untuk mendefinisikan panggilan balik setidaknya diperlukan:

Input
Properti Komponen (atau Properti Komponen) yang menembakkan panggilan balik pada setiap perubahan. Nilai properti ini adalah input untuk panggilan balik
Keluaran
Komponen (atau komponen) yang propertinya (atau propertinya) diperbarui
panggilan balik
Kode yang dieksekusi

Panggilan balik minimun adalah:

 $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 ' " ;
    }
);

Dependensi

Komponen dan panggilan balik "tautan" dependensi. Setiap ketergantungan panggilan balik memiliki atribut berikut:

component_id
Nilai properti ID untuk komponen
component_property
Nama properti

Input

Panggilan balik dapat memiliki satu atau lebih input dan untuk setiap input yang dinyatakan untuk panggilan balik nilai properti akan menjadi parameter untuk panggilan balik dalam urutan yang sama dengan dependensi input yang dinyatakan.

Output

Panggilan balik dapat memiliki satu atau lebih dependensi output. Ketika hanya ada satu output nilai yang dikembalikan oleh callback memperbarui nilai properti komponen. Dalam kasus kedua output dari callback harus menjadi daftar dalam daftar yang dikembalikan akan dipetakan satu per satu ke output dalam urutan yang sama dengan dependensi output dinyatakan.

Negara

Terlepas dari input, panggilan balik dapat membutuhkan nilai properti lain dari komponen lain tetapi tanpa menembakkan panggilan balik. Ketergantungan negara adalah untuk kasus ini. Jadi untuk setiap ketergantungan negara yang dinyatakan sebagai panggilan balik, nilai OS properti akan menjadi parameter untuk panggilan balik dalam urutan yang sama dengan dependensi negara dideklarasikan tetapi setelah semua input.

Ketergantungan menggunakan objek

Ketergantungan dapat dinyatakan hanya menggunakan referensi hash tetapi cara yang disukai adalah menggunakan kelas dan metode dan fungsi pabrik seperti halnya dengan komponen.

Menggunakan objek:

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

Menggunakan objek memungkinkan untuk menghilangkan argumen kata kunci dalam metode panggilan balik:

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

Ada juga metode pabrik untuk menggunakan dependensi ini, yang memungkinkan untuk menghilangkan argumen kata kunci untuk dependensi:

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

Ini bisa alias

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

Tetapi jika Anda lebih suka menggunakan fungsi saja di namespace Anda:

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

Menjalankan aplikasi

Langkah terakhir adalah menjalankan aplikasi. Panggil saja:

 $app->run_server();

Dan itu akan memulai server di port 8080 dan membuka browser untuk mulai menggunakan aplikasi Anda!

Membuat komponen baru

Ada banyak komponen ... untuk Python. Jadi jika Anda ingin berkontribusi, saya akan senang membantu.

Sementara itu Anda dapat membangun komponen Anda sendiri. Saya akan membuat panduan yang lebih baik dan pembangun otomatis tetapi saat ini Anda harus menggunakan https://github.com/plotly/dash-component-boilerplate untuk semua bagian javascript (berbasis reaksi) dan setelah itu bagian perl sangat mudah (komponen sebagian besar javascript, atau tipe-script):

Untuk setiap komponen harus berupa kelas Perl yang diwarisi dari Dash :: Basecomponent, kelebihan beban hash dereferencing %{} dengan alat peraga yang dimiliki komponen reaksi (periksa dash :: metode Basecomponent to_json), dan dengan metode ini:
- Dashnamespace
  Namespace dari komponen
- _js_dist
  JavaScript dependensi untuk komponen
- _CSS_DIST
  Ketergantungan CSS untuk komponen

Secara opsional komponen suite akan memiliki paket fungsi dan metode pabrik untuk kemudahan penggunaan.

Maka Anda hanya perlu menerbitkan paket komponen sebagai paket Perl. Untuk suite komponen baru Anda dapat menggunakan nama paket apa pun yang Anda suka, tetapi jika Anda ingin menggunakan Dash :: namespace, silakan gunakan Dash :: Components :: Untuk menghindari tabrakan di masa depan dengan pengembangan lebih lanjut. Selain itu, ini akan lebih mudah untuk menemukan lebih banyak komponen.

Seperti yang disebutkan lebih awal, saya akan membuat pembangun otomatis tetapi kontribusi lebih dari diterima !! Sementara itu silakan periksa kontribusi.md

Membuat komponen untuk Dash yang tidak bereaksi berbasis sedikit sulit jadi silakan dapatkan bagian JavaScript Bereaksi Bereaksi dan setelah itu, mengintegrasikannya dengan Perl, R atau Python akan mudah.

STATUS

Pada saat ini perpustakaan ini bersifat eksperimental dan masih dalam pengembangan aktif dan API akan berubah!

Tujuan utamanya tentu saja adalah untuk mendukung segala sesuatu yang didukung oleh versi Python dan R.

Penggunaannya akan mengikuti versi dasbor Python, sedekat mungkin, sehingga Doc Python dapat digunakan dengan perubahan kecil:

Penggunaan -> (operator panah) bukannya.
Paket dan kelas utama untuk aplikasi adalah Dash
Component Suites akan menggunakan Konvensi Paket Perl, Maksud saya: dash_html_components akan menjadi Dash :: html :: komponen
Alih -alih dekorator, kami akan menggunakan panggilan balik lama biasa
Konteks panggilan balik tersedia sebagai parameter terakhir dari panggilan balik tetapi tanpa bagian respons
Alih -alih Flask, kami akan menggunakan Mojolicious (mungkin di masa depan Dancer2)

Di sinopsis Anda bisa merasakan cara kerjanya dan juga dalam folder contoh distribusi atau langsung di repositori. Tutorial Dash lengkap diangkut ke Perl di folder contoh -contoh tersebut.

Bagian yang hilang

Saat ini ada banyak bagian yang hilang:

Mount awalan
Mode Debug & Muat Ulang Panas
Konfigurasi Dash (Variabel Lingkungan Pendukung)
Pemeriksaan Ketergantungan Callback
Fungsi klien
Dukungan untuk Data Properti Komponen-* dan Aria-*
Generasi tata letak dinamis

Dan banyak lagi, tetapi Anda bisa menggunakannya sekarang untuk membuat aplikasi yang hebat! (Jika Anda membutuhkan inspirasi ... cukup periksa https://dash-gallery.plotly.host/portal/)

Keamanan

PERINGATAN : Modul ini tidak diuji untuk keamanan jadi uji diri Anda sendiri jika Anda akan menjalankan server aplikasi di server yang menghadap publik.

PENAFIAN

Ini adalah modul Perl Plotly tidak resmi. Saat ini saya tidak berafiliasi dengan cara apa pun dengan Plotly. Tapi saya pikir Dash adalah perpustakaan yang hebat dan saya ingin menggunakannya dengan Perl.

Jika Anda suka DASH, silakan pertimbangkan untuk mendukung Layanan Profesional Pembelian: Dash Enterprise