fix: make column group headers fit their text

funkyheatmap · Jan 19, 2025 · 58ccff3 · 58ccff3
1 parent fdede01
commit 58ccff3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/columns.js b/src/columns.js
@@ -12,9 +12,15 @@ import { rowToColData } from './input_util';
  * @property {boolean} colorByRank - whether to color by rank per column instead of by value
  * @property {string} label - id of the column that has the values to display as labels over
  *   the geoms
- * @property {string} id_label - synonym for label
- * @property {string} geom - type of the geom to display. Default is funkyrect for numerical data,
- *   and text for categorical data
+ * @property {string} id_label - synonym for `label`
+ * @property {string} geom - type of the geom to display. Default is `funkyrect` for numerical data,
+ *   and `text` for categorical data
+ * @property {Object} options - additional options for the column
+ * @property {string} options.palette - name of the palette to use for coloring the column.
+ *   Synonym for `palette`
+ * @property {boolean} options.drawGuide - whether to draw a guide at maximum for the bar geom
+ *   column
+ * @property {boolean} options.draw_outline - synonym for `options.drawGuide`
  */
 
 /**
@@ -25,7 +31,7 @@ import { rowToColData } from './input_util';
  * @property {boolean} categorical - whether the column is categorical, computed from the data
  * @property {string} id_color - id of the column that will determine the color for display
  * @property {boolean} colorByRank - whether to color by rank per column instead of by value
- * @property {boolean} scaleColumn - whether to scale the column data to [0, 1]
+ * @property {boolean} scaleColumn - whether to scale the column data to `[0, 1]`
  * @property {string} label - id of the column that has the values to display as labels over the
  *   geoms
  * @property {string} geom - type of the geom to display
@@ -113,6 +119,9 @@ export class Column {
         if (this.geom === 'image' && this.width === undefined) {
             throw `Please, specify width for column with geom=image`;
         }
+        if (this.geom === 'bar' && this.options.draw_outline !== undefined) {
+            this.options.drawGuide = this.options.draw_outline;
+        }
 
         this.sortState = null;
         if (this.numeric) {

diff --git a/src/main.js b/src/main.js
@@ -368,7 +368,7 @@ class FunkyHeatmap {
                     }
                 }
             });
-            if (column.geom === 'bar' && column.options.draw_outline !== false) {
+            if (column.geom === 'bar' && column.options.drawGuide !== false) {
                 maxWidth = P.geomSize * column.width + P.geomPadding;
                 this.body.append('line')
                     .attr('x1', offset + maxWidth)
@@ -409,14 +409,13 @@ class FunkyHeatmap {
             const column = new Column({
                 id: '_group',
                 palette: groupInfo.palette
-            }, 1);
-            column.maybeCalculateStats(null, false);
+            }, [1]);
             assignPalettes([column], this.palettes);
             const lastCol = group[group.length - 1];
             const groupStart = group[0].offset;
             const groupEnd = lastCol.offset + lastCol.widthPx + P.geomPadding;
             const fill = column.palette == 'none' && 'transparent' || column.palette(0.5);
-            groups.append('rect')
+            const rect = groups.append('rect')
                 .attr('x', groupStart)
                 .attr('y', 0)
                 .attr('width', groupEnd - groupStart)
@@ -433,6 +432,12 @@ class FunkyHeatmap {
             if (O.fontSize) {
                 text.attr('font-size', O.fontSize);
             }
+            const { width } = text.node().getBBox();
+            if (width + 2 * P.padding > groupEnd - groupStart) {
+                const diff = width + 2 * P.padding - (groupEnd - groupStart);
+                rect.attr('width', width + 2 * P.padding);
+                rect.attr('x', groupStart - diff / 2);
+            }
             if (O.labelGroupsAbc) {
                 const letter = String.fromCharCode("a".charCodeAt(0) + abcCounter);
                 const text = groups.append('text')