Forum Discussion

Anonymous's avatar
Anonymous
11-11-2021
Solved

Conditional Coloring based on PIVOT Dimension (not value)

Hi All,

I am looking for a way to color the entire row of a PIVOT table based on specific dimension criteria.
The default feature in the PIVOT table is to apply conditional coloring for a value. However, I would like to apply conditional coloring based on the value of a dimension in the pivot table (in this example: name of the row item). 

Does anyone have experience with a widget script to color the entire row of the table based on specific row criteria? 

Example: I want to color the entire row EBITDA in grey (see screenshot attached). 

Note: I am not looking to use the alternating rows/subtotal design feature from the widget itself. 

 

dashboards & reporting
  • javierecfpn's avatar
    javierecfpn
    11-11-2021

    First disable alternative rows on the pivot table then you can do this (it works but just to give you the idea)

    widget.on('domready', function(se, ev) {
	//data grid
	var rows = $('.pivot-container .table-grid--data .table-grid__row', element).not('.table-grid__row-0'); //get all the cells of the column
	var ix = 0;
	rows.each(function() {
		do_row($(this), ix);
		ix++;
   	});
	
	function do_row(row, ix){
		var color = 'cyan';
		var row_el = $(row);
		var c0 = row_el.find('.table-grid__cell--col-0 .table-grid__content__inner'); //name
		var c1 = row_el.find('.table-grid__cell--col-1 .table-grid__content__inner'); //value
		if(c1.text() == '1,001'){
			console.log(c1.text(), color)
			//change the color of the row
			row_el.css("background-color",color);
			//fixed grid
			$('.pivot-container .table-grid--fixed .table-grid__row-' + (ix + 1)).css("background-color",color)
		}
	}
		  
});

    This will do bg color for the entire row, beware of pagination as the row has not been rendered yet this may not work.

     

     

4 Replies

Replies have been turned off for this discussion
  • lharrison's avatar
    lharrison
    Cloud Apps
    11-11-2021

    You can use something like this (Windows Sisense):

     

    widget.on('ready',function(){
	var valueToFind = 'Value'

	var containingRow = $('td.p-dim-member[fidx="1"] div').filter(function(){
		return $(this).text().toUpperCase()==valueToFind.toUpperCase();
	}).closest('tr');
	
	containingRow.css({'background-color':'orange'});
})

     

    Replace the valueToFind with what you're looking for and replace fidx="1" with the column number beginning at 0. Note that this will only work on dimensions, values are different. If you want to just highlight the individual box (so not the whole row) replace closest('tr') with closest('td').

    • Anonymous's avatar
      Anonymous
      11-16-2021

      Hi, lharrison
      thanks for your input. This code was not working for me but maybe because I am using the Linux-based cloud environment? But thank you anyway for the suggestion!

  • javierecfpn's avatar
    javierecfpn
    Cloud Apps
    11-11-2021

    First disable alternative rows on the pivot table then you can do this (it works but just to give you the idea)

    widget.on('domready', function(se, ev) {
	//data grid
	var rows = $('.pivot-container .table-grid--data .table-grid__row', element).not('.table-grid__row-0'); //get all the cells of the column
	var ix = 0;
	rows.each(function() {
		do_row($(this), ix);
		ix++;
   	});
	
	function do_row(row, ix){
		var color = 'cyan';
		var row_el = $(row);
		var c0 = row_el.find('.table-grid__cell--col-0 .table-grid__content__inner'); //name
		var c1 = row_el.find('.table-grid__cell--col-1 .table-grid__content__inner'); //value
		if(c1.text() == '1,001'){
			console.log(c1.text(), color)
			//change the color of the row
			row_el.css("background-color",color);
			//fixed grid
			$('.pivot-container .table-grid--fixed .table-grid__row-' + (ix + 1)).css("background-color",color)
		}
	}
		  
});

    This will do bg color for the entire row, beware of pagination as the row has not been rendered yet this may not work.

     

     

    • Anonymous's avatar
      Anonymous
      11-16-2021

      Thanks a lot! It is working 🙂