Stacked area chart with crosshatch pattern fill

<!--
  Замена библиотеки: см. c-chart-13.vue/c-chart-14.vue / docs/PORTING.md
  §19/§27. Crosshatch SVG-паттерн заливки не переносится — сплошная
  градиентная заливка по умолчанию у `AreaChart`.
-->
<script setup lang="ts">
import { AreaChart, CurveType } 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", api: 1820, webhook: 1640 },
  { month: "February", api: 2340, webhook: 2160 },
  { month: "March", api: 1960, webhook: 1880 },
  { month: "April", api: 2780, webhook: 2540 },
  { month: "May", api: 2100, webhook: 1920 },
  { month: "June", api: 3120, webhook: 2880 },
  { month: "July", api: 2540, webhook: 2320 },
  { month: "August", api: 3480, webhook: 3160 },
  { month: "September", api: 2860, webhook: 2580 },
  { month: "October", api: 2420, webhook: 2140 },
  { month: "November", api: 3240, webhook: 2960 },
  { month: "December", api: 2680, webhook: 2440 },
]

const chartConfig = {
  api: { label: "API Calls", color: "var(--chart-1)" },
  webhook: { label: "Webhooks", color: "var(--chart-3)" },
} satisfies ChartConfig

const categories = {
  webhook: { name: "Webhooks", color: "var(--chart-3)" },
  api: { name: "API Calls", color: "var(--chart-1)" },
}

function xFormatter(tick: number) {
  return chartData[tick]?.month.slice(0, 3) ?? ""
}
</script>

<template>
  <Card class="w-full max-w-md">
    <CardHeader>
      <CardTitle>
        Request Volume
        <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>
          +12.8%
        </Badge>
      </CardTitle>
      <CardDescription>API and webhook traffic over 12 months</CardDescription>
    </CardHeader>
    <CardContent>
      <ChartContainer :config="chartConfig">
        <AreaChart
          :data="chartData"
          :categories="categories"
          :height="200"
          :x-formatter="xFormatter"
          :curve-type="CurveType.Natural"
          :stacked="true"
          :duration="0"
          hide-tooltip
          hide-legend
        />
      </ChartContainer>
    </CardContent>
  </Card>
</template>