Виды таблицы

Одна таблица результата — девять видов: столбцы, кольцо, тренд, часы, таблица, KPI, воронка, сравнение, произвольный график.

Вид выбирает агент через show({ view }). Все виды получают одни и те же данные AnalyticsTableData и рисуются через TABLE_VIEWS[view](data).

Столбцы и кольцо

Живой код — редактируйте

const sourcesTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "source", label: "Источник", role: "dimension", unit: "text" },
    { key: "visits", label: "Визиты", role: "metric", unit: "count" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" },
    { key: "conversion", label: "Конверсия", role: "metric", unit: "percent" }
  ],
  rows: [
    { source: "Яндекс Директ", visits: 1840, submissions: 84, conversion: 4.6 },
    { source: "Органика", visits: 920, submissions: 31, conversion: 3.4 },
    { source: "Соцсети", visits: 410, submissions: 9, conversion: 2.2 },
    { source: "Прямые", visits: 290, submissions: 4, conversion: 1.4 }
  ],
  totals: { source: "Всего", visits: 3460, submissions: 128, conversion: 3.7 }
};

render(
  <div className="grid gap-6 md:grid-cols-2">
    {TABLE_VIEWS.bars(sourcesTable)}
    {TABLE_VIEWS.donut(sourcesTable)}
  </div>
);

Тренд и часы

Живой код — редактируйте

const hoursTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "hour", label: "Час", role: "dimension", unit: "text" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" }
  ],
  rows: [
    { hour: 8, submissions: 4 },
    { hour: 9, submissions: 7 },
    { hour: 10, submissions: 9 },
    { hour: 11, submissions: 11 },
    { hour: 12, submissions: 12 },
    { hour: 13, submissions: 13 },
    { hour: 14, submissions: 14 },
    { hour: 15, submissions: 14 },
    { hour: 16, submissions: 13 },
    { hour: 17, submissions: 12 },
    { hour: 18, submissions: 11 },
    { hour: 19, submissions: 9 },
    { hour: 20, submissions: 7 },
    { hour: 21, submissions: 4 },
    { hour: 22, submissions: 2 }
  ]
};

const trendTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "day", label: "День", role: "dimension", unit: "text" },
    { key: "visits", label: "Визиты", role: "metric", unit: "count" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" }
  ],
  rows: [
    { day: "2026-10-13", visits: 420, submissions: 14 },
    { day: "2026-10-14", visits: 510, submissions: 19 },
    { day: "2026-10-15", visits: 480, submissions: 17 },
    { day: "2026-10-16", visits: 560, submissions: 23 },
    { day: "2026-10-17", visits: 530, submissions: 21 },
    { day: "2026-10-18", visits: 390, submissions: 15 },
    { day: "2026-10-19", visits: 570, submissions: 19 }
  ]
};

render(
  <div className="flex flex-col gap-6">
    {TABLE_VIEWS.trend(trendTable)}
    {TABLE_VIEWS.hours(hoursTable)}
  </div>
);

Таблица и KPI

Живой код — редактируйте

const kpiTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    {
      key: "visits",
      label: "Визиты",
      role: "metric",
      unit: "count",
      description: "Уникальные посетители"
    },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" },
    { key: "conversion", label: "Конверсия", role: "metric", unit: "percent" },
    { key: "time", label: "Время на сайте", role: "metric", unit: "seconds" }
  ],
  rows: [{ visits: 3460, submissions: 128, conversion: 3.7, time: 94 }]
};

const sourcesTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "source", label: "Источник", role: "dimension", unit: "text" },
    { key: "visits", label: "Визиты", role: "metric", unit: "count" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" },
    { key: "conversion", label: "Конверсия", role: "metric", unit: "percent" }
  ],
  rows: [
    { source: "Яндекс Директ", visits: 1840, submissions: 84, conversion: 4.6 },
    { source: "Органика", visits: 920, submissions: 31, conversion: 3.4 },
    { source: "Соцсети", visits: 410, submissions: 9, conversion: 2.2 },
    { source: "Прямые", visits: 290, submissions: 4, conversion: 1.4 }
  ],
  totals: { source: "Всего", visits: 3460, submissions: 128, conversion: 3.7 }
};

render(
  <div className="flex flex-col gap-6">
    {TABLE_VIEWS.kpi(kpiTable)}
    {TABLE_VIEWS.table(sourcesTable)}
  </div>
);

Воронка и сравнение периодов

Живой код — редактируйте

const comparisonTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  previousPeriod: { from: "2026-10-06", to: "2026-10-12", days: 7 },
  caveats: [],
  columns: [
    { key: "source", label: "Источник", role: "dimension", unit: "text" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" },
    { key: "conversion", label: "Конверсия", role: "metric", unit: "percent" }
  ],
  rows: [
    { source: "Яндекс Директ", submissions: 84, conversion: 4.6 },
    { source: "Органика", submissions: 31, conversion: 3.4 },
    { source: "Соцсети", submissions: 9, conversion: 2.2 }
  ],
  previousRows: [
    { source: "Яндекс Директ", submissions: 71, conversion: 4.1 },
    { source: "Органика", submissions: 33, conversion: 3.6 },
    { source: "Соцсети", submissions: 5, conversion: 1.5 }
  ],
  flags: [{ row: 2, metric: "submissions", lowSample: true }]
};

const funnelTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "stage", label: "Шаг", role: "dimension", unit: "text" },
    { key: "visitors", label: "Посетители", role: "metric", unit: "count" }
  ],
  rows: [
    { stage: "Зашли на сайт", visitors: 3460 },
    { stage: "Увидели форму", visitors: 1720 },
    { stage: "Начали заполнять", visitors: 410 },
    { stage: "Отправили заявку", visitors: 128 }
  ]
};

render(
  <div className="flex flex-col gap-6">
    {TABLE_VIEWS.funnel(funnelTable)}
    {TABLE_VIEWS.comparison(comparisonTable)}
  </div>
);

Произвольный график

Живой код — редактируйте

const trendTable = {
  period: { from: "2026-10-13", to: "2026-10-19", days: 7 },
  caveats: [],
  columns: [
    { key: "day", label: "День", role: "dimension", unit: "text" },
    { key: "visits", label: "Визиты", role: "metric", unit: "count" },
    { key: "submissions", label: "Заявки", role: "metric", unit: "count" }
  ],
  rows: [
    { day: "2026-10-13", visits: 420, submissions: 14 },
    { day: "2026-10-14", visits: 510, submissions: 19 },
    { day: "2026-10-15", visits: 480, submissions: 17 },
    { day: "2026-10-16", visits: 560, submissions: 23 },
    { day: "2026-10-17", visits: 530, submissions: 21 },
    { day: "2026-10-18", visits: 390, submissions: 15 },
    { day: "2026-10-19", visits: 570, submissions: 19 }
  ]
};

render(
  TABLE_VIEWS.chart(trendTable, {
    type: 'combo',
    x: 'day',
    y: ['visits'],
    y2: ['submissions']
  })
);

Виды таблицы

Столбцы и кольцоCopy Anchor Link

Тренд и часыCopy Anchor Link

Таблица и KPICopy Anchor Link

Воронка и сравнение периодовCopy Anchor Link

Произвольный графикCopy Anchor Link

Исходный код · shared/ui/src/ai/views/table-views.tsx

On this page

Столбцы и кольцо

Тренд и часы

Таблица и KPI

Воронка и сравнение периодов

Произвольный график