VibeUI

Charts

Scatter Plot

Диаграмма рассеяния для связи двух величин: обе оси подписаны и начинаются с нуля, деления округлены, точки полупрозрачны — наложения видно.

  • chart
  • scatter
  • axes
  • svg

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/chart-019

Время на странице и глубина просмотра

Ось X — секунд на странице, ось Y — страниц за визит. Обе оси начинаются с нуля.

Время на странице и глубина просмотра
Страницасекунд на страницестраниц за визит
Каталог122.4
Главная263.1
Компонент344.6
Блоки414.2
Документация486.1
Гайды555.4
Changelog637.2
Roadmap716.8
FAQ828.4
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «chart-019» (Scatter Plot) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/chart-019.json

Registry item: https://vibeui.ru/r/chart-019.json
Ставится в: components/vibeui/chart-019.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Диаграмма рассеяния для связи двух величин: обе оси подписаны и начинаются с нуля, деления округлены, точки полупрозрачны — наложения видно.

Диаграмма рассеяния: две оси с округлёнными делениями, полупрозрачные точки, подписи осей с направлением и сетка по горизонтали. Данные продублированы скрытой таблицей с обеими координатами. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Chart019 } from "@/components/vibeui/chart-019"

<Chart019
  xLabel="секунд на странице"
  yLabel="страниц за визит"
  dots={[{ label: "Каталог", x: 12, y: 2.4 }]}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-chart-019-* и не подменять её токенами вашей темы (bg-card, --chart-1 и подобными)
- обе оси от нуля: у скатерплота обрезанная шкала выдумывает корреляцию, которой нет
- подписи осей с единицами — без них облако точек не значит ничего
- полупрозрачность точек: без неё наложения превращаются в одну точку и данные теряются
- поворот подписи оси Y вдоль оси — горизонтальная съедает треть ширины карточки
- скрытую таблицу с обеими координатами и aria-hidden на svg

## 6. Можно менять
- массив dots: подпись и пара координат каждой точки
- title — заголовок графика
- xLabel и yLabel — подписи осей вместе с единицами
- акцент через проп accent — цвет точек
- радиус точек и высоту графика через viewBox

## 7. Правила
- Линия тренда не рисуется намеренно: регрессия требует модели, а компонент показывает только точки.
- Больше сорока точек облако превращается в пятно: агрегируйте или добавьте прозрачности.
- Точки не подписаны на графике: имена лежат в таблице, иначе подписи наедут друг на друга.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/chart-019.json
https://vibeui.ru/r/chart-019.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-chart-019-*. Серверный: хуков нет. Верх каждой оси округляется niceCeil до 1 / 2 / 2.5 / 5 × 10ⁿ, поэтому деления подписаны круглыми числами. Подпись оси Y повёрнута вдоль неё через transform: горизонтальная съела бы треть ширины карточки. Точки полупрозрачны, чтобы наложения читались как сгущение. Данные продублированы визуально скрытой таблицей с обеими координатами.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Chart019Dot = {
  label: string
  x: number
  y: number
}

export type Chart019Props = Omit<
  ComponentPropsWithoutRef<"figure">,
  "children" | "title"
> & {
  title?: string
  dots?: Chart019Dot[]
  xLabel?: string
  yLabel?: string
  accent?: string
}

// Идея компонента: диаграмма рассеяния для связи двух величин. Обе оси
// подписаны и начинаются от нуля, деления округляются до круглых чисел, а
// подпись оси Y повёрнута вдоль неё — иначе она съедает половину ширины.
// Точки полупрозрачны: наложения видно, и облако не превращается в кляксу.
const STYLES = `
:where([data-vibeui-block="chart-019"]){
--vibeui-chart-019-bg:oklch(1 0 0);
--vibeui-chart-019-fg:oklch(0.22 0.014 265);
--vibeui-chart-019-muted:oklch(0.55 0.014 265);
--vibeui-chart-019-border:oklch(0.91 0.006 265);
--vibeui-chart-019-grid:oklch(0.94 0.005 265);
--vibeui-chart-019-axis:oklch(0.78 0.01 265);
--vibeui-chart-019-accent:oklch(0.55 0.17 300);
--vibeui-chart-019-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="chart-019"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:26rem;box-sizing:border-box;margin:0;padding:0.875rem;
background:var(--vibeui-chart-019-bg);
border:1px solid var(--vibeui-chart-019-border);border-radius:0.875rem;
color:var(--vibeui-chart-019-fg);font-family:var(--vibeui-chart-019-font);
}
[data-vibeui-block="chart-019"] [data-part="title"]{margin:0;font-size:0.875rem;font-weight:650}
[data-vibeui-block="chart-019"] svg{display:block;width:100%;height:auto}
[data-vibeui-block="chart-019"] [data-part="grid"]{stroke:var(--vibeui-chart-019-grid);stroke-width:1}
[data-vibeui-block="chart-019"] [data-part="axis"]{stroke:var(--vibeui-chart-019-axis);stroke-width:1}
[data-vibeui-block="chart-019"] [data-part="dot"]{
fill:var(--vibeui-chart-019-accent);fill-opacity:0.6;
stroke:var(--vibeui-chart-019-accent);stroke-width:1;
}
[data-vibeui-block="chart-019"] [data-part="tick-x"]{
fill:var(--vibeui-chart-019-muted);font-size:8px;text-anchor:middle;font-variant-numeric:tabular-nums;
}
[data-vibeui-block="chart-019"] [data-part="tick-y"]{
fill:var(--vibeui-chart-019-muted);font-size:8px;text-anchor:end;font-variant-numeric:tabular-nums;
}
[data-vibeui-block="chart-019"] [data-part="axis-name"]{
fill:var(--vibeui-chart-019-fg);font-size:8.5px;font-weight:600;
}
[data-vibeui-block="chart-019"] [data-part="unit"]{margin:0;font-size:0.75rem;color:var(--vibeui-chart-019-muted)}
[data-vibeui-block="chart-019"] [data-part="data"]{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="chart-019"] *{animation:none!important;transition:none!important}}
`

