Пузырьки
График “Пузырьки” (Bubble Chart, Correlation) используется для визуализации трех измерений одновременно. Расположение пузырька определяется первыми двумя измерениями (measures), которые соответсвуют горизонтальной и вертикальной осям. Третье измерение соответствует размеру пузырька.
У каждого пузырька выводится подпись - название размерности (dimension). На графике присутствует возможность двигать график вверх-вниз и вправо-влево, а также приближать и отдалять. Ползунок в правой части графика позволяет отфильтровать отображение пузырьков исходя из третьего измерения, а именно: пузырьки, которые не входят в диапазон, становятся слабо видны. Кроме того есть возможность выставить range у обеих осей, таким образом настроить диапазон для оси x и y.
Фильтрация пузырьков с помощью ползунка и урезание осей с применением range представлено на картинке ниже:
style: {
measures: {
avg_humidity: {
range: [
25,
90,
],
title: 'Влажность, %',
},
avg_temperature_celsius: {
range: [
'5',
'40',
],
title: 'Cредняя Температура',
},
min_temperature_celsius:
title: 'Минимальная температура',
},
},
},
Пример использования format:
measures: {
avg_humidity: {
range: [
25,
90,
],
title: 'Влажность',
format: '[/100]#,00',
},
},
Блоки конструктора
Конструктор включает, помимо стандартных полей (расширенное руководство пользователя), возможность настройки опорной линии в блоке «Отображение», о чем подробнее будет написано ниже.
JSON-конфигурация
Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.
Поле view_class для данного дэша имеет значение correlation.
Далее представлена таблица ключей, поддерживаемых дэшем “Пузырьки”.
dataSource
Опции koob, dimensions, measures, limit, sortBy, xAxis, yAxis и filters из секции dataSource подробно описаны в руководстве по конфигурации дэшлетов (глава 1.2.4).
В блоке style можно настроить стиль отображения измерений. Список ключей блока style:
| Название ключа | Возможные значения | Описание |
|---|---|---|
| title | Строка, LPE-выражение | Указание заголовка для показателя, отображаемого в легенде и всплывающей подсказке. |
| format | Строка | Отображение значения в тултипе и в подписях на графике в соответствии с указанным форматом. Все варианты форматов описаны в руководстве по конфигурации дэшлетов. |
| range | Массив | Указание диапазона минимального и максимального значения для оси. В массиве можно указать меньший диапазон и таким образом урезать “лишние” значения. Если указывается формат вида format: '[/100]##,0, то в range для корректной работы используются значения без форматирования. |
| labelStyle | Объект | Объект для указания стилей подписей к графику на дэше. Используется только если включена опция “Выводить все подписи на графике” Ниже представлен список доступных ключей. |
Правила указания данных стилей представлены в руководстве по конфигурации дэшлетов
Блок labelStyle
Блок labelStyle имеет следующие ключи для настройки:
| Название ключа (объекта) | Нзавание дочернего ключа | Возможные значения | Описание |
|---|---|---|---|
| borderStyle | - | Объект | Объект для указания стилей границ подписей |
| borderStyle | borderType | Строка | Тип отображения границ подписей графика. Возможные значения: dashed, dotted, solid |
| borderStyle | borderColor | Строка | Цвет границ дэша/шапки дэша |
| borderStyle | borderWidth | Число | Ширина границ дэша/шапки дэша |
| cornerStyle | - | Объект | Указание стилей скругления для фона подписей дэша |
| cornerStyle | borderRadius | Число | Скругление для фона подписей дэша |
| backgroundStyle | - | Объект | Набор стилей для фона подписей дэша |
| backgroundStyle | padding | Число | Отступы подписей дэша внутри фона |
| backgroundStyle | backgroundColor | Строка | Фон подписей дэша |
| textStyle | - | Объект | Объект для указания стилей для подписей дэша |
| textStyle | fontWeight | Строка | Толщина подписей дэша. Возможные значения: **bold |
| textStyle | fontFamily | Строка | Шрифт подписей дэша |
| textStyle | color | Строка | Цвет подписей дэша |
display
Особенности дэша: в этом блоке настраивается цвет пузырьков, опорные линии.
| Название ключа | Возможные значения | Описание |
|---|---|---|
| color | Строка, LPE-выражение | Указание цвета для пузырька. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.), а так же с помощью lpe-выражения. |
| limit | Число | Указывает количество пузырьков (значений размерностей). |
| bgColor | Строка | Указание цвета фона дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.) |
| headerStyle | Объект | Используется для указания стилей заголовка дэша (fontSize, background, color). |
| referenceLineX | Число | Указание расположения опорной линии на оси x. |
| referenceLineY | Число | Указание расположения опорной линии на оси y. |
| colorReferenceLineX | Строка | Указание цвета опорной линии x. |
| colorReferenceLineY | Строка | Указание цвета опорной линии y. |
| topBar | Объект | Объект для стилизации шапки дэша. Ниже представлен список доступных ключей. |
| common | Объект | Объект для указания общих стилей дэша. Ниже представлен список доступных ключей. |
Примеры lpe-выражений для color:
//пример для measure (условие можно указывать для всех трех измерений):
color: 'lpe:if(avg_temperature_celsius>20, "green","blue")',
//пример для dimension
color: 'lpe:if(Country="Kuwait", "green","blue")',
Блок topBar
Блок topBar имеет следующие ключи для настройки:
| Название ключа (объекта) | Нзавание дочернего ключа | Возможные значения | Описание |
|---|---|---|---|
| visible | - | BOOLEAN | Если false, то шапка дэша не отображается |
| bgColor | - | Строка | Указание цвета фона шапки дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.) |
| headerStyle | - | Объект | Объект для указания стилей заголовка дэша |
| headerStyle | fontFamily | Строка | Шрифт для заголовка дэша |
| headerStyle | fontWeight | Строка | Толщина для заголовка дэша. Возможные значения: **bold |
| headerStyle | color | Строка | Цвет заголовка дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.) |
| descriptionStyle | - | Объект | Указание стилей для описания дэша |
| descriptionStyle | fontFamily | Строка | Шрифт для описания дэша |
| descriptionStyle | fontWeight | Строка | Толщина для заголовка дэша. Возможные значения: **bold |
| descriptionStyle | color | Строка | Цвет заголовка дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.) |
| borderStyle | - | Объект | Объект для указания стилей шапки дэша |
| borderStyle | borderColor | Строка | Цвет границ шапки дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.) |
| borderStyle | borderType | Строка | Тип отображения границы заголовка дэша. Возможные значения: dashed, dotted, solid |
| borderStyle | borderWidth | Число | Ширина границ шапки дэша |
Блок common
Блок common имеет следующие ключи для настройки:
| Название ключа (объекта) | Нзавание дочернего ключа | Возможные значения | Описание |
|---|---|---|---|
| visible | - | BOOLEAN | Если false, то шапка дэша не отображается |
| border | - | Объект | Объект для стилизации границ всего дэша |
| border | borderColor | Строка | Цвет границ дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.) |
| border | borderType | Строка | Тип отображения границы заголовка дэша. Возможные значения: dashed, dotted, solid |
| borderStyle | borderWidth | Число | Ширина границ дэша |
forecast
При указании пустого объекта forecast в конфигурации дэша Пузырьки будет построена линейная аппроксимация (линия тренда), а также указан коэффициент корреляции.
forecast: {},
Также, линию тренда можно отобразить открыв меню дэша -> Прогнозы и выбрать необходимые параметры для построения тренда.
Доступные для выбора функции для рассчета тренда:
- POLYNOMIAL - полиномиальная;
- LINEAR - линейная;
- EXPONENTIAL - экспонинцеальная;
- LOGARITHMIC - логарифмическая;
- POWER - степенная;
После указания степени (целочисленное значение) и нажатия кнопки ОК отобразится тренд. В случае нажатия на кнопку Отмена отображение дэша останется без изменений. Для скрытия отображенного тренда необходимо еще раз перейти в меню дэша и нажать на Прогнозы
options
Описывает различные дополнительные настройки при отображении деша.
Пример указания:
"options": ["HasRadius","ShowDataLabels"],
| Название ключа | Описание |
|---|---|
| !TopBarMenu | Скрыть меню визеля. |
| !TopBar | Скрыть заголовок дэша. |
| Hidden | Сокрытие дэша. |
| Transparent | Фон дэша соответствует фону подложки дэшборда. |
| Fixed | При включенной опции дэш закреплен на экране при скроллировании. |
| !Expanded | Сокрытие возможности разворачивания дэша на весь экран. |
| HasRadius | Показать ползунок скрытия/отображения данных. |
| ShowDataLabels | Показать названия для измерений. |
| DisplayAllVeryBadges | Принудительное отображение подписей пузырьков при их наложении |