Basic bar chart

<!--
  Замена библиотеки (см. docs/PORTING.md §19/§27): сам график рисует
  `vue-chrts` `BarChart` вместо `recharts` — другой движок рендера
  (Unovis/D3), ось Y отсутствует по умолчанию, ширина/расположение баров
  считаются иначе. Card/Header/Badge/Description — дословный порт,
  ожидается их точное совпадение; несовпадение сосредоточено в теле графика.
  Тултип скрыт (`hide-tooltip`): в оригинале он рендерится только по hover
  и не виден на статичном скриншоте, поэтому не является предметом дифа.
  Анимация появления отключена (`:duration="0"`).
-->
<script setup lang="ts">
import { BarChart } from "vue-chrts"
import { Badge } from "@/components/reui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"

const chartData = [
  { month: "Jan", desktop: 300 },
  { month: "Feb", desktop: 550 },
  { month: "Mar", desktop: 400 },
  { month: "Apr", desktop: 630 },
  { month: "May", desktop: 460 },
  { month: "Jun", desktop: 780 },
  { month: "Jul", desktop: 390 },
  { month: "Aug", desktop: 925 },
  { month: "Sep", desktop: 645 },
  { month: "Oct", desktop: 530 },
  { month: "Nov", desktop: 700 },
  { month: "Dec", desktop: 270 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

const categories = { desktop: { name: "Desktop", color: "var(--chart-1)" } }
</script>

<template>
  <Card class="w-full max-w-md">
    <CardHeader>
      <CardTitle>
        Revenue Growth
        <Badge variant="success-light" class="ml-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trending-up">
            <path d="M16 7h6v6" />
            <path d="m22 7-8.5 8.5-5-5L2 17" />
          </svg>
          +5.2%
        </Badge>
      </CardTitle>
      <CardDescription>Monthly revenue performance tracking</CardDescription>
    </CardHeader>
    <CardContent>
      <ChartContainer :config="chartConfig">
        <BarChart
          :data="chartData"
          x-axis="month"
          :y-axis="['desktop']"
          :categories="categories"
          :height="200"
          :radius="4"
          :duration="0"
          hide-tooltip
          hide-legend
        />
      </ChartContainer>
    </CardContent>
  </Card>
</template>