Конструктор дашбордов

• Общий вид
• Настройки проекта
• Настройки страниц
• Палитры
• Темы оформления
• Добавление виджетов
• Параметры виджета
• Виртуальные данные
• SQL-преобразование данных

Общий вид

Страница конструктора дашбордов состоит из следующих элементов:

1. Кнопка возврата на страницу управления проектами
2. Кнопка добавления визуализации
3. Кнопка добавления фильтра
4. Кнопка добавления текстового блока
5. Пример текстового блока
6. Пример визуализации
7. Вкладки страниц дашборда
8. Рабочая область проекта. Размерами этой области ограничены перемещения элементов
9. Пример фильтра
10. Кнопка "Диспетчер данных": открывает диспетчер данных, управляющий подключениями и импортированными данными
11. Кнопки вызова панели настроек: открывает глобальные настройки проекта
12. Кнопка просмотра SQL-запроса визуализации: позволяет просмотреть SQL-запрос, формирующий все визуализации на листе
13. Кнопка сохранения проекта: сохраняет внесенные в проект изменения. Если ее не нажать, то после закрытия страницы с проектом изменения будут утеряны.

Настройки проекта

Общие настройки

Общие настройки — перечень режимов управляющих глобальным состоянием и рабочей среды визуальной части проекта.

Режим просмотра

Активирует режим имитирующий работу в режиме просмотра, при котором выделение виджетов, их перемещение по странице и изменение размеров заблокировано.

Модель данных по умолчанию

Устанавливает модель данных, которая будет выбрана при создании новых виджетов

Реальные данные (еще не реализовано)

Переключатель управляет тем будут ли отображены реальные данные (если они загружены) в визуализациях проекта. Режим "Принудительно" позволяет обойти локальные настройки виджетов, влияя на весь проект целиком.

• Показать данные, вкл: Если были загружены данные из источников, создана модель и в визуализациях выбраны соответствующие поля показателей и разрезов, пользователь увидит на графиках реальные цифры полученные из базы данных
• Показать данные, выкл. Во всех визуализациях будут показаны автоматически сгенерированные виртуальные данные

Размеры рабочей области

Включает или отключает отображение рамки по краям рабочей области

Настройки страниц

Страница — это рабочая область в рамках которой доступна компоновка визуализаций и фильтров. Вкладка управления страницами позволяет удалтьб или добавить новую, изменить ее размеры, переименовать, скрыть из списка навигации или изменить порядок страниц.

Элементы управления настройками страниц

1. Переименовать страницу
   
2. Изменить ширину и высоту рабочей области
3. Создать пустую страницу
4. Создать страницу-дубликат выбранной
5. Изменить порядок страниц
6. Скрыть или отобразить страницу
7. Удалить выбранную страницу

Палитры

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

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

Создание и удаление палитры

По умолчанию в каждом новом проекте имеется палитра по умолчанию. Но проекте может быть создано несколько палитр, например чтобы использовать их в разных темах.

Чтобы создать палитру необходимо кликнуть по одной из кнопок в секции «Создать палитру»:

• На основе текущей. Будет создана копия текущей палитры
• Новая палитра. Будет создана пустая палитра

Секция управления палитрами

Далее необходимо дать название новой палитре в поле «Переименовать палитру»

Удаление палитры происходит в этой же секции. При нажатии на кнопку «Удалить палитру» будет удалена текущая палитра.

Работа с цветом

Секция работы с цветом

В первой секции панели палитр находятся элементы с помощью которых можно выполнить следующие действия:

Выбор текущей палитры

Позволяет активировать другую палитру из списка

Селектор текущей палитры

Образцы и наборы цветов

По умолчанию цвета создаются и хранятся в так называемых наборах, или группах. В палитре может быть одна или несколько групп, в зависимости от задач пользователя. Визуально группы цветов отделены специальными отступами для лучшего восприятия

Наборы цветов в палитре

Такой подход позволяет отделить одни цвета палитры от других. Это может полезно, например, когда требуется описать определенный цветовой диапазон и назначить его конкретной визуализации для использования в автоматическом режиме, а для остальных использовать другие цвета

Элементы управления

Чтобы создать образец цвета нужно кликнуть на . Новый образец будет создан на основе выбранного в данный момент и появится последним в группе.

Чтобы создать группу нужно нажать . Будет создана группа с образцом цвета выделенным на момент нажатия кнопки.

Удалить образцы можно с помощью ;

Кнопка активирует режим для группового редактирования или удаления цветов. Если она активирована, при клике на образец будут выделены все цвета группы, после чего их можно будет изменить по схожим параметрам, например сделать более или менее насыщенными, изменить их яркость или удалить всю группу цветов.

Редактирование цветов

Изменить образец цвета можно двумя способами:

1. Ввести HEX или RGB код текстовое поле
   
2. Изменить параметры цвета с помощью трехпозиционной шкалы по модели HEX
   

Независимо от способа после ввода кода или изменения значений вручную эти поля синхронизируются

Темы оформления

Тема оформления — это цветовое решение интерфейса проекта и системы в целом. Базовых тем по умолчанию две: тёмная и светлая. Вы можете внести изменения в существующие темы или создать неограниченное количество новых тем.

Светлая и темная темы

Вкладка «Темы»

Переключение между темами

В первой секции выведен список тем проекта. Напротив каждой есть иконка «Глазок». Текущая тема подсвечивается «акцентным цветом» (в данном случае голубым). Чтобы активировать другую тему нужно кликнуть на соответствующий глазок другой темы.

Удаление темы

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

Последнюю тему в списке удалить не получится 

Создание темы

Чтобы создать новую тему, нужно кликнуть на соответствующую кнопку в той же первой секции. Новая тема будет создана как копия текущей. В списке тем появится еще одна строчка, а в название новой темы будет состоять из исходного + "copy".

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

Цвета темы

Оформление интерфейса приложения устроено таким образом что все элементы и все заливки разделены на уровни. Каждому уровню присвоен свой цвет. Таким образом оформление всего интерфейса состоит из 10 основных цветов + 1 акцентный + 1 сигнальный.

Редактирование темы

Для редактирования цветов темы предусмотрен алгоритм аналогичный работе с редактированием палитры. Разница лишь в том что количество цветов изменить нельзя.

Итак, чтобы изменить параметры какого либо из цветов темы, нужно кликнуть на нем левой кнопкой мыши. Затем как и в редакторе палитры изменить параметры можно двумя способами:

1. Вводом (вставкой) HEX или RGB кода цвета в поле для ввода
2. Перемещением ползунков по модели HSL

Тема для редактора кода

Для редактора кода предусмотрены всего две темы на выбор и изменить их нельзя. В силу большого количества цветов синтаксиса. Но можно выбрать тему которая ближе к основной. Если требуется переключаться между темами интерфейса, то как и палитры, тема редактора запоминает основную и меняется вместе с ней.

Добавление виджетов

Для создания визуализации, фильтра или текстового блока необходимо нажать на соответствующую кнопку в левом верхнем углу. В появившемся окне выбрать нужный виджет и кликнуть на нем.

Виджет — единица дашборда. Экземпляр трансформируемого контейнера, оформление, внутреннее содержание и логика работы которого зависит от выбранного типа из библиотеки. После создания и выделения виджета появляется доступ к его параметрам.

Параметры виджета

Чтобы получить доступ к настройкам любого виджета, необходимо выделить его контейнер. На нем появится прямоугольное выделение с маркерами трансформации, которые позволяют перемещать и изменять размеры контейнера в рамках рабочей области текущей страницы. Настройки выделенного виджета появятся в меню, которое вызывается с помощью соответствующей кнопки:

В этом разделе мы рассмотрим общие принципы построения визуализаций. В разделе библиотека виджетов будут рассмотрены индивидуальные настройки для каждой.

Вкладка «Данные»

Эта вкладка содержит секции с верхнеуровневыми параметрами визуализации

Реальные данные

Скрыть/показать данные из модели. Пока отключена глобальная настройка, управляющая показом данных каждый виджет может быть настроен в отдельности. По умолчанию отключено. Подробнее о виртуальных данных

Модель данных

Позволяет выбрать одну из моделей данных, ранее созданных в конструкторе моделей данных. Данные из этой модели будут использоваться для данного виджета (построение графика, заполнение полей таблицы, получение значений для фильтрации и т.д.). Все виджеты использующие одну модель будут связаны через нее, то есть будут фильтровать эту модель и реагировать на ее фильтрацию. Такой подход будет полезен, если требуется отделить или изолировать какие-то данные используя общее хранилище.

Разрезы

Измерения визуализации. Поля для разрезов выбираются из импортированных данных. Название для разреза можно ввести пользовательское, либо включить показ из источника.

Разрез. Выбор поля для вывода реальных данных.

В режиме виртуальных данных для имитации разреза используется текстовое поле с вводом значений через запятую с пробелом

