TL; DR — Автообновление панели мониторинга Tableau

Мы разработали его с помощью Tableau Web Data Connector. Загрузите и установите этот коннектор данных на свой сервер Tableau один раз, и вы сможете использовать его в любом количестве панелей, размещенных на этом сервере. Чтобы использовать его, вставьте компонент Web Page в панель мониторинга и укажите URL-адрес для коннектора веб-данных. Решение работает только когда панель мониторинга опубликована на Tableau Server и доступна через браузер. По умолчанию, счётчик начнёт отсчитывать 10 секунд, затем вызовет refreshDataAsync API для перезагрузки данных для панели мониторинга до следующего отсчёта. Счётчик может быть настроен (секунды, цвета, размер и т.д.). В удобном для пользователя режиме с использованием параметров, определенных в Tableau Desktop. Все это достигается без необходимости встраивания Tableau Dashboard в любую другую веб-страницу, что является прелестью этого решения.

Обычное решение

Большинство решений, которые в настоящее время существуют, основаны на следующем подходе:
• иметь HTML-страницу;
• встроить панель мониторинга Tableau на эту страницу;
• использовать refreshDataAsync() API в сочетании с setInterval, чтобы это происходило регулярно.
Основной недостаток этого заключается в том, что вам нужна дополнительная HTML-страница, веб-сервер, обслуживающий эту страницу, кто-то разбирающийся в HTML / JavaScript, чтобы настроить это для всех панелей мониторинга, где это требуется, поэтому в целом это не гибко и не очень удобно для пользователя.

Более дружественное для пользователя решение

Подход к решению проблемы:

1. Разработать автономный HTML-файл, который имеет визуально привлекательный счетчик;
2. Развернуть его как веб-соединитель данных на свой сервер Tableau;
3. На этом этапе вы можете добавить компонент веб-страницы на свою панель мониторинга со своей ссылкой, указывающей на коннектор веб-данных (Web Data Connector);
4. Счетчик может быть дополнительно настроен для наилучшего соответствия вашему стилю.
Хорошей новостью является то, что я уже проделал для вас тяжелую работу для шага 1, а шаг 2 вам нужно будет сделать только один раз для каждого сервера Tableau, на который вы хотите это сделать. Шаг 3 является самым простым шагом и может быть выполнен с той же легкостью для любого количества панелей мониторинга. И последнее, но не менее важное: шаг 4 полностью необязателен, значения по умолчанию работают очень хорошо, но если вы хотите настроить счетчик, вы можете это сделать.

Как это установить

Возьмите HTML-файл отсюда (исходный код здесь) и скопируйте его во временную папку на вашем сервере Tableau. Этот файл будет развёрнут как Web Data Connector. Когда вы вошли в систему на вашем Tableau Server с помощью удаленного рабочего стола, вам понадобится командная строка для запуска команды import_webdataconnector. В Tableau 10.x есть два пути включения Web Data Connector, но нам нужен метод импорта для этого решения. Это связано с тем, что мы используем JavaScript API, поэтому нам нужен коннектор веб-данных, который будет работать на том же хосте, где обслуживается Tableau Dashboard, иначе он не будет работать. За дополнительными деталями по настройке Web Data Connector обращайте к официальной документации.

Короче говоря, вот как я импортировал свой коннектор:

C:\Users\tableau\Desktop>tabadmin import_webdataconnector C:\Temp\autoRefresh\tableau-wdc-auto-refresh.html
===== !!Note!! This command is going to be deprecated, please use whitelist_webdataconnector command instead.
===== Importing web data connector to server…
— The web data connector with the following URL was imported to the server:
http://:80/webdataconnectors/tableau-wdc-auto-refresh.html

