Добавление кода на дашборд

Добавление кода на дашборд

Используйте плитку кода для запуска JavaScript, который может:

• Получать внешние данные через API.
• Объединять внешние данные с результатами ваших запросов.
• Сопоставлять результаты кода с вашими визуализациями.

Добавление кода

Чтобы добавить код на дашборд

1. В правом верхнем углу дашборда откройте меню Добавить и выберите Код.

  * Сочетание клавиш: Shift+C

2. На дашборд добавляется пустая плитка, и справа открывается боковая панель Параметры.

3. Необязательно: в поле Заголовок плитки введите заголовок для отображения в верхней части вашей плитки.

4. В пронумерованном поле Код введите пользовательский JavaScript для получения внешних данных из любого доступного API. Используйте Fetch API для получения данных из внешних API.

  * Чтобы убедиться, что ваши запросы не заблокированы, попросите администратора разрешить ваши внешние источники данных, добавив их в Внешние запросы.
  * Внешние запросы включают исходящие сетевые подключения из вашей среды Ключ-АСТРОМ к внешним сервисам. Они позволяют контролировать доступ к публичным конечным точкам из AppEngine с помощью функций приложений и функций в Дашбордах, Блокнотах и Автоматизациях.
  * Перейдите в Настройки > Общие > Внешние запросы.
  * Выберите Новый шаблон хоста.
  * Добавьте доменные имена.
  * Выберите Добавить.
  * Таким образом вы можете гранулярно контролировать веб-сервисы, к которым могут подключаться ваши функции.
  * Не включайте префикс адреса. Например, если адрес https://www.example.com, добавьте только www.example.com.

Предупреждения о запуске кода

Когда вы открываете документ от другого пользователя, вы можете увидеть следующее сообщение:

Этот дашборд содержит пользовательский код. Он доступен только для чтения, пока вы не проверите код и не выберете «Принять и запустить».

Когда вы запускаете плитку кода или раздел, написанный другим человеком, Ключ-АСТРОМ выполняет JavaScript этого человека, используя вашу учётную запись и ваши разрешения. Это мощная функция, но её нужно использовать правильно и ответственно. Код JavaScript может получать доступ к внешним API от вашего имени (используя вашу учётную запись и разрешения).

Чтобы проверить код

1. Выберите Проверить весь код.

2. Страница Проверка кода отображает код каждой плитки кода в отдельном поле.

3. Проверьте код и решите, хотите ли вы его запустить.

4. Если вы хотите запустить код, вы можете одобрить его только на этот раз или навсегда.

  * Чтобы запустить код только на этот раз, выберите Принять и запустить. В следующий раз при открытии этого документа вас снова попросят проверить код перед запуском.
  * Чтобы навсегда принять код в этом документе, выберите Всегда доверять коду в этом документе и затем выберите Принять и запустить.

Примеры

Запрос и ответ для табличной визуализации

В этом примере используется API dummyjson.com для получения образцов данных о продуктах.

Результат этого вызова API — несколько образцов продуктов в формате JSON. Добавив .products к результату, вы можете передать его напрямую в табличную визуализацию.

1. В Дашбордах откройте или создайте дашборд, который можете редактировать.

2. Откройте меню Добавить и выберите Код.

3. На вкладке Данные вставьте этот код в поле Код и запустите его.

export default async function () {
  const url = "https://dummyjson.com/products";
  const response = await fetch(url);
  const result = await response.json();
  return result.products;
}

4. На вкладке Визуализация выберите Таблица, чтобы увидеть данные в таблице.

Запрос и ответ для визуализации одного значения

В этом примере на основе предыдущего примера вычисляется средняя цена для всех образцов продуктов и передаётся в визуализацию одного значения.

1. В Дашбордах откройте или создайте дашборд, который можете редактировать.

2. Откройте меню Добавить и выберите Код.

3. На вкладке Данные вставьте этот код в поле Код и запустите его.

export default async function () {
  const url = "https://dummyjson.com/products";
  const response = await fetch(url);
  const result = await response.json();

  let avgPrice = 0;
  const numberOfProducts = result.products.length;

  if (!numberOfProducts) {
    return 0;
  }

  for (let i = 0; i < numberOfProducts; i++) {
    avgPrice = avgPrice + result.products[i].price;
  }

  return avgPrice / numberOfProducts;
}

4. На вкладке Визуализация выберите Одно значение, чтобы увидеть среднее значение данных как одно значение.

Расширенный запрос и ответ для списка записей

В этом примере используется API среды Ключ-АСТРОМ для получения событий и создания визуализации списка записей.

1. В Дашбордах откройте или создайте дашборд, который можете редактировать.

2. Откройте меню Добавить и выберите Код.

3. На вкладке Данные вставьте этот код в поле Код.

  * В коде замените следующие заполнители:
    * <your-environment-id> на ID вашей среды Ключ-АСТРОМ (например, wkf12345).
    * <your-api-token> на токен API, который может читать события (например, область действия events.read).

export default async function () {
  const environment = "https://<your-environment-id>.apps.astromkey.com"
  const token = "<your-api-token>";
  const params = '/api/v2/events?eventSelector=status("OPEN")';

  const uri = environment + params;
  const response = await fetch(uri, {
  headers: {
    Accept: "application/json",
    Authorization: "Api-Token " + token
  }});

  const result = await response.json();
  return result.events;
}

4. Выберите Запустить.

5. На вкладке Визуализация выберите Список записей, чтобы увидеть данные в списке записей.

Больше примеров

Чтобы попробовать больше примеров

1. В Дашбордах откройте меню Добавить в верхней части дашборда и прокрутите вниз до раздела Библиотека.

2. Найдите и выберите любую предопределённую плитку кода (обозначенную соответствующим значком) из раздела Библиотека меню.

  * Это добавит выбранный пример на ваш дашборд.

3. Отредактируйте пример по мере необходимости.