feat: add public dashboard page with trending, best new releases, and most tested charts

2026-05-09 13:11:27 +08:00
parent 2f4f0250df
commit 2bc6953339
5 changed files with 672 additions and 0 deletions
@@ -0,0 +1,159 @@
+"use client"
+
+import { EChartWrapper, CHART_THEME } from "@/components/charts/EChartWrapper"
+import type { EChartsOption } from "echarts"
+
+interface MostTestedGame {
+  id: string
+  title: string
+  benchmark_count: number
+}
+
+interface MostReportedGame {
+  id: string
+  title: string
+  report_count: number
+}
+
+function buildOption(
+  tested: MostTestedGame[],
+  reported: MostReportedGame[],
+): EChartsOption {
+  const testedTitles = tested.map((g) => g.title)
+  const testedCounts = tested.map((g) => g.benchmark_count)
+  const reportedTitles = reported.map((g) => g.title)
+  const reportedCounts = reported.map((g) => g.report_count)
+
+  return {
+    backgroundColor: CHART_THEME.bg,
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      backgroundColor: "#1a1225",
+      borderColor: CHART_THEME.border,
+      textStyle: { color: CHART_THEME.text },
+    },
+    legend: {
+      data: ["Most Tested", "Most Reported"],
+      textStyle: { color: CHART_THEME.textMuted },
+      bottom: 0,
+    },
+    grid: [
+      {
+        left: "3%",
+        right: "52%",
+        bottom: "14%",
+        top: "8%",
+        containLabel: true,
+      },
+      {
+        left: "52%",
+        right: "3%",
+        bottom: "14%",
+        top: "8%",
+        containLabel: true,
+      },
+    ],
+    xAxis: [
+      {
+        type: "value",
+        gridIndex: 0,
+        splitLine: { lineStyle: { color: CHART_THEME.border, type: "dashed" } },
+        axisLabel: { color: CHART_THEME.textMuted, fontSize: 10 },
+        axisLine: { show: false },
+        axisTick: { show: false },
+      },
+      {
+        type: "value",
+        gridIndex: 1,
+        splitLine: { lineStyle: { color: CHART_THEME.border, type: "dashed" } },
+        axisLabel: { color: CHART_THEME.textMuted, fontSize: 10 },
+        axisLine: { show: false },
+        axisTick: { show: false },
+      },
+    ],
+    yAxis: [
+      {
+        type: "category",
+        gridIndex: 0,
+        data: testedTitles,
+        axisLabel: { color: CHART_THEME.text, fontSize: 11, width: 120, overflow: "truncate" },
+        axisLine: { show: false },
+        axisTick: { show: false },
+      },
+      {
+        type: "category",
+        gridIndex: 1,
+        data: reportedTitles,
+        axisLabel: { color: CHART_THEME.text, fontSize: 11, width: 120, overflow: "truncate" },
+        axisLine: { show: false },
+        axisTick: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: "Most Tested",
+        type: "bar",
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        data: testedCounts,
+        barWidth: "55%",
+        itemStyle: {
+          borderRadius: [0, 4, 4, 0],
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: CHART_THEME.info },
+              { offset: 1, color: CHART_THEME.success },
+            ],
+          },
+        },
+      },
+      {
+        name: "Most Reported",
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: reportedCounts,
+        barWidth: "55%",
+        itemStyle: {
+          borderRadius: [0, 4, 4, 0],
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: CHART_THEME.warning },
+              { offset: 1, color: CHART_THEME.accent },
+            ],
+          },
+        },
+      },
+    ],
+    animationDuration: 800,
+    animationEasing: "cubicOut",
+  }
+}
+
+export function MostTestedChart({
+  mostTested,
+  mostReported,
+}: {
+  mostTested: MostTestedGame[]
+  mostReported: MostReportedGame[]
+}) {
+  if (!mostTested.length && !mostReported.length) return null
+  return (
+    <EChartWrapper
+      option={buildOption(mostTested, mostReported)}
+      height={420}
+      className="w-full"
+    />
+  )
+}