Skip to content

Added optional colors for negative values #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mischabraam wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added optional colors for negative values #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd71a4f
Added optional colors for negative values
Sep 14, 2018
b113f3f
Update README to install fork
May 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions Chart.HeatMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,8 +411,8 @@
removeDataset: function(){
this.datasets.pop();
this.scale.yLabels.pop();
this.scale.steps -= 1;
this.scale.max -= 1;
this.scale.steps -= 1;
this.scale.max -= 1;
this.scale.fit();
this.findMaxAndMin(true);
this.applyColors();
Expand All @@ -422,10 +422,11 @@
applyColors : function(){

this.colorManager.setup(
this.min,
this.max,
this.options.colors,
this.options.colorInterpolation,
this.min,
this.max,
this.options.colors,
this.options.negativeColors,
this.options.colorInterpolation,
this.options.colorHighlightMultiplier
);

Expand Down
107 changes: 85 additions & 22 deletions ColorManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,58 @@ var ColorManager = function(){
return v2*x+v1*(1-x);
}

function getGradientColor(colors, i, base, scaleFactor){
var fIndex = (i-base)*scaleFactor;
function getGradientColor(colors, negativeColors, i, base, scaleFactor, scaleFactorNegative){
var useColors = colors;
var useScaleFactor = scaleFactor;

if (negativeColors) {
if (i < 0) {
i = Math.abs(i);
useColors = negativeColors;

if (scaleFactorNegative === false) {
base = Math.abs(base);
useScaleFactor = Math.abs(scaleFactor);
} else {
useScaleFactor = Math.abs(scaleFactorNegative);
}
}
}

var fIndex = (i-base)*useScaleFactor;
var iIndex = Math.floor(fIndex);
if (iIndex > useColors.length - 1){ iIndex = useColors.length - 1; }
if (iIndex < 0) { iIndex = 0 };

var iv = fIndex - iIndex;
var iIndex1 = iIndex+1;
if (iIndex1 > colors.length - 1){ iIndex1 = iIndex; }
if (iIndex1 > useColors.length - 1){ iIndex1 = iIndex; }

return {
r: interp(colors[iIndex][0], colors[iIndex1][0], iv),
g: interp(colors[iIndex][1], colors[iIndex1][1], iv),
b: interp(colors[iIndex][2], colors[iIndex1][2], iv),
a: interp(colors[iIndex][3], colors[iIndex1][3], iv)
r: interp(useColors[iIndex][0], useColors[iIndex1][0], iv),
g: interp(useColors[iIndex][1], useColors[iIndex1][1], iv),
b: interp(useColors[iIndex][2], useColors[iIndex1][2], iv),
a: interp(useColors[iIndex][3], useColors[iIndex1][3], iv)
};
}

function getIndexedColor(colors, i, base, scaleFactor){
function getIndexedColor(colors, negativeColors, i, base, scaleFactor, scaleFactorNegative){
var index = Math.floor((i-base)*scaleFactor);

if (negativeColors && index < 0) {
index = (index * -1) - 1;
if (index >= negativeColors.length) {
index = negativeColors.length - 1;
}

return {
r: negativeColors[index][0],
g: negativeColors[index][1],
b: negativeColors[index][2],
a: negativeColors[index][3],
};
}

return {
r: colors[index][0],
g: colors[index][1],
Expand All @@ -59,35 +94,63 @@ var ColorManager = function(){
function cssColorToArray(color){
return cssColorParser(color);
}

this.getColor = function(){
console.error('ColorManager: colors have not been setup');
};

this.colors = [];
this.negativeColors = [];

this.setup = function(min, max, colors, colorInterpolation, colorHighlightMultiplier){
this.setup = function (min, max, colors, negativeColors, colorInterpolation, colorHighlightMultiplier) {
var colorFunction, scaleFactor;
var dataLength = max-min;
var base = min;

if (colorInterpolation === 'gradient'){
var dataLength = max - min;

var scaleFactorNegative = false;
var dataLengthNegative = false;

if (negativeColors) {
if (max < 0) {
max = max + 0.000001;
base = max;
} else if (max > 0 && min < 0) {
dataLength = max;
dataLengthNegative = min;
base = 0;
}
}

if (colorInterpolation === 'gradient') {
colorFunction = getGradientColor;
scaleFactor = (colors.length-1)/(dataLength -1);
scaleFactor = (colors.length ) / (dataLength !== 0 ? dataLength : 1);
} else {
colorFunction = getIndexedColor;
scaleFactor = (colors.length)/(dataLength+1);
}

this.colors = colors.map(function(clr){
scaleFactor = (colors.length) / (dataLength + 1);
}

if (negativeColors) {
if (max > 0 && min < 0) {
if (colorInterpolation === 'gradient') {
scaleFactorNegative = (negativeColors.length - 1) / (dataLengthNegative - 1);
} else {
scaleFactorNegative = (negativeColors.length) / (dataLengthNegative + 1);
}
}
}

this.colors = colors.map(function (clr) {
return cssColorToArray(clr);
});

this.getColor = function(dataValue){
var clr = colorFunction(this.colors, dataValue, base, scaleFactor);
this.negativeColors = negativeColors.map(function (clr) {
return cssColorToArray(clr);
});

this.getColor = function (dataValue) {
var clr = colorFunction(this.colors, this.negativeColors, dataValue, base, scaleFactor, scaleFactorNegative);
var hclr = getHighlightColor(clr, colorHighlightMultiplier);

return {
return {
color: rgbString(clr.r, clr.g, clr.b, clr.a),
highlight: rgbString(hclr.r, hclr.g, hclr.b, hclr.a)
};
Expand Down
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ Documentation is available [here](http://tmroyal.github.io/Chart.HeatMap/).

`npm install chart.heatmap.js`

To install from Mischa Braam's fork use command below. If that doesn't work please advise [stack overflow](https://stackoverflow.com/questions/17509669/how-to-install-an-npm-package-from-github-directly) for a solution.

`npm install mischabraam/Chart.Heatmap#master`

### Github

The built distributions are also available in the dst folder in
Expand Down
Loading