Streaming Data Visualizations: живые графики и отчеты по запросу

[Клиент: Input] "Покажи выручку по дням за март"
     |
     v (Server Action)
[Next.js Server: Node.js/Edge] -> AI Agent (Text-to-SQL) -> Выполнение в PostgreSQL/ClickHouse
     |
     +-- [Suspense Boundary (Немедленный стриминг скелетона на клиент)]
     |
     v (Streaming RSC via React Flight)
[Генерация <ChartCard><ClientRechartsWrapper data={aggregatedPoints} /></ChartCard>]
     |
     v
[Клиентский браузер: Монтирование готового SVG и гидратация интерактивных тултипов]

'use server';

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { db } from '@/lib/db';
import { ClientRechartsWrapper } from '@/components/charts/ClientRechartsWrapper';

export interface SalesDataPoint {
  date: string;
  revenue: number;
}

export async function generateChartFromPrompt(prompt: string): Promise<React.ReactNode> {
  // 1. Text-to-SQL генерация запроса с жесткими ограничениями безопасности
  const { text: sqlQuery } = await generateText({
    model: openai('gpt-4o'),
    system: 'Вы SQL-аналитик. Генерируйте ТОЛЬКО безопасные операторы SELECT с агрегацией. Запрещены DDL/DML мутации.',
    prompt: `Преобразуй запрос в безопасный SELECT (PostgreSQL). Запрос: "${prompt}". 
             Схема таблицы: sales(date DATE, revenue NUMERIC, category TEXT).
             Сгруппируй по дням и отсортируй по дате.`,
  });

  try {
    // 2. Выполнение агрегирующего запроса на стороне сервера базы данных
    const result = await db.query(sqlQuery);
    
    // 3. Нормализация данных: обязательное приведение дат к ISO-строкам для безопасной гидратации
    const normalizedData: SalesDataPoint[] = result.rows.map((row) => ({
      date: new Date(row.date).toISOString().split('T')[0],
      revenue: Number(row.revenue),
    }));

    if (normalizedData.length === 0) {
      return (
        <div className="p-4 border border-amber-200 bg-amber-50 text-amber-800 rounded-lg">
          По вашему запросу не найдено аналитических данных за указанный период.
        </div>
      );
    }

    // 4. Возврат RSC с инкапсулированным интерактивным клиентским островком
    return (
      <div className="w-full p-6 border rounded-xl shadow-sm bg-white dark:bg-zinc-900">
        <h3 className="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">
          Аналитический отчет: Динамика выручки
        </h3>
        <ClientRechartsWrapper data={normalizedData} xKey="date" yKey="revenue" />
      </div>
    );
  } catch (error) {
    return (
      <div className="p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
        Ошибка выполнения аналитической выборки: {(error as Error).message}
      </div>
    );
  }
}

'use client';

import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
import type { SalesDataPoint } from '@/app/actions/generate-chart';

interface ClientRechartsWrapperProps {
  data: SalesDataPoint[];
  xKey: keyof SalesDataPoint;
  yKey: keyof SalesDataPoint;
}

export function ClientRechartsWrapper({ data, xKey, yKey }: ClientRechartsWrapperProps) {
  return (
    <div className="w-full h-80">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8}/>
              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" className="stroke-zinc-200 dark:stroke-zinc-800" />
          <XAxis dataKey={xKey as string} stroke="#888888" fontSize={12} />
          <YAxis stroke="#888888" fontSize={12} tickFormatter={(val) => `$${val}`} />
          <Tooltip 
            contentStyle={{ backgroundColor: '#18181b', borderColor: '#27272a', borderRadius: '8px', color: '#fff' }}
          />
          <Area type="monotone" dataKey={yKey as string} stroke="#3b82f6" fillOpacity={1} fill="url(#colorRevenue)" />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}