update: the d3 and dashboard-custom-bar

app/components/dashboard/d3-image-info.tsx

@@ -46,7 +46,24 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
 
 export function D3ImageInfo({ companies }: D3ImageInfoProps) {
   // Ensure we have exactly 6 companies
-  const displayCompanies = companies;
+
+  const sample = [
+    { id: "آب نیرو", name: "آب نیرو", imageUrl: "/abniro.png" },
+    { id: "بسپاران", name: "بسپاران", imageUrl: "/besparan.png" },
+    { id: "خوارزمی", name: "خوارزمی", imageUrl: "/khwarazmi.png" },
+    { id: "فراورش 1", name: "فراورش 1", imageUrl: "/faravash1.png" },
+    { id: "فراورش 2", name: "فراورش 2", imageUrl: "/faravash2.png" },
+    { id: "کیمیا", name: "کیمیا", imageUrl: "/kimia.png" }
+  ];
+  const merged = sample.map(company => {
+    const found = companies.find(item => item.id == company.id);
+    return found
+      ? found
+      : { ...company, cost: 0, capacity: 0, revenue: 0 };
+  });
+
+  const displayCompanies = merged;
+  console.log(displayCompanies)
 
   // Positions inside a 5x4 grid (col, row)
   // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
@@ -124,6 +141,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
           align-self : center;
           justify-self : center;
           padding : .2rem 1.2rem;
+          min-width : 8rem;
           background-color: transparent;
         }
 

app/components/dashboard/dashboard-custom-bar-chart.tsx

@@ -1,5 +1,10 @@
 import React from "react";
 import { formatNumber } from "~/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip"
 
 interface DataItem {
   label: string;
@@ -54,12 +59,27 @@ export function DashboardCustomBarChart({
               <div className="flex-row-reverse items-center gap-2 flex min-h-6 h-10 rounded-lg overflow-hidden">
                 {/* Animated bar */}
                 <div
-                  className={`h-auto gap-2 ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
+                  className={`h-auto gap-2 overflow-hidden ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
                   style={{ width: `${widthPercentage}%` }}
                 >
-                  <span className="text-[#3F415A] text-left font-persian font-medium text-sm py-1 w-max">
+                  { widthPercentage > 20 ? (
+                  <span className="text-[#3F415A] min-w-max text-left font-persian font-medium text-sm py-1 w-max">
                     {item.label}
                   </span>
+                  ) : (
+                  <Tooltip>
+                        <TooltipTrigger  className={`${item.color}`} asChild>
+                          <span className="text-[#3F415A]  text-left font-persian font-medium text-sm py-1">
+                           <span className="invisible">""</span>
+                                            </span>
+
+                        </TooltipTrigger>
+                        <TooltipContent className={`${item.color} ${item.color.replace("bg","fill")}`}>
+                          <p className="font-persian text-sm">{item.label}</p>
+                        </TooltipContent>
+
+                      </Tooltip>
+                ) }
                 </div>
                   <span className="text-white font-bold text-base">
                     {formatNumber(item.value)}

app/components/ui/tooltip.tsx

@@ -52,7 +52,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className={cn("bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",className)} />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )