Как обновить график API расширений таблиц после переключения фильтра панели мониторинга? - PullRequest
Новая
       19

Как обновить график API расширений таблиц после переключения фильтра панели мониторинга?

2 голосов
/ 11 февраля 2020

Я использую Tableau для создания панели инструментов. Мне нужна была сила D3 в моей приборной панели, и поэтому я создал Tableau Extension, который создает viz. Вот скелет JS, который использует функциональность API Tableau Extensions: 

$(document).ready(function () {
  console.log('were in again'); 
  tableau.extensions.initializeAsync().then(function () {

    // To get dataSource info, first get the dashboard.
    const dashboard = tableau.extensions.dashboardContent.dashboard;
    const worksheets = dashboard.worksheets;

    let underlyingDataFetchPromises = [];
    let dataObjects = {};
    let worksheetNames = [];

    // Save Promises to Array + Add Event Listeners
    dashboard.worksheets.forEach(worksheet => {
      worksheetNames.push(worksheet.name);
      underlyingDataFetchPromises.push(worksheet.getUnderlyingDataAsync());

      // add event listener too...
      worksheet.addEventListener(tableau.TableauEventType.FilterChanged, (filterEvent) => {
        clearChart();
        drawChart(dataObjects.dataA, dataObjects.dataB);
      });
    });

    // Maps dataSource id to dataSource so we can keep track of unique dataSources.
    Promise.all(underlyingDataFetchPromises).then(fetchedData => {

      // loop over the 2 fetchedData arrays [(1) dataA, (2) dataB]
      fetchedData.forEach((dataTable, i) => {
        let data = dataTable.data;
        let columns = dataTable.columns;
        let formattedData = formatData(data, columns);
        dataObjects[worksheetNames[i]] = formattedData;
      });

      // currently requires worksheets named "dataA" and "dataB"... not flexible atm
      drawChart(dataObjects.dataA, dataObjects.dataB);
    });

  }, function (err) {
    // Something went wrong in initialization.
    console.log('Error while Initializing: ' + err.toString());
  }); 
});

cleanData() и drawChart() - это функции, которые я сам написал, которые рисуют визуализации D3, они работают. Мой обработчик событий немного «работает» в том смысле, что он корректно срабатывает при изменении фитлера на панели мониторинга.

Однако , моя проблема в том, что когда drawChart() вызывается из EventListener, моя диаграмма рисуется с теми же данными , а не с новыми данными, получающимися в результате от переключаемого фильтра. По сути, я понимаю, почему это так - eventListener не обновляет данные, а только перерисовывает диаграмму.

Тогда у меня вопрос: как мне заново получить новые данные, чтобы правильно перерисовать мой визит после переключения фильтров? А также, есть ли функция, которая возвращает мне имена фильтров + значения, которые я могу использовать для улучшения функциональности моего расширения? Было бы хорошо иметь все фильтры и значения панели мониторинга в JS для использования в этом коде.

Заранее спасибо за любую помощь в этом!

1 Ответ

2 голосов
/ 11 февраля 2020

Следующий код обновляет источник данных «AB C» и перезагружает книгу - 

//The following code is used to refresh the data source 
// Wrap everything in an anonymous function to avoid polluting the global namespace
function refreshMySql() {
  $(document).ready(function() {
      tableau.extensions.initializeAsync().then(function() {
          // Since dataSource info is attached to the worksheet, we will perform
          // one async call per worksheet to get every dataSource used in this
          // dashboard.  This demonstrates the use of Promise.all to combine
          // promises together and wait for each of them to resolve.
          let dataSourceFetchPromises = [];

          // Maps dataSource id to dataSource so we can keep track of unique dataSources.
          let dashboardDataSources = {};

          // To get dataSource info, first get the dashboard.
          const dashboard = tableau.extensions.dashboardContent.dashboard;

          // Then loop through each worksheet and get its dataSources, save promise for later.
          dashboard.worksheets.forEach(function(worksheet) {
              dataSourceFetchPromises.push(worksheet.getDataSourcesAsync());
          });
          Promise.all(dataSourceFetchPromises).then(function(fetchResults) {
              fetchResults.forEach(function(dataSourcesForWorksheet) {
                  dataSourcesForWorksheet.forEach(function(dataSource) {
                      if (!dashboardDataSources[dataSource.id]) { // We've already seen it, skip it.
                          dashboardDataSources[dataSource.id] = dataSource;
                          var datasourceName = dashboardDataSources[dataSource.id].name;
                          if (dashboardDataSources[dataSource.id].name == "ABC") {

                              refreshDataSource(dashboardDataSources[dataSource.id]);
                              console.log("refreshSql() was called for Datasource Name: 'ABC'");
                          }


                      }
                  });
              });
          });
      }, function(err) {
          // Something went wrong in initialization.
          console.log('Error while Initializing: ' + err.toString());
      });
  });
  // Refreshes the given dataSource.
  function refreshDataSource(dataSource) {
      dataSource.refreshAsync().then(function() {
          //alert(dataSource.name + ': Refreshed Successfully');
          console.log(dataSource.name + ': Refreshed Successfully');
      });
  }

}

Источник GitHub

Источник обратной записи таблицы

...