@neuprint/heatmap - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/index.js

@@ -23,2 +23,3 @@ "use strict";
 var DEFAULT_WIDTH = 450;
+var DEFAULT_MAX_FONT_SIZE = 30; // as px
 
@@ -65,3 +66,3 @@ var HeatMap =
       var tempYScale = d3.scaleBand().range([0, 0]).domain(rows).padding(0.01);
-      d3.select(target).append('svg').attr("id", "yHeightCheck").append("g").call(d3.axisLeft(tempYScale)).selectAll("text").each(function () {
+      d3.select(target).append("svg").attr("id", "yHeightCheck").append("g").call(d3.axisLeft(tempYScale)).selectAll("text").each(function () {
         maxWidth = Math.max(this.getBoundingClientRect().width, maxWidth);
@@ -78,3 +79,3 @@ });
       var tempXScale = d3.scaleBand().range([0, 0]).domain(columns).padding(0.01);
-      d3.select(target).append('svg').attr("id", "xHeightCheck").append("g").call(d3.axisBottom(tempXScale)).selectAll("text").attr("y", 9).attr("x", -9).attr("dy", ".35em").attr("transform", "rotate(-45)").style("text-anchor", "start").each(function () {
+      d3.select(target).append("svg").attr("id", "xHeightCheck").append("g").call(d3.axisBottom(tempXScale)).selectAll("text").attr("y", 9).attr("x", -9).attr("dy", ".35em").attr("transform", "rotate(-45)").style("text-anchor", "start").each(function () {
         maxWidth = Math.max(this.getBoundingClientRect().height, maxWidth);
@@ -94,3 +95,3 @@ });
 
-      var existingSVGs = target.getElementsByTagName('svg');
+      var existingSVGs = target.getElementsByTagName("svg");
       Array.from(existingSVGs).forEach(function (svg) {
@@ -153,3 +154,4 @@ target.removeChild(svg);
 
-      blocks.append("text").attr("x", xAxis.bandwidth() / 2).attr("y", yAxis.bandwidth() / 2 - 10).style("text-anchor", "middle").attr("pointer-events", "none").attr("dy", ".35em").text(function (d) {
+      var containerMax = Math.min(xAxis.bandwidth(), yAxis.bandwidth());
+      blocks.append("text").text(function (d) {
         if (width / xLabels.length > 80 || d.forceLabel) {
@@ -160,5 +162,15 @@ 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
+        var fontSize = Math.min(DEFAULT_MAX_FONT_SIZE, containerMax / this.getComputedTextLength() * 4);
+        return "".concat(fontSize, "px");
       }); // add the secondary text labels
 
-      blocks.append("text").attr("x", xAxis.bandwidth() / 2).attr("y", yAxis.bandwidth() / 2 + 10).style("text-anchor", "middle").attr("pointer-events", "none").attr("dy", ".35em").text(function (d) {
+      blocks.append("text").text(function (d) {
         if (width / xLabels.length > 80 || d.forceLabel) {
@@ -169,3 +181,9 @@ 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");
+      });
     }
@@ -172,0 +190,0 @@ }]);

package.json

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

src/index.js

@@ -6,2 +6,3 @@ import * as d3 from "d3";
 const DEFAULT_WIDTH = 450;
+const DEFAULT_MAX_FONT_SIZE = 30; // as px
 
@@ -43,3 +44,3 @@ export default class HeatMap {
     d3.select(target)
-      .append('svg')
+      .append("svg")
       .attr("id", "yHeightCheck")
@@ -51,5 +52,4 @@ .append("g")
         maxWidth = Math.max(this.getBoundingClientRect().width, maxWidth);
-      })
-    d3.select("#yHeightCheck")
-      .remove();
+      });
+    d3.select("#yHeightCheck").remove();
 
@@ -61,3 +61,3 @@ return Math.ceil(maxWidth) + 10;
     let maxWidth = 0;
-    const columns = this.xLabels
+    const columns = this.xLabels;
     const tempXScale = d3
@@ -70,3 +70,3 @@ .scaleBand()
     d3.select(target)
-      .append('svg')
+      .append("svg")
       .attr("id", "xHeightCheck")
@@ -83,9 +83,7 @@ .append("g")
         maxWidth = Math.max(this.getBoundingClientRect().height, maxWidth);
-      })
+      });
 
-    d3.select("#xHeightCheck")
-      .remove();
+    d3.select("#xHeightCheck").remove();
 
     return Math.ceil(maxWidth) + 10;
-
   }
@@ -96,3 +94,3 @@
     // remove any previously rendered items
