chartjs-chart-treemap 2.0.2 → 2.1.0

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

@@ -1,11 +1,70 @@
 /*!
- * chartjs-chart-treemap v2.0.2
+ * chartjs-chart-treemap v2.1.0
  * 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,6 +192,387 @@ function requireVersion(min, ver) {
   }
 }
 
+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 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) {
+  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);
+
+  return {
+    outer: {
+      x: bounds.left,
+      y: bounds.top,
+      w: width,
+      h: height,
+      radius
+    },
+    inner: {
+      x: bounds.left + border.l,
+      y: bounds.top + border.t,
+      w: width - border.l - border.r,
+      h: height - 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) {
+    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) {
+    if (!data) {
+      return;
+    }
+    const options = this.options;
+    const {inner, outer} = boundingRects(this);
+
+    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();
+  }
+
+  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 round(v, n) {
   // @ts-ignore
   return (+(Math.round(v + 'e+' + n) + 'e-' + n)) || 0;
@@ -353,7 +811,7 @@ function squarify(values, rectangle, key, grp, lvl, gsum) {
   return flatten(rows);
 }
 
-var version = "2.0.2";
+var version = "2.1.0";
 
 function rectNotEqual(r1, r2) {
   return !r1 || !r2
@@ -378,94 +836,38 @@ 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) {
   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 || {display: true};
+  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 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, 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);
+        subRect = {
+          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,
+          rtl: rect.rtl
+        };
+        if (shouldDrawCaption(subRect, captions)) {
           subRect.y += font.lineHeight + padding * 2;
           subRect.h -= font.lineHeight + padding * 2;
         }
@@ -484,51 +886,19 @@ function buildData(dataset, mainRect, captions) {
     : squarify(tree, mainRect, key);
 }
 
-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 +908,7 @@ class TreemapController extends DatasetController {
     this._rect = undefined;
     this._key = undefined;
     this._groups = undefined;
+    this._useTree = undefined;
   }
 
   initialize() {
@@ -545,24 +916,46 @@ class TreemapController extends DatasetController {
     super.initialize();
   }
 
+  /**
+   * TODO: to be removed when https://github.com/kurkle/chartjs-chart-treemap/issues/137
+   * will be implemented
+   */
+  updateRangeFromParsed(range, scale) {
+    if (range.updated) {
+      return;
+    }
+    range.updated = true;
+    if (scale.axis === 'x') {
+      range.min = 0;
+      range.max = 1;
+      return;
+    }
+    const me = this;
+    const dataset = me.getDataset();
+    const {vMin, vMax} = getMinMax(dataset.data, me._useTree);
+    range.min = vMin;
+    range.max = vMax;
+  }
+
   update(mode) {
     const me = this;
     const meta = me.getMeta();
     const dataset = me.getDataset();
+    if (!defined(me._useTree)) {
+      me._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 = getArea(meta, dataset.data, rtl, me._useTree);
 
     if (mode === 'reset' || rectNotEqual(me._rect, mainRect) || me._key !== key || arrayNotEqual(me._groups, groups)) {
       me._rect = mainRect;
       me._groups = groups.slice();
       me._key = key;
 
-      dataset.data = buildData(dataset, mainRect, captions);
+      dataset.data = buildData(dataset, mainRect);
       // @ts-ignore using private stuff
       me._dataCheck();
       // @ts-ignore using private stuff
@@ -572,13 +965,6 @@ class TreemapController extends DatasetController {
     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;
-  }
-
   updateElements(rects, start, count, mode) {
     const me = this;
     const reset = mode === 'reset';
@@ -609,41 +995,23 @@ 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);
-      }
-    }
-  }
-
-  _drawRects(ctx, data, metadata, levels) {
-    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);
-        }
-      }
-    }
-  }
-
   draw() {
     const me = this;
     const ctx = me.chart.ctx;
+    const area = me.chart.chartArea;
     const metadata = me.getMeta().data || [];
     const dataset = me.getDataset();
     const levels = (dataset.groups || []).length - 1;
-    const data = dataset.data || [];
+    const data = dataset.data;
 
-    me._drawRects(ctx, data, metadata, levels);
-    me._drawDividers(ctx, data, metadata);
+    clipArea(ctx, area);
+    for (let i = 0, ilen = metadata.length; i < ilen; ++i) {
+      const rect = metadata[i];
+      if (!rect.hidden) {
+        rect.draw(ctx, data[i], levels);
+      }
+    }
+    unclipArea(ctx);
   }
 }
 
@@ -661,13 +1029,6 @@ TreemapController.defaults = {
     },
   },
 
-  borderWidth: 0,
-  spacing: 0.5,
-  dividers: {
-    display: false,
-    lineWidth: 1,
-  }
-
 };
 
 TreemapController.descriptors = {
@@ -698,7 +1059,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;
         }
       }
@@ -733,6 +1094,8 @@ TreemapController.afterRegister = function() {
 
       return el.tooltipPosition();
     };
+  } else {
+    console.warn('Unable to register the treemap positioner because tooltip plugin is not registered');
   }
 };
 
@@ -743,181 +1106,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 };