Методы глубокой настройки

Фильтры

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

На платформе Digital Q.Sensor BI реализованы три типа фильтров.

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

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

chartFilterMap

Метод chartFilterMap возвращает объект со значениями локальных фильтров типа chartFilter, где ключами являются поля фильтров, а значениями - их значения.

Пример использования

// Пусть массив локальных фильтров типа chartFilter на текущий момент выглядит следующим образом
// chartFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'category', value: 'продажи' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод chartFilterMap
console.log(this.chartFilterMap)
 
// Результат:
// { date: '2024-01-01', category: 'продажи', region: 'Северо-Запад' }

setChartFilters

Метод chartFilterMap используется для установки фильтров типа chartFilter. Он позволяет передавать фильтры для графика, опционально задавая задержку перед их применением.

Параметры

• chartFilters (обязательный, массив объектов): Массив фильтров графика. Каждый элемент массива представляет собой объект с информацией о фильтре (пары вида {field: 'field 1', value: 'value 1'}). По умолчанию равен пустому массиву.

• applyInstantly (необязательный, boolean): Флаг, определяющий, нужно ли применить фильтры сразу - true или с задержкой - false. По умолчанию равен true.

• delay (необязательный, number): Задержка (в миллисекундах) перед применением фильтров. По умолчанию равна 1000 миллисекунд (1 секунда).

Примеры использования

// Пример 1: Применение фильтров графика сразу
this.setChartFilters([{ field: 'date', value: '2024-01-01' }, { field: 'category', value: 'продажи' }]);
 
// Пример 2: Применение фильтров с задержкой в 2 секунды
this.setChartFilters([{ field: 'date', value: '2024-01-01' }, { field: 'category', value: 'продажи' }], false, 2000);

privateFilters

Метод privateFilters возвращает массив объектов со значениями локальных фильтров типа privateFilters.

Пример использования

// Пусть массив локальных фильтров типа privateFilters на текущий момент выглядит следующим образом
// privateFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод privateFilters
console.log(this.privateFilters)
 
// Результат:
// [{ field: 'date', value: '2024-01-01' }, { field: 'region', value: 'Северо-Запад' }]

setPrivateFilters

Метод setPrivateFilters используется для установки фильтров типа privateFilter, если на текущий момент их количество не больше указанного (по умолчанию - 1). Иначе текущие значения не изменяются.

Параметры

• privateFilters (обязательный, массив объектов): Массив фильтров графика. Каждый элемент массива представляет собой объект с информацией о фильтре (пары вида {field: 'field name', value: 'value'}). По умолчанию равен пустому массиву.

• maxFilterNumber (необязательный, number): Максимальное количество фильтров типа privateFilter, которое может быть установлено. Если текущее количество фильтров графика достигло или превысило это значение, новые фильтры не будут добавлены. По умолчанию устанавливается 1.

Примеры использования

// Пример 1: 
this.setPrivateFilters([{ field: 'date', value: '2024-01-01' }]);
 
// Пример 2:
this.setPrivateFilters([{ field: 'region', value: 'Северо-Запад' }, { field: 'category', value: 'продажи' }], 3);

dropPrivateFilters

Метод dropPrivateFilters используется для удаления всех значений фильтров типа privateFilter.

Пример использования

// Пусть массив локальных фильтров типа privateFilters на текущий момент выглядит следующим образом
// privateFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод dropPrivateFilters, а затем выводим массив с privateFilters в консоль
this.dropPrivateFilters
console.log(this.privateFilters)
 
// Результат:
// []

clearPrivateFilters

Метод clearPrivateFilters используется для удаления последнего значения фильтра типа privateFilter.

Пример использования

// Пусть массив локальных фильтров типа privateFilters на текущий момент выглядит следующим образом
// privateFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод clearPrivateFilters, а затем выводим массив с privateFilters в консоль
this.clearPrivateFilters
console.log(this.privateFilters)
 
// Результат:
// [{ field: 'date', value: '2024-01-01' }]

filterList

Метод filterList возвращает массив объектов, в котором содержится текущий список глобальных фильтров, применённых на дашборде.

Пример использования

// Пусть массив глобальных фильтров выглядит следующим образом
// globalFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод filterList
console.log(this.filterList)
 
// Результат:
// [{ field: 'date', value: '2024-01-01' }, { field: 'region', value: 'Северо-Запад' }]

setFilters

Метод setFilters обновляет массив глобальных фильтров, применённых на дашборде. Новые фильтры добавляются в конец массива.

