JavaScript API Tableau / Введение

Последние 5 лет я много программировал на JavaScript, от простого jQuery до Angular и React. Это было в основном для моих личных проектов, и, что удивительно, я не тратил слишком много времени на изучение JavaScript API Tableau, так почему бы не взглянуть. JavaScript API Tableau позволяет вам делать с Tableau несколько вещей:

• Встраивайте визуализации данных из Tableau Server, Tableau Public и Tableau Online внутрь веб-страниц.
• Отфильтруйте данные внутри визуализаций с помощью элементов управления HTML.
• Выберите метки на панели инструментов.
• Реагируйте на события в панели управления.
• Экспорт панели мониторинга в различные выходные форматы.

В этой вводной статье мы стремимся научить вас работать в течение 10 минут, да, 10 минут. В других наших технических статьях мы установили много программного обеспечения, но в этом руководстве мы будем использовать онлайн-платформу для кодирования, поэтому, сказав это и сделав, давайте приступим к делу.

Примечание. Одним из моих побочных проектов в следующем году будет создание портала Tableau с открытым исходным кодом, просто для развлечения. Если есть программисты, отправьте мне сообщение.

Начиная

Давайте сначала начнем, открыв веб-браузер, перейдя на https://codepen.io и создав учетную запись.

CodePen – это интернет-сообщество для тестирования и демонстрации созданных пользователями фрагментов кода HTML, CSS и JavaScript. Он функционирует как онлайн-редактор кода и среда обучения с открытым исходным кодом, где разработчики могут создавать фрагменты кода, творчески названные «ручками», и тестировать их. Он был основан в 2012 году разработчиками полного стека Алексом Васкесом, Тимом Сабатом и фронтенд-дизайнером Крисом Койером. Его сотрудники работают в децентрализованной, удаленной среде, редко встречаясь лично. CodePen — одно из крупнейших сообществ веб-дизайнеров и разработчиков, демонстрирующих свои навыки кодирования, с примерно 330 000 зарегистрированных пользователей и 16,9 млн посетителей в месяц.

CodePen — это бесплатный онлайн-сервис, и я лично использую codepen для всех своих быстрых веб-фрагментов. Премиум-аккаунт имеет дополнительные функции, но эти премиум-функции не требуются для нашего руководства.

Создание вашей первой ручки

После того, как вы создали и подтвердили свою учетную запись, вы теперь сможете создавать веб-фрагменты в Интернете, называемые Pen, поэтому давайте начнем, перейдя к Создать (вверху слева- угол руки) и выберите Перо. Это откроет онлайн-редактор, который состоит из:

• Редактор HTML — это место, где находится ваш HTML, структура вашей веб-страницы.
• Редактор CSS. Здесь вы размещаете код каскадных таблиц стилей (CSS), который определяет внешний вид вашей веб-страницы.
• Редактор JS. Здесь вы размещаете свой код JavaScript, чтобы добавить функциональность на свою веб-страницу.
• Настройки. Откроется меню настроек, в котором вы можете добавить внешние файлы CSS, библиотеки JavaScript, определить препроцессоры и поведение пера.

Примечание. Не забудьте присвоить перу заголовок в верхнем левом углу экрана. Также помните, что при использовании бесплатной учетной записи ваши ручки становятся общедоступными, поэтому любой может их просмотреть; для фрагментов это не должно быть проблемой.

Давайте настроим наши внешние библиотеки и зависимости:

• Нажмите Настройки.
• Нажмите CSS.
• В поиске Добавить внешние таблицы стилей/ручки введите twitter-bootstrap и нажмите на результаты, чтобы добавить эту библиотеку в свою ручку. В этой статье мы добавили Bootstrap 4.1.3.
• Нажмите JavaScript.
• В поиске Добавить внешний скрипт/ручки введите jQuery и добавьте его в свою ручку. В этой статье мы добавили jQuery 3.3.1.
• В одно из пустых полей скопируйте и вставьте следующее: https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js. Это добавит библиотеку JavaScript Tableau в ваше перо.

и это все, мы настроили все, что нам нужно, поэтому теперь мы можем начать использовать API JavaScript Tableau для встраивания общедоступной панели инструментов Tableau.

Встраивание визуализации Tableau

Давайте начнем с ввода следующего в наш редактор HTML:

