Skip to content

Свой код ​

Тип Свой код рисует виджет вашей разметкой, стилями и скриптом. Платформа делает выборку по полям на осях, как для любого виджета, и передаёт строки вашему коду, а тот строит из них что угодно: карточку в фирменном стиле, нестандартную диаграмму, таблицу с особой подсветкой.

Когда брать. Ни один из готовых типов не подходит, а в команде есть человек, который пишет на HTML и JavaScript. Для обычных графиков готовые типы удобнее: у них есть настройки оформления, форматы и выделение без строчки кода.

КатегорияСерииМера
сколько угодносколько угодносколько угодно

Как собрать виджет ​

  1. Создайте виджет на датасете и выберите в панели справа Тип виджета → Свой код.
  2. Разложите поля по осям, как для таблицы: измерения — в Категорию или Серии, показатели — в Меру. Поля всех трёх осей придут в код одним списком data.fields, а их значения — ключами каждой строки.
  3. В секции Код нажмите Редактировать код….
  4. Напишите код в панелях HTML, CSS и JS. Справа Предпросмотр сразу показывает результат на текущей выборке виджета.
  5. Нажмите Сохранить в окне кода, затем Сохранить у виджета.

Окно «Код виджета»: три панели и предпросмотр

Новый виджет открывается с рабочим примером: он выводит каждую строку выборки через «—». Кнопка Справка в окне перечисляет всё, что доступно коду, с примерами.

Что получает код ​

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

ОбращениеЧто даёт
data.rowsСтроки выборки с сырыми значениями: ключ — id поля, значение — число, строка или null
data.formattedТе же строки, но значения уже в формате поля: «840 000,00», «01.03.2026»
data.fieldsПоля выборки: id, alias — подпись поля, sql — формула, primitiveType — тип
data.pageСведения о постраничной выборке; hasMore — строк больше, чем пришло
dw.on('data', fn)Новая выборка — после смены фильтров дашборда или обновления
dw.refresh()Перезапросить данные

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

Пример: итог по мере, собранный из строк по категориям. Разметка — <div class="total"></div>.

js
const measure = data.fields.find((f) => f.alias === 'SUM(amount)');
const cat = data.fields.find((f) => f.alias === 'category');

function render(data) {
  const byCat = {};
  for (const row of data.rows) {
    byCat[row[cat.id]] = (byCat[row[cat.id]] ?? 0) + (row[measure.id] ?? 0);
  }
  const total = Object.values(byCat).reduce((a, b) => a + b, 0);
  document.querySelector('.total').textContent = 'Итого: ' + total.toLocaleString('ru-RU');
}

render(data);
dw.on('data', render);

Ищите поля по подписи, а не по роли

Справка предлагает отличать измерения от мер по полю role, но надёжно это работает только для полей, положенных на оси мышью. У виджета, собранного запросом к API или помощником, и у старых виджетов, переключённых на этот тип, все поля приходят с ролью measure — включая текстовые. Находите нужное поле по alias или по primitiveType.

alias — подпись поля на полке. Переименовали поле в редакторе виджета — поправьте и строку поиска в коде, иначе поле не найдётся.

Виджет со своим кодом работает везде, где работают остальные: на дашборде, в выгрузке в файл и в рассылке.

Изоляция кода ​

Код исполняется в изолированном фрейме. Он не видит страницу платформы, её cookie и хранилище браузера: попытка прочитать document.cookie, localStorage или страницу-родителя заканчивается ошибкой SecurityError. Войти от имени пользователя или прочитать чужие данные такой код не может — он получает только выборку своего виджета.

Код может отправлять данные наружу

Сетевые запросы из фрейма не ограничены. Код может подключить библиотеку с внешнего адреса — например, import('https://cdn.jsdelivr.net/npm/…') — и так же может отправить выборку на любой сервер. Выборка считается по правам того, кто открыл дашборд, поэтому такой виджет передаст наружу данные каждого, кто его открыл. Создавать виджеты может любой пользователь, кроме наблюдателя; если это недопустимо, проверяйте код виджетов этого типа перед публикацией.

Администратор может вынести фрейм на отдельный адрес переменной окружения SANDBOX_HOST: тогда у кода свой origin. Изоляция от платформы при этом та же.

Помощник ​

Кнопка AI-помощник в окне кода открывает диалог: опишите словами, что нарисовать, и помощник заменит содержимое трёх панелей. Он видит текущий код, поля выборки и справку. Работает, если администратор подключил AI-провайдера.

Что дальше ​