feat(chart): 支持 MoE 模型识别与可视化增强

- 新增 `_isMoE` 标记支持，将 MoE 模型归类为独立系列并展示为星形标记
- 图表符号大小根据数据量动态调整，提高可读性和交互体验
- 增加对 y 轴单值居中处理逻辑，避免零值被误设为 1
- 引入模型类型排序机制，使图例和系列按照预定义顺序显示
- 添加 `selectedDataNameChart` 用于图表数据源筛选，分离控制维度
- 更新默认自动显示系列配置，支持通配符 "*" 显示所有系列
- 调整图表容器宽度，优化布局适配

src/components/Chart.vue

@@ -6,7 +6,7 @@ import * as echarts from 'echarts'
 const chartRef = ref(null)
 let chart = null
 
-const { leaderboard, selectedDataName } = useLeaderboardData()
+const { leaderboard, selectedDataNameChart, modelTypeGroups } = useLeaderboardData()
 
 // 接受一个可选 prop：autoShowSeries（数组），用于指定哪些模型类型在图表加载时自动显示。
 // 例如：<Chart :autoShowSeries="['gemma-3','Hunyuan']" />
@@ -19,12 +19,15 @@ function buildSeriesFromLeaderboard(rows = []) {
   const groups = {}
   rows.forEach(r => {
     // 按 model_type 分组；如果 model_type 未填则标记为 未知
-    const seriesName = r.model_type || '未知'
+    // 优化：如果行上有 _isMoE 标记，则把其归为 "<model_type> (MoE)" 系列，且保留 model_series_base
+    const baseType = r.model_type || '未知'
+    const isMoE = !!r._isMoE
+    const seriesName = isMoE ? `${baseType} (MoE)` : baseType
     if (!groups[seriesName]) groups[seriesName] = []
     // 数据原本单位为 TFLOPs，转换为 FLOPs（1 TFLOP = 1e12 FLOPs）用于对数尺度显示
     const xRaw = parseFloat(r.BF16_TFLOPs) || 0
     const x = xRaw > 0 ? xRaw * 1e12 : 0
-    const y = parseFloat(r.information_capacity ?? r.ic) || 0
+    const y = parseFloat(r.ic) || 0
     const rank = Number(r.rank) || 0
     groups[seriesName].push({ x, y, rank })
   })
@@ -35,7 +38,10 @@ function buildSeriesFromLeaderboard(rows = []) {
       .filter(p => Number.isFinite(p.x) && p.x > 0 && Number.isFinite(p.y))
       .sort((a, b) => a.rank - b.rank)
       .map(d => [d.x, d.y])
-    return { name, rawCount: groups[name].length, type: 'line', showSymbol: true, symbolSize: 6, data }
+    // 根据该系列的样本点数量适度放大 symbolSize，避免点太小难以点击
+    const count = groups[name].length || 1
+    const symbolSize = Math.min(18, 8 + Math.sqrt(count) * 1.6)
+    return { name, rawCount: count, type: 'line', showSymbol: true, symbolSize, data }
   })
 }
 
