Initial commit

components/radar-chart.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+interface CategoryData {
+  name: string
+  count: number
+  percentage: number
+  color: string
+  keywords: string[]
+}
+
+interface RadarChartProps {
+  data: CategoryData[]
+}
+
+export default function RadarChart({ data }: RadarChartProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    // 獲取容器尺寸
+    const container = canvas.parentElement
+    if (!container) return
+
+    const containerRect = container.getBoundingClientRect()
+
+    // 設置 canvas 尺寸 - 確保正方形比例
+    const size = Math.min(containerRect.width, containerRect.height)
+    canvas.width = size * window.devicePixelRatio
+    canvas.height = size * window.devicePixelRatio
+    canvas.style.width = `${size}px`
+    canvas.style.height = `${size}px`
+
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
+
+    const centerX = size / 2
+    const centerY = size / 2
+    const radius = Math.min(centerX, centerY) - 60
+
+    // 清除畫布
+    ctx.clearRect(0, 0, size, size)
+
+    // 過濾有數據的分類
+    const activeData = data.filter((item) => item.count > 0)
+    if (activeData.length === 0) {
+      // 顯示無數據提示
+      ctx.fillStyle = "#94A3B8"
+      ctx.font = "16px sans-serif"
+      ctx.textAlign = "center"
+      ctx.fillText("暫無數據", centerX, centerY)
+      return
+    }
+
+    const angleStep = (2 * Math.PI) / activeData.length
+    const maxValue = Math.max(...activeData.map((item) => item.count))
+
+    // 繪製背景網格
+    ctx.strokeStyle = "#475569"
+    ctx.lineWidth = 1
+
+    // 繪製同心圓
+    for (let i = 1; i <= 5; i++) {
+      ctx.beginPath()
+      ctx.arc(centerX, centerY, (radius * i) / 5, 0, 2 * Math.PI)
+      ctx.stroke()
+    }
+
+    // 繪製軸線
+    activeData.forEach((_, index) => {
+      const angle = index * angleStep - Math.PI / 2
+      const x = centerX + Math.cos(angle) * radius
+      const y = centerY + Math.sin(angle) * radius
+
+      ctx.beginPath()
+      ctx.moveTo(centerX, centerY)
+      ctx.lineTo(x, y)
+      ctx.stroke()
+    })
+
+    // 繪製數據區域
+    ctx.beginPath()
+    activeData.forEach((item, index) => {
+      const angle = index * angleStep - Math.PI / 2
+      const value = (item.count / maxValue) * radius
+      const x = centerX + Math.cos(angle) * value
+      const y = centerY + Math.sin(angle) * value
+
+      if (index === 0) {
+        ctx.moveTo(x, y)
+      } else {
+        ctx.lineTo(x, y)
+      }
+    })
+    ctx.closePath()
+
+    // 填充區域
+    ctx.fillStyle = "rgba(59, 130, 246, 0.2)"
+    ctx.fill()
+
+    // 描邊
+    ctx.strokeStyle = "#3B82F6"
+    ctx.lineWidth = 2
+    ctx.stroke()
+
+    // 繪製數據點
+    activeData.forEach((item, index) => {
+      const angle = index * angleStep - Math.PI / 2
+      const value = (item.count / maxValue) * radius
+      const x = centerX + Math.cos(angle) * value
+      const y = centerY + Math.sin(angle) * value
+
+      ctx.beginPath()
+      ctx.arc(x, y, 4, 0, 2 * Math.PI)
+      ctx.fillStyle = item.color
+      ctx.fill()
+      ctx.strokeStyle = "#FFFFFF"
+      ctx.lineWidth = 2
+      ctx.stroke()
+    })
+
+    // 繪製標籤 - 響應式字體大小
+    ctx.fillStyle = "#E2E8F0"
+    const fontSize = Math.max(10, Math.min(14, size / 30)) // 響應式字體大小
+    ctx.font = `${fontSize}px sans-serif`
+    ctx.textAlign = "center"
+
+    activeData.forEach((item, index) => {
+      const angle = index * angleStep - Math.PI / 2
+      const labelRadius = radius + 30
+      const x = centerX + Math.cos(angle) * labelRadius
+      const y = centerY + Math.sin(angle) * labelRadius
+
+      // 調整文字對齊
+      if (Math.cos(angle) < -0.1) {
+        ctx.textAlign = "right"
+      } else if (Math.cos(angle) > 0.1) {
+        ctx.textAlign = "left"
+      } else {
+        ctx.textAlign = "center"
+      }
+
+      // 繪製分類名稱
+      ctx.fillText(item.name, x, y)
+      // 繪製數量
+      ctx.fillText(`${item.count}`, x, y + fontSize + 2)
+    })
+  }, [data])
+
+  // 監聽窗口大小變化
+  useEffect(() => {
+    const handleResize = () => {
+      // 觸發重繪
+      const canvas = canvasRef.current
+      if (canvas) {
+        const event = new Event("resize")
+        window.dispatchEvent(event)
+      }
+    }
+
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <canvas
+        ref={canvasRef}
+        className="max-w-full max-h-full"
+        style={{
+          width: "auto",
+          height: "auto",
+          aspectRatio: "1 / 1", // 確保正方形比例
+        }}
+      />
+    </div>
+  )
+}