Параметры

• globalFilters (обязательный, массив объектов): Массив фильтров глобальных фильтров. Каждый элемент массива представляет собой объект с информацией о фильтре (пары вида {field: 'field name', value: 'value'}). По умолчанию равен пустому массиву.

• updateDashboard (необязательный, boolean): Флаг, отвечающий за обновление графиков дашборда после добавления фильтров. По умолчанию устанавливается значение false.

Пример использования

// Пусть массив глобальных фильтров выглядит следующим образом
// globalFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод setFilters и выводим в консоль список глобальных фильтров
this.setFilters([{field: 'field 1', value: 'value 1'}], true)
console.log(this.filterList)
 
// Результат:
// [{ field: 'date', value: '2024-01-01' }, { field: 'region', value: 'Северо-Запад' }, {field: 'field 1', value: 'value 1'}]

setDashboardFilters

Метод setDashboardFilters перезаписывает массив глобальных фильтров, применённых на дашборде. Старые значения удаляются.

Параметры

• globalFilters (обязательный, массив объектов): Массив фильтров глобальных фильтров. Каждый элемент массива представляет собой объект с информацией о фильтре (пары вида {field: 'field name', value: 'value'}). По умолчанию равен пустому массиву.

• updateDashboard (необязательный, boolean): Флаг, отвечающий за обновление графиков дашборда после добавления фильтров. По умолчанию устанавливается значение false.

• delay (number): Время задержки перед применением фильтров в миллисекундах. По умолчанию установлено в 30 миллисекунд.

Пример использования

// Пусть массив глобальных фильтров выглядит следующим образом
// globalFilters = [
//     { field: 'date', value: '2024-01-01' },
//     { field: 'region', value: 'Северо-Запад' }
// ];
 
// Вызываем метод setDashboardFilters и выводим в консоль список глобальных фильтров
this.setDashboardFilters([{field: 'field 1', value: 'value 1'}], true, 0)
console.log(this.filterList)
 
// Результат:
// [{field: 'field 1', value: 'value 1'}]

Графики

name

Метод name возвращает текущий заголовок графика.

Пример использования

// Пусть на данный момент заголовком графика является "Динамика"
// Вызываем метод name
console.log(this.name)
 
// Результат:
// 'Динамика'

qs$title

Метод qs$title устанавливает новый заголовок графика.

Пример использования

// Пусть на данный момент заголовком графика является "Динамика"
// Меняем заголовок графика на "Динамика за год" и выводим в консоль
this.qs$title = 'Динамика за год'
console.log(this.qs$title)
 
// Результат:
// 'Динамика за год'

qs$dashboardTitle

Метод qs$dashboardTitle возвращает текущий заголовок дашборда.

Пример использования

// Пусть на данный момент заголовком графика является "Показатели"
// Вызываем метод qs$dashboardTitle
console.log(this.qs$dashboardTitle)
 
// Результат:
// 'Показатели'

qs$dashboardTitle

Метод qs$dashboardTitle устанавливает новый заголовок дашборда.

Пример использования

// Пусть на данный момент заголовком графика является "Показатели"
// Меняем заголовок графика на "Показатели по Отделам" и выводим в консоль
this.qs$dashboardTitle = 'Показатели по Отделам'
console.log(this.qs$dashboardTitle)
 
// Результат:
// 'Показатели по Отделам'

setOnChartClick

Метод setOnChartClick устанавливает обработчик события клика на график.

Параметры

• handleClick (обязательный, функция): Функция, которая будет вызвана при клике на график.

Пример использования

// Предположим, у нас есть функция handleClick, которую мы хотим использовать в качестве обработчика клика на графике
 
// Устанавливаем обработчик клика на графике
this.setOnChartClick(handleClick)
 
// Короткие функции можно передавать непосредственно при вызове метода:
this.setOnChartClick(() => console.log('Вы нажали на график'))

setOnChartDblClick

Метод setOnChartDblClick устанавливает обработчик события двойного клика на график.

Параметры

• handleClick (обязательный, функция): Функция, которая будет вызвана при двойном клике на график.

Пример использования

// Предположим, у нас есть функция handleClick, которую мы хотим использовать в качестве обработчика двойного клика на графике
 
// Устанавливаем обработчик двойного клика на графике
this.setOnChartDblClick(handleClick)
 
// Короткие функции можно передавать непосредственно при вызове метода:
this.setOnChartDblClick(() => console.log('Вы дважды нажали на график'))

