Treemap charts with long labels should have the option to be trimmed

[mabolen]

Summary

Treemaps with dynamic label lengths can easily become unreadable when they are long with the current fontSize scaling method. Users should have access to a config option where a label uses a consistent font size and will automatically trim/truncate itself to fit within its rect.

API Changes

Add dataLabels field to treemap plotOptions: dataLabels?: { format?: 'scale' | 'truncate' }

Add new method that will truncate label text after formatter has been applied:

        let fontSize = this.getFontSize(r)
        
        ...
        
        if (w.config.plotOptions.treemap.dataLabels.format === 'truncate') {
          fontSize = parseInt(w.config.dataLabels.style.fontSize, 10)
          formattedText = this.truncateLabels(formattedText, fontSize, x1, y1, x2, y2)
        }
        
        ...
        
        // This is an alternative label formatting method that uses a
        // consistent font size, and trims the edge of long labels
        truncateLabels(text, fontSize, x1, y1, x2, y2) {
          const graphics = new Graphics(this.ctx)
          const textRect = graphics.getTextRects(text, fontSize)
      
          // Determine max width based on ideal orientation of text
          const labelMaxWidth =
            textRect.width + this.w.config.stroke.width + 5 > x2 - x1 &&
            y2 - y1 > x2 - x1
              ? y2 - y1
              : x2 - x1
          const truncatedText = graphics.getTextBasedOnMaxWidth({
            text: text,
            maxWidth: labelMaxWidth,
            fontSize: fontSize,
          })
      
          // Return empty label when text has been trimmed for very small rects
          if (text.length !== truncatedText.length && labelMaxWidth / fontSize < 5) {
            return ''
          } else {
            return truncatedText
          }
        }

Update rotateToFitLabel method so that trimmed labels that are rotated will center a bit better:

      elText.node.setAttribute(
        'transform',
        `rotate(-90 ${labelRotatingCenter.x} ${
          labelRotatingCenter.y
        }) translate(${textRect.height / 3})`
      )

Intended Use Case

Current behavior, chart with long labels:

Proposed behavior, chart using truncated labels: