Построение таблицы на основе API Connector

Следуя данной инструкции, вы построите в Editor таблицу на основе подключения API Connector.

В качестве источника данных будет использоваться статичный JSON-файл, расположенный по адресу: https://storage.yandexcloud.net/datalens-public-demo-assets/data/mtcars.json, однако в случае с полноценными API процесс будет аналогичен.

Перед началом работы

Чтобы начать работать с DataLens, воспользуйтесь инструкцией по развертыванию.

Создайте воркбук

  1. Перейдите на главную страницу DataLens.

  2. В правом верхнем углу нажмите Создать → Создать воркбук.

  3. Введите название воркбука — Практические руководства.

  4. Нажмите кнопку Создать.

Создайте подключение API Connector

  1. Перейдите в созданный на предыдущем шаге воркбук и нажмите Создать → Подключение.

  2. В разделе Файлы и сервисы выберите API Connector.

  3. Укажите параметры подключения:

    • Имя хоста — storage.yandexcloud.net;
    • Порт — 443;
    • URL путь — datalens-public-demo-assets/data/.

    Остальные параметры оставьте без изменений.

  4. Нажмите Создать подключение. Введите название подключения и нажмите Создать.

  5. Перейдите в воркбук Практические руководства и на вкладке Подключения найдите созданное подключение.

  6. Скопируйте идентификатор подключения: рядом с ним нажмите на → Копировать ID. Идентификатор будет скопирован в буфер обмена.

Создайте чарт в Editor

  1. В воркбуке в правом верхнем углу нажмите Создать → Чарт в Editor. На открывшейся странице выберите тип визуализации Таблица.

  2. Свяжите чарт с подключением: для этого перейдите на вкладку Meta и добавьте ID подключения в links:

    {
    "links": {
	     "mtcars": "<id_подключения>"
    }
}

    Где:

    • <id_подключения> — идентификатор подключения, скопированный на предыдущем шаге.
    • mtcars — произвольное имя-алиас, которое вы присваиваете подключению, с помощью которого запрашиваете данные для чарта из источника.

    Примечание

    Вкладка Meta нужна для описания служебной информации о списке связанных сущностей. Эта информация используется для определения, с какими подключениями и датасетами связан чарт, а также для диалога связанных объектов, при копировании воркбука и при публикации в Public.

  3. Получите данные из источника. Для этого перейдите на вкладку Source и укажите:

    module.exports = {
    mtcars: {

 	   // Указываем, в какое подключение ходим за данными
 	   // Используем тут имя, которое мы дали подключению на табе Meta
        apiConnectionId: Editor.getId("mtcars"),

 	   // Указываем путь до API-метода/страницы в источнике
        path: "/mtcars.json",

 	   // Метод запроса
        method: "GET",
    }
};

  4. Очистите содержимое вкладки Config: она содержит шаблон, не относящийся к нашему примеру.

  5. На вкладке Prepare сформируйте таблицу:

    // Получаем скачанные данные
const cars = Editor.getLoadedData().mtcars.data.body.cars;

// Формируем заголовок таблицы и описываем типы колонок
const head = [
   {
      id: 'title',
      name: 'Name',
      type: 'string',
   },
   {
   	id: 'mpg',
   	name: 'MPG',
   	type: 'number',
   }
];

// Наполняем таблицу содержимым
const rows = cars.map((car) => {
   return {
      cells: [
         {value: car.model},
         {value: car.mpg},
      ],
   };
});

module.exports = {head, rows};

  6. Вверху чарта нажмите Выполнить. В области предпросмотра отобразится простая таблица, которая выводит данные, получаемые из JSON API.

    image.png

  7. Чтобы сохранить чарт, в правом верхнем углу нажмите Сохранить и введите название чарта.

Предыдущая
Создание таблицы на основе SQL-запроса
Следующая
Вкладки