Animated monochrome bar chart

<!--
  Замена библиотеки: см. c-chart-1.vue / c-chart-6.vue / docs/PORTING.md
  §19/§27. Оригинал — интерактивный график: наведение на бар раскрывает
  его (framer-motion) и показывает значение в заголовке; в состоянии покоя
  (без hover, как на статичном скриншоте) все бары схлопнуты до 6px и
  заголовок показывает "$123" (плейсхолдер). Заголовок воспроизведён
  буквально. Само схлопывание бара — кастомный `shape`-рендерер recharts,
  аналога которому нет у `BarChart` из vue-chrts (см. c-chart-6.vue) —
  бары рисуются обычной полной шириной, а не 6px.
-->
<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: "January", desktop: 289 },
  { month: "February", desktop: 345 },
  { month: "March", desktop: 412 },
  { month: "April", desktop: 478 },
  { month: "May", desktop: 534 },
  { month: "June", desktop: 456 },
  { month: "July", desktop: 523 },
  { month: "August", desktop: 589 },
  { month: "September", desktop: 467 },
  { month: "October", desktop: 398 },
  { month: "November", desktop: 356 },
  { month: "December", desktop: 423 },
]

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

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

<template>
  <Card class="w-full max-w-md">
    <CardHeader>
      <CardTitle class="flex items-center gap-2">
        Conversion Rates
        <span class="ml-auto font-mono text-xl tracking-tighter">$123</span>
        <Badge variant="success-light">
          <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>
          <span>5.2%</span>
        </Badge>
      </CardTitle>
      <CardDescription>Real-time funnel conversion tracking</CardDescription>
    </CardHeader>
    <CardContent>
      <ChartContainer :config="chartConfig">
        <BarChart
          :data="chartData"
          x-axis="month"
          :y-axis="['desktop']"
          :categories="categories"
          :height="200"
          :duration="0"
          hide-tooltip
          hide-legend
        />
      </ChartContainer>
    </CardContent>
  </Card>
</template>