@@ -74,9 +80,17 @@ function getChartOption(series) {
   if (yMin !== undefined && yMax !== undefined) {
     if (yMin === yMax) {
       // small symmetric padding
-      const v = yMin || 1
-      yMin = v - Math.abs(v) * 0.05
-      yMax = v + Math.abs(v) * 0.05
+      // 如果只有单一数值，使用该值作为中心；但若该值为 0，则不要把区间提升到以 1 为中心（之前用 `yMin || 1` 会导致 0 -> 1）
+      const v = (yMin !== undefined ? yMin : 1)
+      if (v === 0) {
+        // 为 0 时给一个小的对称 padding（之后如果原始数据全为正，会被下限为 0）
+        const pad = 0.05
+        yMin = -pad
+        yMax = pad
+      } else {
+        yMin = v - Math.abs(v) * 0.05
+        yMax = v + Math.abs(v) * 0.05
+      }
     } else {
       const pad = (yMax - yMin) * 0.08
       yMin = yMin - pad
@@ -93,27 +107,79 @@ function getChartOption(series) {
     return s.split('').map(ch => map[ch] || ch).join('')
   }
   // 可循环使用的视觉样式（颜色/符号/线型）
-  const colors = ['#1f77b4','#ff7f0e','#2ca02c','#d62728','#9467bd','#8c564b','#e377c2','#7f7f7f','#bcbd22','#17becf']
-  const symbols = ['circle','rect','triangle','diamond','pin','arrow','star','roundRect','triangle','circle']
-  const lineStyles = ['solid','solid','solid','solid','dash','solid','solid','dash','solid','dash']
+  // 7 种颜色从红到紫，重复使用；非 MoE 使用圆形，MoE 使用星形（star）
+  const colors = ['#1F77B4','#ff7f0e','#2CA02C','#D62728','#9467BD','#8C564B','#E377C2','#7F7F7F','#BCBD22','#17BECF']
+  const lineStyles = ['solid','solid','solid','solid','dash','solid','solid']
 
-  // 给每个 series 注入视觉样式
-  const styledSeries = series.map((s, idx) => {
-    const color = colors[idx % colors.length]
-    return Object.assign({}, s, {
-      lineStyle: { width: 2, type: lineStyles[idx % lineStyles.length], color },
-      itemStyle: { color },
-      symbol: symbols[idx % symbols.length],
-      emphasis: { focus: 'series' }
-    })
+  // 先构建不带颜色/符号的基础 series（rawSeries），后面会在排序后按顺序分配颜色和符号
+  const rawSeries = series.map(s => {
+    const baseSize = Number(s.symbolSize) || 8
+    return Object.assign({}, s, { symbolSize: baseSize, hoverAnimation: true })
   })
 
   // 构建 legend.selected 映射：只有 props.autoShowSeries 中的系列会默认显示，其他需手动点击 legend 打开
   const legendSelected = {}
-  styledSeries.forEach(s => {
+  if(props.autoShowSeries.includes("*")){
+    rawSeries.forEach(s => {
+      const name = String(s.name)
+      legendSelected[name] = true
+    })
+  }
+  else{
+     rawSeries.forEach(s => {
     const name = String(s.name)
     legendSelected[name] = Array.isArray(props.autoShowSeries) && props.autoShowSeries.includes(name)
   })
+  }
+ 
+
+  // 按 modelTypeMapping 的定义顺序对 series 排序（使用来自 useLeaderboardData 的 modelTypeGroups）
+  const preferredOrder = (modelTypeGroups && Array.isArray(modelTypeGroups.value)) ? modelTypeGroups.value : []
+  const orderIndex = {}
+  preferredOrder.forEach((n, i) => { orderIndex[String(n)] = i })
+  // console.log('Preferred series order:', preferredOrder)
+  const inOrder = []
+  const rest = []
+  rawSeries.forEach(s => {
+    const name = String(s.name)
+    if (Object.prototype.hasOwnProperty.call(orderIndex, name)) {
+      inOrder.push(s)
+    } else {
+      rest.push(s)
+    }
+  })
+  // 按映射顺序排序 inOrder
+  inOrder.sort((a, b) => orderIndex[String(a.name)] - orderIndex[String(b.name)])
+  // 其余的按名字字母序 (目前全部指定映射了)
+  rest.sort((a, b) => String(a.name).localeCompare(String(b.name)))
+
+  // console.log('Final series order:', inOrder.map(s => s.name), rest.map(s => s.name))
+
+  const finalSeries = [...inOrder, ...rest]
+
+  // 现在按 finalSeries 顺序分配颜色和符号，保证颜色顺序与 modelTypeMapping 一致
+  const finalSeriesStyled = finalSeries.map((s, idx) => {
+    const color = colors[idx % colors.length]
+    const lineType = lineStyles[idx % lineStyles.length] || 'solid'
+    // 如果 series 名称包含 (MoE) 则使用星形
+    const isMoESeries = String(s.name).includes('(MoE)')
+    const symbolShape = isMoESeries ? 'star' : 'circle'
+    const baseSize = Number(s.symbolSize) || 8
+    const emphasisSize = Math.max(12, Math.round(baseSize * 1.6))
+    return Object.assign({}, s, {
+      lineStyle: { width: 2, type: lineType, color },
+      itemStyle: { color },
+      symbol: symbolShape,
+      symbolSize: baseSize,
+      hoverAnimation: true,
+      emphasis: {
+        focus: 'series',
+        symbolSize: emphasisSize,
+        itemStyle: { borderWidth: 2, borderColor: '#ffffff' }
+      }
+    })
+  })
+  const legendData = finalSeriesStyled.map(s => String(s.name))
 
   return {
     color: colors,
@@ -147,7 +213,7 @@ function getChartOption(series) {
       itemHeight: 10,
       textStyle: { color: '#cfd8dc' },
       tooltip: { show: true }
-    }, { selected: legendSelected }),
+  }, { selected: legendSelected, data: legendData }),
     grid: { left: '6%', right: '20%', bottom: '8%', containLabel: true },
     xAxis: {
       type: 'log',
@@ -178,7 +244,7 @@ function getChartOption(series) {
       min: yMin,
       max: yMax
     },
-    series: styledSeries
+    series: finalSeriesStyled
   }
 }
 
@@ -187,8 +253,8 @@ let resizeHandler = null
 function renderChart() {
   if (!chart) return
   let rows = leaderboard.value || []
-  // 根据 selectedDataName 过滤数据集（如果未选择或为 'all' 则使用全部）
-  const sel = selectedDataName && selectedDataName.value ? String(selectedDataName.value) : ''
+  // 根据 selectedDataNameChart 过滤数据集（如果未选择或为 'all' 则使用全部）
+  const sel = selectedDataNameChart && selectedDataNameChart.value ? String(selectedDataNameChart.value) : ''
   if (sel && sel !== 'all') {
     rows = rows.filter(r => String(r.data_name ?? '') === sel)
   }
@@ -213,7 +279,7 @@ watch(leaderboard, () => {
 }, { deep: true })
 
 // 当所选数据集变化时也要重新渲染图表
-watch(selectedDataName, () => {
+watch(selectedDataNameChart, () => {
   renderChart()
 })
 
@@ -224,7 +290,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="chartRef" style="width: 100%; height: 480px;"></div>
+  <div ref="chartRef" style="width: 880px; height: 480px;"></div>
 </template>
 
 <style scoped></style>

src/composables/useLeaderboardData.js

@@ -10,6 +10,7 @@ const globalState = reactive({
   visibleColumns: [],
   dataGroups: [],
   selectedDataName: '',
+  selectedDataNameChart: '',
   modelTypeGroups: [],
   selectedModelType: '',
   DEFAULT_CSV_PATH: '/finalData/filtered.csv',
@@ -18,29 +19,35 @@ const globalState = reactive({
 
 // 模型类型映射对象：键为模型类型，值为包含的 model_series 数组
 const modelTypeMapping = {
-    'Qwen1.5':['Qwen1.5'],
-    'Qwen2.5':['Qwen2.5'],
-    'Gemma-3': ['gemma-3'],
-    'Qwen2': ['Qwen2'],
-    'Hunyuan': ['Hunyuan'],
-    'Qwen3': ['Qwen3'],
-    'InternLM2.5': ['internlm2.5'],
-    'Llama-3': ['Llama-3.1','Llama-3.2'],
-    'DeepSeek-V2': ['DeepSeek-V2'],
-    'DeepSeek-V3.1': ['DeepSeek-V3.1-Base'],
-    'GLM-4': ['glm-4','GLM-4'],
-    'GLM-4.5': ['GLM-4.5-Air-Base','GLM-4.5-Base'],
-    'Llama-4': ['Llama-4'],
-    'Seed-OSS': ['Seed-OSS'],
+  'Qwen3': ['Qwen3'],
+  'Qwen2.5': ['Qwen2.5'],
+  'Qwen2': ['Qwen2'],
+  'Qwen1.5': ['Qwen1.5'],
+  'Llama-3': ['Llama-3.1', 'Llama-3.2'],
+  'InternLM2.5': ['internlm2.5'],
+  'GLM-4': ['glm-4', 'GLM-4'],
+  'Seed-OSS': ['Seed-OSS'],
+  'Gemma-3': ['gemma-3'],
+  'Hunyuan': ['Hunyuan'],
+  'Qwen2 (MoE)': ['Qwen2 (MoE)'],
+  'Qwen1.5 (MoE)': ['Qwen1.5 (MoE)'],
+  'DeepSeek-V3.1': ['DeepSeek-V3.1-Base'],
+  'DeepSeek-V2': ['DeepSeek-V2'],
+  'GLM-4.5': ['GLM-4.5-Air-Base', 'GLM-4.5-Base'],
+  'Llama-4': ['Llama-4'],
 }
 
-const autoShowSeries = ['Qwen3','Llama-3','InternLM2.5','GLM-4','Seed-OSS','Gemma-3','Hunyuan','DeepSeek-V3.1','DeepSeek-V2','GLM-4.5']
+const MoEModelSeries = ['Qwen2', 'Qwen1.5']
+
+// const autoShowSeries = ['Qwen3', 'Llama-3', 'InternLM2.5', 'GLM-4', 'Seed-OSS', 'Gemma-3', 'Hunyuan', 'DeepSeek-V3.1', 'DeepSeek-V2', 'GLM-4.5']
+const autoShowSeries = ["*"]
 
 // 表头显示名称映射（raw header -> 显示名），可以在此添加或由用户修改
 const headerDisplayMap = reactive({
   'model_name': 'MODEL NAME',
   'model_series': 'MODEL SERIES',
   'model_size (B)': 'MODEL SIZE (B)',
+  'conditional_entropy': 'Conditional Entropy',
   'BF16_TFLOPs': 'BF16 TFLOPs',
   'ic': 'IC',
 })
@@ -105,9 +112,26 @@ async function fetchAndLoadCsv(path = globalState.DEFAULT_CSV_PATH) {
     // 选择用于排序/显示的分数字段（优先 information_capacity, ic, 然后尝试 numeric-like fields）
     const scoreKey = headers.find(h => ['information_capacity', 'ic', 'score'].includes(h)) || headers.find(h => /capacity|score|ic/i.test(h)) || headers[0]
 
-  // 按 scoreKey 排序（保持所有字段），然后把每行写入 leaderboard，同时记录 headers
-  rows.sort((a, b) => (Number(b[scoreKey]) || 0) - (Number(a[scoreKey]) || 0))
+    // 按 scoreKey 排序（保持所有字段），然后把每行写入 leaderboard，同时记录 headers
+    rows.sort((a, b) => (Number(b[scoreKey]) || 0) - (Number(a[scoreKey]) || 0))
 
+    // 特定处理
+    // 判断模型开头是否在 MoEModelSeries 中，是则在 判断尾部是否为-A{number}B这样的格式
+    for (const r of rows) {
+      const name = r['model_name'] || ''
+      for (const moePrefix of MoEModelSeries) {
+        if (name.startsWith(moePrefix)) {
+          // console.log('Checking MoE model name:', name,name.match(/-A(\d+(?:\.\d+)?)B/))
+          const moeSuffixMatch = name.match(/-A(.+)B$/)
+          if (moeSuffixMatch) {
+            // 更改 model_series 显示名称 为 moePrefix + ' (MoE)'
+            r['model_series'] = `${moePrefix} (MoE)`
+            console.log('Detected MoE model, updated series:', r['model_series'])
+          }
+        }
+      }
+    }
+    // console.log('rows', rows)
     // 我们希望确保一些关键列按顺序显示
     const preferred = ['model_name', 'model_series', 'model_size (B)', 'seq_len', 'uniform_entropy', 'constant', 'conditional_entropy', 'entropy_gain', 'BF16_TFLOPs', 'information_capacity', 'ic']
     const ordered = []
@@ -170,14 +194,14 @@ async function fetchAndLoadCsv(path = globalState.DEFAULT_CSV_PATH) {
     }
 
     // 格式化 helper
-    const numericFloatCols = new Set(['uniform_entropy','conditional_entropy','entropy_gain','information_capacity','ic','constant','BF16_TFLOPs'])
+    const numericFloatCols = new Set(['uniform_entropy', 'conditional_entropy', 'entropy_gain', 'information_capacity', 'ic', 'constant', 'BF16_TFLOPs'])
     const numericIntCols = new Set(['seq_len'])
     // attach formatter per row for rendering convenience (non-reactive simple values)
     for (const row of globalState.leaderboard) {
       row._formatted = {}
       for (const h of ordered) {
         const raw = row[h]
-        if (raw == null || raw === '') { row._formatted[h] = '' ; continue }
+        if (raw == null || raw === '') { row._formatted[h] = ''; continue }
         if (numericIntCols.has(h)) {
           const n = Number(raw)
           row._formatted[h] = Number.isFinite(n) ? String(Math.round(n)) : raw
@@ -237,6 +261,10 @@ export function useLeaderboardData() {
       get: () => globalState.selectedDataName,
       set: (v) => globalState.selectedDataName = v
     }),
+    selectedDataNameChart: computed({
+      get: () => globalState.selectedDataNameChart,
+      set: (v) => globalState.selectedDataNameChart = v
+    }),
     modelTypeGroups: computed(() => globalState.modelTypeGroups),
     selectedModelType: computed({
       get: () => globalState.selectedModelType,

src/views/Leaderboard.vue

@@ -13,6 +13,7 @@ const {
   selectableColumns,
   dataGroups,
   selectedDataName,
+  selectedDataNameChart,
   autoShowSeries,
   headerDisplayMap,
   dataNameDisplayMap,
@@ -67,23 +68,24 @@ function toggleTheme() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:via-gray-800 dark:to-gray-800 py-12 px-4 sm:px-6 lg:px-8">
+  <div
+    class="min-h-screen bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:via-gray-800 dark:to-gray-800 py-12 px-4 sm:px-6 lg:px-8">
     <div class=" mx-auto">
       <header class="mb-6 flex items-start justify-between">
         <div>
-          <h1 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100">LLM Leaderboard</h1>
-          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">按分数排序的顶级大模型（演示数据）</p>
+          <h1 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100">LLM Information Capacity</h1>
+          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">LLM IC Leaderboard Demo</p>
         </div>
       </header>
 
-  <Chart :autoShowSeries="autoShowSeries" />
+
 
       <div class="bg-white dark:bg-gray-900/60 shadow rounded-lg overflow-hidden">
         <div
           class="px-6 py-4 border-b bg-gradient-to-r from-indigo-50 via-white to-white dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-gray-900">
           <div class="flex items-center justify-between">
             <h2 class="text-lg font-medium text-gray-800 dark:text-gray-50">排行榜</h2>
-            <div class="text-sm text-gray-500 dark:text-gray-300">更新于模拟数据</div>
+            <div class="text-sm text-gray-500 dark:text-gray-300">更新于xx年xx月</div>
           </div>
         </div>
 
@@ -95,8 +97,11 @@ function toggleTheme() {
               <!-- <label class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer" :class="{'bg-gray-100 dark:bg-gray-700': selectedDataName==='all'}">
                 <input type="radio" class="hidden" value="all" v-model="selectedDataName" /> 全部
               </label> -->
-              <label v-for="g in dataGroups" :key="g" class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300" :class="{'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedDataName===g}">
-                <input type="radio" class="hidden" :value="g" v-model="selectedDataName" /> {{  dataNameDisplayMap[g] ? dataNameDisplayMap[g] : g }}
+              <label v-for="g in dataGroups" :key="g"
+                class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300"
+                :class="{ 'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedDataName === g }">
+                <input type="radio" class="hidden" :value="g" v-model="selectedDataName" /> {{ dataNameDisplayMap[g] ?
+                dataNameDisplayMap[g] : g }}
               </label>
             </div>
             <div v-else class="text-sm text-gray-500 dark:text-gray-400">（数据集中未检测到 data_name 列）</div>
@@ -108,10 +113,14 @@ function toggleTheme() {
           <div class="flex items-center gap-3">
             <span class="text-sm font-medium text-gray-700 dark:text-gray-200">模型类型筛选</span>
             <div v-if="modelTypeGroups.length > 0" class="flex gap-2 items-center overflow-x-auto">
-              <label class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300" :class="{'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedModelType==='all'}">
+              <label
+                class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300"
+                :class="{ 'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedModelType === 'all' }">
                 <input type="radio" class="hidden" value="all" v-model="selectedModelType" /> 全部
               </label>
-              <label v-for="g in modelTypeGroups" :key="g" class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300" :class="{'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedModelType===g}">
+              <label v-for="g in modelTypeGroups" :key="g"
+                class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300"
+                :class="{ 'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedModelType === g }">
                 <input type="radio" class="hidden" :value="g" v-model="selectedModelType" /> {{ g }}
               </label>
             </div>
@@ -125,15 +134,19 @@ function toggleTheme() {
             <div class="flex items-center gap-3">
               <span class="text-sm font-medium text-gray-700 dark:text-gray-200">显示列</span>
               <div class="flex items-center gap-2">
-                <button @click.prevent="selectAll" class="text-sm px-2 py-1 bg-white/90 dark:bg-gray-700/60 border border-gray-200 dark:border-gray-600 rounded text-gray-700 dark:text-gray-200 hover:bg-white dark:hover:bg-gray-600 transition">全选</button>
-                <button @click.prevent="clearAll" class="text-sm px-2 py-1 bg-transparent border border-gray-200 dark:border-gray-700 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition">清除</button>
+                <button @click.prevent="selectAll"
+                  class="text-sm px-2 py-1 bg-white/90 dark:bg-gray-700/60 border border-gray-200 dark:border-gray-600 rounded text-gray-700 dark:text-gray-200 hover:bg-white dark:hover:bg-gray-600 transition">全选</button>
+                <button @click.prevent="clearAll"
+                  class="text-sm px-2 py-1 bg-transparent border border-gray-200 dark:border-gray-700 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition">清除</button>
               </div>
             </div>
 
             <div class="flex-1 overflow-x-auto">
               <div class="flex gap-2 items-center px-1 py-2">
-                <label v-for="h in selectableColumns" :key="h" class="flex items-center gap-2 text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full border border-gray-200 dark:border-gray-700 hover:shadow-sm whitespace-nowrap">
-                  <input type="checkbox" :value="h" v-model="visibleColumns" class="h-4 w-4 text-indigo-600 dark:text-indigo-400 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded" />
+                <label v-for="h in selectableColumns" :key="h"
+                  class="flex items-center gap-2 text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full border border-gray-200 dark:border-gray-700 hover:shadow-sm whitespace-nowrap">
+                  <input type="checkbox" :value="h" v-model="visibleColumns"
+                    class="h-4 w-4 text-indigo-600 dark:text-indigo-400 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded" />
                   <span class="truncate text-gray-800 dark:text-gray-50">{{ headerDisplayMap[h] || h }}</span>
                 </label>
               </div>
@@ -144,29 +157,51 @@ function toggleTheme() {
         <div class="p-4 overflow-x-auto">
           <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
             <thead class="bg-gray-50 dark:bg-gradient-to-r dark:from-gray-800 dark:to-gray-900">
-                <tr>
-                  <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">#</th>
-                  <th v-for="h in displayedColumns" :key="h" class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                    {{ headerDisplayMap[h] || h }}
-                  </th>
-                </tr>
+              <tr>
+                <th
+                  class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  #</th>
+                <th v-for="h in displayedColumns" :key="h"
+                  class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  {{ headerDisplayMap[h] || h }}
+                </th>
+              </tr>
             </thead>
             <tbody class="bg-white dark:bg-transparent divide-y divide-gray-100 dark:divide-gray-700">
-                <tr v-for="model in filteredLeaderboard" :key="model.rank" :class="{
-                  'bg-yellow-50 dark:bg-yellow-700/25': model.rank === 1,
-                  'bg-gray-50 dark:bg-gray-800/60': model.rank === 2,
-                  'bg-indigo-50 dark:bg-indigo-700/25': model.rank === 3
-                }" class="hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150">
-                  <td class="px-4 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-50">#{{ model.rank }}
-                  </td>
-                  <td v-for="h in displayedColumns" :key="h" class="px-4 py-3 whitespace-nowrap">
-                    <div class="text-sm text-gray-800 dark:text-gray-50">{{ formatCell(h, model) }}</div>
-                  </td>
-                </tr>
+              <tr v-for="model in filteredLeaderboard" :key="model.rank" :class="{
+                'bg-yellow-50 dark:bg-yellow-700/25': model.rank === 1,
+                'bg-gray-50 dark:bg-gray-800/60': model.rank === 2,
+                'bg-indigo-50 dark:bg-indigo-700/25': model.rank === 3
+              }" class="hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150">
+                <td class="px-4 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-50">#{{ model.rank }}
+                </td>
+                <td v-for="h in displayedColumns" :key="h" class="px-4 py-3 whitespace-nowrap">
+                  <div class="text-sm text-gray-800 dark:text-gray-50">{{ formatCell(h, model) }}</div>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
       </div>
+
+      <Chart :autoShowSeries="autoShowSeries" />
+      <div class="px-6 py-3 border-b bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
+        <div class="flex items-center gap-3">
+          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">数据集筛选</span>
+          <div v-if="dataGroups.length > 0" class="flex gap-2 items-center overflow-x-auto">
+            <!-- <label class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer" :class="{'bg-gray-100 dark:bg-gray-700': selectedDataName==='all'}">
+                <input type="radio" class="hidden" value="all" v-model="selectedDataName" /> 全部
+              </label> -->
+            <label v-for="g in dataGroups" :key="g"
+              class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300"
+              :class="{ 'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedDataNameChart === g }">
+              <input type="radio" class="hidden" :value="g" v-model="selectedDataNameChart" /> {{ dataNameDisplayMap[g]
+                ? dataNameDisplayMap[g] : g }}
+            </label>
+          </div>
+          <div v-else class="text-sm text-gray-500 dark:text-gray-400">（数据集中未检测到 data_name 列）</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>