Добавление нового разреза через кнопку «Добавить разрез». Если создается больше одного разреза, то для каждого создается своя визуализация и в виджете появляются вкладки с названиями разрезов, через которые можно получить доступ к этим визуализациям.

Пример визуализации с двумя разрезами

Для того чтобы разрезы можно было настроить индивидуально, для каждого предусмотрено меню персональных настроек, которое вызывается с помощью кнопки. Стандартными секциями для этой подпанели всегда будут:

• Возможность показа пустых значений
• Подставить в визуализацию название из источника, а не пользовательское
• Сгруппировать метки на оси разреза по определенному формату и типу даты (только для типа данных «дата»)

Показатели

Как и для разрезов в показателях поля таблиц выбираются из импортированных данных. Но в случае с показателями необходимо обязательно указать агрегацию:

• Типовые: сумма/количество/среднее/мин/макс
• По выражению: необходимо написать собственную функцию агрегации в виде SQL-запроса

Виртуальные данные для всех показателей генерируются автоматически.

Пользовательское название для показателя указывается также как и для разреза в специальном поле ввода в ячейке показателя.

Цвет или цвета для показателя можно выбрать по клику на фигуру круга рядом с полем ввода названия.

Добавление нового показателя через кнопку «добавить показатель»

Для установки индивидуальных параметров вызывается дополнительное меню с помощью кнопки у конкретного показателя:

Стандартными секциями для дополнительных настроек всегда будут:

• Название из источника. В названии показателя будет выведено название столбца (поля) из таблицы в модели данных.

  Внимание. т.к. алиас будет совпадать с названием поля, будьте внимательны при дальнейшем использовании этого поля в запросе - вместо поля будет подставляться выражение под одноимённым алиасом

• Пустые значения. Скрыть либо показать ячейки столбца в которых отсутствуют значения
• Форматирование. Секция позволяет видоизменить значение отображаемое на графике

Редактор SQL-запроса

Открыть редактор можно нажав на кнопку "SQL" в настройках виджета.

Интерфейс редактора состоит из полей: Разрезы, Показатели, Группировки и фильтры, а также карта модели выбранной в виджете.

Редактор SQL позволяет вам вручную редактировать запрос данных для каждого виджета. Скрипт редактора кода связан с выбором данных в интерфейсе. Когда пользователь выбирает поле для разреза и показателя в панели настроек, система генерирует SQL-запрос. И этот запрос затем можно изменить в редакторе. Например прописать другое поле для разреза и при сохранении изменений это поле изменится в интерфейсе. Кроме простого выбора поля в редакторе можно писать сложные выражения.

Поля "Разрезы" и "Показатели" соответствуют секции SELECT SQL-скрипта и разделены для корректной работы визуализаций.

Поле "Группировки и фильтры" соответствует секциям WHERE и GROUP BY, в нем можно прописать локальные параметры фильтрации, группировки, лимитов, действующие только на данный виджет. Все внешние фильтры будут применяться поверх локальных.

Карта модели позволяет отметить необходимы поля и по клику на кнопку «Добавить в текст» добавит все выбранное через запятую

Цвет

Имеет несколько режимов:

• Вручную. Позволяет выбрать цвет для каждого показателя вручную по клику рядом с элементом. в зависимости от виджета это может быть разрез или показатель
  
  

  

  
  
• По значению. Позволяет создать градиент, на который будет наложен диапазон значений и в соответствии с этими значениями элементам будут присвоены из этого градиента. 
  

  
  

  

  
  
• По условию. Позволяет написать SQL-выражение для расчета и выбирает номер цвета соответствующий результату из палитры. Например, 
  

  case 
  when Car.BRAND = 'Toyota' then '1'
  when Car.BRAND = 'Mitsubishi' then '2'
  else '3'
  end

  где цифры в одинарных кавычках это выбранные образцы цвета
  
  

Мин/Макс значение

Возможность активировать режим при котором можно ограничить минимальное и максимальное значения для отображения на графике. Также эта секция определяет диапазон для генерации в режиме виртуальных данных.

Вкладка «Вид»

На этой вкладке представлены настройки оформления. В данном разделе будут рассмотрены секции, общие для всех виджетов приложения, а более специфические для каждого виджета будут рассмотрены в разделе библиотека виджетов.

Параметры контейнера

