Создание сложных форм в Zeppelin

Введение

В прошлой статье я рассказал о базовой настройке 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