columnHeatmap

jQuery column heatmap plugin
06/2020 | v1.0
Mapa de calor baseado nos valores da coluna na tabela, ou seja cada coluna tem seu heatmap próprio.

Obter o plugin

Codester PieceX

Documentação

Inicialização básica

$('#TABLE').columnHeatmap({
    columns: [1, 2, 3, 4]
});
Parâmetro colunas recebe um array com o index da coluna na tabela, a primeira coluna é a 0

Parâmetros

Parâmetro Tipo Padrão Obrigatório Descrição 
columns
 
array
 [] Colunas as quais deve aplicar o heatmap. Primeira coluna é a key 0.
Ex.: Uma tabela com 3 colunas onde pretende aplicar o heatmap apenas na segunda e terceira coluna seria dessa forma: [1, 2]		 
contrast
 
boolean
 true Muda a cor do texto para branco caso a cor de fundo seja mais forte 
inverse
 
boolean
 false Por padrão, o maior valor tem ofundo vermelho e o menor tem o fundo verde, caso esse parâmetro seja verdadeiro, o lógica é invertida. (Cores pordem mudar dependendo do valor do parâmetro colorStartPoint) 
animated
 
boolean
 true Adiciona um fade in 
animationSpeed
 
float
 .1 Velocidade do fade in em segundos 
fn_parseValue
 
function
 null Parse personalizado do valor da celula da tabela. Recebe o texto da celular por parâmetro e deve retornar um número float ou int. Clique aqui para ver um exemplo 
colorStartPoint
 
int
 0 Offset de cores (Padrão de cores HSL), valores de 0 a 360

Parse customizado fn_parseValue

É possível aplicar um parse de valores customizada para cada célula. Por padrão é aplicado o seguinte regex no conteudo da célula para pegar apenas números, vírgulas e pontos: 
/[\d|.|,]+/

Exemplo
Parâmetro: (Conteúdo da célula atual) 
text
Retorno: 
float|int

$('#TABLE').columnHeatmap({
    columns: [1],
    fn_parseValue: (cell_value) => {
        // logic
        cell_value = 1;

        return cell_value;
    }
});

Changelog