chore: 以本地为准，上传全部并替换 GitHub

components/charts.tsx

@@ -1,121 +1,47 @@
 "use client"
 
-import type React from "react"
-import {
-  LineChart as RechartsLineChart,
-  Line,
-  BarChart as RechartsBarChart,
-  Bar,
-  PieChart as RechartsPieChart,
-  Pie,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-  Cell,
-} from "recharts"
+import { Line } from "@ant-design/plots"
 
-interface ChartProps {
-  data: any
-  height?: number
+interface LineChartProps {
+  data: { date: string; value: number }[]
+  xField: string
+  yField: string
 }
 
-export const LineChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <RechartsLineChart
-        data={data.labels.map((label: string, index: number) => {
-          const dataPoint: any = { name: label }
-          data.datasets.forEach((dataset: any, datasetIndex: number) => {
-            dataPoint[dataset.label] = dataset.data[index]
-          })
-          return dataPoint
-        })}
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Tooltip />
-        <Legend />
-        {data.datasets.map((dataset: any, index: number) => (
-          <Line
-            key={index}
-            type="monotone"
-            dataKey={dataset.label}
-            stroke={dataset.borderColor}
-            fill={dataset.backgroundColor}
-            activeDot={{ r: 8 }}
-          />
-        ))}
-      </RechartsLineChart>
-    </ResponsiveContainer>
-  )
-}
+export function LineChart({ data, xField, yField }: LineChartProps) {
+  const config = {
+    data,
+    xField,
+    yField,
+    smooth: true,
+    color: "#1677ff",
+    point: {
+      size: 4,
+      shape: "circle",
+      style: {
+        fill: "#1677ff",
+        stroke: "#fff",
+        lineWidth: 2,
+      },
+    },
+    tooltip: {
+      showMarkers: false,
+    },
+    state: {
+      active: {
+        style: {
+          shadowBlur: 4,
+          stroke: "#000",
+          fill: "red",
+        },
+      },
+    },
+    interactions: [
+      {
+        type: "marker-active",
+      },
+    ],
+  }
 
-export const BarChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <RechartsBarChart
-        data={data.labels.map((label: string, index: number) => {
-          const dataPoint: any = { name: label }
-          data.datasets.forEach((dataset: any, datasetIndex: number) => {
-            dataPoint[dataset.label] = dataset.data[index]
-          })
-          return dataPoint
-        })}
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Tooltip />
-        <Legend />
-        {data.datasets.map((dataset: any, index: number) => (
-          <Bar
-            key={index}
-            dataKey={dataset.label}
-            fill={dataset.backgroundColor || `rgba(59, 130, 246, ${0.8 - index * 0.2})`}
-          />
-        ))}
-      </RechartsBarChart>
-    </ResponsiveContainer>
-  )
-}
-
-export const PieChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
-  return (
-    <ResponsiveContainer width="100%" height={height}>
-      <RechartsPieChart>
-        <Tooltip />
-        <Legend />
-        {data.datasets.map((dataset: any, datasetIndex: number) => (
-          <Pie
-            key={datasetIndex}
-            data={data.labels.map((label: string, index: number) => ({
-              name: label,
-              value: dataset.data[index],
-            }))}
-            cx="50%"
-            cy="50%"
-            outerRadius={80}
-            fill="#8884d8"
-            dataKey="value"
-            label
-          >
-            {data.labels.map((entry: any, index: number) => (
-              <Cell
-                key={`cell-${index}`}
-                fill={
-                  dataset.backgroundColor instanceof Array
-                    ? dataset.backgroundColor[index]
-                    : `rgba(59, 130, 246, ${0.8 - index * 0.1})`
-                }
-              />
-            ))}
-          </Pie>
-        ))}
-      </RechartsPieChart>
-    </ResponsiveContainer>
-  )
+  return <Line {...config} />
 }