Changing Fonts, Rows and Background Styling of Pivots

Comments

51 comments

  • Avatar
    Elliott Herz

    Hey Jessica,

    Yes this is possible with a script. You can do something like this:

    widget.on('ready', function(w, args) {
      $('td.p-dim-member', element).css('border-right-style', 'solid');
    });

     

    You can also restrict the columns to bold based on the fidx attribute. As an example: $('td.p-dim-member[fidx=1]', element).

     

    Here is the before and after:

    0
    Comment actions Permalink
  • Avatar
    Jason Gilbert

    @Joseph Unless I read your post wrong, you implied it was possible to apply formatting to a specific element by ID, is that correct? I was able to get formatting applied to specific classes, but not to any one individual element by ID.

    Based on the above screenshot, I have tried a dozen variations of this:
    $('.pivot__C10.p-total-head.p-dim-member.p-first-data-col',element)
    .css('background-color', '#D8E4BC');

    With no success. I assume I'm missing something simple, but I've been at this for hours and can't see it. Thanks in advance!

     

    0
    Comment actions Permalink
  • Avatar
    Ian Emmons

    Can anyone help me figure out how to get rid of the headers (and the border underneath)?

     

    ie, remove what's in the red box? I can't seem to find the right stuff in dev tools.

    0
    Comment actions Permalink
  • Avatar
    Ramon Lopez

    Hi Ian-

     

    Something like this should work.

     

    widget.on('ready', function(sender, ev){

    var HEADER = "[id=pivot__ACCRowArea]";

    $('.p-head-content, .p-value,#title_span')
    $('[id="' + widget.oid + '"]').find(HEADER).html(""); //header
    $('[id="' + widget.oid + '"]').find(HEADER).css("width", "0px"); //header
    });

    0
    Comment actions Permalink
  • Avatar
    Ian Emmons

    Incredible! Thank you!

    0
    Comment actions Permalink
  • Avatar
    Troy Dunn

    Any ideas on how to stop this script half obscuring the first row?

    0
    Comment actions Permalink
  • Avatar
    Andrew Block (Edited )

    Jason you should be able to use some as follows depending on the order of the total column you want to format:

    widget.on('ready', function(sender, ev){
    $('.p-grand-total-head[fidx=2]').css('background-color','green');
    });

    Or 

    widget.on('ready', function(sender, ev){
    $('.p-grand-total-head[id=pivot__C1]').css('background-color','green');
    });

     

     

    1
    Comment actions Permalink
  • Avatar
    Habiba S

    Is there a way to change the colour of specific columns in the grand total cells to green or red depending on whether the value found there was either above or below zero? 

    0
    Comment actions Permalink
  • Avatar
    Bk Gowda

    How do I format the headers completely? I'm using the below script currently but unable to format the headers completely. Below is the code which I'm using here.

    widget.on("ready", function(w, args) {

    //header columns
    var $ps1 = $(".p-grand-total-head,.p-dim-head", element);
    $ps1.css('font-size' , '14px');
    $ps1.css('font-weight' , 'bold');
    $ps1.css('color' , 'white');
    $ps1.css('background-color' , '#4B6B9E');
    $ps1.css('text-align' , 'center');
    $ps1.css('vertical-align' , 'middle');


    0
    Comment actions Permalink
  • Avatar
    Chris Bridges

    Hey Elliott Herz,

     

    I am trying to do what you're describing but I cannot get it to work using the script that you posted above.

    Why did only two of your columns get highlighted after you added the script instead of all four?

    I'm attempting to add borders like that but I have two variables being used for column headings. I only need to bold based on one of them but cannot figure it out. 

     

    I used this code you created:

    widget.on('ready', function(w, args) {
      $('td.p-dim-member', element).css('border-right-style', 'solid');
    });

     

    Do you have any advice?

     

    Regards,

    Chris

    0
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Hey Chris,

    You can try a script like this:

    //This script works properly when there is 1 row, 2 values, 2 columns
    //Didn't test with subtotals or grandtotals
    widget.on('domready', (el, args) => {
    $('td.p-dim-member-head', element).css({'border-right-style':'solid', 'border-top-style':'solid'}); //Set top + right border for column 2
    $('td[fidx=4]', element).css('border-right', 'solid'); //Set the right border for the 2nd value
    $('td.p-dim-member.p-last-row-col:not([ID])', element).css('border-right', '7px solid');
    $($('td.p-dim-head[fidx=0]', element)[0]).css('border-right', '7px solid');
    });

    Best, Elliott

    0
    Comment actions Permalink
  • Avatar
    Chris Bridges

    Thanks Elliot, I must be doing something wrong because I cannot get it to show anything. My set up is a little different in that we are only using one value. When I have some time i will try and learn how to make it work for this set up. Your example picture above looks awesome.

     

    Thanks,

    Chris

    0
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Hey Chris,

    From the previous screenshot, it looked like you had 1 row, 2 values, 2 columns. If you can send a screenshot of what the pivot looks like without the script, I might be able to get it to work. Otherwise, you can play around with the code that I wrote as an example.

    Hope this helps!

    Best, Elliott

    0
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Hey Chris,

    Try out this version of the script:

    //Didn't test with subtotals or grandtotals
    widget.on('domready', (el, args) => {
    var colspans = [];

    $('td.p-dim-member-head:not(".p-measure-head")', element).css({'border-top':'solid', 'border-right':'solid'}); //set border of the headers

    //loop through each header figuring out how many colspans there are. Need to add a border right to the last td within each colspan.
    $('tr#pivot__ACCRowArea', element).eq(0).children().not('.p-dim-head').each((_,item) => {
    if($(item).attr('colspan')) {
    colspans.push(parseInt($(item).attr('colspan')));
    } else {
    colspans.push(1);
    }
    });

    //loop through each tr tag, and for each td figure out if it is the last td in the colspan, if it is, add a right border
    $('tr:not([ID]):not([CLASS])', element).each((_,tr) => {
    var temp = $.extend(true, [], colspans);
    $('td:not(".p-dim-member, .phantom"):not([originalid])', tr).each((index, td) => {
    if(temp[0] === 1) {
    $(td).css('border-right', 'solid');
    temp.shift();
    } else {
    temp[0] -= 1;
    }
    });
    });

    //add border to the first element
    $('td.p-dim-member.p-last-row-col:not([ID])', element).css('border-right', '7px solid');
    $($('td.p-dim-head[fidx=0]', element)[0]).css('border-right', '7px solid');
    $('.phantom').remove(); //remove the phantom column
    });

    It's a bit more robust of a solution, and takes into account if you have missing data per category.

     

    Hopefully this will work for your needs. Let me know if it works!

    Best, Elliott

    1
    Comment actions Permalink
  • Avatar
    Chris Bridges

    Thanks for your quick response Elliot! That worked and my viewers love it. 

    1
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Glad I could assist! Feel free to take all the credit Chris ;)

    0
    Comment actions Permalink
  • Avatar
    Sam Nicholls

    Hi Elliott,

    Thanks for the plugin that solves something pivot should be able to do!  Much appreciated!

    I have noticed that when I add this scrip to a pivot, the auto-height no longer works and I am unable to drag down on the widget to make it larger.  I could have 30 rows in my pivot, but the widget window only show 3 and I have to scroll to see the rest..  any thoughts?  I am using Sisense version 7.4.3.10110..

    1
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Hey Sam,

    Can you remove the script, and see if the issue is still happening? It might be happening regardless of the pivot script that I provided above. I believe I've seen that happen in 7.4.3, might be worth upgrading to the latest version in a few weeks. If you can't resize the widget, even after removing the script, and you have tried upgrading, at that point I would reach out to support.

    Best, Elliott

    0
    Comment actions Permalink
  • Avatar
    Sam Nicholls

    Hi Elliott,

    Yeah, I removed the plugin as part of the original test to see if this was actually an issue or expected behavior as per design..  Upgrading isn't an option a this moment, and I am always weary of .'0' releases.  Thanks for the help though :)

    Thanks!

    Sam

    0
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Hey Sam,

    I just tested again on my end, and I'm not running into any pivot resize issues. By plugin, do you mean the widget script? Just wanna understand if you are referencing something else. Btw, the most recent version of Sisense is V7.4.4 and V8.0 should be released shortly. So you can always upgrade to V7.4.4 (which is what i'm on), and this is not a .'0' release.

    Best, Elliott

    0
    Comment actions Permalink
  • Avatar
    Sam Nicholls

    Apologies, script..  juggling a dozen of em the moment :)

    Again, upgrading right now not an option.  Even to 7.4.4. 

    I will wait until we update down the road.. thanks for the help. 

    0
    Comment actions Permalink

Please sign in to leave a comment.