From ead9af221772c0c9949af87f650adff8fb87c115 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 11 May 2026 00:21:51 -0600
Subject: [PATCH] feat: add ProblemYearlyChart component

---
 .../problem/components/ProblemYearlyChart.vue | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/oj/problem/components/ProblemYearlyChart.vue

diff --git a/src/oj/problem/components/ProblemYearlyChart.vue b/src/oj/problem/components/ProblemYearlyChart.vue
new file mode 100644
index 0000000..240f49f
--- /dev/null
+++ b/src/oj/problem/components/ProblemYearlyChart.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="yearly-chart" v-if="props.data.length > 1">
+    <Line :data="chartData" :options="chartOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Line } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  Filler,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js"
+import type { YearlyACData } from "oj/api"
+
+ChartJS.register(
+  CategoryScale,
+  Filler,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+)
+
+const props = defineProps<{ data: YearlyACData[] }>()
+
+const chartData = computed(() => ({
+  labels: props.data.map((d) => String(d.year)),
+  datasets: [
+    {
+      label: "AC 率",
+      data: props.data.map((d) => d.ac_rate),
+      fill: true,
+      tension: 0.3,
+      backgroundColor: "rgba(99, 179, 237, 0.2)",
+      borderColor: "rgba(99, 179, 237, 1)",
+      pointBackgroundColor: "rgba(99, 179, 237, 1)",
+    },
+  ],
+}))
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    title: {
+      display: true,
+      text: "历年 AC 率",
+      font: { size: 20 },
+    },
+    tooltip: {
+      callbacks: {
+        label: (context: any) => {
+          const d = props.data[context.dataIndex]
+          return [`AC 率: ${d.ac_rate}%`, `通过: ${d.accepted} / ${d.total}`]
+        },
+      },
+    },
+  },
+  scales: {
+    y: {
+      min: 0,
+      max: 100,
+      ticks: {
+        callback: (value: any) => `${value}%`,
+      },
+    },
+  },
+}))
+</script>
+
+<style scoped>
+.yearly-chart {
+  width: 100%;
+  max-width: 500px;
+  height: 250px;
+  margin: 24px auto;
+}
+</style>