Вы можете игнорировать предупреждение об устаревшей команде. Запишите URL-адрес, который был возвращен из команды. Если вы обычно обращаетесь к серверу Tableau с DNS-адресом, обязательно обновите URL-адрес соответствующим образом. Если вы не используете собственный порт для запуска вашего сервера Tableau (т. е. ничего, кроме: 80 для http:// и: 443 для https://), вы можете оставить порт. Теперь, когда у вас есть конечный URL-адрес, вы можете опробовать его в браузере. Вы должны увидеть зеленый счетчик с пометкой 10 секунд по умолчанию, и пока больше ничего не происходит, это нормально на данном этапе. Если вы видите зеленый круг, то можете продолжить. Панель мониторинга будет такой, какой была загружена. Если вы знакомы с инструментами разработчика своего браузера, вы можете запустить его вручную с помощью команды countdown.start () в консоли, но это не обязательно, вы увидите всё в действии всего за секунду.

Как использовать

Хорошо, теперь, когда технические подготовки сделаны, остальная часть этого руководства будет намного проще, я обещаю. На данном этапе вы должны иметь URL-адрес коннектора (Web Data Connector), который вы импортировали в предыдущей части.
Откройте Tableau Desktop, либо откройте существующую рабочую книгу, либо создайте новую с любыми данными в ней, это не имеет большого значения. Перейдите в представление «Панель мониторинга» и добавьте новый объект «Веб-страница» с URL-адресом, указывающим на коннектор. Вот и всё, я говорил, что это будет довольно просто. Если вы опубликуете свою Dashboard на этом этапе, вы будете иметь счетчик, работающий со своими значениями по умолчанию (10 секунд, 30px радиус, зеленая палитра цветов и т. д.), И если вы довольны этими значениями по умолчанию, то вы можете считать дело законченным. Если нет, читайте.

Как настроить

Красота JavaScript API Tableau заключается в том, что вы можете читать значения параметров или даже подписываться на события, когда они меняются. Используя силу этого, мы можем настроить счетчик в удобном для пользователя виде, без необходимости вникать в код HTML / JavaScript Web Data Connector. JavaScript API работает только тогда, когда панель «Таблицы» публикуется в Интернете, поэтому, к сожалению, вы не увидите влияния параметров в Tableau Desktop.
Без лишних слов, это список параметров, которые вы можете использовать для настройки вашего счетчика:
• autoRefresh_seconds: Количество секунд для отсчёта
o Тип данных: integer
o Значение по умолчанию: 10
• autoRefresh_radius: Радиус дуги в пикселях
o Тип данных: Float
o Значение по умолчанию: 30
• autoRefresh_direction: Направление отсчета, по часовой стрелке (cw) или против часовой стрелки (CCW)
o Тип данных: String
o Значение по умолчанию: cw
• autoRefresh_smooth: Если таймер будет плавным или прерывистым по секундам
o Тип данных: Boolean
o Значение по умолчанию: True
• autoRefresh_fontSize: Вычисляемый размер шрифта, если опущен (радиус / 1,2)
o Тип данных: Float
o Значение по умолчанию: не определено, рассчитывается по радиусу, например. 30 / 1,2 = 25
• autoRefresh_fontWeight: Ширина шрифта
o Тип данных: integer
o Значение по умолчанию: 700
• autoRefresh_fontColor: Цвет шрифта
o Тип данных: String
o Значение по умолчанию: #ffffff
• autoRefresh_fontFamily: Группа шрифтов
o Тип данных: String
o Значение по умолчанию: Sans-serif
• autoRefresh_label: Подпись под счётчиком. Две надписи должны быть разделены запятыми. Надпись для единственного числа (т.е. Second или sec) и для множественного числа другой обозначение (т.е. Seconds или secs). Если оставить поле пустым, либо определена только одна форма, то надписи отображаться не будут.
o Тип данных: String
o Значение по умолчанию: second, seconds
• autoRefresh_strokeWidth: Ширина штриха, если пущена, вычисляется как радиус/4
o Тип данных: Float
o Значение по умолчанию: Не определено, вычисляется как радиус/4
• autoRefresh_strokeStyle: Цвет штриха
o Тип данных: String
o Значение по умолчанию: #477050
• utoRefresh_fillStyle: Цвет заполнения
o Тип данных: String
o Значение по умолчанию: #8ac575

Для любых параметров, связанных с цветом, используйте цветовой код HEX, начинающийся с ‘#’ — в Интернете есть десятки цветовых палитры.
Таким образом, настройка счётчика выглядит так:
1. Создайте параметр в вашей рабочей таблице Tableau, если не устраивает значение по умолчанию, например. AutoRefresh_radius;
2. Выберите тип данных, указанный выше, и введите новое значение, которое вы хотите использовать;
3. У вас есть возможность скрыть или отобразить элемент управления параметрами в панели мониторинга. Если их отобразить пользователи смогут изменять параметры «на лету» и видеть счетчик, мгновенно подхватывающий новые настройки. Это может пригодится для поиска варианта, который вас устроит;
4. Обратите внимание, что в Tableau Desktop счетчик не покажет ни один из этих параметров, но при публикации в Интернет, он появится.
Просто для повторения, только для опций, которые вы хотите переопределить, вам нужно будет создать параметр, остальные нужно оставить в покое.

Технические лакомые кусочки

Ради полноты я хотел бы рассказать о том, как все это работает под капотом, чтобы вы лучше поняли, нужно ли вникнуть в код.
Когда панель мониторинга запускается с подключенным в нее веб-коннектором данных, то(строка # 320) будет тем, что запускает целую цепь событий, эта функция определена начиная с строки # 301. Countdown._drawCountdownShape и countdown._drawCountdownLabel только там, поэтому в Tableau Desktop вы увидите, когда компонент впервые добавлен в Dashboard, эти строки можно безопасно удалить, если вас это не волнует. Немного ниже этого, функция getTableau — это то, что для нас магия, поэтому мы можем общаться с JavaScript API Tableau даже внутри Web Data Connector. Так как наш код находится внутри собственного кода Tableau в iFrame, используя родительскую функцию JavaScript, мы можем обращаться к родительскому элементу нашего iFrame, поэтому с помощью parent.parent.tableau (строка # 224) мы можем захватить объект JavaScript из Tableau API.
InitAutoRefresh () делает еще две вещи помимо всего этого: подписывается на событие изменения значений параметра (onParamChange) и читает текущий список параметров (getParameters). Оба они в конечном итоге достигнут функции processParam, которая обрабатывает все параметры. Как только все параметры будут обработаны в первый раз, обратный отсчет будет запущен в строке # 251.
Еще один интересный кусок находится в строке # 325. Функция onComplete () объекта обратного отсчета определяет, что делать, когда счетчик тикает. В конечном итоге мы хотим начать новый отсчет времени. Countdown.start () просто сделает это, но проблема в том, что он начнет новый счетчик еще до того, как наша панель мониторинга закончит перезагрузку данных. Это было бы не слишком хорошо, представьте, если у вас есть панель мониторинга, занимающая, например, 8 секунд для обновления, и вы установите счетчик на 10 секунд — у сервера Tableau будет только 2-секундный перерыв. Вот что я хочу вместо этого: перезагрузить данные после того, как счетчик выполнится, дождитесь, пока Dashboard закончит перезагрузку, добавьте новый счетчик. Можно подумать (или хотя бы надеяться), что функция RefreshDataAsync () JavaScript API сообщит нам, когда будет выполнено обновление, но, к сожалению, это не так.
Как я в конечном итоге справился с этим, я использовал MutationObserver, чтобы обнаружить изменения DOM. Этот MutationObserver поддерживается из IE11 и всех других современных браузеров — Tableau 10.x также поддерживает IE11 и выше, поэтому у вас всё будет хорошо. Если вам нужно это решение для более старых версий Tableau и, следовательно, вам нужна поддержка для IE10 и более ранних версий, вам нужно будет поработать над этим куском (или вы также можете обновить свой Tableau Server до новой версии, правильно?). MutationObserver будет искать элемент loadingSpinner — как видно из его названия, это то, что вы видите при загрузке панели. Как только это будет сделано, он начнёт новый отсчёт.

Найти решение у бизнес-партнера Tableau в России.

Форум разработчиков Tableau. Получите ответы на все вопросы по Tableau!