chartjs-chart-treemap 2.0.2 → 2.1.1

package/dist/chartjs-chart-treemap.esm.js

@@ -1,11 +1,70 @@
 /*!
- * chartjs-chart-treemap v2.0.2
+ * chartjs-chart-treemap v2.1.1
  * https://chartjs-chart-treemap.pages.dev/
- * (c) 2021 Jukka Kurkela
+ * (c) 2022 Jukka Kurkela
  * Released under the MIT license
  */
-import { Chart, registry, DatasetController, Element } from 'chart.js';
-import { toFont, valueOrDefault, isArray } from 'chart.js/helpers';
+import { Element, Chart, registry, DatasetController } from 'chart.js';
+import { isObject, addRoundedRectPath, toFont, isArray, toTRBL, toTRBLCorners, valueOrDefault, defined, clipArea, unclipArea } from 'chart.js/helpers';
+
+const getValue = (item) => isObject(item) ? item.v : item;
+
+const maxValue = (data) => data.reduce(function(m, v) {
+  return (m > getValue(v) ? m : getValue(v));
+}, 0);
+
+const minValue = (data, mx) => data.reduce(function(m, v) {
+  return (m < getValue(v) ? m : getValue(v));
+}, mx);
+
+const getGroupKey = (lvl) => '' + lvl;
+
+function scanTreeObject(key, treeLeafKey, obj, tree = [], lvl = 0, result = []) {
+  const objIndex = lvl - 1;
+  if (key in obj && lvl > 0) {
+    const record = tree.reduce(function(reduced, item, i) {
+      if (i !== objIndex) {
+        reduced[getGroupKey(i)] = item;
+      }
+      return reduced;
+    }, {});
+    record[treeLeafKey] = tree[objIndex];
+    record[key] = obj[key];
+    result.push(record);
+  } else {
+    for (const childKey of Object.keys(obj)) {
+      const child = obj[childKey];
+      if (isObject(child)) {
+        tree.push(childKey);
+        scanTreeObject(key, treeLeafKey, child, tree, lvl + 1, result);
+      }
+    }
+  }
+  tree.splice(objIndex, 1);
+  return result;
+}
+
+function normalizeTreeToArray(key, treeLeafKey, obj) {
+  const data = scanTreeObject(key, treeLeafKey, obj);
+  if (!data.length) {
+    return data;
+  }
+  const max = data.reduce(function(maxVal, element) {
+    // minus 2 because _leaf and value properties are added
+    // on top to groups ones
+    const keys = Object.keys(element).length - 2;
+    return maxVal > keys ? maxVal : keys;
+  });
+  data.forEach(function(element) {
+    for (let i = 0; i < max; i++) {
+      const groupKey = getGroupKey(i);
+      if (!element[groupKey]) {
+        element[groupKey] = '';
+      }
+    }
+  });
+  return data;
+}
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
 function flatten(input) {
@@ -25,36 +84,59 @@ function flatten(input) {
   return res.reverse();
 }
 
+function getPath(groups, value, defaultValue) {
+  if (!groups.length) {
+    return;
+  }
+  const path = [];
+  for (const grp of groups) {
+    const item = value[grp];
+    if (item === '') {
+      path.push(defaultValue);
+      break;
+    }
+    path.push(item);
+  }
+  return path.length ? path.join('.') : defaultValue;
+}
+
 /**
  * @param {[]} values
  * @param {string} grp
  * @param {string} key
+ * @param {string} treeeLeafKey
  * @param {string} [mainGrp]
  * @param {*} [mainValue]
+ * @param {[]} groups
  */
-function group(values, grp, key, mainGrp, mainValue) {
+function group(values, grp, key, treeLeafKey, mainGrp, mainValue, groups = []) {
   const tmp = Object.create(null);
   const data = Object.create(null);
   const ret = [];
-  let g, i, n, v;
+  let g, i, n;
   for (i = 0, n = values.length; i < n; ++i) {
-    v = values[i];
+    const v = values[i];
     if (mainGrp && v[mainGrp] !== mainValue) {
       continue;
     }
-    g = v[grp] || '';
+    g = v[grp] || v[treeLeafKey] || '';
     if (!(g in tmp)) {
-      tmp[g] = 0;
+      tmp[g] = {value: 0};
       data[g] = [];
     }
-    tmp[g] += +v[key];
+    tmp[g].value += +v[key];
+    tmp[g].label = v[grp] || '';
+    tmp[g].path = getPath(groups, v, g);
     data[g].push(v);
   }
 
   Object.keys(tmp).forEach((k) => {
-    v = {children: data[k]};
-    v[key] = +tmp[k];
-    v[grp] = k;
+    const v = {children: data[k]};
+    v[key] = +tmp[k].value;
+    v[grp] = tmp[k].label;
+    v.label = k;
+    v.path = tmp[k].path;
+
     if (mainGrp) {
       v[mainGrp] = mainValue;
     }
@@ -64,11 +146,6 @@ function group(values, grp, key, mainGrp, mainValue) {
   return ret;
 }
 
-function isObject(obj) {
-  const type = typeof obj;
-  return type === 'function' || type === 'object' && !!obj;
-}
-
 function index(values, key) {
   let n = values.length;
   let i;
@@ -115,35 +192,427 @@ function requireVersion(min, ver) {
   }
 }
 
-function round(v, n) {
-  // @ts-ignore
-  return (+(Math.round(v + 'e+' + n) + 'e-' + n)) || 0;
+const rasterize = (v, dpr) => Math.round(v * dpr) / dpr;
+
+function rasterizeRect(rect, dpr) {
+  return {
+    ...rect,
+    x: rasterize(rect.x, dpr),
+    y: rasterize(rect.y, dpr),
+    w: rasterize(rect.w, dpr),
+    h: rasterize(rect.h, dpr),
+  };
+}
+
+const widthCache = new Map();
+
+/**
+ * Helper function to get the bounds of the rect
+ * @param {TreemapElement} rect the rect
+ * @param {boolean} [useFinalPosition]
+ * @return {object} bounds of the rect
+ * @private
+ */
+function getBounds(rect, useFinalPosition) {
+  const {x, y, width, height} = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
+  return {left: x, top: y, right: x + width, bottom: y + height};
+}
+
+function limit(value, min, max) {
+  return Math.max(Math.min(value, max), min);
+}
+
+function parseBorderWidth(value, maxW, maxH) {
+  const o = toTRBL(value);
+
+  return {
+    t: limit(o.top, 0, maxH),
+    r: limit(o.right, 0, maxW),
+    b: limit(o.bottom, 0, maxH),
+    l: limit(o.left, 0, maxW)
+  };
 }
 
-function getDims(itm, w2, s2, key) {
+function parseBorderRadius(value, maxW, maxH) {
+  const o = toTRBLCorners(value);
+  const maxR = Math.min(maxW, maxH);
+
+  return {
+    topLeft: limit(o.topLeft, 0, maxR),
+    topRight: limit(o.topRight, 0, maxR),
+    bottomLeft: limit(o.bottomLeft, 0, maxR),
+    bottomRight: limit(o.bottomRight, 0, maxR)
+  };
+}
+
+function boundingRects(rect, dpr) {
+  const bounds = getBounds(rect);
+  const width = bounds.right - bounds.left;
+  const height = bounds.bottom - bounds.top;
+  const border = parseBorderWidth(rect.options.borderWidth, width / 2, height / 2);
+  const radius = parseBorderRadius(rect.options.borderRadius, width / 2, height / 2);
+  const outer = rasterizeRect({
+    x: bounds.left,
+    y: bounds.top,
+    w: width,
+    h: height,
+    radius
+  }, dpr);
+
+  return {
+    outer,
+    inner: {
+      x: outer.x + border.l,
+      y: outer.y + border.t,
+      w: outer.w - border.l - border.r,
+      h: outer.h - border.t - border.b,
+      radius: {
+        topLeft: Math.max(0, radius.topLeft - Math.max(border.t, border.l)),
+        topRight: Math.max(0, radius.topRight - Math.max(border.t, border.r)),
+        bottomLeft: Math.max(0, radius.bottomLeft - Math.max(border.b, border.l)),
+        bottomRight: Math.max(0, radius.bottomRight - Math.max(border.b, border.r)),
+      }
+    }
+  };
+}
+
+function inRange(rect, x, y, useFinalPosition) {
+  const skipX = x === null;
+  const skipY = y === null;
+  const bounds = !rect || (skipX && skipY) ? false : getBounds(rect, useFinalPosition);
+
+  return bounds
+		&& (skipX || x >= bounds.left && x <= bounds.right)
+		&& (skipY || y >= bounds.top && y <= bounds.bottom);
+}
+
+function hasRadius(radius) {
+  return radius.topLeft || radius.topRight || radius.bottomLeft || radius.bottomRight;
+}
+
+/**
+ * Add a path of a rectangle to the current sub-path
+ * @param {CanvasRenderingContext2D} ctx Context
+ * @param {*} rect Bounding rect
+ */
+function addNormalRectPath(ctx, rect) {
+  ctx.rect(rect.x, rect.y, rect.w, rect.h);
+}
+
+function shouldDrawCaption(rect, options) {
+  if (!options || options.display === false) {
+    return false;
+  }
+  const {w, h} = rect;
+  const font = toFont(options.font);
+  const min = font.lineHeight;
+  const padding = limit(valueOrDefault(options.padding, 3) * 2, 0, Math.min(w, h));
+  return (w - padding) > min && (h - padding) > min;
+}
+
+function drawText(ctx, rect, options, item, levels) {
+  const {captions, labels} = options;
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(rect.x, rect.y, rect.w, rect.h);
+  ctx.clip();
+  const isLeaf = (!('l' in item) || item.l === levels);
+  if (isLeaf && labels.display) {
+    drawLabel(ctx, rect, options);
+  } else if (!isLeaf && shouldDrawCaption(rect, captions)) {
+    drawCaption(ctx, rect, options, item);
+  }
+  ctx.restore();
+}
+
+function drawCaption(ctx, rect, options, item) {
+  const {captions, spacing, rtl} = options;
+  const {color, hoverColor, font, hoverFont, padding, align, formatter} = captions;
+  const oColor = (rect.active ? hoverColor : color) || color;
+  const oAlign = align || (rtl ? 'right' : 'left');
+  const optFont = (rect.active ? hoverFont : font) || font;
+  const oFont = toFont(optFont);
+  const lh = oFont.lineHeight / 2;
+  const x = calculateX(rect, oAlign, padding);
+  ctx.fillStyle = oColor;
+  ctx.font = oFont.string;
+  ctx.textAlign = oAlign;
+  ctx.textBaseline = 'middle';
+  ctx.fillText(formatter || item.g, x, rect.y + padding + spacing + lh);
+}
+
+function measureLabelSize(ctx, lines, fonts) {
+  const fontsKey = fonts.reduce(function(prev, item) {
+    prev += item.string;
+    return prev;
+  }, '');
+  const mapKey = lines.join() + fontsKey + (ctx._measureText ? '-spriting' : '');
+  if (!widthCache.has(mapKey)) {
+    ctx.save();
+    const count = lines.length;
+    let width = 0;
+    let height = 0;
+    for (let i = 0; i < count; i++) {
+      const font = fonts[Math.min(i, fonts.length - 1)];
+      ctx.font = font.string;
+      const text = lines[i];
+      width = Math.max(width, ctx.measureText(text).width);
+      height += font.lineHeight;
+    }
+    ctx.restore();
+    widthCache.set(mapKey, {width, height});
+  }
+  return widthCache.get(mapKey);
+}
+
+function labelToDraw(ctx, rect, options, labelSize) {
+  const {overflow, padding} = options;
+  const {width, height} = labelSize;
+  if (overflow === 'hidden') {
+    return !((width + padding * 2) > rect.w || (height + padding * 2) > rect.h);
+  }
+  return true;
+}
+
+function drawLabel(ctx, rect, options) {
+  const labels = options.labels;
+  const content = labels.formatter;
+  if (!content) {
+    return;
+  }
+  const contents = isArray(content) ? content : [content];
+  const {font, hoverFont} = labels;
+  const optFont = (rect.active ? hoverFont : font) || font;
+  const fonts = isArray(optFont) ? optFont.map(f => toFont(f)) : [toFont(optFont)];
+  const labelSize = measureLabelSize(ctx, contents, fonts);
+  if (!labelToDraw(ctx, rect, labels, labelSize)) {
+    return;
+  }
+  const {color, hoverColor, align} = labels;
+  const optColor = (rect.active ? hoverColor : color) || color;
+  const colors = isArray(optColor) ? optColor : [optColor];
+  const xyPoint = calculateXYLabel(rect, labels, labelSize);
+  ctx.textAlign = align;
+  ctx.textBaseline = 'middle';
+  let lhs = 0;
+  contents.forEach(function(l, i) {
+    const c = colors[Math.min(i, colors.length - 1)];
+    const f = fonts[Math.min(i, fonts.length - 1)];
+    const lh = f.lineHeight;
+    ctx.font = f.string;
+    ctx.fillStyle = c;
+    ctx.fillText(l, xyPoint.x, xyPoint.y + lh / 2 + lhs);
+    lhs += lh;
+  });
+}
+
+function drawDivider(ctx, rect, options, item) {
+  const dividers = options.dividers;
+  if (!dividers.display || !item._data.children.length) {
+    return;
+  }
+  const {x, y, w, h} = rect;
+  const {lineColor, lineCapStyle, lineDash, lineDashOffset, lineWidth} = dividers;
+  ctx.save();
+  ctx.strokeStyle = lineColor;
+  ctx.lineCap = lineCapStyle;
+  ctx.setLineDash(lineDash);
+  ctx.lineDashOffset = lineDashOffset;
+  ctx.lineWidth = lineWidth;
+  ctx.beginPath();
+  if (w > h) {
+    const w2 = w / 2;
+    ctx.moveTo(x + w2, y);
+    ctx.lineTo(x + w2, y + h);
+  } else {
+    const h2 = h / 2;
+    ctx.moveTo(x, y + h2);
+    ctx.lineTo(x + w, y + h2);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+
+function calculateXYLabel(rect, options, labelSize) {
+  const {align, position, padding} = options;
+  let x, y;
+  x = calculateX(rect, align, padding);
+  if (position === 'top') {
+    y = rect.y + padding;
+  } else if (position === 'bottom') {
+    y = rect.y + rect.h - padding - labelSize.height;
+  } else {
+    y = rect.y + (rect.h - labelSize.height) / 2 + padding;
+  }
+  return {x, y};
+}
+
+function calculateX(rect, align, padding) {
+  if (align === 'left') {
+    return rect.x + padding;
+  } else if (align === 'right') {
+    return rect.x + rect.w - padding;
+  }
+  return rect.x + rect.w / 2;
+}
+
+class TreemapElement extends Element {
+
+  constructor(cfg) {
+    super();
+
+    this.options = undefined;
+    this.width = undefined;
+    this.height = undefined;
+
+    if (cfg) {
+      Object.assign(this, cfg);
+    }
+  }
+
+  draw(ctx, data, levels = 0, dpr) {
+    if (!data) {
+      return;
+    }
+    const options = this.options;
+    const {inner, outer} = boundingRects(this, dpr);
+
+    const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
+
+    ctx.save();
+
+    if (outer.w !== inner.w || outer.h !== inner.h) {
+      ctx.beginPath();
+      addRectPath(ctx, outer);
+      ctx.clip();
+      addRectPath(ctx, inner);
+      ctx.fillStyle = options.borderColor;
+      ctx.fill('evenodd');
+    }
+
+    ctx.beginPath();
+    addRectPath(ctx, inner);
+    ctx.fillStyle = options.backgroundColor;
+    ctx.fill();
+
+    drawDivider(ctx, inner, options, data);
+    drawText(ctx, inner, options, data, levels);
+    ctx.restore();
+  }
+
+  inRange(mouseX, mouseY, useFinalPosition) {
+    return inRange(this, mouseX, mouseY, useFinalPosition);
+  }
+
+  inXRange(mouseX, useFinalPosition) {
+    return inRange(this, mouseX, null, useFinalPosition);
+  }
+
+  inYRange(mouseY, useFinalPosition) {
+    return inRange(this, null, mouseY, useFinalPosition);
+  }
+
+  getCenterPoint(useFinalPosition) {
+    const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
+    return {
+      x: x + width / 2,
+      y: y + height / 2
+    };
+  }
+
+  tooltipPosition() {
+    return this.getCenterPoint();
+  }
+
+  /**
+   * @todo: remove this unused function in v3
+   */
+  getRange(axis) {
+    return axis === 'x' ? this.width / 2 : this.height / 2;
+  }
+}
+
+TreemapElement.id = 'treemap';
+
+TreemapElement.defaults = {
+  label: undefined,
+  borderRadius: 0,
+  borderWidth: 0,
+  captions: {
+    align: undefined,
+    color: 'black',
+    display: true,
+    font: {},
+    formatter: (ctx) => ctx.raw.g || ctx.raw._data.label || '',
+    padding: 3
+  },
+  dividers: {
+    display: false,
+    lineCapStyle: 'butt',
+    lineColor: 'black',
+    lineDash: [],
+    lineDashOffset: 0,
+    lineWidth: 1,
+  },
+  labels: {
+    align: 'center',
+    color: 'black',
+    display: false,
+    font: {},
+    formatter(ctx) {
+      if (ctx.raw.g) {
+        return [ctx.raw.g, ctx.raw.v + ''];
+      }
+      return ctx.raw._data.label ? [ctx.raw._data.label, ctx.raw.v + ''] : ctx.raw.v + '';
+    },
+    overflow: 'cut',
+    position: 'middle',
+    padding: 3
+  },
+  rtl: false,
+  spacing: 0.5
+};
+
+TreemapElement.descriptors = {
+  labels: {
+    _fallback: true
+  },
+  captions: {
+    _fallback: true
+  },
+  _scriptable: true,
+  _indexable: false
+};
+
+TreemapElement.defaultRoutes = {
+  backgroundColor: 'backgroundColor',
+  borderColor: 'borderColor'
+};
+
+function getDims(itm, w2, s2, key, dpr, maxd2) {
   const a = itm._normalized;
   const ar = w2 * a / s2;
-  const d1 = Math.sqrt(a * ar);
-  const d2 = a / d1;
+  const d1 = rasterize(Math.sqrt(a * ar), dpr);
+  const d2 = Math.min(rasterize(a / d1, dpr), maxd2);
   const w = key === '_ix' ? d1 : d2;
   const h = key === '_ix' ? d2 : d1;
 
   return {d1, d2, w, h};
 }
 
-const getX = (rect, w) => round(rect.rtl ? rect.x + rect.w - rect._ix - w : rect.x + rect._ix, 4);
+const getX = (rect, w) => rect.rtl ? rect.x + rect.iw - w : rect.x + rect._ix;
 
-function buildRow(rect, itm, dims, sum) {
-  const r = {
+function buildRow(rect, itm, dims, sum, dpr) {
+  const r = rasterizeRect({
     x: getX(rect, dims.w),
-    y: round(rect.y + rect._iy, 4),
-    w: round(dims.w, 4),
-    h: round(dims.h, 4),
-    a: round(itm._normalized, 4),
+    y: rect.y + rect._iy,
+    w: dims.w,
+    h: dims.h,
+    a: itm._normalized,
     v: itm.value,
     s: sum,
     _data: itm._data
-  };
+  }, dpr);
   if (itm.group) {
     r.g = itm.group;
     r.l = itm.level;
@@ -153,16 +622,16 @@ function buildRow(rect, itm, dims, sum) {
 }
 
 class Rect {
-  constructor(r) {
-    const me = this;
+  constructor(r, dpr) {
+    this.dpr = dpr;
     r = r || {w: 1, h: 1};
-    me.rtl = !!r.rtl;
-    me.x = r.x || r.left || 0;
-    me.y = r.y || r.top || 0;
-    me._ix = 0;
-    me._iy = 0;
-    me.w = r.w || r.width || (r.right - r.left);
-    me.h = r.h || r.height || (r.bottom - r.top);
+    this.rtl = !!r.rtl;
+    this.x = r.x || r.left || 0;
+    this.y = r.y || r.top || 0;
+    this._ix = 0;
+    this._iy = 0;
+    this.w = r.w || r.width || (r.right - r.left);
+    this.h = r.h || r.height || (r.bottom - r.top);
   }
 
   get area() {
@@ -183,34 +652,61 @@ class Rect {
   }
 
   get side() {
-    return this.dir === 'x' ? this.iw : this.ih;
+    return rasterize(this.dir === 'x' ? this.iw : this.ih, this.dpr);
   }
 
   map(arr) {
-    const me = this;
-    const ret = [];
+    const {dir, side, dpr} = this;
+    const {key, d2prop, id2prop, d2key} = getPropNames(dir);
     const sum = arr.nsum;
     const row = arr.get();
-    const dir = me.dir;
-    const side = me.side;
     const w2 = side * side;
-    const key = dir === 'x' ? '_ix' : '_iy';
+    const availd2 = rasterize(this[id2prop], dpr);
     const s2 = sum * sum;
+    const ret = [];
     let maxd2 = 0;
     let totd1 = 0;
     for (const itm of row) {
-      const dims = getDims(itm, w2, s2, key);
+      const dims = getDims(itm, w2, s2, key, dpr, availd2);
       totd1 += dims.d1;
-      maxd2 = Math.max(maxd2, dims.d2);
-      ret.push(buildRow(me, itm, dims, arr.sum));
-      me[key] += dims.d1;
+      maxd2 = Math.min(Math.max(maxd2, dims.d2), availd2);
+      ret.push(buildRow(this, itm, dims, arr.sum, dpr));
+      this[key] += dims.d1;
     }
-    me[dir === 'y' ? '_ix' : '_iy'] += maxd2;
-    me[key] -= totd1;
+    // make sure all rects are same size in d2 direction
+    for (const r of ret) {
+      const d2 = r[d2prop];
+      if (d2 !== maxd2) {
+        if (this.rtl && dir === 'y') {
+          // for RTL, x-coordinate needs to be adjusted too
+          r.x -= maxd2 - d2;
+        }
+        r[d2prop] = maxd2;
+      }
+    }
+    this[d2key] += maxd2;
+    this[key] -= totd1;
     return ret;
   }
 }
 
+function getPropNames(dir) {
+  if (dir === 'x') {
+    return {
+      key: '_ix',
+      d2prop: 'h',
+      id2prop: 'ih',
+      d2key: '_iy'
+    };
+  }
+  return {
+    key: '_iy',
+    d2prop: 'w',
+    id2prop: 'iw',
+    d2key: '_ix'
+  };
+}
+
 const min = Math.min;
 const max = Math.max;
 
@@ -308,15 +804,16 @@ function compareAspectRatio(oldStat, newStat, args) {
  *
  * @param {number[]|object[]} values
  * @param {object} rectangle
- * @param {string} key
- * @param {*} grp
- * @param {*} lvl
- * @param {*} gsum
+ * @param {string} [key]
+ * @param {number} [dpr=1]
+ * @param {*} [grp]
+ * @param {*} [lvl]
+ * @param {*} [gsum]
  */
-function squarify(values, rectangle, key, grp, lvl, gsum) {
+function squarify(values, rectangle, key, dpr = 1, grp, lvl, gsum) {
   values = values || [];
   const rows = [];
-  const rect = new Rect(rectangle);
+  const rect = new Rect(rectangle, dpr);
   const row = new StatArray('value', rect.area / sum(values, key));
   let length = rect.side;
   const n = values.length;
@@ -353,7 +850,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
-var version = "2.0.2";
+var version = "2.1.1";
 
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
@@ -378,98 +875,41 @@ function arrayNotEqual(a1, a2) {
   return false;
 }
 
-function shouldDrawCaption(rect, font) {
-  if (!font) {
-    return false;
-  }
-  const w = rect.width || rect.w;
-  const h = rect.height || rect.h;
-  const min = font.lineHeight * 2;
-  return w > min && h > min;
-}
-
-function drawCaption(ctx, rect, item, opts, levels) {
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(rect.x, rect.y, rect.width, rect.height);
-  ctx.clip();
-  if (!('l' in item) || item.l === levels) {
-    drawLabels(ctx, item, rect);
-  } else if (opts.captions && opts.captions.display) {
-    drawCaptionLabel(ctx, item, rect);
-  }
-  ctx.restore();
-}
-
-function drawCaptionLabel(ctx, item, rect) {
-  const opts = rect.options;
-  const captionsOpts = opts.captions || {};
-  const borderWidth = opts.borderWidth || 0;
-  const spacing = valueOrDefault(opts.spacing, 0) + borderWidth;
-  const color = (rect.active ? captionsOpts.hoverColor : captionsOpts.color) || captionsOpts.color;
-  const padding = captionsOpts.padding;
-  const align = captionsOpts.align || (opts.rtl ? 'right' : 'left');
-  const optFont = (rect.active ? captionsOpts.hoverFont : captionsOpts.font) || captionsOpts.font;
-  const font = toFont(optFont);
-  const x = calculateX(rect, align, padding, borderWidth);
-  ctx.fillStyle = color;
-  ctx.font = font.string;
-  ctx.textAlign = align;
-  ctx.textBaseline = 'middle';
-  ctx.fillText(captionsOpts.formatter || item.g, x, rect.y + padding + spacing + (font.lineHeight / 2));
-}
-
-function drawDivider(ctx, rect) {
-  const opts = rect.options;
-  const dividersOpts = opts.dividers || {};
-  const w = rect.width || rect.w;
-  const h = rect.height || rect.h;
-
-  ctx.save();
-  ctx.strokeStyle = dividersOpts.lineColor || 'black';
-  ctx.lineCap = dividersOpts.lineCapStyle;
-  ctx.setLineDash(dividersOpts.lineDash || []);
-  ctx.lineDashOffset = dividersOpts.lineDashOffset;
-  ctx.lineWidth = dividersOpts.lineWidth;
-  ctx.beginPath();
-  if (w > h) {
-    const w2 = w / 2;
-    ctx.moveTo(rect.x + w2, rect.y);
-    ctx.lineTo(rect.x + w2, rect.y + h);
-  } else {
-    const h2 = h / 2;
-    ctx.moveTo(rect.x, rect.y + h2);
-    ctx.lineTo(rect.x + w, rect.y + h2);
-  }
-  ctx.stroke();
-  ctx.restore();
-}
-
-function buildData(dataset, mainRect, captions) {
+function buildData(dataset, mainRect, dpr) {
   const key = dataset.key || '';
+  const treeLeafKey = dataset.treeLeafKey || '_leaf';
   let tree = dataset.tree || [];
+  if (isObject(tree)) {
+    tree = normalizeTreeToArray(key, treeLeafKey, tree);
+  }
   const groups = dataset.groups || [];
   const glen = groups.length;
-  const sp = valueOrDefault(dataset.spacing, 0) + valueOrDefault(dataset.borderWidth, 0);
-  const captionsFont = captions.font || {};
-  const font = toFont(captionsFont);
+  const sp = valueOrDefault(dataset.spacing, 0);
+  const captions = dataset.captions || {};
+  const font = toFont(captions.font);
   const padding = valueOrDefault(captions.padding, 3);
 
   function recur(gidx, rect, parent, gs) {
-    const g = groups[gidx];
-    const pg = (gidx > 0) && groups[gidx - 1];
-    const gdata = group(tree, g, key, pg, parent);
-    const gsq = squarify(gdata, rect, key, g, gidx, gs);
+    const g = getGroupKey(groups[gidx]);
+    const pg = (gidx > 0) && getGroupKey(groups[gidx - 1]);
+    const gdata = group(tree, g, key, treeLeafKey, pg, parent, groups.filter((item, index) => index <= gidx));
+    const gsq = squarify(gdata, rect, key, dpr, g, gidx, gs);
     const ret = gsq.slice();
-    let subRect;
     if (gidx < glen - 1) {
       gsq.forEach((sq) => {
-        subRect = {x: sq.x + sp, y: sq.y + sp, w: sq.w - 2 * sp, h: sq.h - 2 * sp};
-        if (valueOrDefault(captions.display, true) && shouldDrawCaption(sq, font)) {
+        const bw = parseBorderWidth(dataset.borderWidth, sq.w / 2, sq.h / 2);
+        const subRect = {
+          ...rect,
+          x: sq.x + sp + bw.l,
+          y: sq.y + sp + bw.t,
+          w: sq.w - 2 * sp - bw.l - bw.r,
+          h: sq.h - 2 * sp - bw.t - bw.b,
+        };
+        if (shouldDrawCaption(subRect, captions)) {
           subRect.y += font.lineHeight + padding * 2;
           subRect.h -= font.lineHeight + padding * 2;
         }
-        ret.push(...recur(gidx + 1, subRect, sq.g, sq.s));
+        ret.push(...recur(gidx + 1, rasterizeRect(subRect, dpr), sq.g, sq.s));
       });
     }
     return ret;
@@ -481,54 +921,22 @@ function buildData(dataset, mainRect, captions) {
 
   return glen
     ? recur(0, mainRect)
-    : squarify(tree, mainRect, key);
+    : squarify(tree, mainRect, key, dpr);
 }
 
-function drawLabels(ctx, item, rect) {
-  const opts = rect.options;
-  const labelsOpts = opts.labels;
-  if (!labelsOpts || !labelsOpts.display) {
-    return;
-  }
-  const optColor = (rect.active ? labelsOpts.hoverColor : labelsOpts.color) || labelsOpts.color;
-  const optFont = (rect.active ? labelsOpts.hoverFont : labelsOpts.font) || labelsOpts.font;
-  const font = toFont(optFont);
-  const lh = font.lineHeight;
-  const label = labelsOpts.formatter;
-  if (label) {
-    const labels = isArray(label) ? label : [label];
-    const xyPoint = calculateXYLabel(opts, rect, labels, lh);
-    ctx.font = font.string;
-    ctx.textAlign = labelsOpts.align;
-    ctx.textBaseline = labelsOpts.position;
-    ctx.fillStyle = optColor;
-    labels.forEach((l, i) => ctx.fillText(l, xyPoint.x, xyPoint.y + i * lh));
-  }
-}
-
-function calculateXYLabel(options, rect, labels, lineHeight) {
-  const labelsOpts = options.labels;
-  const borderWidth = options.borderWidth || 0;
-  const {align, position, padding} = labelsOpts;
-  let x, y;
-  x = calculateX(rect, align, padding, borderWidth);
-  if (position === 'top') {
-    y = rect.y + padding + borderWidth;
-  } else if (position === 'bottom') {
-    y = rect.y + rect.height - padding - borderWidth - (labels.length - 1) * lineHeight;
-  } else {
-    y = rect.y + rect.height / 2 - labels.length * lineHeight / 4;
-  }
-  return {x, y};
+function getMinMax(data, useTree) {
+  const vMax = useTree ? 1 : maxValue(data);
+  const vMin = useTree ? 0 : minValue(data, vMax);
+  return {vMin, vMax};
 }
 
-function calculateX(rect, align, padding, borderWidth) {
-  if (align === 'left') {
-    return rect.x + padding + borderWidth;
-  } else if (align === 'right') {
-    return rect.x + rect.width - padding - borderWidth;
-  }
-  return rect.x + rect.width / 2;
+function getArea({xScale, yScale}, data, rtl, useTree) {
+  const {vMin, vMax} = getMinMax(data, useTree);
+  const xMin = xScale.getPixelForValue(0);
+  const xMax = xScale.getPixelForValue(1);
+  const yMin = yScale.getPixelForValue(vMin);
+  const yMax = yScale.getPixelForValue(vMax);
+  return {x: xMin, y: yMax, w: xMax - xMin, h: yMin - yMax, rtl};
 }
 
 class TreemapController extends DatasetController {
@@ -538,6 +946,7 @@ class TreemapController extends DatasetController {
     this._rect = undefined;
     this._key = undefined;
     this._groups = undefined;
+    this._useTree = undefined;
   }
 
   initialize() {
@@ -545,38 +954,52 @@ class TreemapController extends DatasetController {
     super.initialize();
   }
 
+  /**
+   * @todo: Remove with https://github.com/kurkle/chartjs-chart-treemap/issues/137
+   */
+  updateRangeFromParsed(range, scale) {
+    if (range.updated) {
+      return;
+    }
+    range.updated = true;
+    if (scale.axis === 'x') {
+      range.min = 0;
+      range.max = 1;
+      return;
+    }
+    const dataset = this.getDataset();
+    const {vMin, vMax} = getMinMax(dataset.data, this._useTree);
+    range.min = vMin;
+    range.max = vMax;
+  }
+
   update(mode) {
-    const me = this;
-    const meta = me.getMeta();
-    const dataset = me.getDataset();
+    const meta = this.getMeta();
+    const dataset = this.getDataset();
+    const dpr = this.chart.currentDevicePixelRatio;
+
+    if (!defined(this._useTree)) {
+      this._useTree = !!dataset.tree;
+    }
     const groups = dataset.groups || (dataset.groups = []);
-    const captions = dataset.captions ? dataset.captions : {};
-    const area = me.chart.chartArea;
     const key = dataset.key || '';
     const rtl = !!dataset.rtl;
 
-    const mainRect = {x: area.left, y: area.top, w: area.right - area.left, h: area.bottom - area.top, rtl};
+    const mainRect = rasterizeRect(getArea(meta, dataset.data, rtl, this._useTree), dpr);
 
-    if (mode === 'reset' || rectNotEqual(me._rect, mainRect) || me._key !== key || arrayNotEqual(me._groups, groups)) {
-      me._rect = mainRect;
-      me._groups = groups.slice();
-      me._key = key;
+    if (mode === 'reset' || rectNotEqual(this._rect, mainRect) || this._key !== key || arrayNotEqual(this._groups, groups)) {
+      this._rect = mainRect;
+      this._groups = groups.slice();
+      this._key = key;
 
-      dataset.data = buildData(dataset, mainRect, captions);
+      dataset.data = buildData(dataset, mainRect, dpr);
       // @ts-ignore using private stuff
-      me._dataCheck();
+      this._dataCheck();
       // @ts-ignore using private stuff
-      me._resyncElements();
+      this._resyncElements();
     }
 
-    me.updateElements(meta.data, 0, meta.data.length, mode);
-  }
-
-  resolveDataElementOptions(index, mode) {
-    const options = super.resolveDataElementOptions(index, mode);
-    const result = Object.isFrozen(options) ? Object.assign({}, options) : options;
-    result.font = toFont(options.captions.font);
-    return result;
+    this.updateElements(meta.data, 0, meta.data.length, mode);
   }
 
   updateElements(rects, start, count, mode) {
@@ -609,41 +1032,21 @@ class TreemapController extends DatasetController {
     me.updateSharedOptions(sharedOptions, mode, firstOpts);
   }
 
-  _drawDividers(ctx, data, metadata) {
-    for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
-      const rect = metadata[i];
-      const item = data[i];
-      const dividersOpts = rect.options.dividers || {};
-      if (dividersOpts.display && item._data.children.length > 1) {
-        drawDivider(ctx, rect);
-      }
-    }
-  }
+  draw() {
+    const {ctx, chartArea, currentDevicePixelRatio: dpr} = this.chart;
+    const metadata = this.getMeta().data || [];
+    const dataset = this.getDataset();
+    const levels = (dataset.groups || []).length - 1;
+    const data = dataset.data;
 
-  _drawRects(ctx, data, metadata, levels) {
+    clipArea(ctx, chartArea);
     for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
       const rect = metadata[i];
-      const item = data[i];
       if (!rect.hidden) {
-        rect.draw(ctx);
-        const opts = rect.options;
-        if (shouldDrawCaption(rect, opts.captions.font)) {
-          drawCaption(ctx, rect, item, opts, levels);
-        }
+        rect.draw(ctx, data[i], levels, dpr);
       }
     }
-  }
-
-  draw() {
-    const me = this;
-    const ctx = me.chart.ctx;
-    const metadata = me.getMeta().data || [];
-    const dataset = me.getDataset();
-    const levels = (dataset.groups || []).length - 1;
-    const data = dataset.data || [];
-
-    me._drawRects(ctx, data, metadata, levels);
-    me._drawDividers(ctx, data, metadata);
+    unclipArea(ctx);
   }
 }
 
@@ -661,13 +1064,6 @@ TreemapController.defaults = {
     },
   },
 
-  borderWidth: 0,
-  spacing: 0.5,
-  dividers: {
-    display: false,
-    lineWidth: 1,
-  }
-
 };
 
 TreemapController.descriptors = {
@@ -678,6 +1074,7 @@ TreemapController.descriptors = {
 TreemapController.overrides = {
   interaction: {
     mode: 'point',
+    includeInvisible: true,
     intersect: true
   },
 
@@ -698,7 +1095,7 @@ TreemapController.overrides = {
         label(item) {
           const dataset = item.dataset;
           const dataItem = dataset.data[item.dataIndex];
-          const label = dataItem.g || dataset.label;
+          const label = dataItem.g || dataItem._data.label || dataset.label;
           return (label ? label + ': ' : '') + dataItem.v;
         }
       }
@@ -717,7 +1114,7 @@ TreemapController.overrides = {
 };
 
 TreemapController.beforeRegister = function() {
-  requireVersion('3.6', Chart.version);
+  requireVersion('3.8', Chart.version);
 };
 
 TreemapController.afterRegister = function() {
@@ -733,6 +1130,8 @@ TreemapController.afterRegister = function() {
 
       return el.tooltipPosition();
     };
+  } else {
+    console.warn('Unable to register the treemap positioner because tooltip plugin is not registered');
   }
 };
 
@@ -743,181 +1142,4 @@ TreemapController.afterUnregister = function() {
   }
 };
 
-/**
- * Helper function to get the bounds of the rect
- * @param {TreemapElement} rect the rect
- * @param {boolean} [useFinalPosition]
- * @return {object} bounds of the rect
- * @private
- */
-function getBounds(rect, useFinalPosition) {
-  const {x, y, width, height} = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
-  return {left: x, top: y, right: x + width, bottom: y + height};
-}
-
-function limit(value, min, max) {
-  return Math.max(Math.min(value, max), min);
-}
-
-function parseBorderWidth(value, maxW, maxH) {
-  let t, r, b, l;
-
-  if (isObject(value)) {
-    t = +value.top || 0;
-    r = +value.right || 0;
-    b = +value.bottom || 0;
-    l = +value.left || 0;
-  } else {
-    t = r = b = l = +value || 0;
-  }
-
-  return {
-    t: limit(t, 0, maxH),
-    r: limit(r, 0, maxW),
-    b: limit(b, 0, maxH),
-    l: limit(l, 0, maxW)
-  };
-}
-
-function boundingRects(rect) {
-  const bounds = getBounds(rect);
-  const width = bounds.right - bounds.left;
-  const height = bounds.bottom - bounds.top;
-  const border = parseBorderWidth(rect.options.borderWidth, width / 2, height / 2);
-
-  return {
-    outer: {
-      x: bounds.left,
-      y: bounds.top,
-      w: width,
-      h: height
-    },
-    inner: {
-      x: bounds.left + border.l,
-      y: bounds.top + border.t,
-      w: width - border.l - border.r,
-      h: height - border.t - border.b
-    }
-  };
-}
-
-function inRange(rect, x, y, useFinalPosition) {
-  const skipX = x === null;
-  const skipY = y === null;
-  const bounds = !rect || (skipX && skipY) ? false : getBounds(rect, useFinalPosition);
-
-  return bounds
-		&& (skipX || x >= bounds.left && x <= bounds.right)
-		&& (skipY || y >= bounds.top && y <= bounds.bottom);
-}
-
-class TreemapElement extends Element {
-
-  constructor(cfg) {
-    super();
-
-    this.options = undefined;
-    this.width = undefined;
-    this.height = undefined;
-
-    if (cfg) {
-      Object.assign(this, cfg);
-    }
-  }
-
-  draw(ctx) {
-    const options = this.options;
-    const {inner, outer} = boundingRects(this);
-
-    ctx.save();
-
-    if (outer.w !== inner.w || outer.h !== inner.h) {
-      ctx.beginPath();
-      ctx.rect(outer.x, outer.y, outer.w, outer.h);
-      ctx.clip();
-      ctx.rect(inner.x, inner.y, inner.w, inner.h);
-      ctx.fillStyle = options.backgroundColor;
-      ctx.fill();
-      ctx.fillStyle = options.borderColor;
-      ctx.fill('evenodd');
-    } else {
-      ctx.fillStyle = options.backgroundColor;
-      ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
-    }
-    ctx.restore();
-  }
-
-  inRange(mouseX, mouseY, useFinalPosition) {
-    return inRange(this, mouseX, mouseY, useFinalPosition);
-  }
-
-  inXRange(mouseX, useFinalPosition) {
-    return inRange(this, mouseX, null, useFinalPosition);
-  }
-
-  inYRange(mouseY, useFinalPosition) {
-    return inRange(this, null, mouseY, useFinalPosition);
-  }
-
-  getCenterPoint(useFinalPosition) {
-    const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
-    return {
-      x: x + width / 2,
-      y: y + height / 2
-    };
-  }
-
-  tooltipPosition() {
-    return this.getCenterPoint();
-  }
-
-  getRange(axis) {
-    return axis === 'x' ? this.width / 2 : this.height / 2;
-  }
-}
-
-TreemapElement.id = 'treemap';
-
-TreemapElement.defaults = {
-  borderWidth: undefined,
-  spacing: undefined,
-  label: undefined,
-  rtl: undefined,
-  dividers: {
-    display: false,
-    lineCapStyle: 'butt',
-    lineColor: 'black',
-    lineDash: undefined,
-    lineDashOffset: 0,
-    lineWidth: 0,
-  },
-  captions: {
-    align: undefined,
-    color: undefined,
-    display: true,
-    formatter: (ctx) => ctx.raw.g || '',
-    font: {},
-    padding: 3
-  },
-  labels: {
-    align: 'center',
-    color: undefined,
-    display: false,
-    formatter: (ctx) => ctx.raw.g ? [ctx.raw.g, ctx.raw.v] : ctx.raw.v,
-    font: {},
-    position: 'middle',
-    padding: 3
-  }
-};
-
-TreemapElement.descriptors = {
-  _scriptable: true,
-  _indexable: false
-};
-
-TreemapElement.defaultRoutes = {
-  backgroundColor: 'backgroundColor',
-  borderColor: 'borderColor'
-};
-
 export { TreemapController, TreemapElement };