切换仪表板过滤器后如何更新 tableau 扩展 API 图表？

Question

I am using Tableau to create a dashboard. I needed the power of D3 in my dashboard, and so I created a Tableau Extension that creates the viz. Here's the skeleton of the JS that uses the Tableau Extensions API functionality:

$(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() and drawChart() are functions I wrote myself that draw the D3 visualizations, these are working. My event handler "works" a bit, in the sense that it is properly triggered when a fitler in the dashboard is changed.

However , my problem is that, when drawChart() is called from within the eventListener, my chart is drawn with the same data , not the new data resulting from the filter being toggled. I understand inherently why this is the case - the eventListener is not refetching data, only redrawing the chart.

My question is then, how do I re-fetch new data to re-draw my viz correctly after the filters are toggled? And also, is there a function that will return to me the filter names + values, that I can use to improve the functionality of my extension? It would be good to have all of the dashboard filters + values in JS to use in this code.

Thanks in advance for any help with this!

Answer 1

The following code refreshes the data source "ABC" and reloads the workbook-

//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 Source

Tableau Writeback Source