Heavily improved font-size calculation for labels

examples/test-heatmap.html

@@ -20,9 +20,6 @@
   let values = [];
   let rows = [];
   let cols = [];
-  const randomHeight = Math.floor(Math.random() * (50 - 20 + 1) + 20);
-  const randomWidth = Math.floor(Math.random() * (50 - 20 + 1) + 20);
-
 
   /**
    * Ignore the code below. It's just some hacks to generate some random data for demo
@@ -70,6 +67,8 @@
   }
 
   function update() {
+    const randomHeight = Math.floor(Math.random() * (50 - 20 + 1) + 20);
+    const randomWidth = Math.floor(Math.random() * (50 - 20 + 1) + 20);
     generateRandomMatrix(randomWidth, randomHeight, -1, 1, true);
     heatmap.update({ values, rows, cols, valueRange: [-1, 1], sequential: true });
   }

src/assets/css/heatmap.css

@@ -10,8 +10,8 @@
     font-weight: bold;
 }
 
-.ac-col-label {
-    font-size: 0.9em;
+.ac-row-label,.ac-col-label {
+
 }
 
 .ac-vert-hl,.ac-hori-hl {

src/charts/impl/Heatmap.js

@@ -60,10 +60,10 @@ export default class extends Chart {
     }
 
     this.margin = {
-      top: this.containerWidth / 10,
+      top: this.containerWidth / 8,
       right: 10,
       bottom: 10,
-      left: this.containerWidth / 10,
+      left: this.containerWidth / 8,
     };
     this.width = this.containerWidth - this.margin.left - this.margin.right;
     this.height = this.containerWidth - this.margin.top - this.margin.bottom;
@@ -131,16 +131,16 @@ export default class extends Chart {
     rect.exit()
       .remove();
 
-    const wrap = (d, i, arr) => {
-      const node = d3.select(arr[i]);
+    function wrap(selection, maxWidth) {
+      const node = d3.select(selection);
       let textLength = node.node().getComputedTextLength();
       let text = node.text();
-      while (textLength > (this.margin.left) && text.length > 0) {
+      while (textLength > maxWidth && text.length > 0) {
         text = text.slice(0, -1);
         node.text(`${text}..`);
         textLength = node.node().getComputedTextLength();
       }
-    };
+    }
 
     const rowLabels = this.svg.selectAll('text.ac-row-label')
       .data(this.rows, d => d);
@@ -164,7 +164,8 @@ export default class extends Chart {
         this.update({});
       })
       .merge(rowLabels)
-      .each(wrap);
+      .style('font-size', `${this.yScale.bandwidth() > 20 ? 20 : this.yScale.bandwidth()}px`)
+      .each((_, i, arr) => wrap(arr[i], this.margin.left - 5));
 
     rowLabels
       .transition()
@@ -196,7 +197,8 @@ export default class extends Chart {
         this.update({});
       })
       .merge(colLabels)
-      .each(wrap);
+      .style('font-size', `${this.xScale.bandwidth() > 20 ? 20 : this.xScale.bandwidth()}px`)
+      .each((_, i, arr) => wrap(arr[i], this.margin.top));
 
     colLabels
       .transition()