Merge pull request #4198 from OneCommunityGlobal/Akshay-fix-keyword-length-most-frequent-keywords

Akshay - Fix - multi-line text rendering in MostFrequentKeywords component

Author: one-community

src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx

@@ -129,8 +129,8 @@ function MostFrequentKeywords() {
 
       const getEllipseSize = text => {
         const len = text.length;
-        if (len > 14) return { rx: 48, ry: 18 };
-        if (len > 10) return { rx: 40, ry: 16 };
+        if (len > 14) return { rx: 48, ry: 22 };
+        if (len > 10) return { rx: 42, ry: 22 };
         return { rx: 32, ry: 16 };
       };
 
@@ -139,9 +139,6 @@ function MostFrequentKeywords() {
         y: Math.max(padding, Math.min(height - padding, y)),
       });
 
-      const truncateText = (text, max = 14) =>
-        text.length <= max ? text : `${text.slice(0, max - 1)}…`;
-
       tags.forEach((tag, i) => {
         const angle = angles[i];
         const isLeftOrRight = Math.abs(Math.cos(angle)) > 0.9;
@@ -186,16 +183,44 @@ function MostFrequentKeywords() {
             window.open(`/tags/${tag.tag}`, '_blank');
           });
 
-        svg
+        const textEl = svg
           .append('text')
           .attr('x', x)
-          .attr('y', y + 4)
+          .attr('y', y)
           .attr('text-anchor', 'middle')
           .attr('font-size', '11px')
-          .attr('fill', '#111')
-          .text(truncateText(tag.tag))
-          .append('title')
-          .text(tag.tag);
+          .attr('fill', '#111');
+
+        // Split text if it's longer than 14 characters
+        let words = [];
+        if (tag.tag.length > 14) {
+          const parts = tag.tag.split(' ');
+          if (parts.length > 1) {
+            const mid = Math.ceil(parts.length / 2);
+            words = [parts.slice(0, mid).join(' '), parts.slice(mid).join(' ')];
+          } else {
+            const midIndex = Math.ceil(tag.tag.length / 2);
+            words = [tag.tag.slice(0, midIndex), tag.tag.slice(midIndex)];
+          }
+        } else {
+          words = [tag.tag];
+        }
+
+        if (words.length > 1) {
+          textEl.attr('transform', `translate(0, -7)`);
+        }
+
+        // Add tspans for each line
+        words.forEach((line, index) => {
+          textEl
+            .append('tspan')
+            .attr('x', x)
+            .attr('dy', index === 0 ? 4 : 14)
+            .text(line);
+        });
+
+        // Tooltip with full text
+        textEl.append('title').text(tag.tag);
       });
     }, 100);