HorizontalBars

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(
  <HorizontalBars rows={toBarRows(sourcesTable)} />
);

<HorizontalBars
  rows={[
    {
      key: 'high',
      label: 'Высокое качество',
      value: 52,
      valueText: '52',
      tone: 'success'
    },
    {
      key: 'medium',
      label: 'Среднее',
      value: 41,
      valueText: '41',
      tone: 'warning'
    },
    {
      key: 'low',
      label: 'Низкое',
      value: 35,
      valueText: '35',
      tone: 'critical'
    }
  ]}
/>