External

Наш исторически первый метод создания кастомизированных визуализаций.

Итак, вы выбрали в типе визуализаций «Внешний» (view_class = external в JSON editor)
Суть метода в том, что вы указываете ссылку на html файл, в котором прописана логика расчетов, рендера, разметка и подключены стили и необходимые скрипты с библиотеками. Например это может быть pie-чарт на чистом svg или canvas или простая таблица, но стилизованная так, как вам нужно. Этот файл (ресурс) может лежать как в разделе ресурсов текущего датасета. так и любого другого, например того же ds_res. Вы можете указать ссылку на файл вручную через JSON Editor панели настройки дешборда, прописав ключ в объект конфигурации дешлета

url: res:template_koob.html
Эта запись означает, что ресурс находится в разделе resources того же, датасета, на котором мы находимся сейчас (вы видите его строковый идентификатор в url браузера)

url: res:ds_res:template_koob.html
Запись грузит файл уже не из текущего датасета, а из датасета ds_res.

Контент файла в случае external подгружается во фрейме, размеры которого совпадают с зарезервированным под дешлет местом (заголовок дешлета остается, если только вы его не выключили в настройках).
Так как это iframe, то при создании такого файла html важно помнить, что если вы обращаетесь к глобальным переменным родительского окна или url, то вы должны обращаться к ним через window.parent.myvariable.
Чтобы шаблон загружал данные из источников и реагировал на события извне (от родительского окна), то вам будет нужна библиотека bixel.js (наше внутренняя разработка), которая будет обеспечивать общение родительского окна и фрейма, а самое важное: создавать основную событийную систему, на которой вы будете строить работу в рамках данного метода.
https://github.com/rcslabs/bixel - здесь находится дока по библиотеке

Вы будете работать с несколькими основными событиями, которые вам понадобятся:
init - не сколько событие, сколько просто асинхронный метод инициализации библитотеки в целом.
принимает на вход объект, в котором можно искуственно ограничить значения. которые приходят по осям графика. например {xsCount: 1} - получить только одно значение, приходящее в массиве значений по оси Х графика. Возвращает объект дешлета, позволяющий увидеть его конфигурацию и любые поля, что в этой конфигурации вами были записаны.

loading - запрос на сервер отправлен, но ответ еще не получен, режим pending - идеален для отрисовок прелоадеров
no-data - запрос ушел, но данных в указанном месте нет или таблица пустая.
Может быть полезен в случае, если изначально вы и не хотите ничего загружать, а ждете триггерного действия от пользователя. В ином случае может понадобиться для вывода заглушки типа “нет данных”
url - подписка на изменение урла родительского окна. например когда нужно выполнить логику только при смене определенного параметра в урле.
load - запрос ушел, данные пришли, можно работать. Принимает объект осей axes и объект data, хранящий методы получения значений сервера на основе переданных значений по соответствующим осям графика.
Основной метод, который будет вызывать рендеринг.

Обратите внимание, что событие load или no-data могут вызываться много раз без перезагрузки дешлета и это нормально, ведь причин смены различных фильтров и моделей, которые слушает дешлет может быть много. Это штатная ситуация, вам лишь нужно не забывать правильно и вовремя обновлять контейнеры там, где вы манипулируете с DOM и совершаете вставки. В случае canvas вам нужно будет обновлять его context при этом событии
Рассмотрим пример шаблона html файла при таком способе разработки:
необходимый минимальный набор приведен по ссылке:
https://drive.google.com/drive/folders/1I90arpQRPoyorh-SQQz6UmTPFvcrmzXR?usp=sharing
Здесь представлена и файл библиотеки bixel.js и файл-полифил для браузеров, которые не имеют функционала Promise (некоторые версии Internet Explorer)
и пример файла-шаблона html.

<!DOCTYPE html>
<html>
<head>
  <script>window.Promise || document.write('<scr'+'ipt src="es6-promise.auto.js"></sc'+'ript>');</script>
  <script src="bixel.js"></script>
</head>
<body>
<div id="container"></div>
<script>
  let dashlet, xs, ys, z, config, data, axes, vs;
  bixel.init({
    zsCount: 1, // xsCount,ysCount,zsCount - позволяют искуственно установить ограничение на 
// количество элементов соответствующей оси.
  }).then(function (dashlet_) {
    dashlet = dashlet_; // сохраняем общий объект инфы о дешлете
    config = dashlet_.config || {}; // отдельно сохраняем конфиг дешлета для удобства
  });
// функция  проверяет, есть ли переопределение дименшнов или меж в разделе 
// dataSource.style
// пример: getStyle('measures', 'sum_value') - отдает пустой объект или объект со 
// всем, что прописано в соответствующем блоке style
  function getStyle(axisId, memberId) {
    const config = dashlet.config;
    const dataSource = config.dataSource || {};
    const style = dataSource.style || {};
    const axisStyle = style[axisId] || {};
    const memberStyle = axisStyle[memberId] || {};
    return memberStyle;
  }
  bixel.on('load', function (d, a) {
    data = d; // сохранили объект информации о данных с сервера, что пришли
    axes = a; // информациях об осях графика
    xs = axes.getXs(); // элементы оси Х графика (это энтити типа дименшн или межа)
    ys = axes.getYs(); // значения оси У графика аналогичного оси Х типа
    z = axes.getZs()[0]; // ось Z представлена в виде одного элемента и имеет 
// специфическое почти декоративное значение, которое можно оставить как есть, не вдаваясь в подробности.
    // Пример получения данных метрик
    vs =  xs.map(x => ys.map(y => data.getValue(x, y, z).valueOf()));
возвращает значения на точках пересечений осей Х и У
    // основная функция для рендера графика (всего лишь для примера, функция м.б. любой)
    render();
  });
  bixel.on('loading', function (axes) {
    console.log(axes); 
  });
  bixel.on('no-data', function (axes) {
    console.log(axes);
  });
  function render() {
    // здесь ваш код и все обработчики кликов, манипуляции с DOM и т.д.
  }
</script>
</body>
</html>

Технически, так как это обычный html файл – тут можно использовать любую библиотеку, которая вам понадобиться, например подключить highcharts.js и отрисовать его график на основе осей графика дешлета и значениях, что пришли в data.
То есть библиотека bixel.js задает вам событийную систему, в рамках которой вы можете писать любой код и использовать любую библиотеку, даже react.js