perl Dash
1.0.0
Dash - аналитические веб -приложения в Perl (порт 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();Этот пакет представляет собой порт Plotly's Dash to Perl.
Dash делает строительные аналитические веб -приложения очень простыми. JavaScript не требуется.
Это отличный способ поместить хороший интерактивный веб -интерфейс в приложение для анализа данных без необходимости делать интерфейс JavaScript и без необходимости настройки серверов или веб -структур. Типичным вариантом использования является просто новые данные для вашей модели ML/AI, и вы хотите изучить различные способы обучения или просто визуализировать результаты различных конфигураций параметров.
Основные части приложения Dash:
Макет
Декларативная часть приложения, где вы указываете представление. Этот макет состоит из компонентов, расположенных в иерархии, как HTML. Эти компоненты доступны в виде компонентов (например: dash :: html :: components, dash :: core :: components, ...), и они могут быть простыми элементами HTML (например, dash :: html :: components :: h1) или так же, как вы хотите, как Dash :: Core :: Components :: Граф. Большую часть времени вы будете использовать Dash Components, уже созданные и готовые к использованию.
Обратные вызовы
Это код PERL, который выполняется при изменении некоторых компонентов, и результат этого выполнения обновляется другой компонент (или компоненты). Каждый обратный вызовой объявляет набор входов, набор выходов и, необязательно, набор «состояния» входов. Все входы, выходы и входы «состояния» известны как зависимости обратного вызова. Каждая зависимость связана с некоторым свойством некоторых компонентов, поэтому входные данные определяют, что если свойство компонента, объявленное как входное значение в обратном вызове, запустит этот обратный вызов, а вывод, возвращенный обратным вызовом, обновит свойство компонента, объявленное как вывод.
Таким образом, чтобы сделать приложение для прибора, вам просто нужно настроить макет и обратные вызовы. Основным скелетом будет:
my $app = Dash -> new( app_name => ' My Perl Dash App ' );
$app -> layout(...);
$app -> callback(...);
$app -> run_server();При синопсисе вы можете почувствовать, как это работает, а также в папке примеров распределения
Макет является декларативной частью приложения и его DOM нашего приложения. Корневой элемент может быть любым компонентом, и после того, как корневой элемент сделан, остальные являются «детьми» этого корневого компонента, то есть они являются значением свойства детей родительского компонента, и дети могут быть одной «вещами» (текст, компонент, все, что может быть преобразовано в JSON), или ArrayRef «вещей». Таким образом, компоненты могут быть составлены столько, сколько вы хотите. Например:
$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-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 :: Components имеет заводский метод 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 :: Components есть пакет 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 ' ));Обратные вызовы являются реактивной частью веб -приложения. Они слушают изменения в свойствах компонентов и увольняются этими изменениями. Вывод обратных вызовов может обновить свойства для других компонентов (или различных свойств для одних и тех же компонентов) и потенциально стрелять в другие обратные вызовы. Таким образом, ваше приложение «реагирует» на изменения. Эти свойства, которые изменяются пожарными, и свойства, которые получают обновления, являются зависимостью обратного вызова, это «ссылки» между компонентами и обратными вызовами.
Каждый компонент, который, как ожидается, будет снимать обратный вызов, должен иметь уникальное свойство идентификатора.
Для определения обратного вызова необходимо по крайней мере:
Входные данные
Свойство компонента (или свойства компонентов), которые отслеживают обратный вызов при каждом изменении. Значения этих свойств являются входными данными для обратных вызовов
Выход
Компонент (или компоненты), свойство (или свойства (или свойства)
перезвонить
Код, который выполняется
Минимальный обратный вызов будет:
$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
Значение свойства идентификатора для компонента
Component_property
Название собственности
Обратный вызов может иметь один или несколько входов, и для каждого входа, объявленного для обратного вызова, значение свойства будет параметром обратного вызова в том же порядке, что и входные зависимости.
Обратный вызов может иметь одну или несколько выходных зависимостей. Когда есть только один вывод, значение, возвращаемое обратным вызовом, обновляет значение свойства компонента. Во втором случае вывод обратного вызова должен быть списком в возвращаемом списке, будет сопоставлен один за другим на выходы в том же порядке, что и вывод зависимости.
Помимо входов, обратный вызов может потребоваться значение других свойств других компонентов, но без стрельбы. Состояние зависимости для этого случая. Таким образом, для каждой зависимости состояния, объявленной для обратного вызова, значение ОС значения, свойство будет параметром обратного вызова в том же порядке, когда зависимости состояния объявляются, но после всех входов.
Зависимости могут быть объявлены с использованием только хэш -ссылки, но предпочтительным способом используется классы и заводские методы и функции, как при компонентах.
Использование объектов:
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 (его на основе реагирования), и после этого часть Perl очень проста (компоненты в основном являются Javascript или TypeScript)::
Dashnamespace
Пространство имен компонента
_js_dist
Зависимости от JavaScript для компонента
_css_dist
Зависимости CSS для компонента
Необязательно в наборе компонентов будет иметь пакет функций и заводские методы для простоты использования.
Тогда вам просто нужно опубликовать набор компонентов в качестве пакета PERL. Для новых компонентов вы можете использовать любое имя пакета, которое вам нравится, но если вы хотите использовать Dash :: Space, пожалуйста, используйте Dash :: Components :: Чтобы избежать будущих столкновений с дальнейшим развитием. Кроме того, это будет легче найти больше компонентов.
Как упоминалось рано, я сделаю автоматизированный строитель, но вклад более чем приветствуется !! В то же время, пожалуйста, проверьте Anforming.md
Создание компонента для Dash, которая не основана на реагировании, немного сложно, поэтому, пожалуйста, сначала получите на основе реагирования JavaScript, а после этого интеграция с Perl, R или Python будет простым.
В этот момент эта библиотека экспериментальна и все еще находится в активной разработке, и API изменится!
Конечно, конечная цель - поддержать все, что поддерживает версии Python и R.
Использование будет следовать за версией Dash Python, как можно ближе, поэтому Python DOC можно использовать с незначительными изменениями:
В синопсисе вы можете почувствовать, как это работает, а также в папке примеров распределения или непосредственно в репозитории. Полный учебник из приборной панели переносит в Perl в папке примеров.
Прямо сейчас отсутствует много деталей:
И еще много, но вы можете использовать его прямо сейчас, чтобы сделать отличные приложения! (Если вам нужно немного вдохновения ... просто проверьте https://dash-gallery.plotly.host/portal/)
ПРЕДУПРЕЖДЕНИЕ : Этот модуль не протестирован для безопасности, поэтому протестируйте себя, если вы собираетесь запустить сервер приложений на общедоступном сервере.
Это неофициальный модуль Perl Perl. В настоящее время я никоим образом не связан с сюжетом. Но я думаю, что Dash - отличная библиотека, и я хочу использовать ее с Perl.
Если вам нравится Dash, пожалуйста, рассмотрите возможность поддержки их покупки профессиональных услуг: Dash Enterprise
Pablo rodríguez gonzález [email protected]
Это программное обеспечение является Copyright (C) 2022 г. Пабло Родригес Гонсалес.
Это бесплатное программное обеспечение, лицензированное под:
The MIT (X11) License
