style: ปรับรูปแบบการแสดงผล

Author: wanasart

client/my-app/src/components/features/analytics/Chart/EventCount.tsx

@@ -14,14 +14,6 @@ type EventCountChartProps = {
 
 type ApexSeries = NonNullable<ApexOptions["series"]>;
 
-const AXIS_LABEL_STYLE = {
-  colors: "#6b7280",
-  fontSize: "12px",
-};
-
-// ===== CONFIG =====
-const MAX_VALUE = 300; //  เปลี่ยน max แค่ตรงนี้ ที่เหลือจะตามให้เอง
-
 // ===== DATA =====
 const EVENTS = [
   "Event 1",
@@ -37,12 +29,47 @@ const EVENTS = [
   "Event 11",
   "Event 12",
   "Event 13",
+  "Event 14",
+  "Event 15",
+  "Event 16",
+];
+
+const EVENT_COUNTS = [
+  80, 35, 70, 65, 20, 55, 75, 95, 60, 80, 30, 15, 45, 45, 90, 50,
 ];
 
-const EVENT_COUNTS = [80, 35, 70, 65, 20, 55, 75, 95, 60, 80, 30, 15, 267];
+// ===== Scroll / height settings =====
+const MAX_VISIBLE_EVENTS = 10; // จำนวนแถวที่โชว์ก่อนจะเริ่ม scroll
+const ROW_HEIGHT = 38; // px ต่อแถว
+const NEED_SCROLL = EVENTS.length > MAX_VISIBLE_EVENTS;
+
+const computedMaxHeight = NEED_SCROLL
+  ? MAX_VISIBLE_EVENTS * ROW_HEIGHT
+  : undefined;
+
+const fullChartHeight = Math.max(EVENTS.length * ROW_HEIGHT, 120);
 
-// ===== OPTIONS =====
-const chartOptions: ApexOptions = {
+const AXIS_LABEL_STYLE = {
+  colors: "#6b7280",
+  fontSize: "12px",
+};
+
+// ===== MAX_VALUE (อิงจาก data) =====
+// หา max จาก data แล้วเผื่อ 10% เพื่อไม่ให้แท่งแตะขอบแกนพอดี
+const maxData = Math.max(...EVENT_COUNTS, 0);
+
+// ถ้า maxData = 0 จะกันหาร 0/undefined
+const PADDING_RATIO = 1.1; // เผื่อ 10%
+const roundTo = 10; // ปัดเป็นเลขกลมตามหน่วยนี้ (10 => 270 -> 280)
+const padded = Math.ceil(maxData * PADDING_RATIO || 1);
+const MAX_VALUE = Math.max(
+  padded % roundTo === 0 ? padded : Math.ceil(padded / roundTo) * roundTo,
+  roundTo
+);
+const TOTAL_EVENTS = EVENT_COUNTS.reduce((sum, v) => sum + v, 0);
+
+// ===== CHART OPTIONS =====
+const chartOptions = (maxValue: number): ApexOptions => ({
   chart: {
     type: "bar",
     stacked: true,
@@ -54,8 +81,8 @@ const chartOptions: ApexOptions = {
   plotOptions: {
     bar: {
       horizontal: true,
-      barHeight: "55%",
-      borderRadius: 0,
+      barHeight: "60%",
+      borderRadius: 4,
     },
   },
 
@@ -74,7 +101,7 @@ const chartOptions: ApexOptions = {
     position: "top",
     categories: EVENTS,
     min: 0,
-    max: MAX_VALUE,            // ใช้ MAX_VALUE ตรงนี้
+    max: maxValue, // ใช้ MAX_VALUE ที่คำนวณแล้ว
     tickAmount: 10,
     labels: {
       style: AXIS_LABEL_STYLE,
@@ -99,9 +126,9 @@ const chartOptions: ApexOptions = {
   legend: {
     show: false,
   },
-};
+});
 
-// series 1 = ม่วง (ค่าจริง) , series 2 = เทา (ส่วนที่เหลือถึง MAX_VALUE)
+// ===== SERIES (ค่าจริง + remaining) =====
 const chartSeries: ApexSeries = [
   {
     name: "Event Count",
@@ -110,36 +137,51 @@ const chartSeries: ApexSeries = [
   },
   {
     name: "Remaining",
-    data: EVENT_COUNTS.map((v) => MAX_VALUE - v), //  เปลี่ยนจาก 100 → MAX_VALUE
+    data: EVENT_COUNTS.map((v) => Math.max(0, MAX_VALUE - v)),
     color: "#f3f4f6",
   },
 ];
 
 export default function EventCountChart({ height = 380 }: EventCountChartProps) {
+  const chartHeight = NEED_SCROLL ? fullChartHeight : height;
+
   return (
     <div className="w-full rounded-3xl bg-white px-6 py-5 shadow-sm border border-[#e5e7f5]">
       <h2 className="text-lg font-bold text-[var(--color-primary,#111827)]">
         Event Count
       </h2>
 
-      <div className="w-full md:overflow-visible overflow-x-auto overflow-y-hidden">
+      {/* Scroll Container */}
+      <div
+        className="w-full md:overflow-visible overflow-x-auto"
+        style={{
+          maxHeight: computedMaxHeight ? `${computedMaxHeight}px` : "auto",
+          overflowY: NEED_SCROLL ? "auto" : "visible",
+        }}
+      >
         <div className="min-w-[700px] md:min-w-0">
           <ReactApexChart
-            options={chartOptions}
+            options={chartOptions(MAX_VALUE)}
             series={chartSeries}
             type="bar"
-            height={height}
+            height={chartHeight}
           />
         </div>
       </div>
 
-      {/* Legend อธิบายความหมายสี — ล็อกกลางทุกหน้าจอ */}
+      {/* Legend */}
       <div className="mt-4 flex flex-wrap items-center justify-center gap-3 text-xs text-slate-600">
         <div className="flex items-center gap-2">
           <span className="h-2.5 w-2.5 rounded-full bg-[#a0a1ff]" />
           <span className="whitespace-nowrap">Event Count</span>
         </div>
+        <div className="flex items-center gap-2">
+          {/* <span className="h-2.5 w-2.5 rounded-full bg-[#f3f4f6]" /> */}
+          <span className="whitespace-nowrap">
+            Total: {TOTAL_EVENTS.toLocaleString()}
+          </span>
+        </div>
       </div>
     </div>
   );
-}
+}