VibeUI

Charts

Dotted Trend

Линия с отмеченными точками и выноской последнего значения прямо на графике: «где узлы» и «сколько сейчас» отвечаются одной картинкой.

  • chart
  • line
  • trend
  • svg

Превью

1440pxHost theme

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

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

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

Средний чек

Единица измерения: тысяч рублей. Последнее значение подписано на графике.

Средний чек, тысяч рублей
Апр18
Май24
Июн21
Июл33
Авг29
Сен42
Показать полную инструкцию

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

# Установка и размещение «chart-011» (Dotted Trend) из VibeUI

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

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

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

## 2. Что это
Линия с отмеченными точками и выноской последнего значения прямо на графике: «где узлы» и «сколько сейчас» отвечаются одной картинкой.

Линейный график, где каждая точка отмечена кружком, а последнее значение подписано плашкой-выноской над ним. Нижняя граница опущена ниже минимума, поэтому линия не лежит на оси. Данные продублированы скрытой таблицей. Ноль зависимостей, один файл, клиентского JS нет.

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

<Chart011
  title="Средний чек"
  unit="тысяч рублей"
  points={[{ label: "Апр", value: 18 }, { label: "Май", value: 24 }]}
/>

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

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

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

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

## 6. Можно менять
- массив points: подпись и значение каждого замера
- title — заголовок графика
- unit — единица измерения в подписи под графиком
- акцент через проп accent — цвет линии и точек
- внешние отступы через className

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

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-chart-011-*. Серверный: хуков нет. Путь линии считается из массива точек в системе 300×136, нижняя граница опускается на четверть размаха ниже минимума, чтобы линия не лежала на оси. Последняя точка залита сплошным, над ней стоит тёмная плашка-выноска: её ширина оценивается по числу знаков, а позиция подрезается краем viewBox. Данные продублированы визуально скрытой таблицей.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Chart011Point = {
  label: string
  value: number
}

export type Chart011Props = Omit<
  ComponentPropsWithoutRef<"figure">,
  "children" | "title"
> & {
  title?: string
  points?: Chart011Point[]
  unit?: string
  accent?: string
}

// Идея компонента: линия, у которой каждая точка отмечена кружком, а последняя
// подписана выноской прямо на графике. Читатель ищет на тренде две вещи —
// «где узлы» и «сколько сейчас»; выноска отвечает на второй вопрос, не
// заставляя переводить взгляд в заголовок.
const STYLES = `
:where([data-vibeui-block="chart-011"]){
--vibeui-chart-011-bg:oklch(1 0 0);
--vibeui-chart-011-fg:oklch(0.22 0.014 265);
--vibeui-chart-011-muted:oklch(0.55 0.014 265);
--vibeui-chart-011-border:oklch(0.91 0.006 265);
--vibeui-chart-011-grid:oklch(0.94 0.005 265);
--vibeui-chart-011-accent:oklch(0.55 0.17 265);
--vibeui-chart-011-callout:oklch(0.22 0.014 265);
--vibeui-chart-011-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="chart-011"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:30rem;box-sizing:border-box;margin:0;padding:0.875rem;
background:var(--vibeui-chart-011-bg);
border:1px solid var(--vibeui-chart-011-border);border-radius:0.875rem;
color:var(--vibeui-chart-011-fg);font-family:var(--vibeui-chart-011-font);
}
[data-vibeui-block="chart-011"] [data-part="title"]{margin:0;font-size:0.875rem;font-weight:650}
[data-vibeui-block="chart-011"] svg{display:block;width:100%;height:auto}
[data-vibeui-block="chart-011"] [data-part="grid"]{stroke:var(--vibeui-chart-011-grid);stroke-width:1}
[data-vibeui-block="chart-011"] [data-part="line"]{
fill:none;stroke:var(--vibeui-chart-011-accent);stroke-width:2;
stroke-linejoin:round;stroke-linecap:round;
}
[data-vibeui-block="chart-011"] [data-part="dot"]{
fill:var(--vibeui-chart-011-bg);stroke:var(--vibeui-chart-011-accent);stroke-width:2;
}
[data-vibeui-block="chart-011"] [data-part="dot"][data-last="true"]{fill:var(--vibeui-chart-011-accent)}
[data-vibeui-block="chart-011"] [data-part="callout"]{fill:var(--vibeui-chart-011-callout)}
[data-vibeui-block="chart-011"] [data-part="callout-text"]{
fill:oklch(1 0 0);font-size:9px;font-weight:650;text-anchor:middle;
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="chart-011"] [data-part="name"]{
fill:var(--vibeui-chart-011-muted);font-size:8.5px;text-anchor:middle;
}
[data-vibeui-block="chart-011"] [data-part="unit"]{margin:0;font-size:0.75rem;color:var(--vibeui-chart-011-muted)}
[data-vibeui-block="chart-011"] [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-011"] *{animation:none!important;transition:none!important}}
`