• Координаты на листе и размеры объекта. Позволяют вручную изменять эти параметры
• Блокировка перемещения контейнера. Некоторые элементы визуализаций требуют перемещения с зажатой левой кнопкой мыши. Такое же событие вызывает и перемещение контейнера виджета. Чтобы этого не происходило активируйте эту настройку
• Фон. Включает/отключает фон виджета
• Обводка. Включает/отключает контур виджета. Можно также изменить тип, толщину и цвет линии обводки
• Радиус скругления углов контейнера виджета
• Тень. Включает/отключает тень виджета. Параметры смещение по горизонтали и вертикали, радиус размытия влияет на ее величину. Задать цвет тени можно как вручную, так и по условию

Заголовок

Позволяет задать заголовок для визуализации, а также скрыть или показать его на виджете

Подзаголовок

Позволяет задать подзаголовок для визуализации, а также скрыть или показать его на виджете

Подсказка

Управляет отображением подсказки на графиках при наведении на показатели.

Позиционирование заголовка

То как будут выравнены заголовки относительно контейнера визуализации. Применяется сразу ко всем заголовкам визуализации

Легенда 

вкл/выкл: Управляет видимостью легенды визуализации.
авто/вручную (отступ, пикселей:__): Управляет размером отступа легенды от границ виджета

Расположение: (внизу/сверху/слева/справа): Расположение легенды относительно сторон контейнера

Позиционирование(вверху, в центре, внизу; слева, в центре, справа): позиционирование внутри каждой из них.
Ширина контейнера легенды в пикселях, когда выбрано расположение «слева» либо «справа».

Вкладка «События»

• Переход к объекту (вкл/выкл): Клик по объекту вызовет переход к странице, выбранной в данной секции
• Реагировать на фильтры(вкл/выкл): Будет ли влиять на визуализацию применение фильтров в проекте. Включая ее собственную
• Инициировать фильтрацию(вкл/выкл): При клике на элемент визуализации (Столбик, Сектор, Точку и тд) по значению разреза или показателя будет активирован фильтр для остальных визуализаций. Включая инициатора
  
• Применить ко всем листам(вкл/выкл): Вкл. Значение фильтра применится на все станицы проекта Выкл. Отфильтруется только текущая страница
  
• Добавлять несколько фильтров(вкл/выкл): Вкл. При каждом клике на каждом элементе в строку фильтров попадут все элементы на которых кликнет пользователь. Сколько бы кликов не было Выкл. При каждом клике на каждом элементе в строку фильтров попадет только последний элемент на котором произошел клик
  
• Реагировать на собственные фильтры. Означает будет ли виджет фильтровать сам себя.

 

Виртуальные данные

Виртуальные данные — это внутренний алгоритм приложения, который активирован по умолчанию и позволяет работать с визуализациями без загрузки реальных данных в проект. В этом режиме все виджеты ведут себя также как если бы данные были настоящими. Пользователь может настроить цвета, параметры отображения, подписи и т.д. всё как должно быть в реальном дашборде.

Такой режим может быть полезен, когда требуется создать прототип будущего дашборда, но по какой-то причине реальные данные недоступны пользователю, в силу компетенции, ограничения доступа или по другим причинам. Или же наоборот, когда на демонстрации готового отчета требуется замаскировать данные, чтобы сохранить конфиденциальность.

 

Как работать с виртуальными данными

Работа с визуализациями в режиме виртуальных данных отличается лишь тем что для всех показателей данные будут сгенерированы автоматически. В качестве данных для разрезов по умолчанию используются названия месяцев, вместо них пользователь может указать произвольные значения, разделяя их запятыми.

Все числовые показатели будут сгенерированы автоамтически. Также в режиме виртуальных данных визуализации будут реагировать на нажатия фильтров, которые также находятся в этом режиме. На виджеты с реальными данными такие фильтры влиять не будут.

Технически можно построить полностью готовый дашборд любой сложности на виртуальных данных и он ничем не будет отличаться от настоящего, кроме цифр. З

SQL-преобразование данных

В Fastboard данные для визуализаций преобразуются в несколько этапов с помощью последовательно выполненных SQL-скриптов.

Этап 1: Редактор скрипта загрузки

