ResultCard

const sourcesResult = {
  kind: "table",
  title: "Заявки по источникам",
  data: {
    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 }
  }
};

const trendResult = {
  kind: "table",
  title: "Визиты и заявки по дням",
  data: {
    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="grid gap-4 md:grid-cols-2">
    <ResultCard
      input={{ ref: 't1.a1', view: 'bars', layout: 'half' }}
      result={sourcesResult}
    />
    <ResultCard
      input={{ ref: 't1.a2', view: 'trend', layout: 'half' }}
      result={trendResult}
    />
  </div>
);

<div className="grid gap-4 md:grid-cols-2">
  <ResultCard input={{ ref: 't1.a1', view: 'bars', layout: 'half' }} loading />
  <ResultCard input={{ ref: 't1.a1', view: 'bars', layout: 'half' }} />
</div>