Практические задания

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

Источник данных

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

Для выполнения заданий из данного раздела подготовлено подключение order_data, доступное в Дизайнере дашбордов на Q.Work. Подключение содержит три таблицы — customers, products и orders. Подробнее эти таблицы описаны ниже.

customers

Содержит уникальную информацию о клиентах, включая идентификатор клиента, его имя и сегмент рынка.

products

Содержит уникальные данные о товарах, такие как идентификатор, название, категория и подкатегория товара.

orders

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

Эта таблица связывает клиента с товаром через поля customerID и productID. Также она содержит подробную информацию о заказах — даты, стоимость и географические данные. Поля city, state, country, region дают возможность анализировать заказы по географическим регионам.

Обратите внимание, что ID заказа может встречаться в этой таблице больше одного раза в том случае, если клиент заказал сразу несколько товаров за один раз.

Создание дашборда

Для создания дашборда в Дизайнере дашбордов на Q.Work необходимо выполнить следующие шаги:

1. На главной странице Q.Work перейти на вкладку Технологические платформы.
2. В списке технологических платформ найти раздел Sensor.
3. Нажать на кнопку Дизайнер дашбордов. Вы попадёте на страницу со списком доступных дашбордов.
4. Нажать на кнопку Добавить в правом верхнем углу списка и выбрать из списка Дашборд.
5. Задать имя (допускаются русский язык и пробелы) и системное имя (допускается только латиница без специальных знаков) дашборда, и поместить его в группу Sensor. Обучение, выбрав её из выпадающего списка.
6. Нажать кнопку Сохранить.
7. Созданный дашборд откроется в новой вкладке.

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

Создание графиков

Находясь на созданном дашборде нажмите на кнопку в шапке дашборда и выберите "График". Новый график будет открыт в режиме редактирования.

На что нужно обратить внимание:

• У нового графика автоматически устанавливается название и системное имя. Хорошей практикой будет сразу изменить эти параметры на актуальные для вас в настройках графика.
• Системное имя графика следует задавать по следующему принципу: <системное имя дашборда>_<название графика>.
• Все задания в данном курсе подразумевают создание графиков с помощью визуального редактора и визуального построителя запросов. Подробнее об этих инструментах можно почитать в разделах документации, посвящённым запросам, настройками визуализации, а также в примерах проектирования.
• Начинайте создание графика с запроса, а уже потом переходите к визуализации.
• В рамках курса все данные для графиков следует брать из описанного выше источника данных.
• По умолчанию в визуальном редакторе запросов для всех запросов устанавливается лимит в 100 строк. Это значит, что вне зависимости от того, сколько строк в реальности должен вернуть запрос, в любом случае вернётся только 100. Не забывайте убирать лимит строк в тех запросах, где ограничение не требуется.

Блок 1. Показатели (группы компонентов и агрегирующие функции)

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

Задание

1. Создать график Объём продаж с показателями товаров продано и выручка, где выручка — это общая сумма продаж, а товаров продано — это общее количество проданных товаров. Показатели должны быть выравнены по вертикали друг относительно друга.
2. Создать график Охват с показателями всего заказов и всего клиентов, где всего заказов — это количество уникальных заказов (заказов с уникальным ID), а всего клиентов — это количество уникальных клиентов. Показатели также должны быть выравнены по вертикали друг относительно друга.

Агрегирующие функции

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

Вот некоторые из самых распространённых агрегирующих функций:

• SUM(): вычисляет сумму значений в заданном столбце.
• AVG(): находит среднее значение.
• COUNT(): подсчитывает количество записей.
• UCOUNT(): подсчитывает количество уникальных значений.
• MAX(): находит максимальное значение.
• MIN(): находит минимальное значение.

Например, чтобы узнать, сколько денег было потрачено на доставку всех заказов, можно использовать функцию SUM для столбца shippingcost; а чтобы понять, сколько в среднем денег было получено от продаж в каждом заказе, можно использовать функцию AVG для столбца sales.

Группы компонентов

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

1. Задание взаимного расположения
   Объединяя компоненты в группу, можно легко задать их относительное расположение. Например, можно выровнять показатель и подпись к нему по одной оси.
2. Управление размерами компонентов и адаптивность дизайна
   Группы также позволяют задавать размеры компонентов как в абсолютных единицах (пикселях), так и в относительных (пикселях). Например, можно расположить две столбчатые диаграммы, выровненные по горизонтали, в одной группе и установить процентное соотношение размеров этих диаграмм — выделить на первую диаграмму 30% от ширины графика, а на вторую — 70%. Это также позволит компонентам автоматически изменять размеры в зависимости от разрешения экрана или масштаба.
3. Упорядочивание компонентов
   Группы компонентов также позволяют организовать их в отдельные логические блоки, что упрощает восприятие информации.

Подсказка

Данные

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

1. Объём продаж:

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

2. Охват:

   • Для показателя "Всего заказов" используйте функцию UCOUNT() для подсчета общего числа уникальных заказов.
   • Для показателя "Всего клиентов" используйте функцию UCOUNT() для подсчета общего числа уникальных клиентов.

Визуализация

• Создайте группу для одного показателя.
• Внутри этой группы добавьте два компонента: один для отображения числа (например, "Выручка"), а другой — для текстовой подписи к числу (например, "Выручка за период").
• Аналогично создайте группу для второго показателя.
• После создания двух групп, создайте третью группу для объединения этих двух групп.
• Не забудьте про настройки выравнивания внутри групп.

Примеры реализации графиков: Объём продаж (opens in a new tab), Охват (opens in a new tab)

Видео

Более подробно процесс создания графика и написания запроса описан в видео ниже.

Блок 2. Круговая диаграмма, столбчатая диаграмма и группировка значений

