Custom js stop after visual is reloaded

Hi @shaun ,

i have created a custom js stylesheet on my dashboard . The problem i am facing is that once i have applied adjustment to table(Expand column, or go to page 2 of the table) . all the existing style will be gone upon loading new data to display on table. how can we stop dashboard going back to its original styling ?

Tier color will change back to its default color when new data is called,

I understand that applying only css will do the trick but i have conditions therefore will need to apply custom js to each visual. Is there any specific things i have to disable on setting ? Code does not give any error, only encounter i have is that custom js style will vanish when data is reloaded on a visual without refreshing the whole page

return function() {

  var f = function() {};
  f.version = "1";
  f.settings = function() {
    return [
      { id: 'Column name', defaultValue: 'Inherent Risk Tier;Residual Risk Tier' }];
  };
  
  f.afterDraw = function () {
      
      var d = arcapi.dataResult();
      var col = arcapi.getSetting('Column name');
      var colArr = col.split(';');
      
      for (var j=0; j<colArr.length; j++) {
        var colIndex = arcapi.dataResult().columnNameToIndex(colArr[j]) + 1;
        var tbl = d3.selectAll("#" + arcapi.chartId() + ' .crosstab-table-container tbody tr:not(:first-child) td:nth-child(' + colIndex + ')');
      
        for (var i=0; i<tbl["0"].length; i++) {
          
          var tier = '';
          var colour = '';
          tier = tbl["0"][i].innerText;
          //console.log(tier);
          
          if (tier.includes('T1')) {
          colour = '#e54343';
          } else if (tier.includes('T2')) {
            colour = '#ed8b00';
          } else if (tier.includes('T3')) {
            colour = '#ffcd00';
          } else if (tier.includes('T4')) {
            colour = '#6aa84f';
          } else if (tier.includes('T5')) {
            colour = '#4caeed';
          } else if (tier.includes('NA')) {
            colour = '#eeeeee';
          } else {
            colour = '#ffffff'
          }
    
          var linGrad = "linear-gradient(to left, " + colour + " 0%, " + colour + " 10%,  #ffffff 10%, #ffffff 100%)";
    
          tbl["0"][i].style.background = linGrad;
        
      }
      }

    
  };
  return f;
} ();

i realised that ajax call was being made, i did an .ajaxComplete function
This will fire js when new data is loaded on visual but its still reverting back to its original stylesheet

    $( document ).ajaxComplete(function() {
            console.log('new data is loaded')
     });

I also did realised that i am able to retain the style set on visual level and after table is refresh to new data. this only apply when i set the main container style , e.g background color : green
const chart = d3.selectAll("#" + arcapi.chartId());

as soon as i change to select a specific tag to retain the style set based on its condition. when visual is reloaded ,visual wont capture customStyle we set on arcadia.

const chart = d3.selectAll("#" + arcapi.chartId() + ' td')

Any Advice? Thanks

I was able to solve the issue by setting timeout after ajax was completed but, i’m unsure if this is the best practice
. is there other alternative method to directly customize visual when new data is reloaded ? e.g accessing ajax file through api ?