Линии

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

Сплайн - линейная диаграмма с плавными изгибами. Отображает данные аналогично дэшу “Линии”. Все нижеописанные опции работают как для дэша “Линии”, так и для дэша “Сплайн”

Блоки конструктора

Логика работы конструктора для данного дэша представлена в расширенном руководстве пользователя.

JSON-конфигурация

Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.

Поле view_class для дэша имеет значение line.
Для дэша “Сплайн” поле view_class имеет значение spline.

Далее представлена таблица ключей, поддерживаемых дэшами “Линии” и “Сплайн”.

dataSource

Опции koob, dimensions, measures, limit, sortBy, xAxis, yAxis и filters из секции dataSource подробно описаны в руководстве по конфигурации дэшлетов (глава 1.2.4).

Название ключа	Возможные значения	Описание
title	Строка, LPE-выражение	Указание заголовка для показателя, отображаемого в легенде и всплывающей подсказке (если редактируется показатель, лежащий на оси Y), либо изменение подписи показателя на оси (если редактируется показатель, лежащий на оси Х).
color	Строка	Указание цвета для показателя. Работает только для показателей, лежащих на оси Y. Цвет можно указать в формате #HEX, RGB, RGBA, либо ключевым словом (red, blue, green и т.д.).
format	Строка	Отображение значения в тултипе и в подписях на графике в соответствии с указанным форматом. Указывается для фактов либо для размерностей, лежащих на оси Y. Все варианты форматов описаны в руководстве по конфигурации дэшлетов.
vizelType	Строка	Указывается, если необходимо одну из линейных диаграмм отобразить другим типом: bar - столбики, scatter - точки.
strokeStyle	Строка	Изменение варианта отображения линии. Все варианты описаны в руководстве по конфигурации дэшлетов.

Правила указания данных стилей представлены в руководстве по конфигурации дэшлетов.

Для дэша “Линии” также можно указывать опцию DisableLegend внутри блока styles для показателей, лежащих на оси “Цвета”. При включении опции по умолчанию данный показатель будет отображаться после клика по легенде.

Пример указания:

"dataSource":{
    "koob":"ch.max_example",
    "style":{
        "measures":{
            "sum_v_main":{
                        "options":[
                                "DisableLegend",
                        ],
            },
        },
    },
}

display

Название ключа	Возможные значения	Описание
limit	Число	Обрезает ось X на заданное значение.
range	Массив чисел	Отображение определенного диапазона значений по оси Y. Пример: range: [-100, 100] - в данном примере ось Y будет отображена от -100 до 100.
tooltip	строка либо JSON-конфигурация дэша	Отображение кастомного тултипа (с дэшем внутри, отображение LaTex-формулы, HTML). Подробнее в руководстве по конфигурации дэшлетов (1.2.6.2).
stoplight	Строка либо объект	Цветовая разбивка диаграммы на зоны. Описано в руководстве по конфигурации дэшлетов (1.2.6.1).
bgColor	Строка	Указание цвета фона дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.)
headerStyle	Объект	Используется для указания стилей заголовка дэша
rotateXLabel	Число	Угол поворота заголовка на оси Х
rotateYLabel	Число	Угол поворота заголовка на оси Y
xAxisLabelLimit	Число	Размер области заголовка на оси Х (px)

echart

Дэш “Линии” и “Сплайн” можно стилизовать, используя общие опции для графиков echart и конфигурацию для type: line. Ознакомиться с полным пакетом ключей для дэша “Линии” вы можете здесь.

Ниже будут представлены примеры использования объекта echart:

Указание ширины и цвета линий дэша:

echart: {
  series: {
    lineStyle: {
      color: 'green',
      width: 40,
    },
  },
},

Указание цвета и размера подписей для оси:

echart: {
  xAxis: {
    axisLabel: {
      textStyle: {
         color: 'gold',
         fontSize: 42,
      },
    },
  },
  yAxis: {
    axisLabel: {
      textStyle: {
        color: 'gold',
        fontSize: 42,
      },
    },
  },
},

Для изменения варианта отображения точек для дэшей “Линии”:

echart: {
  series: {
    symbol: 'diamond',
  },
},

Возможные значения:

diamond - ромбики,
cirlce - круги (по-умолчанию),
triangle - треугольники,
rect - квадраты

Указание цвета лэйбла на графике

echart: {
   series: {
     label: {
       color: 'red',
       position: 'inside',
     },
   },
 },

forecast

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

В данный момент в LuxmsBI представлено три алгоритма расчетов: линейная регрессия (LINEAR_REGRESSION), экспоненциальное сглаживание (EXPONENTIAL_SMOOTHING), метод Холт-Винтерса (HOLT_WINTERS).