Задание

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

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

2. Создать график Расшифровка по годам со столбчатой диаграммой, которая будет отображать выручку (ось Y) по каждому сегменту рынка с разбивкой по годам (ось X).

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

Группировка значений

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

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

Например, у вас есть таблица заказов с полями «region» (регион) и «sales» (выручка). Для того, чтобы найти общую выручку по каждому региону, достаточно выполнить группировку по столбцу «region» и применить агрегирующую функцию SUM() к столбцу «sales».

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

Присоединения

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

Виды присоединений, доступные в визуальном редакторе запросов:

1. inner — объединяет только те строки, которые имеют совпадение в обеих таблицах.
2. left — возвращает все строки из левой таблицы (первая таблица в запросе), даже если в правой таблице (вторая таблица в запросе) нет соответствующих записей. Если запись отсутствует, значения из правой таблицы будут заполнены NULL.
3. right — возвращает все строки из правой таблицы, даже если для них нет соответствующих строк в левой таблице. Если запись из левой таблицы отсутствует, значения будут заполнены NULL.
4. outer — возвращает все строки как из левой, так и из правой таблиц, независимо от того, есть ли у них совпадающие записи. Если совпадений нет, значения будут заполнены NULL.

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

• inner: Получить все заказы и соответствующих им клиентов.
• left: Получить все заказы, включая те, у которых нет клиентов.
• right: Получить всех клиентов, даже тех, кто не делал заказы.
• outer: Получить всех клиентов и все заказы, даже если нет совпадений.

Подсказка

Данные

• Для круговой диаграммы вам нужно сначала соединить таблицы Заказов и Клиентов по ID клиента, а затем сгруппировать данные по сегментам и найти общую выручку по каждому сегменту. Используйте соответствующие агрегирующие функции, такие как SUM(), и не забудьте про группировку по сегментам.
• Для столбчатой диаграммы сначала соедините таблицы Заказов и Клиентов по ID клиента, а затем группируйте информацию по сегментам рынка и годам и суммируйте выручку. Обратите внимание на использование функции SUM() и не забудьте отсортировать результаты по году по возрастанию.

Визуализация

Круговая диаграмма:

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

Столбчатая диаграмма:

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

Примеры реализации графиков: Выручка по сегментам (opens in a new tab), Расшифровка по годам (opens in a new tab)

Видео

Более подробно процесс создания графиков и написания запроса описан в видео ниже.

Выручка по сегментам

Расшифровка по годам

Блок 3. Таблица

Задание

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

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

• ID заказа
• ФИО клиента
• Сегмент рынка клиента
• Категория продукта
• Название продукта
• Дата заказа
• Дата отправки
• Прибыль
• Скидка

Данные в таблице должны быть отсортированы по ID заказа.

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

Подсказка

Данные

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

Визуализация

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

Пример реализации графика Расшифровка по заказам (opens in a new tab).

Видео

Более подробно процесс создания графика и написания запроса описан в видео ниже.

Блок 4. Markdown

Задание

Создать график Отчёт по доставке с markdown разметкой, который будет отображать самый часто используемый метод доставки и количество заказов, в которых указан этот метод доставки.

• На графике должен отображаться следующий текст, где Метод доставки и Количество заказов берутся из запроса: "Наиболее популярным методом доставки является Метод доставки с количеством заказов: Количество заказов."
• Значения Метод доставки и Количество заказов должны быть выделены жирным шрифтом.

Подробнее о markdown можно почитать в документации (opens in a new tab) языка разметки.

Подсказка

Данные

• Для подсчёта количества уникальных заказов примените функцию UCNT() к столбцу orderID и отсортируйте результаты по убыванию.
• Сгруппируйте данные по столбцу shipmode.
• Ограничьте количество строк в результате запроса одной строкой.

Визуализация

• Создайте новый график, добавьте новый запрос с помощью визуального редактора запросов. В настройках визуализации добавьте компонент markdown разметка.
• Выберите данные и текст.
• Чтобы подставить в текст данные из запроса используйте конструкцию {{<Название столбца>}}.

Пример реализации графика Отчёт по доставке (opens in a new tab).

Видео

Более подробно процесс создания графика и написания запроса описан в видео ниже.

Блок 5. Сводная таблица

Задание

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

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

Подсказка

Данные

• Группировка и применение любых агрегирующих функций производятся непосредственно с помощью функционала сводной таблицы, а не с помощью Визуального построителя запросов.
• Для корректной настройки сводной таблицы запрос должен возвращать все столбцы, с которыми предполагается работа внутри таблицы, без применения каких-либо агрегирующих функций.
• В рамках данного блока запрос обязательно должен возвращать следующие столбцы:
  • Категория товара (category),
  • Подкатегория товара (subcategory),
  • Сегмент рынка клиента (segment),
  • Выручка (sales),
  • Количество единиц товара (quantity),
  • Приоритет заказа (orderpriority),
  • Дата заказа (orderdate).
• Не забывайте использовать присоединения.

Визуализация

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

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

Пример реализации графика Сводная таблица (opens in a new tab).

Видео

Более подробно процесс создания графика и написания запроса описан в видео ниже.

Блок 6. Фильтры

Задание

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

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

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

Подсказка

Данные

• Для каждого фильтра добавьте на график запрос, который будет возвращать список уникальных годов, регионов, стран, городов и сегментов клиента соответственно.
• Дополните запросы на всех остальных графиках блоками с (фильтрацией)[./doc-user-experience/doc-chart/doc-chart-editor/get-data/sql-query#where].

Визуализация

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

Пример реализации графика с фильтрами (opens in a new tab).

Видео

Более подробно процесс создания графика и написания запроса описан в видео ниже.