Treemap label wrapping not working

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When the treemap label is longer than it’s rect, it doesn’t wrap and instead just disappears.

Expected behavior

Labels wrap nicely.

Minimal reproduction of the problem with instructions

I’ve checked the current shape of the wrapText function here and while looping over the words, in lines 33 and 38 it always adds the word width to the sum. It then compares sumWidth to container width in line 52 and if we need wrapping, it’s obviously longer, so it returns null. Since wrapText is used in different charts as well and I’ve just started using reaviz, I’m probably not the person to fix it so I don’t cause any regressions.

const simpleData: ChartShallowDataShape[] = [
    {
      key: "Very long text, make it as long as necessary or shrink the treemap width so it's longer than the rect's width.",
      data: 1,
    },
    ]
    
     return <TreeMap
      height={400}
      data={simpleData}
      margins={20}
      series={
        <TreeMapSeries  />
      }
    />

Environment

Libs:
    "react": "17.0.2",
    "reaviz": "13.1.3"
Others:

[amcdnl]

@puripant - We would welcome any contributions!

[puripant]

Hi, I am new to this repo but would like to contribute, especially to this issue. I looked into wrapText.tsx and found a few things that made it not working for treemap. For example, the sum of word widths (plus spaces) was not the same as running calculateDimensions() on the whole sentence, probably due to kerning and such. paddingX had no default value and could be undefined and etc. I edited wrapText() as follows.

for (const word of words) {
  nextText = curText === "" ? word : `${curText} ${word}`;
  nextWidth = calculateDimensions(nextText, fontFamily, fontSize).width;
  
  if (nextWidth <= width - (paddingX ? 2*paddingX : 0)) {
    curText = nextText;
    currWidth = nextWidth;
  } else {
    rows.push(curText);
    maxWidth = Math.max(maxWidth, currWidth);
    curText = word;
    currWidth = calculateDimensions(curText, fontFamily, fontSize).width;
  }
}
rows.push(curText);
maxHeight = rows.length * size.height;

I also wrote a treemap example with long text labels in the Storybook to test it. wrapText() was used in two other charts: bubble chart and Venn diagram. I checked their examples with long label texts and they worked fine as well.

If this sounds okay, I can create a pull request.