Введение
В прошлой статье я рассказал о базовой настройке Apache Zeppelin, которая может пригодится в простых случаях или для быстрого прототипирования. Если же говорить про промышленное использование то, базовых возможностей фильтров хватает не всегда, и самый яркий этого - выбор дат через виджет календаря.
Сегодня я покажу как сделать форму выбора даты с календарем с помощью возможностей Zeppelin. Для оторажения календаря я буду использовать виджет datepicker из библиотеки JQueryUI.
Создание формы
Для создания произвольных форм в Zeppelin используется параграф с обработчиком %angular
. После того, как этот обработчик объявлен, используется html-подобный шаблонизатор с некоторыми дерективами из AngularJS.
Например код параграфа с формой у которой 2 поля, будет выглядеть так:
%angular
<form class="form-inline">
<div class="form-group">
<label for="dateId">Дата: </label>
<input type="text" id="filterdate"></input>
</div>
<div class="form-group">
<label for="client">Клиент: </label>
<input type="text" id="client"></input>
</div>
<button type="submit" class="btn btn-primary">Выполнить</button>
</form>
Теперь чтобы к полю с датой подключить виджет datepicker’а необходимо подлючить нужные библиотеки и инициализивать виджет, после чего полный код формы будет следующий:
%angular
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#filterdate" ).datepicker(
{
dateFormat : 'yy-mm-dd',
}
);
});
</script>
<form class="form-inline">
<div class="form-group">
<label for="dateId">Дата: </label>
<input type="text" id="filterdate"></input>
</div>
<div class="form-group">
<label for="client">Клиент: </label>
<input type="text" id="client"></input>
</div>
<button type="submit" class="btn btn-primary">Выполнить</button>
</form>
В итоге запускаем параграф кнопкой Run
и видим нашу форму:

Также надо отметить что, иногда для появления виджета необходимо сначала запустить параграф с формой, а потом обновить страницу.
Обновление данных по кнопке на форме
После того как вид формы готов необходимо добавить обработчик копнки Выполнить.
Для этого необходимо добавть атрибут ng-model
, который будет содеражать имя поля для получения с него данных.
Для связки данных фильтра в запросе и поля из формы используется функция z.angularBind
, которая имеет следующую сигнатуру:
z.angularBind(имя значения фильтра в запросе, имя из ng-model поля формы, id параграфа c запросом);
После того как данные связаны необходимо запустить параграф с помощью функции z.runParagraph(id параграфа с запросом)
.
Теперь чтобы наш обработчик запускался необходимо добавть атрибут ng-click
в тэг button.
Как я указал выше в обоих функциях используется id параграфа, которое можно получить кликнув на его настройки:

Весь код формы теперь будет выглядеть следующим образом:
%angular
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#filterdate" ).datepicker(
{
dateFormat : 'yy-mm-dd',
}
);
});
</script>
<form class="form-inline">
<div class="form-group">
<label for="dateId">Дата: </label>
<input type="text" id="filterdate" ng-model="filterdate"></input>
</div>
<div class="form-group">
<label for="client">Клиент: </label>
<input type="text" id="client" ng-model="client"></input>
</div>
<button type="submit" class="btn btn-primary" ng-click="z.angularBind('client', client, 'paragraph_1610972750925_1801951089');z.angularBind('date', filterdate, 'paragraph_1610972750925_1801951089');z.runParagraph('paragraph_1610972750925_1801951089')">Выполнить</button>
</form>
Запрос в параграфе paragraph_1610972750925_1801951089 выглядит так:
select * from test where nav_date = '${date}' and client=${client} limit 100;
Настройка вида дашборда
После всех манипуляций дашборд выглядит так:

но в таком виде отдавать этот отчет не посвященному в программирование человеку не очень хорошо. Исправить это довольно легко, надо лишь переключить режим отображения из default в report (выделено на предыдущем скриншоте) и теперь отчет выглядит так:

Заключение
В качестве вывода хочу сказать, что сделать какую-то специальную форму с фильтрами в Zeppelin дело достаточно быстрое и не сильно сложное. Я еще раз убедился что для аналитика данных это достаточно интересный инструмент который может пригодится для показа каких-то отчетов заказчику без трудоемкой разработки.
Также хотелось бы еще поэксперементировать с произвольным представлением данных, но потом понял что там темя на отдельную статью.
comments powered by Disqus