======================================================================
📘 TITLE: 🧩 ГАЙД: ИНТЕРАКТИВНЫЕ ДАШБОРДЫ И ГРАФИКИ В CLAUDE ARTIFACTS 🧩 | АВТОВЫДАЧА
📂 CATEGORY: Claude
📄 FILENAME: gayd_interaktivnye_dashbordy_i_grafiki_v_claude_artifacts_avtovyd_guide.txt
======================================================================

🧩 ГАЙД: СОЗДАНИЕ ВЫСОКОНАГРУЖЕННЫХ ДАШБОРДОВ В CLAUDE ARTIFACTS (RECHARTS + TAILWIND) 🧩

🔹 ВВЕДЕНИЕ В CLAUDE ARTIFACTS:
Функция Artifacts в Claude позволяет генерировать и моментально исполнять в реальном времени полноценные интерактивные веб-приложения на React без настройки серверов и сборщиков Webpack/Vite.

🔹 ШАГ 1: ПРОМПТ ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНОЙ АНАЛИТИЧЕСКОЙ ПАНЕЛИ
```xml
<task>
Создай в Artifacts интерактивный аналитический дашборд руководителя «Crypto & Stock Portfolio Tracker».
</task>
<specifications>
• Технологии: React, Lucide-react (иконки), Recharts (графики), Tailwind CSS.
• Компоненты:
  1. Верхняя панель KPI карточек: Общий баланс ($), Доходность за 24ч (%), Индекс страха и жадности.
  2. Интерактивный свечной / линейный график стоимости портфеля с переключением таймфреймов (1D, 1W, 1M, 1Y, ALL).
  3. Круговая диаграмма распределения активов (BTC, ETH, SOL, Stablecoins).
  4. Таблица недавних транзакций с поиском и фильтром по типу операции.
• Интерактивность: возможность добавления новой транзакции через модальное окно с мгновенным пересчетом всех графиков!
</specifications>
```

🔹 ШАГ 2: ПРИМЕР СГЕНЕРИРОВАННОГО КОМПОНЕНТА RECHARTS
Claude создает полноценный рабочий код:
```jsx
import React, { useState } from 'react';
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { DollarSign, TrendingUp, ShieldAlert, ArrowUpRight } from 'lucide-react';

const data = [
  { month: 'Янв', value: 42000 },
  { month: 'Фев', value: 48000 },
  { month: 'Мар', value: 53500 },
  { month: 'Апр', value: 61200 },
  { month: 'Май', value: 59000 },
  { month: 'Июн', value: 68400 },
];

export default function PortfolioDashboard() {
  return (
    <div className="p-6 bg-slate-900 text-white rounded-2xl max-w-4xl mx-auto shadow-2xl">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h2 className="text-2xl font-bold">Баланс портфеля</h2>
          <p className="text-slate-400 text-sm">Обновлено 2 минуты назад</p>
        </div>
        <span className="text-3xl font-black text-emerald-400">$68,400.00</span>
      </div>
      <div className="h-64 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data}>
            <defs>
              <linearGradient id="colorVal" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#10B981" stopOpacity={0.4}/>
                <stop offset="95%" stopColor="#10B981" stopOpacity={0}/>
              </linearGradient>
            </defs>
            <XAxis dataKey="month" stroke="#64748B" />
            <YAxis stroke="#64748B" />
            <Tooltip contentStyle={{ backgroundColor: '#1E293B', borderRadius: '8px' }} />
            <Area type="monotone" dataKey="value" stroke="#10B981" strokeWidth={3} fill="url(#colorVal)" />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}
```

🔹 ШАГ 3: ЭКСПОРТ И ВНЕДРЕНИЕ В СВОЙ ПРОЕКТ
1. Нажмите кнопку `Code` в правом верхнем углу Artifacts.
2. Скопируйте готовый компонент `Dashboard.jsx`.
3. Вставьте его в ваш React/Next.js проект — все стили Tailwind и библиотека Recharts заработают без единой правки!

💡 Если у вас возникнут любые вопросы по выполнению шагов из этого гайда — напишите в чат заказа, я с радостью подскажу!