Excel like Heatmap or color scales

With this feature, users can replicate Excel-like heatmaps or color scales within a grid context by executing arbitrary Excel formulas. This provides flexibility in data visualization and analysis.

A heatmap is a graphical representation of data where values are depicted as colors in a matrix. Heatmaps are commonly used to visualize the magnitude of values in a dataset, allowing users to quickly identify patterns, trends, and anomalies.

Any arbitrary Excel formula can be executed in context of grid to get its result i.e.,

var result = grid.Formulas().exec("MAX(C:C)")

Using the above concept, in this example Excel formulas are executed in

• column.render callback to generate Excel like heatmap by using MIN and MAX formulas

  function colorScale(ui) {
      var F = this.Formulas(),
          col = pq.toLetter(ui.colIndx),
          range = col + ":" + col,
          min = F.exec("MIN(" + range + ")"),
          max = F.exec("MAX(" + range + ")"),                
          val = ((ui.cellData - min) / (max - min));
                 
      return {
          text: "<span style='color:black;'>"+ ui.formatVal +"</span>",
          style: {
              animation: "kf-color-mix 1s -"+ val +"s linear forwards paused",
              'background-color': 'currentColor'
          }
      }            
  }
  

• rowTemplate to compute rank property of each row based on revenues value by using RANK formula

  rowTemplate: {
      get rank() {
          var F = grid.Formulas(),
              ri = this.pq_ri, //get rowIndx of current row.
              col = pq.toLetter(grid.getColIndx({ dataIndx: 'revenues' }));
  
          return F.exec("RANK(" + col + (ri + 1) + ", " + col + ":" + col + ")"); //i.e., RANK(C1, C:C)
      }
  },