efac690362
- apps/web 11건 + apps/admin 10건 accent.amber->main 치환 - packages/ui/src/theme.ts에서 amber/amberDim/amberGlow @deprecated 별칭 제거 (본체 main/dim/glow 유지). 전 모노레포 amber 잔여 0건 확인. SKIP: site/src/tokens.ts(별도 토큰 계통, d3roPalette 비의존) 정책: docs/REFACTOR_POLICY.md DP1, 이식 인사이트 P7
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
// apps/web/src/components/dashboard/meetings-trend-chart.tsx
|
|
// recharts 기반 회의/문서 추이 차트 (최근 14일).
|
|
|
|
import {
|
|
ResponsiveContainer,
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
CartesianGrid,
|
|
Legend
|
|
} from 'recharts'
|
|
import { Box } from '@mui/material'
|
|
import { d3roPalette } from '@d3ro/ui/theme'
|
|
|
|
export interface TrendPoint {
|
|
date: string
|
|
meetings: number
|
|
documents: number
|
|
}
|
|
|
|
interface MeetingsTrendChartProps {
|
|
points: TrendPoint[]
|
|
}
|
|
|
|
export function MeetingsTrendChart({ points }: MeetingsTrendChartProps): React.ReactElement {
|
|
return (
|
|
<Box sx={{ width: '100%', height: 260 }}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={points} margin={{ top: 5, right: 12, left: -12, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke={d3roPalette.border.subtle} />
|
|
<XAxis
|
|
dataKey="date"
|
|
stroke={d3roPalette.text.muted}
|
|
fontSize={11}
|
|
tickLine={false}
|
|
/>
|
|
<YAxis
|
|
stroke={d3roPalette.text.muted}
|
|
fontSize={11}
|
|
tickLine={false}
|
|
allowDecimals={false}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: d3roPalette.bg.elevated,
|
|
border: `1px solid ${d3roPalette.border.default}`,
|
|
borderRadius: 8,
|
|
color: d3roPalette.text.primary,
|
|
fontSize: 12
|
|
}}
|
|
labelStyle={{ color: d3roPalette.text.label }}
|
|
/>
|
|
<Legend
|
|
wrapperStyle={{ fontSize: 11, color: d3roPalette.text.secondary }}
|
|
iconType="circle"
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="meetings"
|
|
name="Meetings"
|
|
stroke={d3roPalette.accent.main}
|
|
strokeWidth={2}
|
|
dot={{ r: 3 }}
|
|
activeDot={{ r: 5 }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="documents"
|
|
name="Documents"
|
|
stroke={d3roPalette.tag.purple}
|
|
strokeWidth={2}
|
|
dot={{ r: 3 }}
|
|
activeDot={{ r: 5 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Box>
|
|
)
|
|
}
|