В этой статье мы рассмотрим специальный плагин для фильтрации данных на диаграммах-расширениях Qlik Sense, который называется «лассо». В стандартных диаграммах он работает, а вот для фильтрации в Qlik Extensions – пригодится!

Brian and Ralf's extension

НА ЗАМЕТКУ! Фильтр работает на основе D3. Но его можно изменить и сделать так, чтобы он работал и в других визуализациях без использования этой библиотеки.

Скачайте исходный код.

Лассо: D3 Lasso

Прежде чем начать работу с фильтром, давайте обратимся к плагину Лассо D3, который позволяет создавать SVG-элементы и определять, что будет внутри выделения. Так, мы можем выделить нужную область данных.

Плагин состоит из списка объектов, чтобы проверять, когда активировать функцию лассо. Список работает по принципу выборки D3. Объекты лассо – элементы, которые будут оцениваться внутри и вне текущего лассо. У каждого объекта есть два параметра: возможно и выбрано.

Лассо работает в трех состояниях, которые срабатывают как события:

  1. lasso_start: когда пользователь впервые начинает рисовать лассо
  2. lasso_draw: когда пользователь делает лассо
  3. lasso_end: когда пользователь завершил работу с лассо

В состоянии lasso_start, каждому объекту автоматически присваиваются параметры:

possible: false

selected: false

В lasso_draw, объекты проверяются от первоначального состояния к текущему, чтобы определить задействованы они а текущей выборке лассо. Если да – то истина, нет — ложь.

Lasso example showing items tagged during drawing

В lasso_end, в завершении, если объекты назначено состояние possible, то выборка переходит в состояние выбрано: истина.

С этими значениями мы можем использовать лассо и основы JavaScript, чтобы настроить пользовательский стиль и настроить работу функции лассо в Qlik Sense.

Лассо можно настроить по следующим характеристикам:

  • items

выборка D3. Каждому элементу будет назначено состояние выборки;

  • hoverSelect

определяет могут ли быть выделены объекты лассо;

  • closePathSelect

определяет могут ли быть выбраны объекты выборкой смежный объектов;

  • closePathDistance

число, которое определяет максимальное расстояние в пикселях между текушей выборкой лассо и создаваемой, для того чтобы выбрать элементы и сделать новое выделение;

  • area

целевая область создания выборки лассо;

  • on

тип события и функция этого события. Есть три типа событий: начало, рисование и конец.

Подробности в файле Readme.

Пузырьковая диаграмма: Расширение

Это расширение имеет одно измерение и три меры. Каждое измерение представляет круг. Мера 1 определяет положение круга по оси X, мера 2 определяет положение по оси Y, а мера 3 определяет размер круга. Изначально график выглядит таким образом:

BasicScatter

Какие у нас есть настройки цветов в расширении. Сначала создадим div-блок. Если он уже создан, то удаляем его и создаем новый.

Далее определяем отступы, добавляем svg и рабочую область на основе отступов.

Масштаб и положение осей, кругов устанавливается на основе данных расширения.

И наконец, рисуем круги на основе данных и масштаба.

Наш файл “style.css” определяет стиль расширения, в голубых оттенках с прозрачностью в 50 %.

Лассо и пузырьковая диаграмма

У нас должно будет получиться так:

BasicScatterLasso

Установка плагина

Для того чтобы использовать лассо в расширении, нам нужно установить плагин lasso.js. Установите прежде d3. Давайте внесем правки в код:

В новом выражении requirejs, мы говорим, куда загрузить D3 и откуда брать лассо.

Добавляем CSS

Для того чтобы сделать лассо видимым, добавляем CSS. Далее добавим настройки для кругов, когда они включены в выборку лассо и нет:

Определяем область лассо

Далее определяем область, на которой могут настроить область выделения лассо.

Предположим, вот наш график:

Chart

Мы могли бы добавить невидимый квадрат на график и сделать его рабочей областью выделения. Получилось бы как-то так;

Hit 1

Но так квадрат накроет все элементы SVG и блокирует другие функции, которые мы настроили ранее.

Перемещаем квадрат на слой назад:

Hit 2

Но сейчас мы не можем выделять круги, а можем щелкать только рядом с ними:

Hit 3

Нам нужно сделать смешанные области выделения и рядом с кругом, и с возможностью щелкать по ним:

Hit 4

Для этого используем классы и D3. Назначим класс “.lassoable” для тех элементов, с которыми можно работать в выборке.

Сначала создадим квадрат поверх svg и назначим ему класс “lassoable”:

Далее проработаем с классом “lassoable” для кругов:

Теперь можем определять рабочую область выделения.

Настройка лассо

Вот какие еще нужны настройки. Вставляем такой код:

Функции события лассо

Теперь определим события начала, рисования и завершения процесса выделения.

Для «начала» мы хотим установить состояние not-possible, поскольку на старте нет выборок:

Далее для рисования – у нас есть то, что пойдет в выборку, и то, что находится за ее пределами. Мы используем .filter(), чтобы отфильтровать объекты на основе пользовательских данных:

 Далее, в конце, мы хотим, чтобы у нас была выделена нужная область в приложении Qlik Sense.

Используя .filter(), назначим для выбранных объектов состояния истина. Далее мы используем карту .map(), чтобы получить доступ к каждому объекту и извлечь qElemNumbers из данных при помощи D3.

Создание лассо

Теперь, после того как мы создали лассо, нам нужно только настроить наш SVG. Поэтому в конце расширения добавляем следующее:

Вот! Теперь у вас есть лассо для расширений!

Успехов вам в разработке!