feat: image geom

package.json

@@ -15,7 +15,7 @@
         }
     },
     "scripts": {
-        "start": "parcel test/*.html test/mtcars.csv",
+        "start": "parcel test/*.html test/mtcars.csv test/*.png",
         "build": "parcel build && cp ./dist/browser/main.js ./dist/funkyheatmap.min.js",
         "lint": "node ./node_modules/eslint/bin/eslint . --ext .js --fix",
         "test": "mocha --es-module-specifier-resolution=node tests"

src/columns.js

@@ -48,6 +48,10 @@ export class Column {
             }
         }
 
+        if (this.geom === 'image' && this.width === undefined) {
+            throw `Please, specify width for column with geom=image`;
+        }
+
         if (this.options === undefined) {
             this.options = {};
         }

src/geoms.js

@@ -139,5 +139,14 @@ export const GEOMS = {
                 .style('stroke-width', 1)
                 .attr('transform', `translate(${O.rowHeight / 2}, ${O.rowHeight / 2})`);
         return g;
+    },
+
+    image: function(value, _, column, O) {
+        return d3.create('svg:image')
+            .attr('y', O.geomPadding)
+            .attr('href', value)
+            .attr('height', O.geomSize)
+            .attr('width', column.width)
+            .attr('preserveAspectRatio', 'xMidYMid');
     }
 };

src/main.js

@@ -147,7 +147,7 @@ class FHeatmap {
                     label = item[column.label];
                 }
                 if (GEOMS[column.geom] === undefined) {
-                    throw `Geom ${column.geom} not implements. Use one of ${Object.keys(GEOMS).join(', ')}.`;
+                    throw `Geom ${column.geom} not implemented. Use one of ${Object.keys(GEOMS).join(', ')}.`;
                 }
                 let el = GEOMS[column.geom](value, colorValue, column, O);
                 if (label) {
@@ -181,7 +181,10 @@ class FHeatmap {
                     el.datum({tooltip: tooltip});
                 }
                 this.body.append(() => el.node());
-                const elWidth = el.node().getBBox().width
+                let elWidth = el.node().getBBox().width;
+                if (column.geom === 'image') {
+                    elWidth = column.width;
+                }
                 if (elWidth > width) {
                     width = elWidth;
                 }
@@ -315,8 +318,8 @@ class FHeatmap {
             if (height > headerHeight) {
                 headerHeight = height;
             }
-            if (column.offset + width > bodyWidth) {
-                bodyWidth = column.offset + width + O.padding;
+            if (column.offset + column.widthPx / 2 + width > bodyWidth) {
+                bodyWidth = column.offset + column.widthPx / 2 + width + O.padding;
             }
         });
         this.columnInfo.forEach((column, i) => {

test/full.js

@@ -20,7 +20,8 @@ column_info = [
     {id: "vs", group: "group2", name: "Engine", geom: "circle", palette: "palette2"},
     {id: "am", group: "group2", name: "Transmission", geom: "circle", palette: "palette2"},
     {id: "gear", group: "group2", name: "# Forward gears", geom: "circle", palette: "palette2"},
-    {id: "carb", group: "group2", name: "# Carburetors", geom: "circle", palette: "palette2"}
+    {id: "carb", group: "group2", name: "# Carburetors", geom: "circle", palette: "palette2"},
+    {id: "schema", group: "group2", name: "Schema", geom: "image", width: 80}
 ];
 
 column_groups = [
@@ -38,6 +39,9 @@ palettes = {
 d3.csv('mtcars.csv').then((data) => {
     data = d3.sort(data, (a, b) => d3.ascending(+b.mpg, +a.mpg));
     data = data.slice(0, 20);
+    data.forEach((d, i) => {
+        d.schema = i % 2 ? "image1.png" : "image2.png"
+    });
     d3.select("#app").node().appendChild(funkyheatmap(
         data,
         column_info,