55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
|
|
import type { CanvasComponent } from '../../types/canvas';
|
|
import { RendererWrapper, GlassTooltip, NoDataPlaceholder, type ComponentRenderContext } from './RendererWrapper';
|
|
|
|
interface Props { component: CanvasComponent; ctx: ComponentRenderContext }
|
|
|
|
export function LineChartRenderer({ component, ctx }: Props) {
|
|
const rows = (component.dataRows ?? []) as Array<Record<string, number | string>>;
|
|
const dims = component.dataBindings.dimensions;
|
|
const measures = component.dataBindings.measures;
|
|
const xKey = dims[0] ?? 'date';
|
|
|
|
const LINE_COLORS = ['#3B82F6', '#22D3EE', '#A78BFA', '#34D399'];
|
|
|
|
if (!rows.length) return (
|
|
<RendererWrapper component={component} ctx={ctx}>
|
|
<NoDataPlaceholder />
|
|
</RendererWrapper>
|
|
);
|
|
|
|
return (
|
|
<RendererWrapper component={component} ctx={ctx} minHeight={300}>
|
|
<div className="h-[220px] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={rows} margin={{ top: 4, right: 8, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
{measures.map((m, i) => (
|
|
<linearGradient key={m} id={`grad_${m}`} x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor={LINE_COLORS[i % LINE_COLORS.length]} />
|
|
<stop offset="100%" stopColor={LINE_COLORS[(i + 1) % LINE_COLORS.length]} />
|
|
</linearGradient>
|
|
))}
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" vertical={false} />
|
|
<XAxis dataKey={xKey} stroke="#3f3f46" tick={{ fontSize: 11, fill: '#71717a' }} axisLine={false} tickLine={false} dy={6} />
|
|
<YAxis stroke="#3f3f46" tick={{ fontSize: 11, fill: '#71717a' }} axisLine={false} tickLine={false} />
|
|
<Tooltip content={<GlassTooltip />} />
|
|
{measures.map((m, i) => (
|
|
<Line
|
|
key={m}
|
|
type="monotone"
|
|
dataKey={m}
|
|
stroke={`url(#grad_${m})`}
|
|
strokeWidth={2.5}
|
|
dot={{ r: 3, fill: '#0a0c14', stroke: LINE_COLORS[i % LINE_COLORS.length], strokeWidth: 2 }}
|
|
activeDot={{ r: 5, fill: LINE_COLORS[i % LINE_COLORS.length] }}
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</RendererWrapper>
|
|
);
|
|
}
|