fix: labels go beyond the boundaries of the areas on the treemap

src/__tests__/treemap.visual.test.tsx

@@ -57,4 +57,25 @@ test.describe('Treemap series', () => {
         const component = await mount(<ChartTestStory data={data} />);
         await expect(component.locator('svg')).toHaveScreenshot();
     });
+
+    test('Not enough space to display the labels', async ({mount}) => {
+        const data: ChartData = {
+            series: {
+                data: [
+                    {
+                        type: 'treemap',
+                        name: '',
+                        layoutAlgorithm: 'dice',
+                        data: [
+                            {name: 'Value 1', value: 1},
+                            {name: 'Value 10', value: 10},
+                            {name: 'Value 100', value: 100},
+                        ],
+                    },
+                ],
+            },
+        };
+        const component = await mount(<ChartTestStory data={data} />);
+        await expect(component.locator('svg')).toHaveScreenshot();
+    });
 });

src/hooks/useShapes/treemap/prepare-data.ts

@@ -35,25 +35,31 @@ function getLabels(args: {
 
         texts.forEach((text, index) => {
             const label = getFormattedValue({value: text, ...args.options});
-            const {maxHeight: lineHeight, maxWidth: labelWidth} =
+            const {maxHeight: lineHeight, maxWidth: labelMaxWidth} =
                 getLabelsSize({labels: [label], html}) ?? {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
-            const width = Math.max(0, right - left);
+            const spaceWidth = Math.max(0, right - left);
+            const spaceHeight = Math.max(0, d.y1 - d.y0 - padding);
             let x = left;
             const y = index * lineHeight + d.y0 + padding;
+            const labelWidth = Math.min(labelMaxWidth, spaceWidth);
+
+            if (!labelWidth || lineHeight > spaceHeight) {
+                return;
+            }
 
             switch (align) {
                 case 'left': {
                     x = left;
                     break;
                 }
                 case 'center': {
-                    x = Math.max(left, left + (width - labelWidth) / 2);
+                    x = Math.max(left, left + (spaceWidth - labelMaxWidth) / 2);
                     break;
                 }
                 case 'right': {
-                    x = Math.max(left, right - labelWidth);
+                    x = Math.max(left, right - labelMaxWidth);
                     break;
                 }
             }
@@ -63,13 +69,13 @@ function getLabels(args: {
                       content: label,
                       x,
                       y,
-                      size: {width, height: lineHeight},
+                      size: {width: labelWidth, height: lineHeight},
                   }
                 : {
                       text: label,
                       x,
                       y,
-                      width,
+                      width: labelWidth,
                       nodeData: d.data,
                   };