На этом этапе данные загружаются из источника данных во внутреннее хранилище Fastboard. В скрипте загрузки используется синтаксис и возможности Clickhouse (подробнее: https://clickhouse.com/docs/ru/sql-reference ). Данные, полученные с помощью скрипта загрузки хранятся в проекте в виде несвязанных таблиц. 

Чтобы таблицу можно было добавить в проект, подключение к источнику этой таблицы должно находиться в списке "Подключения в проекте". Добавить его туда можно создав новое подключение, либо выбрав уже существующее из списка "Остальные подключения.

По умолчанию импорт каждой таблицы состоит из заголовка (например, Table "Brand") и трех секций:

Create @@@ - создает в clickhouse таблицу с указанными столбцами и типами данных

Delete @@@ - удаляет существующую таблицу из clickhouse при повторном запуске скрипта загрузки для корректной перезаписи данных

Read @@@ - считывает данные из источника, приводит типы данных к указанным и записывает в созданную ранее таблицу. 

Отладочная информация

Если при в коде скрипта загрузки были допущены ошибки, после сохранения и запуска скрипта они отобразятся в консоли: 

Этап 2: Конструктор моделей данных

Модель данных заменяет собой секцию FROM у запросов, по которым в конструкторе дашбордов строятся визуализации. Она строится в визуальном конструкторе и представляет собой набор таблиц проекта, соединенных операторами JOIN в одну. Моделей может быть произвольное количество, в зависимости от потребностей пользователя.

Этап 3: Конструктор дашбордов

В конструкторе дашбордов пользователь оперирует данными, обработанными в скрипте загрузки и объединенными в  модель данных. На этом этапе доступны кастомные SQL-запросы в следующих блоках:

SQL-редактор виджета

Формирует набор данных для отдельно взятой визуализации. В редакторе доступны для редактирования три поля: Разрезы, Показатели, Группировки и фильтры.

Разрезы и показатели определяют секцию SELECT запроса и разделены для того, чтобы правильно построить диаграмму. Разрезы представляют собой измерения, а показатели -- меры(агрегируемые данные). 

Группировки и фильтры определяют секции WHERE, ORDER BY и GROUP BY запроса.

Для агрегации показателей существуют встроенные функции (SUM, COUNT, AVG, MIN, MAX), а также "По выражению":

Показатель по выражению

Данная функция позволяет написать произвольное SQL-выражение для выбранного показателя. Это выражение будет добавлено в основной SQL-редактор виджета, в поле "Показатели", с указанием алиаса данного показателя.

Цвет по условию

Данная функция позволяет написать SQL-выражение для расчета и выбора цвета показателя из палитры. Например, 

case 
when Car.BRAND = 'Toyota' then '1'
when Car.BRAND = 'Mitsubishi' then '2'
else '3'
end

где цифры в одинарных кавычках это выбранные образцы цвета

SQL-редактор медиаблока

Медиаблок - виджет, позволяющий использовать текст с переменными, значение которых определяется SQL-выражением, а также картинки, также подставляющиеся с помощью SQL-запроса. 

SQL-редактор медиаблока не имеет полей "Разрезы" и "Показатели", вместо них одно поле "Переменные", аналогично определяющее секцию SELECT, и поле "Группировки и фильтры", аналогично стандартному редактору определяющее секции WHERE, ORDER BY и GROUP BY

Переменные в медиаблоке

Имена переменных назначаются на основной вкладке параметров медиаблока. Можно увеличить их количество кнопкой "Добавить переменную" или удалить выбранную переменную с помощью кнопки "Корзина". Переименовать переменную можно нажав на ее название.

Рядом с названием переменной находится кнопка, открывающая дополнительное окно параметров:
Это окно содержит стандартный блок, позволяющий включить, отключить а также выбрать тип форматирования для значения переменной.

Также в нем можно открыть редактор запросов для ввода выражения, которое определит значение переменной. Если для переменной не указано выражение, значением будет "undefined".

Картинки в медиаблоке

В режиме "Ссылка - По условию" работает аналогично функции "Цвет по условию". 

В режиме "База данных" ссылка на картинку должна содержаться в столбце модели данных, который необходимо указать в параметрах виджета.

Отладочная информация

Если в процессе написания скрипта допущены ошибки, сообщения о них отобразятся во всплывающем окне. Наведите курсор мыши на это окно, чтобы оно не исчезло по таймауту.

Этап 4: Результирующий SQL-запрос

После создания и настройки виджетов на листе дашборда формируется итоговый запрос, просмотреть который можно с помощью кнопки "{ }" на правой панели инструментов. В нем будут содержаться все секци, что может быть полезно при отладке. Если выбран виджет, то будет отображаться запрос только для него, если ничего не выбрано -- отобразится запрос для всех элементов листа.

Отредактировать результирующий запрос нельзя, для этого необходимо вернуться на предыдущие этапы.