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

Общий вид

image.png

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

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

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

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

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

image.png

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

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

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

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

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

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

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

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

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

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

image.png

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

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

Палитры

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

image.pngНастройки палитр

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

image.png

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

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

image.png

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

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

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

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

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

image.png

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

Цвета темы

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

Элементы:
Level 1 — Заголовок виджета, название секции, некативный фильтр, неактивный разрез, неактивная кнопка, текст в полях ввода и селектах, значения в виджетах, текст кнопок меню
Level 2 — Названия страниц, подзаголовок виджета, метки осей, текст в легенде
Level 3 — Подписи настроек меню
Level 4 — Координатные оси графиков
Level 5 — Разделители, рамки
Accent — Цвет активных элементов, режимов, страниц

image.png

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

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

image.png

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

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

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

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

image.png

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

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

image.png

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

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

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

image.png

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

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

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

image.png

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

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

image-1681399227888.png

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

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

Разрезы

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

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

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

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

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

image.png

Дополнительное меню настроек разреза

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

Показатели

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

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

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

image.png

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

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

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

image.png

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

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

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

image.png

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

image.png

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

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

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

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

Цвет

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

image.png

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

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

image.png


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

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

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

Заголовок

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

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

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

Подсказка

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

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

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

Легенда 

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

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

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

image.png

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

 

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

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

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

 

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

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

image.png

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

image.png

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

image.png

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


image.png

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

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

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

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

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

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

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

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

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

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

image.png


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

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

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

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

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

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

image.png

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

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

image.png

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

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

image.png

image.png

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

image.png

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

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

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

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

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

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

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

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

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

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

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

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

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

image.png

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

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

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

image.png

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

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

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

image.png