Примеры проектирования в дереве компонентов

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

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

Круговая диаграмма и локальный фильтр

Создадим круговую диаграмму, отображающую распределение банков по странам Азии.

SQL запрос

-- Предварительная обработка данных
with processedData as (
    select 
        -- С помощью регулярного выражения получаем название страны, в которой находится банк
        substring(location from '([^,]+)') as country, 
        -- С помощью регулярного выражения получаем название город, в котором находится банк. 
        -- Если банк находится в городе-государстве, дублируем название страны
        coalesce(substring(location from '[^,]+,(.+)'), substring(location from '([^,]+)')) as city, 
        bank
    from banksinasia
    where 
        -- Исключаем строки, где значение столбца location не соответствует формату "Страна, Город"
        not (location like 'Redemo%') 
        -- Если установлен локальный фильтр по крупным банкам, 
        -- выбираются только те банки, количество сотрудников в которых больше 30000
        #if (${filterScale})
            and numberofemployees::decimal * 1000 > 30000 
        #end
)
select 
    country as "Страна",
    count(bank) as "Количество"
from processedData 
group by "Страна"
order by "Количество" asc

Добавление компонентов

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

Основные шаги

1. Добавление круговой диаграммы:
   • Добавьте компонент "Круговая диаграмма".
   • Подключите данные запроса.
   • Настройте отображение подписей и легенды, при необходимости увеличьте размер диаграммы.
2. Добавление локального фильтра:
   • Добавьте компонент "Фильтр Чекбокс".
   • Настройте подпись и область действия фильтра.
   • При необходимости поменяйте компоненты местами в дереве компонентов слева.
3. Добавление фильтра в группу для изменения размера фильтра:
   • Добавьте компонент "Группа".
   • Поместите компонент с фильтром в созданную группу.
   • В настройках внешнего вида группы измените её размеры
4. Изменение SQL-запроса: с помощью инструментария Apache Velocity добавьте в SQL-запросе блок if для обработки применения фильтра.

Более подробно процесс описан в видео ниже.

Группы показателей

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

SQL запрос

-- Выбираем общее количество банков и количество банков по каждому продукту
 
SELECT
    COUNT (*) AS "Банков всего",
    COUNT (*) FILTER (WHERE products = 'Кредитная карта') AS "Кредитная карта", 
    COUNT (*) FILTER (WHERE products = 'Розничный банк') AS "Розничный банк", 
    COUNT (*) FILTER (WHERE products = 'Страхование') AS "Страхование", 
    COUNT (*) FILTER (WHERE products = 'Страхование кредита') AS "Страхование кредита",
    COUNT (*) FILTER (WHERE products = 'Финансовые услуги') AS "Финансовые услуги"
FROM
    banksinasia

Добавление компонентов

Результатом запроса будет таблица с одной строкой и 6 столбцами, в каждой ячейке которой будет находиться число банков в каждой из категорий. Отобразим эти показатели на графике с помощью текстовых компонентов. Каждый показатель будет представлять собой группу с двумя компонентами типа "Текст с настройками": один непосредственно с числовым показателем, другой - с подписью.

Основные шаги

1. Добавление компонентов типа "Текст с настройками":

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

2. Группировка показателей:

   • Создайте группы для организации показателей.
   • Переместите компоненты в соответствующие группы.

3. Настройка отображения: выберите расположение и выравнивание компонентов внутри групп.

4. Изменение структуры:

   • Создайте дополнительные группы для организации подгрупп.
   • Используйте настройки групп для управления расположением и отображением компонентов.
   • Перейдите в настройки основной группы "root" и выберите оптимальное расположение элементов для вашего графика.

Более подробно процесс описан в видео ниже.

Использование JavaScript совместно с компонентами

Если требуется расширить функциональность компонентов, которая не предусмотрена в текущей версии, вы можете добавить дополнительные функции непосредственно в редакторе JavaScript. Для этого:

1. Перейдите на вкладку JS в настройках визуализации.
2. Найдите блок кода, отвечающий за компонент, который вы хотите кастомизировать. Каждый блок кода выделен комментариями следующим образом:

//-/<GUID компонента>/-//
<код компонента>
//-end-//

3. В конце автоматически сгенерированного кода, после //-end-//, добавьте ваш код, обращаясь к редактируемому компоненту через this.viewMap[<GUID компонента>].options.

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

Подробнее о доступных функциях и параметрах можно почитать здесь.

Изменение тултипа

Изменим тултип круговой диаграммы, созданной в примере выше.

//-/18d7ad2f-a058-478f-be9a-346d8baa2eee/-//
 
<автоматически сгенерированный код компонента>
 
//-end-//
 
pieChartID = "18d7ad2f-a058-478f-be9a-346d8baa2eee"
 
this.viewMap[pieChartID].options.tooltip.formatter = (param) => {
    return param.marker + param.name + ': ' + '<b>' + param.value + '</b>' + ' ('  + param.percent + '%' + ')'
}

Глобальный фильтр с кнопкой Очистить фильтры

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

SQL запрос

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

select distinct
    products as "Продукт"
from 
    banksinasia
order by "Продукт" asc

Добавление компонентов. Основные шаги

1. Добавление фильтра:
   • Добавьте компонент "Фильтр выпадающий список";
   • На вкладке данные выбрать Данные для подписей и Данные для значений. Данные для подписей будут отображаться в интерфейсе, а Данные для значений будут передаваться в качестве значений фильтра при выборе;
   • Укажите системное имя фильтра;
   • Укажите тип фильтра;
   • Измените остальные настройки при необходимости.
2. Добавление кнопки:
   • Добавьте компонент "Кнопка";
   • Выберите тему "Raised Text";
   • Измените остальные настройки при необходимости.
3. В корневой группе настройте взаимное расположение фильтра и кнопки:
   • Видимость: Показать;
   • Направление: В строку;
   • Выравнивание по вторичной оси: По центру.
4. При необходимости, выровнять элементы друг относительно друга можно добавив в текстовое поле внизу вкладки Внешний вид настройки отступов (margin), например, margin-top: 15px;. При этом также обязательно должно быть выбрано Видимость: Показать.

Настройка действия кнопки

В редакторе JS, после всего автоматически сгенерированного кода добавим обработку нажатия на кнопку:

//-end-//
 
filterProductID = "3b2f542b-68b2-4c35-8e91-41c788cd630e"
clearButtonID = "789fbcfa-c4d3-49b5-b014-b6cd970ea22c"
 
this.viewMap[clearButtonID].options = {}
 
this.viewMap[clearButtonID].options.onClick = () => {
    // Очищаем значения в поле ввода фильтра
    this.viewMap[filterProductID].api.clear(); 
    // Очищаем все глобальные фильтры, установленные на дашборде
    this.setDashboardFilters([], true);
}