Ниже представлен набор ключей для каждого из алгоритмов:

Линейная регрессия:

  forecast: {
    steps: 10,
    degree: 2,
    algorithm: 'LINEAR_REGRESSION',
  },

где

steps - количество рассчитываемых значений. Допустимые значения: целые положительные числа,
degree - возводимая степень. Допустимые значения: целые положительные числа.

Экспоненциальное сглаживание:

  forecast: {
    steps: 10,
    alpha: 0.1,
    gamma: 0.1,
    algorithm: 'EXPONENTIAL_SMOOTHING',
  },

где

steps - количество рассчитываемых значений. Допустимые значения: целые положительные числа,
alpha - коэффициент альфа. Допустимые значения: от 0 до 1,
gamma - коэффициент гамма. Допустимые значения: от 0 до 1.

Метод Холт-Винтерса:

  forecast: {
    steps: 10,
    alpha: 0.1,
    gamma: 0.1,
    delta: 0.2,
    trend: 'MULT' | 'ADD',
    algorithm: 'HOLT_WINTERS',
    seasonLength: 7 | 12 ...,
  },

где

steps - количество рассчитываемых значений. Допустимые значения: целые положительные числа,
alpha - коэффициент альфа. Допустимые значения: от 0 до 1,
gamma - коэффициент гамма. Допустимые значения: от 0 до 1,
delta - коэффициент дельта. Допустимые значения: от 0 до 1,
trend - вариант рассчета: мультипликативный (MULT), либо аддитивный (ADD)
seasonLength - сезонность. Рекомендуемые значения: кратные рассматриваемому периоду (неделя - 7, год - 12 и т.д.)

Пример отображения дэша “Линии” с прогнозированием с использованием линейной регрессии

При указании пустого объекта forecast в конфигурации дэша histogram будет построено наилучшее приближение для функции нормального распределения (распределения Гаусса). Выводятся параметры нормального распределения, такие как: мат.ожидание, ср.квдр.отклонение и точность апроксимации.

При указании пустого объекта forecast в конфигурации дэша correlation будет построена линейная апроксимация.

options

Описывает различные дополнительные настройки при отображении деша.

Пример указания:

"options": ["DisplayAllBadges","HideLegend"].

Название ключа	Описание
Fixed	При включенной опции дэш закреплен на экране при скроллировании
DisplayAllBadges	Показать все подписи на графиках без учета пересечений значений
DisplayAllVeryBadges	Показать все подписи принудительно
!TopBarMenu	Скрыть меню визеля
!TopBar	Скрыть заголовок дэша
!DisplayLegend	Скрыть легенду на графике
!DisplayAxisYMarks	Скрыть ось Y у дэша
!DisplayAxisXMarks	Скрыть ось Х у дэша
TooltipXAxisTitle	Отображение полного наименования показателя размерности в всплывающей подсказке (тултипе)
!DisplayAxis	Сокрытие сетки и осей у двумерных дэшей
!DisplaySplitLines	Сокрытие разделительных линий у двумерных дэшей
!DisplayTicks	Сокрытие рисок/тиков осей у двумерных дэшей
ModalDrilldown	Подключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами)
!Expanded	Сокрытие возможности разворачивания дэша на весь экран
XAxisValue	Переключение оси Х с категориальной на численный вариант отображения
Hidden	Сокрытие дэша
Transparent	Фон дэша соответствует фону подложки дэшборда
DataLabelsOnTop	Поднимает подписи над точкой на 5px. Работает только с включенной опцией DisplayAllBadges
DisplayDataZoom	Отображение зума по данным
YLogAxis	Отображение оси Y как логарифмической
LinesWithoutDots	Скрытие точек для показателей, отображаемых как линии / сплайны

onClickDataPoint

Поле onClickDataPoint описывает поведение клиентской части LuxmsBI при нажатии на один из указанных показателей в LPE-выражении, используемом для описания поведения.

Ниже в таблице приведены доступные функции для данного дэша. Описание работы с ними представлено в одноименном разделе руководства по конфигурации дэшлетов (глава 1.2.12)

Название функции	Описание
setKoobFilters	Фильтрация дэшей по значению размерности при нажатии на данное значение размерности.
navigate	Переключение на указанный в выражении дэшборд/датасет.
openModal	При нажатии на точку (сегмент) дэша откроется модальное окно с дэшем, id которого указано в конфигурационном файле.
navigateUrl	Используется для перехода на внешний источник с подстановкой значения.
menuItem	Используется для совместного использования hierarchy и функций onClickDataPoint.

Линии

Блоки конструктора​

JSON-конфигурация​

dataSource​

display​

echart​

forecast​

options​

onClickDataPoint​