fix the show of sentecnse of the popup

app/components/dashboard/strategic-alignment-popup.tsx

@@ -20,6 +20,7 @@ import apiService from "~/lib/api";
 import { Skeleton } from "~/components/ui/skeleton";
 import { formatNumber } from "~/lib/utils";
 import { ChartContainer } from "../ui/chart";
+import { TruncatedText } from "../ui/truncatedText";
 
 interface StrategicAlignmentData {
   strategic_theme: string;
@@ -153,7 +154,22 @@ export function StrategicAlignmentPopup({
                     tickLine={false}
                     axisLine={false}
                     tickMargin={10}
-                    tick={{ fill: "#94a3b8", fontSize: 12 }}
+                    interval={0}
+                    style={{ fill: "#94a3b8", fontSize: 12 }}
+                    tick={(props) => {
+                      const { x, y, payload } = props;
+                      console.log(payload)
+                      return (
+                        <g transform={`translate(${x},${y})`}>
+                          <foreignObject width={80} height={20} x={-45} y={0}>
+                          <TruncatedText 
+                    maxWords={2}
+                            text={payload.value}
+                            />
+                            </foreignObject>
+                        </g>
+                      );
+                    }}
                   />
                   <YAxis
                     domain={[0, 100]}
@@ -164,6 +180,8 @@ export function StrategicAlignmentPopup({
                     tickFormatter={(value) =>
                       `${formatNumber(Math.round(value))}%`
                     }
+
+
                       label={{
     value: "تعداد برنامه ها" , 
     angle: -90,           

app/components/ui/truncatedText.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+
+interface TruncatedTextProps {
+  text: string
+  maxWords?: number
+}
+
+export function TruncatedText({ text, maxWords = 4 }: TruncatedTextProps) {
+  const words = text.trim().split(/\s+/)
+  console.log(words)
+  const shouldTruncate = words.length > maxWords
+  const displayText = shouldTruncate ? words.slice(0, maxWords).join(" ") + " ..." : text
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className={`${words.length >= 4 ? "cursor-help" : ""} text-foreground`}>
+            {displayText}
+          </span>
+        </TooltipTrigger>
+        {shouldTruncate && (
+          <TooltipContent className="max-w-xs">
+            {text}
+          </TooltipContent>
+        )}
+      </Tooltip>
+    </TooltipProvider>
+  )
+}