name: add-chart description: > Add a new chart/visualization to the frontend dashboard. Use when creating P&L charts, price charts, gauges, heatmaps, or any data visualization. argument-hint: "[chart-name] [type: line|area|bar|pie|candlestick|gauge|heatmap|scatter]" allowed-tools: Read, Write, Edit, Bash, Glob, Grep

Add Chart

Create chart: $ARGUMENTS[0] (type: $ARGUMENTS[1])

Project Context

• General charts (line, area, bar, pie, scatter): Recharts (recharts v3.8)
• Financial charts (candlestick, OHLC, time-series): TradingView Lightweight Charts (lightweight-charts v5.1)
• Risk gauges: Custom SVG or Recharts <PieChart> adapted
• Heatmaps: Custom component or Recharts <ScatterChart> with color mapping
• Styling: Tailwind CSS, dark theme (#0a0a0f bg, #12121a surfaces)
• Colors: green for profit, red for loss, blue neutral, amber warning
• Numbers font: JetBrains Mono

Scaffolding Steps

1. Create chart component in the appropriate page directory
2. For Recharts:

   import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
   
   export function $0Chart({ data }: { data: DataPoint[] }) {
     return (
       <ResponsiveContainer width="100%" height={300}>
         <LineChart data={data}>
           <XAxis dataKey="timestamp" />
           <YAxis />
           <Tooltip />
           <Line type="monotone" dataKey="value" stroke="#22c55e" />
         </LineChart>
       </ResponsiveContainer>
     );
   }
   

3. For TradingView Lightweight Charts:

   import { createChart, ColorType } from 'lightweight-charts';
   import { useEffect, useRef } from 'react';
   
   export function $0Chart({ data }: { data: CandlestickData[] }) {
     const chartContainerRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
       const chart = createChart(chartContainerRef.current!, {
         layout: { background: { type: ColorType.Solid, color: '#0a0a0f' } },
         grid: { vertLines: { color: '#1e1e2e' }, horzLines: { color: '#1e1e2e' } },
       });
       const series = chart.addCandlestickSeries();
       series.setData(data);
       return () => chart.remove();
     }, [data]);
     return <div ref={chartContainerRef} className="w-full h-[300px]" />;
   }
   

4. Wire up data via TanStack Query hook or Zustand store
5. Add interactive tooltips, series toggles, and PNG download if applicable
6. Add loading skeleton and empty state

Chart Design Rules

• All charts responsive via ResponsiveContainer (Recharts) or resize observer (TVLC)
• Dark theme always — no white backgrounds
• P&L values: green (#22c55e) positive, red (#ef4444) negative
• Font for axis labels: Inter, for values: JetBrains Mono
• Interactive: tooltips on hover, click to navigate to detail