Category Wise Visitor Statistics

{categoryWiseVisitors.sort((a, b) => b.total_visits - a.total_visits).slice(0, 10).map((item, index) => {

  const heightPercent = maxVisits

    ? (item.total_visits / maxVisits) * 100

    : 0;

  return (

    <div key={index} className="flex flex-col items-center

        min-w-[48px]">

      {/* Visitor Count */}

      <span className="mb-2 text-sm font-bold text-gray-700">

        {item.total_visits.toLocaleString()}

      </span>

      {/* Bar */}

      <div className="h-52 w-12 bg-gray-200 rounded-lg flex

            items-end overflow-hidden">

        <div

          className={`w-full rounded-lg transition-all duration-500

            ${item.most_visited_page

              ? "bg-gradient-to-t from-blue-500 to-indigo-600"

              : "bg-gray-400"

          }`}

          style={{ height: `${heightPercent}%` }}

        />

      </div>

      {/* Label */}

      <span className="mt-2 text-xs text-gray-800 font-medium

        truncate w-16 text-center">

        {item.most_visited_page

          ? item.most_visited_page.slice(0, 12)

          : item.page_type || "Unknown"}

      </span>

    </div>

  );

})}

এই লাইনটা কী করছে?

categoryWiseVisitors
  .sort((a, b) => b.total_visits - a.total_visits)
  .slice(0, 10)
  .map((item, index) => { ... })

✅ sort((a, b) => b.total_visits - a.total_visits)

👉 categoryWiseVisitors array-টাকে
বেশি ভিজিট হয়েছে এমনটা আগে এবং কম ভিজিট হয়েছে এমনটা পরে সাজাচ্ছে।

Descending order (বড় → ছোট)

---

✅ slice(0, 10)

👉 সাজানোর পরে শুধু উপরের Top 10 items রাখছে।

---

✅ .map((item, index) => ...)

👉 এখন এই ১০টা item দিয়ে UI বানাচ্ছে (bar chart)

---

২️⃣ heightPercent কী?

const heightPercent = maxVisits
  ? (item.total_visits / maxVisits) * 100
  : 0;

👉 প্রতিটা bar কত লম্বা হবে সেটা ঠিক করছে।

উদাহরণ:

ধরি,

• maxVisits = 1000

• কোনো item-এর total_visits = 500

তাহলে:

(500 / 1000) * 100 = 50%

মানে bar হবে অর্ধেক উচ্চতা।

---

৩️⃣ Visitor Count দেখানো

<span>
  {item.total_visits.toLocaleString()}
</span>

👉 toLocaleString() বড় সংখ্যাকে সুন্দর বানায়:

10000 → 10,000

---

Bar Chart বানানো

Outer container (Gray Background)

<div className="h-52 w-12 bg-gray-200 rounded-lg">

👉 এটা পুরো column এর ব্যাকগ্রাউন্ড।

---

Inner bar (color + dynamic height)

<div
  className={`w-full transition-all duration-500 ${
    item.most_visited_page
      ? "bg-gradient-to-t from-blue-500 to-indigo-600"
      : "bg-gray-400"
  }`}
  style={{ height: `${heightPercent}%` }}
/>

✅ কাজগুলো:

✔️ Dynamic height:

style={{ height: `${heightPercent}%` }}

👉 bar লম্বা বা খাটো হয় data অনুযায়ী।

---

✔️ Conditional Color:

item.most_visited_page ? gradient : gray

মানে:

শর্ত	রঙ
most_visited_page আছে	blue–indigo gradient
না থাকলে	gray

---

৫️⃣ নিচের Label

<span>
  {item.most_visited_page
    ? item.most_visited_page.slice(0, 12)
    : item.page_type || "Unknown"}
</span>

কাজ:

• যদি most_visited_page থাকে → তার নাম দেখাবে

• না থাকলে → page_type

• কিছুই না থাকলে → "Unknown"

কেন slice(0, 12)?

👉 বেশি বড় নাম হলে কেটে ছোট করে দেখানোর জন্য।

"Electronics Page" → "Electronics"

---

✅ সারসংক্ষেপ (এই কোড কী করে)

এই কোডটি:

✅ Visitors বেশি → কম সাজায়
✅ Top 10 only নেয়
✅ একটা Bar Chart তৈরি করে
✅ বড় সংখ্যাকে সুন্দর দেখায়
✅ বেশি visit হলে taller bar
✅ Highlight করে most visited pages
✅ Label smartভাবে দেখায়

---

Alita 😎 চাইলে আমি তোমাকে বলতে পারি:

• Sort ascending কিভাবে করবে

• Hover এ tooltip কিভাবে দিবে

• Animation smooth করবে

• Responsive কিভাবে বানাবে

শুধু বলো: "এই chart টা আরো উন্নত করতে চাই"

github : Controller

github : React