add pie chart

2025-03-26 11:18:36 +08:00
parent 1755b44a39
commit c0e5a9ccb2
3 changed files with 577 additions and 49 deletions
--- a/app/analytics/devices/page.tsx
+++ b/app/analytics/devices/page.tsx
@@ -1,7 +1,11 @@
 "use client";

-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { DeviceAnalytics } from '../../api/types';
+import { Chart, PieController, ArcElement, Tooltip, Legend, CategoryScale, LinearScale } from 'chart.js';
+
+// 注册Chart.js组件
+Chart.register(PieController, ArcElement, Tooltip, Legend, CategoryScale, LinearScale);

 export default function DeviceAnalyticsPage() {
  const [deviceData, setDeviceData] = useState<DeviceAnalytics | null>(null);
@@ -12,6 +16,23 @@ export default function DeviceAnalyticsPage() {
    to: new Date('2025-03-05')
  });

+  // 创建图表引用
+  const deviceTypesChartRef = useRef<HTMLCanvasElement>(null);
+  const browsersChartRef = useRef<HTMLCanvasElement>(null);
+  const osChartRef = useRef<HTMLCanvasElement>(null);
+  
+  // 图表实例引用
+  const deviceTypesChartInstance = useRef<Chart | null>(null);
+  const browsersChartInstance = useRef<Chart | null>(null);
+  const osChartInstance = useRef<Chart | null>(null);
+
+  // 颜色配置
+  const COLORS = {
+    deviceTypes: ['rgba(59, 130, 246, 0.8)', 'rgba(96, 165, 250, 0.8)', 'rgba(147, 197, 253, 0.8)', 'rgba(191, 219, 254, 0.8)', 'rgba(219, 234, 254, 0.8)'],
+    browsers: ['rgba(16, 185, 129, 0.8)', 'rgba(52, 211, 153, 0.8)', 'rgba(110, 231, 183, 0.8)', 'rgba(167, 243, 208, 0.8)', 'rgba(209, 250, 229, 0.8)'],
+    os: ['rgba(239, 68, 68, 0.8)', 'rgba(248, 113, 113, 0.8)', 'rgba(252, 165, 165, 0.8)', 'rgba(254, 202, 202, 0.8)', 'rgba(254, 226, 226, 0.8)']
+  };
+
  useEffect(() => {
    const fetchDeviceData = async () => {
      try {
@@ -33,12 +54,164 @@ export default function DeviceAnalyticsPage() {
    fetchDeviceData();
  }, [dateRange]);

+  // 初始化和更新图表
+  useEffect(() => {
+    if (!deviceData || isLoading) return;
+
+    // 销毁旧的图表实例
+    if (deviceTypesChartInstance.current) {
+      deviceTypesChartInstance.current.destroy();
+    }
+    if (browsersChartInstance.current) {
+      browsersChartInstance.current.destroy();
+    }
+    if (osChartInstance.current) {
+      osChartInstance.current.destroy();
+    }
+
+    // 创建设备类型图表
+    if (deviceTypesChartRef.current && deviceData.deviceTypes.length > 0) {
+      const ctx = deviceTypesChartRef.current.getContext('2d');
+      if (ctx) {
+        deviceTypesChartInstance.current = new Chart(ctx, {
+          type: 'pie',
+          data: {
+            labels: deviceData.deviceTypes.map(item => item.type),
+            datasets: [{
+              data: deviceData.deviceTypes.map(item => item.count),
+              backgroundColor: COLORS.deviceTypes,
+              borderColor: COLORS.deviceTypes.map(color => color.replace('0.8', '1')),
+              borderWidth: 1
+            }]
+          },
+          options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+                labels: {
+                  color: 'white'
+                }
+              },
+              tooltip: {
+                callbacks: {
+                  label: function(context) {
+                    const label = context.label || '';
+                    const value = context.raw as number;
+                    const total = (context.chart.data.datasets[0].data as number[]).reduce((a, b) => (a as number) + (b as number), 0);
+                    const percentage = Math.round((value * 100) / total);
+                    return `${label}: ${value} (${percentage}%)`;
+                  }
+                }
+              }
+            }
+          }
+        });
+      }
+    }
+
+    // 创建浏览器图表
+    if (browsersChartRef.current && deviceData.browsers.length > 0) {
+      const ctx = browsersChartRef.current.getContext('2d');
+      if (ctx) {
+        browsersChartInstance.current = new Chart(ctx, {
+          type: 'pie',
+          data: {
+            labels: deviceData.browsers.map(item => item.name),
+            datasets: [{
+              data: deviceData.browsers.map(item => item.count),
+              backgroundColor: COLORS.browsers,
+              borderColor: COLORS.browsers.map(color => color.replace('0.8', '1')),
+              borderWidth: 1
+            }]
+          },
+          options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+                labels: {
+                  color: 'white'
+                }
+              },
+              tooltip: {
+                callbacks: {
+                  label: function(context) {
+                    const label = context.label || '';
+                    const value = context.raw as number;
+                    const total = (context.chart.data.datasets[0].data as number[]).reduce((a, b) => (a as number) + (b as number), 0);
+                    const percentage = Math.round((value * 100) / total);
+                    return `${label}: ${value} (${percentage}%)`;
+                  }
+                }
+              }
+            }
+          }
+        });
+      }
+    }
+
+    // 创建操作系统图表
+    if (osChartRef.current && deviceData.operatingSystems.length > 0) {
+      const ctx = osChartRef.current.getContext('2d');
+      if (ctx) {
+        osChartInstance.current = new Chart(ctx, {
+          type: 'pie',
+          data: {
+            labels: deviceData.operatingSystems.map(item => item.name),
+            datasets: [{
+              data: deviceData.operatingSystems.map(item => item.count),
+              backgroundColor: COLORS.os,
+              borderColor: COLORS.os.map(color => color.replace('0.8', '1')),
+              borderWidth: 1
+            }]
+          },
+          options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+                labels: {
+                  color: 'white'
+                }
+              },
+              tooltip: {
+                callbacks: {
+                  label: function(context) {
+                    const label = context.label || '';
+                    const value = context.raw as number;
+                    const total = (context.chart.data.datasets[0].data as number[]).reduce((a, b) => (a as number) + (b as number), 0);
+                    const percentage = Math.round((value * 100) / total);
+                    return `${label}: ${value} (${percentage}%)`;
+                  }
+                }
+              }
+            }
+          }
+        });
+      }
+    }
+
+    // 清理函数
+    return () => {
+      if (deviceTypesChartInstance.current) {
+        deviceTypesChartInstance.current.destroy();
+      }
+      if (browsersChartInstance.current) {
+        browsersChartInstance.current.destroy();
+      }
+      if (osChartInstance.current) {
+        osChartInstance.current.destroy();
+      }
+    };
+  }, [deviceData, isLoading]);
+
  return (
    <div className="container mx-auto px-4 py-8">
      {/* 页面标题 */}
      <div className="mb-8">
-        <h1 className="text-2xl font-bold text-foreground">Device Analytics</h1>
-        <p className="mt-2 text-text-secondary">Analyze visitor distribution by devices, browsers, and operating systems</p>
+        <h1 className="text-2xl font-bold text-white">Device Analytics</h1>
+        <p className="mt-2 text-white">Analyze visitor distribution by devices, browsers, and operating systems</p>
      </div>

      {/* 时间范围选择器 */}
@@ -70,58 +243,43 @@ export default function DeviceAnalyticsPage() {
        {/* 设备类型 */}
        <div className="bg-card-bg rounded-xl p-6">
          <h3 className="text-lg font-medium text-white mb-4">Device Types</h3>
-          {deviceData?.deviceTypes.map(item => (
-            <div key={item.type} className="mb-4 last:mb-0">
-              <div className="flex justify-between items-center mb-1">
-                <span className="text-sm text-white">{item.type}</span>
-                <span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
-              </div>
-              <div className="w-full bg-background rounded-full h-2">
-                <div
-                  className="bg-blue-500 h-2 rounded-full"
-                  style={{ width: `${item.percentage}%` }}
-                />
-              </div>
+          {deviceData && deviceData.deviceTypes.length > 0 ? (
+            <div className="h-64">
+              <canvas ref={deviceTypesChartRef} />
            </div>
-          ))}
+          ) : (
+            <div className="flex justify-center items-center h-64 text-text-secondary">
+              No data available
+            </div>
+          )}
        </div>

        {/* 浏览器 */}
        <div className="bg-card-bg rounded-xl p-6">
          <h3 className="text-lg font-medium text-white mb-4">Browsers</h3>
-          {deviceData?.browsers.map(item => (
-            <div key={item.name} className="mb-4 last:mb-0">
-              <div className="flex justify-between items-center mb-1">
-                <span className="text-sm text-white">{item.name}</span>
-                <span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
-              </div>
-              <div className="w-full bg-background rounded-full h-2">
-                <div
-                  className="bg-green-500 h-2 rounded-full"
-                  style={{ width: `${item.percentage}%` }}
-                />
-              </div>
+          {deviceData && deviceData.browsers.length > 0 ? (
+            <div className="h-64">
+              <canvas ref={browsersChartRef} />
            </div>
-          ))}
+          ) : (
+            <div className="flex justify-center items-center h-64 text-text-secondary">
+              No data available
+            </div>
+          )}
        </div>

        {/* 操作系统 */}
        <div className="bg-card-bg rounded-xl p-6">
          <h3 className="text-lg font-medium text-white mb-4">Operating Systems</h3>
-          {deviceData?.operatingSystems.map(item => (
-            <div key={item.name} className="mb-4 last:mb-0">
-              <div className="flex justify-between items-center mb-1">
-                <span className="text-sm text-white">{item.name}</span>
-                <span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
-              </div>
-              <div className="w-full bg-background rounded-full h-2">
-                <div
-                  className="bg-red-500 h-2 rounded-full"
-                  style={{ width: `${item.percentage}%` }}
-                />
-              </div>
+          {deviceData && deviceData.operatingSystems.length > 0 ? (
+            <div className="h-64">
+              <canvas ref={osChartRef} />
            </div>
-          ))}
+          ) : (
+            <div className="flex justify-center items-center h-64 text-text-secondary">
+              No data available
+            </div>
+          )}
        </div>
      </div>