Bug priority pie with stripe patterns

<!-- Замена библиотеки: см. c-chart-19.vue / docs/PORTING.md §19/§27. -->
<script setup lang="ts">
import { DonutChart } from "vue-chrts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartContainer, ChartLegendContent, type ChartConfig } from "@/components/ui/chart"

const chartData = [
  { priority: "critical", bugs: 14 },
  { priority: "high", bugs: 28 },
  { priority: "medium", bugs: 42 },
  { priority: "low", bugs: 36 },
]

const chartConfig = {
  bugs: { label: "Bugs" },
  critical: { label: "Critical", color: "var(--destructive)" },
  high: { label: "High", color: "var(--chart-4)" },
  medium: { label: "Medium", color: "var(--chart-3)" },
  low: { label: "Low", color: "var(--chart-5)" },
} satisfies ChartConfig

const categories = {
  critical: { name: "Critical", color: "var(--destructive)" },
  high: { name: "High", color: "var(--chart-4)" },
  medium: { name: "Medium", color: "var(--chart-3)" },
  low: { name: "Low", color: "var(--chart-5)" },
}

const donutData = chartData.map((d) => d.bugs)

const legendPayload = [
  { dataKey: "critical", value: "critical", color: "var(--destructive)", priority: "critical" },
  { dataKey: "high", value: "high", color: "var(--chart-4)", priority: "high" },
  { dataKey: "medium", value: "medium", color: "var(--chart-3)", priority: "medium" },
  { dataKey: "low", value: "low", color: "var(--chart-5)", priority: "low" },
]
</script>

<template>
  <Card class="w-full max-w-xs">
    <CardHeader class="items-center pb-0">
      <CardTitle>Bug Priority</CardTitle>
      <CardDescription>Open issues by severity level</CardDescription>
    </CardHeader>
    <CardContent class="flex-1 pb-0">
      <!--
        `recharts`' `.recharts-legend-wrapper` is `position: absolute` inside
        the SAME fixed-height chart box — see c-chart-20.vue for the full
        explanation. Placed as an absolute sibling in the same
        `ChartContainer` instead of a second, normal-flow one.
      -->
      <ChartContainer :config="chartConfig" class="relative mx-auto aspect-square max-h-[300px]">
        <DonutChart
          :data="donutData"
          :categories="categories"
          :radius="110"
          :arc-width="40"
          :pad-angle="0.02"
          :height="300"
          :duration="0"
          hide-tooltip
          hide-legend
        />
        <ChartLegendContent :payload="legendPayload" name-key="priority" class="absolute inset-x-0 bottom-0 -translate-y-2 pt-0" />
      </ChartContainer>
    </CardContent>
  </Card>
</template>