232 lines
9.9 KiB
TypeScript
232 lines
9.9 KiB
TypeScript
import { useMemo, useEffect } from 'react';
|
|
import { Responsive, WidthProvider } from 'react-grid-layout/legacy';
|
|
import { useDashboardStore } from '../store/dashboardStore';
|
|
import { useProjectStore } from '../store/projectStore';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { X } from "lucide-react";
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
|
|
import { VegaChart } from "@/components/VegaChart";
|
|
import 'react-grid-layout/css/styles.css';
|
|
import 'react-resizable/css/styles.css';
|
|
|
|
const CHART_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
|
|
const TABLE_PREVIEW_LIMIT = 20;
|
|
|
|
function isNumericValue(value: unknown) {
|
|
if (typeof value === 'number') return Number.isFinite(value);
|
|
if (typeof value === 'string') {
|
|
const trimmed = value.trim();
|
|
if (!trimmed) return false;
|
|
const parsed = Number(trimmed);
|
|
return Number.isFinite(parsed);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function inferChartKeys(data: Record<string, unknown>[]) {
|
|
if (data.length === 0) {
|
|
return { xKey: null as string | null, yKeys: [] as string[] };
|
|
}
|
|
const allKeys = Object.keys(data[0] || {});
|
|
if (allKeys.length === 0) {
|
|
return { xKey: null as string | null, yKeys: [] as string[] };
|
|
}
|
|
const preferredX = ['name', 'date', 'time', 'category', 'label'];
|
|
const xKey = preferredX.find((k) => allKeys.includes(k)) || allKeys[0];
|
|
const candidateY = allKeys.filter((k) => k !== xKey);
|
|
const numericY = candidateY.filter((key) => data.some((row) => isNumericValue(row[key])));
|
|
const yKeys = (numericY.length > 0 ? numericY : candidateY).slice(0, 3);
|
|
return { xKey, yKeys };
|
|
}
|
|
|
|
export function Dashboard() {
|
|
const { charts, removeChart, updateLayout, loadCharts } = useDashboardStore();
|
|
const { currentProject } = useProjectStore();
|
|
|
|
useEffect(() => {
|
|
if (currentProject) {
|
|
loadCharts(currentProject.id);
|
|
}
|
|
}, [currentProject, loadCharts]);
|
|
|
|
const ResponsiveGridLayout = useMemo(
|
|
() => WidthProvider(Responsive as any) as any,
|
|
[]
|
|
);
|
|
|
|
const layouts = useMemo(() => ({
|
|
lg: charts.map((c) => c.layout)
|
|
}), [charts]);
|
|
|
|
const onLayoutChange = (currentLayout: any[]) => {
|
|
if (currentProject) {
|
|
updateLayout(
|
|
currentLayout.map((item) => ({
|
|
i: item.i,
|
|
x: item.x,
|
|
y: item.y,
|
|
w: item.w,
|
|
h: item.h,
|
|
})),
|
|
currentProject.id
|
|
);
|
|
}
|
|
};
|
|
|
|
if (!currentProject) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
|
|
<p>请选择一个项目以查看仪表板。</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (charts.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
|
|
<p>当前项目暂无图表。</p>
|
|
<p className="text-sm">前往对话页并添加可视化结果！</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 h-full overflow-y-auto">
|
|
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
|
<ResponsiveGridLayout
|
|
className="layout"
|
|
layouts={layouts}
|
|
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
|
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
|
rowHeight={100}
|
|
onLayoutChange={onLayoutChange}
|
|
isDraggable
|
|
isResizable
|
|
>
|
|
{charts.map((chart) => {
|
|
const rows = chart.data as Record<string, unknown>[];
|
|
const columns = Object.keys(rows[0] || {});
|
|
const previewRows = chart.type === "table" ? rows.slice(0, TABLE_PREVIEW_LIMIT) : rows;
|
|
const isTableTruncated = chart.type === "table" && rows.length > TABLE_PREVIEW_LIMIT;
|
|
return (
|
|
<div key={chart.id} className="relative group">
|
|
<Card className="h-full flex flex-col shadow-sm border-muted">
|
|
<CardHeader className="pb-2 shrink-0 flex flex-row items-center justify-between space-y-0">
|
|
<div>
|
|
<CardTitle className="text-base">{chart.title}</CardTitle>
|
|
<CardDescription className="text-xs">
|
|
{chart.type === "table"
|
|
? `TABLE · ${rows.length} 行 · ${columns.length} 列`
|
|
: `${chart.type.toUpperCase()} Chart`}
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => removeChart(chart.id, currentProject.id)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 min-h-0 p-2">
|
|
{(() => {
|
|
if (chart.type === "table") {
|
|
if (rows.length === 0) {
|
|
return (
|
|
<div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
|
|
当前表格没有可展示数据
|
|
</div>
|
|
);
|
|
}
|
|
if (columns.length === 0) {
|
|
return (
|
|
<div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
|
|
当前表格数据缺少可展示字段
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="h-full w-full flex flex-col gap-2">
|
|
<div className="text-[11px] text-zinc-500 px-1">
|
|
{isTableTruncated ? `预览前 ${TABLE_PREVIEW_LIMIT} 行 / 共 ${rows.length} 行，${columns.length} 列` : `共 ${rows.length} 行，${columns.length} 列`}
|
|
</div>
|
|
<ScrollArea className="flex-1 w-full border rounded-md">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{columns.map((col) => <TableHead key={col}>{col}</TableHead>)}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{previewRows.map((row, i) => (
|
|
<TableRow key={i}>
|
|
{columns.map((col) => (
|
|
<TableCell key={`${i}-${col}`}>{String(row[col] ?? "")}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|
|
if (chart.chartSpec && rows.length > 0) {
|
|
return (
|
|
<div className="h-full w-full rounded-xl border border-zinc-100 p-2">
|
|
<VegaChart data={rows} spec={chart.chartSpec} />
|
|
</div>
|
|
);
|
|
}
|
|
const { xKey, yKeys } = inferChartKeys(rows);
|
|
if (!xKey || yKeys.length === 0) {
|
|
return (
|
|
<div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
|
|
当前图表数据缺少可绘制字段
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
{chart.type === 'bar' ? (
|
|
<BarChart data={rows}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
|
|
<XAxis dataKey={xKey} tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
|
|
<YAxis tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
|
|
<Tooltip
|
|
cursor={{ fill: 'rgba(0,0,0,0.05)' }}
|
|
contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
|
|
/>
|
|
{yKeys.map((key, index) => (
|
|
<Bar key={key} dataKey={key} fill={CHART_COLORS[index % CHART_COLORS.length]} radius={[4, 4, 0, 0]} name={key} />
|
|
))}
|
|
</BarChart>
|
|
) : (
|
|
<LineChart data={rows}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
|
|
<XAxis dataKey={xKey} tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
|
|
<YAxis tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
|
|
/>
|
|
{yKeys.map((key, index) => (
|
|
<Line key={key} type="monotone" dataKey={key} stroke={CHART_COLORS[index % CHART_COLORS.length]} strokeWidth={2} dot={{ r: 3 }} />
|
|
))}
|
|
</LineChart>
|
|
)}
|
|
</ResponsiveContainer>
|
|
);
|
|
})()}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)})}
|
|
</ResponsiveGridLayout>
|
|
</div>
|
|
);
|
|
}
|