Charts and Data Visualization Guide

# Charts and Data Visualization for Google Antigravity

Create interactive, responsive charts and data visualizations using Recharts and D3.js in your Google Antigravity applications.

## Recharts Setup and Basic Charts

```typescript
// components/charts/LineChart.tsx
"use client";

import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";

interface DataPoint {
    name: string;
    value: number;
    target?: number;
}

interface LineChartProps {
    data: DataPoint[];
    title?: string;
    color?: string;
    showTarget?: boolean;
}

export function LineChart({ data, title, color = "#8884d8", showTarget = false }: LineChartProps) {
    return (
        <div className="chart-container">
            {title && <h3 className="chart-title">{title}</h3>}
            <ResponsiveContainer width="100%" height={400}>
                <RechartsLineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="name" tick={{ fill: "#666" }} axisLine={{ stroke: "#ccc" }} />
                    <YAxis tick={{ fill: "#666" }} axisLine={{ stroke: "#ccc" }} />
                    <Tooltip
                        contentStyle={{ backgroundColor: "#fff", border: "1px solid #ccc", borderRadius: "8px" }}
                        formatter={(value: number) => [`$${value.toLocaleString()}`, "Value"]}
                    />
                    <Legend />
                    <Line type="monotone" dataKey="value" stroke={color} strokeWidth={2} dot={{ fill: color }} activeDot={{ r: 8 }} />
                    {showTarget && <Line type="monotone" dataKey="target" stroke="#ff7300" strokeDasharray="5 5" />}
                </RechartsLineChart>
            </ResponsiveContainer>
        </div>
    );
}
```

## Bar Chart with Gradients

```typescript
// components/charts/BarChart.tsx
"use client";

import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from "recharts";

interface BarChartProps {
    data: Array<{ name: string; value: number }>;
    colors?: string[];
}

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8"];

export function BarChart({ data, colors = COLORS }: BarChartProps) {
    return (
        <ResponsiveContainer width="100%" height={400}>
            <RechartsBarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                <defs>
                    {colors.map((color, index) => (
                        <linearGradient key={index} id={`gradient-${index}`} x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stopColor={color} stopOpacity={1} />
                            <stop offset="100%" stopColor={color} stopOpacity={0.6} />
                        </linearGradient>
                    ))}
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip formatter={(value: number) => [value.toLocaleString(), "Value"]} />
                <Bar dataKey="value" radius={[8, 8, 0, 0]}>
                    {data.map((_, index) => (
                        <Cell key={`cell-${index}`} fill={`url(#gradient-${index % colors.length})`} />
                    ))}
                </Bar>
            </RechartsBarChart>
        </ResponsiveContainer>
    );
}
```

## Pie Chart with Animation

```typescript
// components/charts/PieChart.tsx
"use client";

import { useState } from "react";
import { PieChart as RechartsPieChart, Pie, Cell, Sector, ResponsiveContainer, Legend } from "recharts";

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8"];

const renderActiveShape = (props: any) => {
    const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent, value } = props;
    return (
        <g>
            <text x={cx} y={cy} dy={-10} textAnchor="middle" fill="#333" fontSize={16} fontWeight="bold">
                {payload.name}
            </text>
            <text x={cx} y={cy} dy={15} textAnchor="middle" fill="#666" fontSize={14}>
                {`${value.toLocaleString()} (${(percent * 100).toFixed(1)}%)`}
            </text>
            <Sector cx={cx} cy={cy} innerRadius={innerRadius} outerRadius={outerRadius + 10} startAngle={startAngle} endAngle={endAngle} fill={fill} />
            <Sector cx={cx} cy={cy} innerRadius={outerRadius + 12} outerRadius={outerRadius + 16} startAngle={startAngle} endAngle={endAngle} fill={fill} />
        </g>
    );
};

export function PieChart({ data }: { data: Array<{ name: string; value: number }> }) {
    const [activeIndex, setActiveIndex] = useState(0);
    
    return (
        <ResponsiveContainer width="100%" height={400}>
            <RechartsPieChart>
                <Pie
                    activeIndex={activeIndex}
                    activeShape={renderActiveShape}
                    data={data}
                    cx="50%"
                    cy="50%"
                    innerRadius={80}
                    outerRadius={120}
                    dataKey="value"
                    onMouseEnter={(_, index) => setActiveIndex(index)}
                >
                    {data.map((_, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                </Pie>
                <Legend />
            </RechartsPieChart>
        </ResponsiveContainer>
    );
}
```

## Dashboard Component

```typescript
// components/charts/Dashboard.tsx
"use client";

import { LineChart } from "./LineChart";
import { BarChart } from "./BarChart";
import { PieChart } from "./PieChart";

interface DashboardProps {
    revenue: Array<{ name: string; value: number; target: number }>;
    categories: Array<{ name: string; value: number }>;
    distribution: Array<{ name: string; value: number }>;
}

export function Dashboard({ revenue, categories, distribution }: DashboardProps) {
    return (
        <div className="dashboard-grid">
            <div className="chart-card">
                <LineChart data={revenue} title="Monthly Revenue" showTarget />
            </div>
            <div className="chart-card">
                <BarChart data={categories} />
            </div>
            <div className="chart-card">
                <PieChart data={distribution} />
            </div>
        </div>
    );
}
```

## Server-Side Data Fetching

```typescript
// app/dashboard/page.tsx
import { createClient } from "@/lib/supabase/server";
import { Dashboard } from "@/components/charts/Dashboard";

export default async function DashboardPage() {
    const supabase = createClient();
    const { data: metrics } = await supabase.from("metrics").select("*").order("date", { ascending: true });
    
    const revenue = metrics?.map((m) => ({ name: m.month, value: m.revenue, target: m.target })) || [];
    const categories = metrics?.reduce((acc, m) => { /* aggregate */ return acc; }, []) || [];
    
    return <Dashboard revenue={revenue} categories={categories} distribution={[]} />;
}
```

## Best Practices

1. **Responsive Design**: Always use ResponsiveContainer for charts that adapt to screen size
2. **Accessibility**: Add ARIA labels and keyboard navigation for interactive charts
3. **Performance**: Limit data points and use virtualization for large datasets
4. **Theming**: Support dark mode with conditional chart colors
5. **Loading States**: Show skeleton loaders while chart data is being fetched