图表缩放
This commit is contained in:
parent
d1647d3114
commit
ba50f46946
@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "ESP32 微弱压力数据采集系统",
|
||||
description: "用于采集和分析微弱压力数据的系统，基于 ESP32 平台构建。",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -23,7 +23,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
|
||||
@ -11,9 +11,10 @@ import {
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js'
|
||||
import zoomPlugin from 'chartjs-plugin-zoom'
|
||||
import { Line, Bar, Scatter } from 'react-chartjs-2'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend)
|
||||
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, zoomPlugin)
|
||||
|
||||
type Detail = {
|
||||
id: string
|
||||
@ -88,7 +89,6 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
const dataToUse = enableEma ? smoothedCode : (rec?.code || [])
|
||||
return buildHistogram(dataToUse, 30)
|
||||
}, [rec, enableEma, smoothedCode])
|
||||
const forceHistogram = useMemo(() => buildHistogram(forceSeries || [], 30), [forceSeries])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
|
||||
@ -180,6 +180,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
<span className="w-12 text-right">{emaAlpha.toFixed(2)}</span>
|
||||
</label>
|
||||
)}
|
||||
<span className="hidden text-xs text-zinc-500 sm:inline">按 Ctrl+滚轮 缩放，拖拽平移</span>
|
||||
</div>
|
||||
</div>
|
||||
<Line
|
||||
@ -215,7 +216,17 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
options={{
|
||||
responsive: true,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
plugins: { legend: { position: 'top' as const } },
|
||||
plugins: {
|
||||
legend: { position: 'top' as const },
|
||||
zoom: {
|
||||
pan: { enabled: true, mode: 'x' as const },
|
||||
zoom: {
|
||||
wheel: { enabled: true, modifierKey: 'ctrl' as const },
|
||||
pinch: { enabled: true },
|
||||
mode: 'x' as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: { title: { display: true, text: '时间 (ms)' } },
|
||||
yCode: { type: 'linear' as const, position: 'left' as const, title: { display: true, text: '码值' } },
|
||||
@ -240,7 +251,19 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{ scales: { x: { title: { display: true, text: '码值' } }, y: { title: { display: true, text: '数量' } } } }}
|
||||
options={{
|
||||
plugins: {
|
||||
zoom: {
|
||||
pan: { enabled: true, mode: 'x' as const },
|
||||
zoom: {
|
||||
wheel: { enabled: true, modifierKey: 'ctrl' as const },
|
||||
pinch: { enabled: true },
|
||||
mode: 'x' as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: { x: { title: { display: true, text: '码值' } }, y: { title: { display: true, text: '数量' } } },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 dark:border-zinc-800">
|
||||
@ -261,7 +284,17 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
|
||||
x: { title: { display: true, text: '码值' } },
|
||||
y: { title: { display: true, text: '力值 (mN)' } },
|
||||
},
|
||||
plugins: { legend: { display: false } },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
zoom: {
|
||||
pan: { enabled: true, mode: 'x' as const },
|
||||
zoom: {
|
||||
wheel: { enabled: true, modifierKey: 'ctrl' as const },
|
||||
pinch: { enabled: true },
|
||||
mode: 'x' as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@ -2,6 +2,7 @@ import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
4871
package-lock.json
generated
Normal file
4871
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -11,14 +11,15 @@
|
||||
"prisma:migrate": "prisma migrate dev --name init"
|
||||
},
|
||||
"dependencies": {
|
||||
"@prisma/client": "^5",
|
||||
"chart.js": "^4",
|
||||
"chartjs-plugin-zoom": "^2.2.0",
|
||||
"nanoid": "^5",
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-chartjs-2": "^5",
|
||||
"react-dom": "19.2.0",
|
||||
"@prisma/client": "^5",
|
||||
"nanoid": "^5",
|
||||
"zod": "^3",
|
||||
"chart.js": "^4",
|
||||
"react-chartjs-2": "^5"
|
||||
"zod": "^3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
@ -27,8 +28,8 @@
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.0.3",
|
||||
"prisma": "^5",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5",
|
||||
"prisma": "^5"
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user