Support dynamically sized legend elements

[andyrichardson]

About

When providing custom legend elements, dynamic widths will overflow.

Fix #5665

Tried this out with an image element

[andyrichardson]

Would make sense to render this to the DOM in a visibility: hidden element, get offsetWidth, then remove from dom

[kurkle]

I think we should avoid DOM manipulation.

[etimberg]

Generally, this looks like something we could support. To get it to prod, the docs and types would need an update along with test coverage.

@kurkle thoughts on this?

[etimberg]

What's the reason for this change? When this function is normally called, x,y is the center of the point and thus the center of the image

[andyrichardson]

Centering the image looks to be done because there is an assumed (fixed) width where the image will exist.

With this approach, because the space for the legend image is identical to the size of the legend image itself, there's no need to center it.

That being said this was me hacking around and it resulted in no padding so centering might actually be a good idea if the "boxWidth" (legend icon width) is expected to include padding.

[etimberg]

What's the reason for this change?

[andyrichardson]

I found it unusual that boxWidth could be set for all legend items, but not an individual one.

Might just be me - can revert if needed 👍

[kurkle]

To me it looks like changing the getBoxSize function to read the size from pointStyle would be a good solution. Will need to move that call in the loops to allow different sized images, but should be quite simple.

[kurkle]

We are at es2018, so no optional chaining. Althought it looks like all the supported browsers already support optional chaining, we should wait for a major version before changing the env requirements.

[kurkle]

I think we should avoid DOM manipulation.

[andyrichardson]

@kurkle @etimberg a massive thanks for taking a look at this! Here's a quick braindump of what I think we need to solve this problem.

Right now I don't think we have a standard way of saying

The legend box/point/graphic will be X wide and Y tall

We only have this consideration for the boxWidth/boxHeight and that can only be declared on a for all legend items.

It would be dope if we could have a standardized way of declaring the icon and optionally sizing of a label.

Here's an example

// Box
{
  text: "My label",
  icon: {
    type: "square",
    // example optional attrs
    width: 30,
    borderColor: 'red',
    // ...
  }
}

// Point
{
  text: "My label",
  icon: {
    type: "circle",
    // example optional attrs
    radius: 30,
    // ...
  }
}

// Image
{
  text: "My label",
  icon: {
    type: someImageElement,
    // example optional attrs
    width: 30,
    height: 10,
    // ...
  }
}

// Canvas
{
  text: "My label",
  icon: {
    type: someCanvasElement,
    // example optional attrs
    width: 30,
    height: 10,
    // ...
  }
}

[andyrichardson]

Seconding this - I think it would be dope if we could resolve the width/height for all legend icons, not just boxes

const paddingKeys = ['left', 'right', 'top', 'bottom'] as const;

/** Normalize padding argument to object. */
const normalizePadding = (arg: undefined | number | Record<typeof paddingKeys[number], number | undefined>) => {
  if (typeof arg === 'undefined') {
    return paddingKeys.reduce((p, key) => ({ ...p, [key]: 0 }), {});
  }

  if (typeof arg === 'number') {
    return paddingKeys.reduce((p, key) => ({ ...p, [key]: arg }), {});
  }

  return paddingKeys.reduce((p, key) => ({
    ...p,
    [key]: arg[key] || 0
  }), {})
};

/** Get total area reserved for legend icon */
const getLegendIconDimensions = (i) => {
  const padding = normalizePadding(i.padding);
  const paddingX = padding.left + padding.right;
  const paddingY = padding.top + padding.bottom;

  if (i.type === "square") {
    return {
      width: legendIcon.width + paddingX,
      height: legendIcon.height + paddingY.
    }
  }

  if (i.type === "circle") {
    const diameter = i.radius * 2;

    return {
      width: diameter + paddingX,
      height: diameter + paddingY,
    }
  }

  // HTML element with explicit height & width
  if (i.type instanceof Element && i.height && i.width) {
    return {
      width: i.width + paddingX,
      height: i.height + paddingY,
    }
  }

  // HTML element with unknown height and/or width
  if (i.type instanceof Element) {
    const elem = document.createElement('div');
    elem.style.visibility = "hidden";
    elem.appendChild(i.type)

    // Temporarily render element (hidden) to get dimensions
    document.body.appendChild(elem)
    const width = i.type.offsetWidth;
    const height = i.type.offsetHeight;
    document.body.removeChild(elem)

    return { width, height }
  }

  // ...
}

[andyrichardson]

@kurkle @etimberg have you had a chance to see the discussion above? Would love to move this forward

[kurkle]

/** Normalize padding argument to object. */

Chart.js/src/helpers/helpers.options.js

Lines 82 to 97 in fca0309

	/**
	* Converts the given value into a padding object with pre-computed width/height.
	* @param {number|object} value - If a number, set the value to all TRBL component,
	* else, if an object, use defined properties and sets undefined ones to 0.
	* x / y are shorthands for same value for left/right and top/bottom.
	* @returns {object} The padding values (top, right, bottom, left, width, height)
	* @since 2.7.0
	*/
	export function toPadding(value) {
	const obj = toTRBL(value);
	obj.width = obj.left + obj.right;
	obj.height = obj.top + obj.bottom;
	return obj;
	}

As the plugin is due to be refactored (#9342) for v4, I'd keep the changes minimal at this point.