Hide overflowing (too small) children (#78)

Co-authored-by: Jukka Kurkela <[email protected]>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chartjs-chart-treemap",
   "homepage": "https://chartjs-chart-treemap.pages.dev/",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Chart.js module for creating treemap charts",
   "main": "dist/chartjs-chart-treemap.js",
   "module": "dist/chartjs-chart-treemap.esm.js",

src/controller.js

@@ -239,15 +239,14 @@ export default class TreemapController extends DatasetController {
     for (let i = start; i < start + count; i++) {
       const sq = dataset.data[i];
       const options = sharedOptions || me.resolveDataElementOptions(i, mode);
-      const height = reset ? 0 : sq.h - options.spacing * 2;
-      const width = reset ? 0 : sq.w - options.spacing * 2;
-      const x = sq.x + options.spacing;
-      const y = sq.y + options.spacing;
+      const sp = options.spacing;
+      const sp2 = sp * 2;
       const properties = {
-        x,
-        y,
-        width,
-        height
+        x: sq.x + sp,
+        y: sq.y + sp,
+        width: reset ? 0 : sq.w - sp2,
+        height: reset ? 0 : sq.h - sp2,
+        hidden: sp2 > sq.w || sp2 > sq.h,
       };
 
       if (includeOptions) {

test/fixtures/issues/77.js

@@ -0,0 +1,35 @@
+const tree = [
+  {
+    p1: '/etc',
+    p2: 'passwd',
+    value: 1000
+  },
+  {
+    p1: '/etc',
+    p2: 'shadow',
+    value: 5
+  }
+];
+
+export default {
+  config: {
+    type: 'treemap',
+    data: {
+      datasets: [{
+        tree,
+        groups: ['p1', 'p2'],
+        key: 'value',
+        spacing: 20,
+        borderWidth: 1,
+        backgroundColor: (ctx) => ctx.index === 2 ? 'red' : 'rgba(0,0,0,0.5)',
+      }]
+    },
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    },
+    spriteText: true
+  }
+};

test/specs/controller.spec.js

@@ -1,6 +1,7 @@
 describe('auto', jasmine.fixtures('basic'));
 describe('auto', jasmine.fixtures('grouped'));
 describe('auto', jasmine.fixtures('events'));
+describe('auto', jasmine.fixtures('issues'));
 
 describe('controller', function() {
   it('should be registered', function() {