Forum Discussion

gds's avatar
gds
Data Storage
02-09-2024

Change cell color on Widget (Edit Script)

Is there a way that I can change a cell color based on a 2 different columns? Currently, I am able to update the color of the 'Days Since Last Version' , but also want to update the 'Days Since Last Version' cells if the Current Version is not a Major Version.

This is current script that is correctly returning colors based on the the 'Days Since Last Version' cells only:

widget.transformPivot({ type: ['value'] }, function(metadata, cellData) {
 if(metadata.measure.title === "Days Since Last Version"){
 
  if(cellData.value > '31'){     
  cellData.style.backgroundColor = '#ff9c8a';
  }
  else if (cellData.value <= '31'){
  cellData.style.backgroundColor = '#b1ffae';
  }  
 }
 });
 

However, I would also like to change the cell color in the 'Days Since Last Version' if the Current Version is not a major version. I am assuming my syntax in the highlighted below is incorrect?

Another option, perhaps preferable, would be to highlight the 'Current Version' column cells instead, if in a minor version (minor version is not a whole number) , if that is easier? Thanks for any suggestions!

 

 

 

 

dashboards & reporting

2 Replies

Replies have been turned off for this discussion
  • gds's avatar
    gds
    Data Storage
    02-13-2024

    This code gets me what I need, but I don't believe it is the most efficient manner, as I had to manually exclude certain titles from appearing. Any suggestions would be helpful. Thank you!

     

     
    To learn how you can access the Widget and Dashboard objects, see the online documentation at https://sisense.dev/guides/js/extensions
    */
     
    widget.transformPivot({ type: ['value'] }, function(metadata, cellData) {
     if(metadata.measure.title === "Days Since Last Version" ){
     
      if(cellData.value > '31'){     
      cellData.style.backgroundColor = '#ff9c8a';
      }
      else if (cellData.value <= '31'){
      cellData.style.backgroundColor = '#b1ffae';
      }
      
      
     }
     
    if   (metadata.measure.title === "Current Version" && metadata.measure.title("Current Version").cellData.value % 1 !=0){
     
    cellData.style.backgroundColor = '#fffcae';
    }
     });
     
    var columns = [6,0]; //select the date columns that should be transformed
    var colors = ['yellow','white']; //color when true, color when false
    //condition_value = '1.2' //set to the desired condition value
     
    widget.on('ready', function(se, ev){
    $.each(columns, function(index, value){
    num = $("tbody tr:first").children().length - value;
    var e = element;
    var w = widget;
    var d = dashboard;
     
    $("tbody tr" , e).not('.wrapper, .p-head-content').each(function(){
    var cell = $(this).children().last();
    for (var a = 0; a < num; a++){
    cell = cell.prev();
    }
     
    var cell_value = cell.text()
    if ( cell_value % 1 != 0 && cell_value !== "Current Version"  && cell_value !== "Days Since Last Version" && cell_value !== "it") {
    $(cell).css("background-color", colors[0]);
    }
    else{
    $(cell).css("background-color", colors[1]);
    }
    });
    });
    });