<div class="buttons">
   <button class="apply_RegionFilter btn" style="background-color: #a8dba2; ">Europe</button>
   <button class="apply_RegionFilter btn" style="background-color: #f5a8a3; ">Middle East</button>
   <button class="apply_RegionFilter btn" style="background-color: #afc8e3; ">The Americas</button>
   <button class="apply_RegionFilter btn" style="background-color: #d0bde0; ">Oceania</button>
   <button class="apply_RegionFilter btn" style="background-color: #ffc898; ">Asia</button>
   <button class="apply_RegionFilter btn" style="background-color: #cdb2ac; ">Africa</button>
   <button class="selectAll_RegionFilter btn btn-outline">All</button>
</div>
<div id="tableauViz"></div>

Мы здесь:

• Создание нескольких кнопок с помощью класса Bootstrap btn.
• Настройка цвета кнопок в соответствии с цветами визуализации данных.
• Создание пустого div с идентификатором tableauViz.

Теперь давайте добавим небольшой пользовательский стиль, добавив следующее в наш Редактор CSS:

.btn {
   margin: 5px;
}

Обратите внимание на самый интересный фрагмент кода, но мы даем нашим кнопкам небольшой запас.

Наконец, давайте введем следующее в наш редактор JS:

$( document ).ready(function() {
   var viz, workbook, activeSheet; 
   var placeholderDiv = document.getElementById("tableauViz");
   var url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita";
   var options = {
      width: "100%",
      height: "600px",
      hideTabs: true,
      hideToolbar: true,
      onFirstInteractive: function () {
         workbook = viz.getWorkbook();
         activeSheet = workbook.getActiveSheet();
      } 
   };
   viz = new tableau.Viz(placeholderDiv, url, options);
   $(".apply_RegionFilter").click(function() {
      activeSheet.applyFilterAsync(
         "Region",
         $(this).text(),
         tableau.FilterUpdateType.REPLACE
      );
   });
   $(".selectAll_RegionFilter").click(function() {
      activeSheet.clearFilterAsync("Region");
   });
});

Теперь давайте немного углубимся в это:

• $(document).ready() происходит из jQuery и выполняет код после того, как объектная модель документа (DOM) загружена и готова к манипулированию.
• document.getElementById("tableauViz") возвращает элемент div в HTML, мы разместим здесь нашу визуализацию Tableau.
• Мы устанавливаем нашу переменную URL так, чтобы она указывала на общедоступную визуализацию Tableau, эта переменная используется в официальном руководстве по JavaScript API Tableau, так почему бы не использовать ее повторно.
• Мы устанавливаем переменную options, которая описывает, как будет отображаться наша визуализация. У вас есть полный список вариантов здесь: https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm, найдите VizCreateOptions.
• Затем мы вызываем new tableau.Viz(placeholderDiv, url, options), который создает визуализацию Tableau, указанную в URL-адресе, с указанными параметрами и где идентификатором div является tableauViz.
• $(“.apply_RegionFilter”).click() устанавливает действие для кнопок с помощью класса apply_RegionFilter. Это действие берет текст кнопки и применяет его в качестве фильтра к региону.
• $(“.selectAll_RegionFilter”).click() устанавливает действие для кнопки с помощью класса selectAll_RegionFilter. Это действие очищает выбор фильтра.

Если все сделано правильно, теперь вы должны увидеть что-то вроде следующего:

и бум, все готово, вы сможете нажимать на кнопки и взаимодействовать со встроенной визуализацией Tableau. Этот учебник предназначен для введения, и есть довольно много интересных вещей, которые вы можете сделать с API JavaScript, поэтому, пожалуйста, изучите или ждите моей следующей статьи, в любом случае, я надеюсь, что это вас взволновало, однако, с помощью JavaScript API вы также можете:

• Перемещение между вкладками.
• Выберите отметки.
• Выберите листы.
• Слушайте события.
• Доступ к функциям панели инструментов.

Мою ручку можно найти здесь: https://codepen.io/thoang1000/pen/XobNma

Резюме

В этом уроке мы охватили большое количество земли. Мы посмотрели:

• Настройка нашей учетной записи codepen.
• Создание пера и добавление нескольких библиотек:
• Bootstrap для внешнего вида компонента.
• jQuery для взаимодействия с нашим HTML.
• Библиотека API Tableau.
• Создали наше первое приложение Pen и Javascript API, которое:
• Встраивание визуализации Tableau Public в веб-страницу.
• Установка параметров для визуализации.
• Применение фильтров к визуализации.

Надеюсь, вам всем понравилась эта статья так же, как мне понравилось ее писать. Дайте мне знать, если у вас возникнут какие-либо проблемы с запуском и запуском, и, как обычно, оставьте комментарий ниже или свяжитесь со мной в Твиттере @Tableau_Magic.

Подробнее о Tableau JavaScript API читайте на официальном сайте: https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_whats_new.htm