@neuprint/heatmap
Advanced tools
Comparing version 0.7.0 to 0.8.0
@@ -55,2 +55,8 @@ "use strict"; | ||
} | ||
if (props.textLabels === null) { | ||
this.textLabels = true; | ||
} else { | ||
this.textLabels = props.textLabels; | ||
} | ||
} | ||
@@ -113,3 +119,4 @@ | ||
maxColor = this.maxColor, | ||
xLabels = this.xLabels; // remove any previously rendered items | ||
xLabels = this.xLabels, | ||
textLabels = this.textLabels; // remove any previously rendered items | ||
@@ -231,35 +238,38 @@ var existingSVGs = target.getElementsByTagName("svg"); | ||
// add the text labels | ||
// TODO: need to calculate the width and height of each square before looping over each one. | ||
var containerMax = Math.min(xAxis.bandwidth(), yAxis.bandwidth()); | ||
blocks.append("text").text(function (d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label || d.value; | ||
} | ||
if (textLabels) { | ||
var containerMax = Math.min(xAxis.bandwidth(), yAxis.bandwidth()); | ||
blocks.append("text").text(function (d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label || d.value; | ||
} | ||
return null; | ||
}).attr("x", xAxis.bandwidth() / 2).attr("y", function (d) { | ||
if (d.label2) { | ||
return yAxis.bandwidth() / 2 - this.getBoundingClientRect().height; | ||
} | ||
return null; | ||
}).attr("x", xAxis.bandwidth() / 2).attr("y", function (d) { | ||
if (d.label2) { | ||
return yAxis.bandwidth() / 2 - this.getBoundingClientRect().height; | ||
} | ||
return yAxis.bandwidth() / 2; | ||
}).style("text-anchor", "middle").attr("pointer-events", "none").attr("dy", ".35em").style("font-size", function () { | ||
// determine which is smaller width or height | ||
var fontSize = Math.min(DEFAULT_MAX_FONT_SIZE, containerMax / this.getComputedTextLength() * 4); | ||
return "".concat(fontSize, "px"); | ||
}); // add the secondary text labels | ||
return yAxis.bandwidth() / 2; | ||
}).style("text-anchor", "middle").attr("pointer-events", "none").attr("dy", ".35em").style("font-size", function () { | ||
// determine which is smaller width or height | ||
var fontSize = Math.min(DEFAULT_MAX_FONT_SIZE, containerMax / this.getComputedTextLength() * 4); | ||
return "".concat(fontSize, "px"); | ||
}); // add the secondary text labels | ||
blocks.append("text").text(function (d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label2; | ||
} | ||
blocks.append("text").text(function (d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label2; | ||
} | ||
return null; | ||
}).attr("x", xAxis.bandwidth() / 2).attr("y", function () { | ||
return yAxis.bandwidth() / 2 + this.getBoundingClientRect().height; | ||
}).style("text-anchor", "middle").attr("pointer-events", "none").attr("dy", ".35em").style("font-size", function () { | ||
// determine which is smaller width or height | ||
var fontSize = Math.min(DEFAULT_MAX_FONT_SIZE, containerMax / this.getComputedTextLength() * 4); | ||
return "".concat(fontSize, "px"); | ||
}); | ||
return null; | ||
}).attr("x", xAxis.bandwidth() / 2).attr("y", function () { | ||
return yAxis.bandwidth() / 2 + this.getBoundingClientRect().height; | ||
}).style("text-anchor", "middle").attr("pointer-events", "none").attr("dy", ".35em").style("font-size", function () { | ||
// determine which is smaller width or height | ||
var fontSize = Math.min(DEFAULT_MAX_FONT_SIZE, containerMax / this.getComputedTextLength() * 4); | ||
return "".concat(fontSize, "px"); | ||
}); | ||
} | ||
} | ||
@@ -266,0 +276,0 @@ }]); |
{ | ||
"name": "@neuprint/heatmap", | ||
"version": "0.7.0", | ||
"version": "0.8.0", | ||
"description": "Produces an SVG heat map when provided with a data grid.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
114
src/index.js
@@ -21,2 +21,7 @@ import * as d3 from "d3"; | ||
} | ||
if (props.textLabels === null) { | ||
this.textLabels = true; | ||
} else { | ||
this. textLabels = props.textLabels; | ||
} | ||
} | ||
@@ -97,3 +102,3 @@ | ||
render(target) { | ||
const { onClick, onMouseOver, onMouseOut, maxColor, xLabels } = this; | ||
const { onClick, onMouseOver, onMouseOut, maxColor, xLabels, textLabels } = this; | ||
// remove any previously rendered items | ||
@@ -277,56 +282,61 @@ const existingSVGs = target.getElementsByTagName("svg"); | ||
// add the text labels | ||
const containerMax = Math.min(xAxis.bandwidth(), yAxis.bandwidth()); | ||
blocks | ||
.append("text") | ||
.text(function(d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label || d.value; | ||
} | ||
return null; | ||
}) | ||
.attr("x", xAxis.bandwidth() / 2) | ||
.attr("y", function(d) { | ||
if (d.label2) { | ||
return yAxis.bandwidth() / 2 - this.getBoundingClientRect().height; | ||
} | ||
return yAxis.bandwidth() / 2; | ||
}) | ||
.style("text-anchor", "middle") | ||
.attr("pointer-events", "none") | ||
.attr("dy", ".35em") | ||
.style("font-size", function() { | ||
// determine which is smaller width or height | ||
const fontSize = Math.min( | ||
DEFAULT_MAX_FONT_SIZE, | ||
(containerMax / this.getComputedTextLength()) * 4 | ||
); | ||
return `${fontSize}px`; | ||
}); | ||
// TODO: need to calculate the width and height of each square before looping over each one. | ||
// add the secondary text labels | ||
blocks | ||
.append("text") | ||
.text(function(d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label2; | ||
} | ||
return null; | ||
}) | ||
.attr("x", xAxis.bandwidth() / 2) | ||
.attr("y", function() { | ||
return yAxis.bandwidth() / 2 + this.getBoundingClientRect().height; | ||
}) | ||
.style("text-anchor", "middle") | ||
.attr("pointer-events", "none") | ||
.attr("dy", ".35em") | ||
.style("font-size", function() { | ||
// determine which is smaller width or height | ||
const fontSize = Math.min( | ||
DEFAULT_MAX_FONT_SIZE, | ||
(containerMax / this.getComputedTextLength()) * 4 | ||
); | ||
return `${fontSize}px`; | ||
}); | ||
if (textLabels) { | ||
const containerMax = Math.min(xAxis.bandwidth(), yAxis.bandwidth()); | ||
blocks | ||
.append("text") | ||
.text(function(d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label || d.value; | ||
} | ||
return null; | ||
}) | ||
.attr("x", xAxis.bandwidth() / 2) | ||
.attr("y", function(d) { | ||
if (d.label2) { | ||
return yAxis.bandwidth() / 2 - this.getBoundingClientRect().height; | ||
} | ||
return yAxis.bandwidth() / 2; | ||
}) | ||
.style("text-anchor", "middle") | ||
.attr("pointer-events", "none") | ||
.attr("dy", ".35em") | ||
.style("font-size", function() { | ||
// determine which is smaller width or height | ||
const fontSize = Math.min( | ||
DEFAULT_MAX_FONT_SIZE, | ||
(containerMax / this.getComputedTextLength()) * 4 | ||
); | ||
return `${fontSize}px`; | ||
}); | ||
// add the secondary text labels | ||
blocks | ||
.append("text") | ||
.text(function(d) { | ||
if (width / xLabels.length > 80 || d.forceLabel) { | ||
return d.label2; | ||
} | ||
return null; | ||
}) | ||
.attr("x", xAxis.bandwidth() / 2) | ||
.attr("y", function() { | ||
return yAxis.bandwidth() / 2 + this.getBoundingClientRect().height; | ||
}) | ||
.style("text-anchor", "middle") | ||
.attr("pointer-events", "none") | ||
.attr("dy", ".35em") | ||
.style("font-size", function() { | ||
// determine which is smaller width or height | ||
const fontSize = Math.min( | ||
DEFAULT_MAX_FONT_SIZE, | ||
(containerMax / this.getComputedTextLength()) * 4 | ||
); | ||
return `${fontSize}px`; | ||
}); | ||
} | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
26884
602