RTL Support for the parent labesl in TreeMap

[Jamil-Bailony]

Is your feature request related to a problem? Please describe.

When setting the parent position to top, it works correctly in LTR layouts. However, in RTL layouts, the parent label is incorrectly positioned outside the cell and appears on the left side instead of the right (it should appear on the right with sufficient padding).

• LTR layout:
  

• RTL layout:
  
  

---

Describe the solution you'd like

Providing additional options for the parentLabelPosition property to support values like top-left, top-right, and top-center would fit for both layouts. Alternatively, ensuring the text aligns with the starting edge of the cell automatically also would solve the issue.

---

Describe alternatives you've considered

As a workaround, I manually adjusted the x attribute of the text node (in RTL layout) to align with the cell's starting position using the following code in a React application:

const chartRef = useRef();

useEffect(() => {
    if (direction !== "rtl") {
        return;
    }

    function handleResize() {
        if (!chartRef.current) {
            return;
        }

        // Adjust parent label positions inside the SVG
        const parentLabels = chartRef.current.querySelectorAll('[data-testid^="parentLabel"]');

        parentLabels.forEach((label) => {
            const siblingWidth = label.previousElementSibling.getAttribute("width");
            label.setAttribute("x", siblingWidth);
        });
    }

    // Recalculate text node positions on window resize with debounce
    const debouncedResizeHandler = debounce(handleResize, 600);
    window.addEventListener("resize", debouncedResizeHandler);

    // Initial adjustment delay to allow DOM updates
    setTimeout(handleResize, 20);

    return () => {
        window.removeEventListener("resize", debouncedResizeHandler);
    };
}, [direction]);

/* padding fix */
[dir="rtl"] .chart_container svg [data-testid^="parentLabel"] {
    transform: translate(-6px, 18px);
    text-anchor: start;
}

While this workaround positions the labels correctly, it has limitations:

• The handler requires debouncing because the DOM updates of the chart svg take time (the above delays 600 and 20 tested for my app and works fine).
• Changes are not applied dynamically on the fly and smoothly.

---

Additional context

With the workaround applied, the labels are correctly positioned as shown below:

• RTL layout with the fix applied:
  

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!