-    const existingSVGs = target.getElementsByTagName('svg');
+    const existingSVGs = target.getElementsByTagName("svg");
     Array.from(existingSVGs).forEach(svg => {
@@ -105,7 +103,15 @@ target.removeChild(svg);
 
-    const margin = { top: bottomMarginHeight, right: 30, bottom: 30, left: leftMarginWidth };
+    const margin = {
+      top: bottomMarginHeight,
+      right: 30,
+      bottom: 30,
+      left: leftMarginWidth
+    };
     const width = this.width - margin.left - margin.right;
     const height = this.height - margin.top - margin.bottom;
 
-    const maxValue = this.data.reduce((acc, currentValue) => Math.max(acc, currentValue.value), 0)
+    const maxValue = this.data.reduce(
+      (acc, currentValue) => Math.max(acc, currentValue.value),
+      0
+    );
 
@@ -136,3 +142,8 @@ const colorScale = d3
       .attr("preserveAspectRatio", "xMinYMin meet")
-      .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
+      .attr(
+        "viewBox",
+        `0 0 ${width + margin.left + margin.right} ${height +
+          margin.top +
+          margin.bottom}`
+      )
       .attr("width", width + margin.left + margin.right)
@@ -164,3 +175,4 @@ .attr("height", height + margin.top + margin.bottom)
     // add the data blocks to the heatmap.
-    const blocks = svg.selectAll()
+    const blocks = svg
+      .selectAll()
       .data(this.data, d => {
@@ -171,6 +183,8 @@ return `${d.column}:${d.row}`;
       .append("g")
-      .attr("transform", function(d) { return `translate(${xAxis(d.column)},${yAxis(d.row)})`; });
+      .attr("transform", function(d) {
+        return `translate(${xAxis(d.column)},${yAxis(d.row)})`;
+      });
 
-
-    blocks.append("rect")
+    blocks
+      .append("rect")
       .attr("width", xAxis.bandwidth())
@@ -181,4 +195,5 @@ .attr("height", yAxis.bandwidth())
       })
-     .on("mouseover", function handleMouseOver(event) {
-        d3.select(this).style("cursor", "pointer")
+      .on("mouseover", function handleMouseOver(event) {
+        d3.select(this)
+          .style("cursor", "pointer")
           .style("fill", "orange");
@@ -192,4 +207,5 @@ // draw pop up with the cell information in it.
         const originalColor = colorScale(d3.select(this).data()[0].value);
-        d3.select(this).style("cursor", "default")
-          .style("fill",originalColor);
+        d3.select(this)
+          .style("cursor", "default")
+          .style("fill", originalColor);
         // remove pop up with the cell information in it.
@@ -211,34 +227,57 @@ if (onMouseOut) {
     // if ( (width / this.xLabels.length) > 80) {
-      // add the text labels
-      blocks.append("text")
-        .attr("x", xAxis.bandwidth() / 2)
-        .attr("y", (yAxis.bandwidth() / 2) - 10)
-        .style("text-anchor", "middle")
-        .attr("pointer-events", "none")
-        .attr("dy", ".35em")
+    // 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) {
+        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")
-        .attr("x", xAxis.bandwidth() / 2)
-        .attr("y", (yAxis.bandwidth() / 2) + 10)
-        .style("text-anchor", "middle")
-        .attr("pointer-events", "none")
-        .attr("dy", ".35em")
+    // add the secondary text labels
+    blocks
+      .append("text")
       .text(function(d) {
-        if ((width / xLabels.length) > 80 || d.forceLabel) {
+        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`;
       });
-    // }
-
-
-
   }
 }

tests/test.js

@@ -17,3 +17,3 @@ import SVGHeatMap from '../src/index';
   {column: 'Dish', row: 'Cish', value: 18, label2: '5', forceLabel: true},
-  {column: 'AlphaXX', row: 'Beta', value: 45, label2: '0'},
+  {column: 'AlphaXX', row: 'Beta', value: 450, label2: '0', forceLabel: true },
   {column: 'Beta', row: 'Cish', value: 21, label2: '3'},
@@ -24,3 +24,8 @@ {column: 'Cish', row: 'AlphaXX', value: 2, label2: '8', forceLabel: true},
 
-const xLabels = ["AlphaXX", "Beta", "Cish", "Dish", "Beta1", "AlphaXX1", "Beta1", "Cish1", "Dish1", "Beta2", "AlphaXX2", "Beta2", "Cish2", "Dish2", "Beta3", "AlphaXXi4", "Beta4", "Cish4", "Dish4", "Beta5", "AlphaXX5", "Beta5", "Cish5", "Dish5", "Beta6", "AlphaXX6", "Beta6", "Cish6", "Dish6", "Beta7"];
+const xLabels = ["AlphaXX", "Beta", "Cish", "Dish"]
+
+for ( let i = 0; i < 3; i+=1) {
+  ["AlphaXX", "Beta", "Cish", "Dish"].forEach(item => {xLabels.push(`${item}${i}`)});
+}
+
 const yLabels = ["AlphaXX", "Beta", "Cish", "Dish", "Beta1"].reverse();
@@ -37,3 +42,3 @@ // grab the target div
 const testData2 = [
-  { column: 'distal', row: 'distal', value: 34 },
+  { column: 'distal', row: 'distal', value: "34", label2: "34" },
   { column: 'distal', row: 'proximal', value: 45 },
@@ -40,0 +45,0 @@ { column: 'proximal', row: 'distal', value:56 },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20903

increased by8.9%

Lines of code

464

increased by15.42%

No dependency changes