feature(ui) ทำ ui evevt count

Author: chiratchaya-15

client/my-app/src/app/(with-layout)/analytics/page.tsx

@@ -1,24 +1,35 @@
 import AnalyticsView from "@/components/features/analytics/AnalyticsView";
 import TimeBasedAlertDistribution from "@/components/features/analytics/chart/TimeBasedAlertDistribution";
 import AiAccuracyChart from "@/components/features/analytics/chart/AiAccuracyChart";
+import EventCount from "@/components/features/analytics/chart/EventCount";
 
 export default function Analytics() {
   return (
     <div className="space-y-6">
+
+      {/* Top Section */}
       <div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-6">
         <AnalyticsView />
       </div>
 
-  
-      <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
-        <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6 mt-6">
-          <TimeBasedAlertDistribution />
+      {/* Main 2 Columns Layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-[2fr,1fr] gap-6">
+
+        {/* LEFT SIDE */}
+        <div className="space-y-6">
+          <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
+            <TimeBasedAlertDistribution />
+          </div>
+
+          <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
+            <AiAccuracyChart />
+          </div>
         </div>
-      </div>
 
-     
-      <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
-        <AiAccuracyChart />
+        {/* RIGHT SIDE */}
+        <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
+          <EventCount />
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,145 @@
+"use client";
+
+import React from "react";
+import dynamic from "next/dynamic";
+import type { ApexOptions } from "apexcharts";
+
+const ReactApexChart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+
+type EventCountChartProps = {
+  height?: number;
+};
+
+type ApexSeries = NonNullable<ApexOptions["series"]>;
+
+const AXIS_LABEL_STYLE = {
+  colors: "#6b7280",
+  fontSize: "12px",
+};
+
+// ===== CONFIG =====
+const MAX_VALUE = 300; //  เปลี่ยน max แค่ตรงนี้ ที่เหลือจะตามให้เอง
+
+// ===== DATA =====
+const EVENTS = [
+  "Event 1",
+  "Event 2",
+  "Event 3",
+  "Event 4",
+  "Event 5",
+  "Event 6",
+  "Event 7",
+  "Event 8",
+  "Event 9",
+  "Event 10",
+  "Event 11",
+  "Event 12",
+  "Event 13",
+];
+
+const EVENT_COUNTS = [80, 35, 70, 65, 20, 55, 75, 95, 60, 80, 30, 15, 267];
+
+// ===== OPTIONS =====
+const chartOptions: ApexOptions = {
+  chart: {
+    type: "bar",
+    stacked: true,
+    toolbar: { show: false },
+    background: "transparent",
+    parentHeightOffset: 0,
+  },
+
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      barHeight: "55%",
+      borderRadius: 0,
+    },
+  },
+
+  dataLabels: {
+    enabled: false,
+  },
+
+  grid: {
+    borderColor: "#e5e7eb",
+    strokeDashArray: 4,
+    xaxis: { lines: { show: true } },
+    yaxis: { lines: { show: true } },
+  },
+
+  xaxis: {
+    position: "top",
+    categories: EVENTS,
+    min: 0,
+    max: MAX_VALUE,            // ใช้ MAX_VALUE ตรงนี้
+    tickAmount: 10,
+    labels: {
+      style: AXIS_LABEL_STYLE,
+    },
+    axisBorder: { show: false },
+    axisTicks: { show: false },
+  },
+
+  yaxis: {
+    labels: {
+      style: AXIS_LABEL_STYLE,
+    },
+  },
+
+  tooltip: {
+    theme: "light",
+    y: {
+      formatter: (val: number) => `${val}`,
+    },
+  },
+
+  legend: {
+    show: false,
+  },
+};
+
+// series 1 = ม่วง (ค่าจริง) , series 2 = เทา (ส่วนที่เหลือถึง MAX_VALUE)
+const chartSeries: ApexSeries = [
+  {
+    name: "Event Count",
+    data: EVENT_COUNTS,
+    color: "#a0a1ff",
+  },
+  {
+    name: "Remaining",
+    data: EVENT_COUNTS.map((v) => MAX_VALUE - v), //  เปลี่ยนจาก 100 → MAX_VALUE
+    color: "#f3f4f6",
+  },
+];
+
+export default function EventCountChart({ height = 380 }: EventCountChartProps) {
+  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">
+        <div className="min-w-[700px] md:min-w-0">
+          <ReactApexChart
+            options={chartOptions}
+            series={chartSeries}
+            type="bar"
+            height={height}
+          />
+        </div>
+      </div>
+
+      {/* 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>
+    </div>
+  );
+}