setOnChartDataZoom

Метод setOnChartDataZoom устанавливает обработчик события изменения масштаба данных на графике.

Параметры

• handleDataZoomChange (обязательный, функция): Функция, которая будет вызвана при изменении масштаба данных на графике.

Пример использования

// Предположим, у нас есть функция handleDataZoomChange, которую мы хотим использовать в качестве изменения масштаба данных на графике
 
// Устанавливаем обработчик изменения масштаба данных на графике
this.setOnChartDataZoom(handleDataZoomChange)
 
// Короткие функции можно передавать непосредственно при вызове метода:
this.setOnChartDataZoom(() => console.log('Вы изменили масштаб данных на графике'))

openLink

Метод openLink открывает новую вкладку браузера с указанным URL-адресом.

Параметры

• link (обязательный, строка): URL-адрес, который необходимо открыть в новой вкладке браузера.

Пример использования

// Вызываем метод openLink, чтобы открыть URL-адрес в новом окне браузера
this.openLink('https://example.com')

navigateTo

Метод navigateTo открывает в новой вкладке дашборд с указанным системным именем.

Параметры

• navigateTo (обязательный, строка): Системное имя дашборда, на который вы хотите перейти.
• globalFilters (необязательный, массив): Массив глобальных фильтров, которые будут применены на дашборде, на который вы переходите.
• external (необязательный, boolean): Флаг, который определяет, будет ли новый дашборд всегда открываться в новой вкладке. Если целевой дашброд уже открыт в одной из вкладок Дизайнера дашбордов, то при установленном значении false, откроется уже существующая вкладка, иначе - будет создана новая.

Пример использования

// Предположим, на платформе есть дашборд с системным именем "test_dashboard"
// Вызываем метод navigateTo для перехода на этот дашборд
this.navigateTo('test_dashboard', [{ field: 'date', value: '2024-01-01' }, { field: 'category', value: 'продажи' }])

Разное

sendMessage

Метод sendMessage используется для отображения всплывающих сообщений в правом нижнем углу дашборда.

Параметры

• text (обязательный): Строка, содержащая текст сообщения, которое будет отображаться во всплывающем окне.

• options (необязательный): Объект, содержащий дополнительные параметры для настройки внешнего вида и поведения всплывающего сообщения. Этот параметр позволяет указать уровень серьезности и настроить заголовок всплывающего окна.

  • severity (необязательный): Указывает уровень серьезности сообщения. Он определяет визуальный стиль и иконку, связанную с сообщением. Возможные значения: error для сообщений об ошибке и warn для предупреждений. Если не предоставлен, уровень серьезности по умолчанию устанавливается как error.

  • summary (необязательный): Устанавливает заголовок всплывающего окна. Этот параметр позволяет настроить заголовок, отображаемый над содержимым сообщения. Если не предоставлен, заголовок по умолчанию устанавливается на основе уровня серьезности.

Примеры использования

// Отображение сообщения об ошибке с настройками по умолчанию
this.sendMessage("Сообщение об ошибке");
 
// Отображение предупреждения с пользовательским уровнем серьезности и заголовком
this.sendMessage("Заполните все обязательные поля", { severity: "warn", summary: "Предупреждение" });
 
// Отображение информационного сообщения с пользовательским заголовком
this.sendMessage("Данные могут подгружаться долго, не переживайте c:", { summary: "Информация" });

_messageService.add

Метод _messageService.add напрямую вызывает внутренний сервис сообщений платформы для отображения всплывающих уведомлений в правом нижнем углу дашборда.

Параметры

• options (обязательный): Объект, содержащий параметры для настройки внешнего вида и поведения всплывающего сообщения:
  • severity (необязательный): Указывает уровень серьезности сообщения. Определяет визуальный стиль и иконку, связанную с уведомлением. Возможные значения: success, info, warn, error. Если не указано, по умолчанию используется error.
  • summary (необязательный): Заголовок всплывающего окна, который будет отображаться над основным текстом.
  • detail (необязательный): Основной текст уведомления, который отобразится во всплывающем окне.
  • sticky (необязательный): Определяет, будет ли уведомление закрываться автоматически (false) или оставаться закреплённым (true).

Пример использования

// Отображение сообщения с предупреждением, заголовком и основным текстом
this._messageService.add({
  severity: "warn",
  summary: "Предупреждение",
  detail: "Произошла ошибка",
  sticky: true
});