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