PivotTable.js conditionally change color on text

Question

So I'm working with PivotTable.js which has been a great help at work.

Right now though, I'm trying to get a filter going to change the color of cells or font within the cell depending on the value.

For example, if I have an array of dates in my dataset

dates = ["N/A", "4/12/2016", "7/9/2024", "7/9/2024", "4/1/2013"]

I want to make it so any dates before 6/1/2016 to change colors.

I have my data being passed in locally as a variable 'data' if that makes any difference

   $(function(){
        var derivers = $.pivotUtilities.derivers;
        var renderes = $.extend($.pivoUtilities.renderers, $.pivotUtilities.export_renderers);

        $("#pivot_table").pivotUI(data, {
              derivedAttributes: function(data){
                   // not sure how to access the css of the element from here
              }
              rows: [],
              cols: ["Name", "Date", "Organization", "Cost"],
              renderers: renderers,
              rendererName: "Table"
        });
   });

I've tried going into derivedAttributes, but everything I tried wasn't working.

Any help or brainstorming would be much appreciated on this

Answer 1

So...I actually solved it on my own haha...

One of the great things about PivotTable.js is the flexibility in options and sorting. So I used the onRefresh attribute and fed it this function

onRefresh: function() {


var $labels = $('.pvtRowLabel')

  var today = new Date();
  var d = today.getDate();
  var m = today.getMonth()+1;
  var y = today.getFullYear();
  var date;
  var dateReg = /^\d{1,2}[\/]\d{1,2}[\/]\d{4}$/;

  // Goes through each cell with the class '.pvtRowLabel'
  for (var i=0; i<$labels.length; i++) {
    if ($labels[i].innerHTML.match(dateReg)) {
      date = $labels[i].innerHTML.split('/');
      if (Number(date[2]) == y) {
        if (Number(date[0]) == m) {
          if (Number(date[1]) <= d) {
            $('.pvtRowLabel').eq(i).addClass('expired');
          }
        } else if (Number(date[0]) < m) {
          $('.pvtRowLabel').eq(i).addClass('expired');
        }
      } else if (Number(date[2]) < y) {
        $('.pvtRowLabel').eq(i).addClass('expired');
      }
    }
  };
},

After that, just use a css selecter to specify the color you want to use

.expired { background-color: #F08080 !important; }

The problem with my solution is that it adds more strain on the browser since it's checking the DOM and adding classes every time the table is refreshed. I'm not sure if there's a way to accomplish this when it's first rendered, so those cells are always going to be labeled as expired when generated.

Answer 2

Here's one solution I found to change the font color of a single row in the table, say row no. 5:

$("#pivot-table").pivotUI(data, {
...
            onRefresh: function (config) {
                // Show row no.5 as red
                $("#pivot-table").find('.pvtVal.row5').css('color', 'red');
            },
...
});

Answer 3

I did custom coloring by editing the pivot.min.js file. You may have to tweak the loop to segregate the data and add required css style in the js file.