@neuprint/heatmap - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

lib/index.js

@@ -49,2 +49,8 @@ "use strict";
     this.onMouseOut = props.onMouseOut;
+
+    if (props.maxWidthOn === null) {
+      this.maxWidthOn = true;
+    } else {
+      this.maxWidthOn = props.maxWidthOn;
+    }
   }
@@ -155,5 +161,11 @@
       var yAxis = d3.scaleBand().range([height, 0]).domain(rows).padding(0.01);
-      var svg = d3.select(target).append("svg").attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", "0 0 ".concat(width + margin.left + margin.right, " ").concat(height + margin.top + margin.bottom)).attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).attr("style", "max-width: 100%").append("g").attr("id", "margin-offset").attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")); // add the x axis to the heatmap
+      var svg = d3.select(target).append("svg").attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", "0 0 ".concat(width + margin.left + margin.right, " ").concat(height + margin.top + margin.bottom)).attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
 
-      svg.append("g").attr("transform", "translate(-1.5,0)").call(d3.axisTop(xAxis)).selectAll("text").attr("y", -9).attr("x", 9).attr("dy", ".35em").attr("transform", "rotate(-45)").style("text-anchor", "start").style("fill", function (d) {
+      if (this.maxWidthOn) {
+        svg.attr("style", "max-width: 100%");
+      }
+
+      var imgGroup = svg.append("g").attr("id", "margin-offset").attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")); // add the x axis to the heatmap
+
+      imgGroup.append("g").attr("transform", "translate(-1.5,0)").call(d3.axisTop(xAxis)).selectAll("text").attr("y", -9).attr("x", 9).attr("dy", ".35em").attr("transform", "rotate(-45)").style("text-anchor", "start").style("fill", function (d) {
         if (Object.prototype.hasOwnProperty.call(xAxisColorLookup, d)) {
@@ -166,3 +178,3 @@ return yAxisColorLookup[d];
 
-      svg.append("g").attr("transform", "translate(-1.5, 0)").call(d3.axisLeft(yAxis)).selectAll("text").style("fill", function (d) {
+      imgGroup.append("g").attr("transform", "translate(-1.5, 0)").call(d3.axisLeft(yAxis)).selectAll("text").style("fill", function (d) {
         if (Object.prototype.hasOwnProperty.call(yAxisColorLookup, d)) {
@@ -175,3 +187,3 @@ return yAxisColorLookup[d];
 
-      var blocks = svg.selectAll().data(this.data, function (d) {
+      var blocks = imgGroup.selectAll().data(this.data, function (d) {
         return "".concat(d.column, ":").concat(d.row);
@@ -178,0 +190,0 @@ }).enter().append("g").attr("transform", function (d) {

package.json

 {
   "name": "@neuprint/heatmap",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Produces an SVG heat map when provided with a data grid.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.js

@@ -16,2 +16,7 @@ import * as d3 from "d3";
     this.onMouseOut = props.onMouseOut;
+    if (props.maxWidthOn === null) {
+      this.maxWidthOn = true;
+    } else {
+      this.maxWidthOn = props.maxWidthOn;
+    }
   }
@@ -166,3 +171,8 @@
       .attr("height", height + margin.top + margin.bottom)
-      .attr("style", "max-width: 100%")
+
+    if (this.maxWidthOn) {
+      svg.attr("style", "max-width: 100%");
+    }
+
+    const imgGroup = svg
       .append("g")
@@ -173,3 +183,3 @@ .attr("id", "margin-offset")
     // add the x axis to the heatmap
-    svg
+    imgGroup
       .append("g")
@@ -192,3 +202,3 @@ .attr("transform", `translate(-1.5,0)`)
     // add the y axis to the heatmap
-    svg
+    imgGroup
       .append("g")
@@ -206,3 +216,3 @@ .attr("transform", `translate(-1.5, 0)`)
     // add the data blocks to the heatmap.
-    const blocks = svg
+    const blocks = imgGroup
       .selectAll()
@@ -209,0 +219,0 @@ .data(this.data, d => {

tests/test.js

@@ -8,3 +8,4 @@ import SVGHeatMap from '../src/index';
   // height: 300,
-  // width: 300,
+  width: 800,
+  maxWidthOn: false
 });
@@ -26,3 +27,3 @@
 
-for ( let i = 0; i < 2; i+=1) {
+for ( let i = 0; i < 7; i+=1) {
   ["AlphaXX", "Beta", "Cish", "Dish"].forEach(item => {xLabels.push(`${item}${i}`)});
@@ -29,0 +30,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

26158

increased by1.73%

Lines of code

585

increased by3.17%

No dependency changes