const LEFT = 12
const RIGHT = 288
const TOP = 26
const BASE = 116

const DEFAULT_POINTS: Chart011Point[] = [
  { label: "Апр", value: 18 },
  { label: "Май", value: 24 },
  { label: "Июн", value: 21 },
  { label: "Июл", value: 33 },
  { label: "Авг", value: 29 },
  { label: "Сен", value: 42 },
]

/**
 * Линия с отмеченными точками и выноской последнего значения.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Chart011({
  title = "Средний чек",
  points = DEFAULT_POINTS,
  unit = "тысяч рублей",
  accent,
  className,
  style,
  ...props
}: Chart011Props) {
  const values = points.map((point) => point.value)
  const max = Math.max(...values, 1)
  const min = Math.min(...values, 0)
  // Нижняя граница опускается ниже минимума: линия, лежащая на оси, читается
  // как ноль, хотя ноля в данных нет.
  const floor = min - (max - min) * 0.25
  const span = max - floor || 1

  const place = (value: number, index: number) => ({
    x:
      LEFT +
      (points.length > 1 ? (index / (points.length - 1)) * (RIGHT - LEFT) : 0),
    y: BASE - ((value - floor) / span) * (BASE - TOP),
  })

  const spots = points.map((point, index) => place(point.value, index))
  const path = spots
    .map((spot, index) => `${index === 0 ? "M" : "L"}${spot.x} ${spot.y}`)
    .join(" ")

  const last = spots[spots.length - 1]
  const lastValue = String(points[points.length - 1]?.value ?? "")
  const calloutWidth = lastValue.length * 6 + 14

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

  return (
    <>
      <style href="vibeui-chart-011" precedence="medium">
        {STYLES}
      </style>
      <figure
        {...props}
        data-vibeui-block="chart-011"
        className={className}
        style={palette}
      >
        <figcaption data-part="title">{title}</figcaption>
        <svg viewBox="0 0 300 136" aria-hidden="true" focusable="false">
          {[0, 0.5, 1].map((share) => {
            const y = TOP + share * (BASE - TOP)

            return (
              <line
                key={share}
                data-part="grid"
                x1={LEFT}
                y1={y}
                x2={RIGHT + 8}
                y2={y}
              />
            )
          })}
          <path data-part="line" d={path} />
          {spots.map((spot, index) => (
            <circle
              key={points[index].label}
              data-part="dot"
              data-last={index === spots.length - 1 ? "true" : undefined}
              cx={spot.x}
              cy={spot.y}
              r={3}
            />
          ))}
          <rect
            data-part="callout"
            x={Math.min(last.x - calloutWidth / 2, 300 - calloutWidth)}
            y={Math.max(last.y - 20, 2)}
            width={calloutWidth}
            height={14}
            rx={7}
          />
          <text
            data-part="callout-text"
            x={Math.min(last.x, 300 - calloutWidth / 2)}
            y={Math.max(last.y - 20, 2) + 10}
          >
            {lastValue}
          </text>
          {points.map((point, index) => (
            <text
              key={point.label}
              data-part="name"
              x={spots[index].x}
              y={BASE + 14}
            >
              {point.label}
            </text>
          ))}
        </svg>
        <p data-part="unit">
          Единица измерения: {unit}. Последнее значение подписано на графике.
        </p>
        <table data-part="data">
          <caption>
            {title}, {unit}
          </caption>
          <tbody>
            {points.map((point) => (
              <tr key={point.label}>
                <th scope="row">{point.label}</th>
                <td>{point.value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </figure>
    </>
  )
}