const LEFT = 34
const RIGHT = 292
const TOP = 12
const BASE = 148

function niceCeil(value: number) {
  if (value <= 0) {
    return 1
  }

  const power = 10 ** Math.floor(Math.log10(value))

  for (const step of [1, 2, 2.5, 5]) {
    if (value <= step * power) {
      return step * power
    }
  }

  return 10 * power
}

const DEFAULT_DOTS: Chart019Dot[] = [
  { label: "Каталог", x: 12, y: 2.4 },
  { label: "Главная", x: 26, y: 3.1 },
  { label: "Компонент", x: 34, y: 4.6 },
  { label: "Блоки", x: 41, y: 4.2 },
  { label: "Документация", x: 48, y: 6.1 },
  { label: "Гайды", x: 55, y: 5.4 },
  { label: "Changelog", x: 63, y: 7.2 },
  { label: "Roadmap", x: 71, y: 6.8 },
  { label: "FAQ", x: 82, y: 8.4 },
]

/**
 * Диаграмма рассеяния двух величин с подписанными осями.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Chart019({
  title = "Время на странице и глубина просмотра",
  dots = DEFAULT_DOTS,
  xLabel = "секунд на странице",
  yLabel = "страниц за визит",
  accent,
  className,
  style,
  ...props
}: Chart019Props) {
  const xTop = niceCeil(Math.max(...dots.map((dot) => dot.x), 1))
  const yTop = niceCeil(Math.max(...dots.map((dot) => dot.y), 1))
  const xTicks = [0, xTop / 2, xTop]
  const yTicks = [0, yTop / 2, yTop]

  const palette = {
    ...(accent ? { "--vibeui-chart-019-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-chart-019" precedence="medium">
        {STYLES}
      </style>
      <figure
        {...props}
        data-vibeui-block="chart-019"
        className={className}
        style={palette}
      >
        <figcaption data-part="title">{title}</figcaption>
        <svg viewBox="0 0 300 178" aria-hidden="true" focusable="false">
          {yTicks.map((tick) => {
            const y = BASE - (tick / yTop) * (BASE - TOP)

            return (
              <g key={`y${tick}`}>
                <line data-part="grid" x1={LEFT} y1={y} x2={RIGHT} y2={y} />
                <text data-part="tick-y" x={LEFT - 6} y={y + 3}>
                  {tick}
                </text>
              </g>
            )
          })}
          {xTicks.map((tick) => {
            const x = LEFT + (tick / xTop) * (RIGHT - LEFT)

            return (
              <text key={`x${tick}`} data-part="tick-x" x={x} y={BASE + 13}>
                {tick}
              </text>
            )
          })}
          <line data-part="axis" x1={LEFT} y1={TOP} x2={LEFT} y2={BASE} />
          <line data-part="axis" x1={LEFT} y1={BASE} x2={RIGHT} y2={BASE} />
          {dots.map((dot) => (
            <circle
              key={dot.label}
              data-part="dot"
              cx={LEFT + (dot.x / xTop) * (RIGHT - LEFT)}
              cy={BASE - (dot.y / yTop) * (BASE - TOP)}
              r={4.5}
            />
          ))}
          <text data-part="axis-name" x={RIGHT} y={BASE + 26} textAnchor="end">
            {xLabel} →
          </text>
          {/* Подпись оси Y повёрнута вдоль неё: горизонтальная съела бы
              треть ширины карточки. */}
          <text
            data-part="axis-name"
            transform={`translate(11 ${BASE}) rotate(-90)`}
          >
            {yLabel} →
          </text>
        </svg>
        <p data-part="unit">
          Ось X — {xLabel}, ось Y — {yLabel}. Обе оси начинаются с нуля.
        </p>
        <table data-part="data">
          <caption>{title}</caption>
          <thead>
            <tr>
              <th scope="col">Страница</th>
              <th scope="col">{xLabel}</th>
              <th scope="col">{yLabel}</th>
            </tr>
          </thead>
          <tbody>
            {dots.map((dot) => (
              <tr key={dot.label}>
                <th scope="row">{dot.label}</th>
                <td>{dot.x}</td>
                <td>{dot.y}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </figure>
    </>
  )
}