@neuprint/heatmap - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

lib/index.js

@@ -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 @@ }]);

package.json

 {
   "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",

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`;
+        });
+    }
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

26884

increased by2.78%

Lines of code

602

increased by2.91%

No dependency changes