chart-pie-interactive

1"use client"
2 
3import * as React from "react"
4import { Label, Pie, PieChart, Sector } from "recharts"
5import { PieSectorDataItem } from "recharts/types/polar/Pie"
6 
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card"
14import {
15  ChartConfig,
16  ChartContainer,
17  ChartStyle,
18  ChartTooltip,
19  ChartTooltipContent,
20} from "@/registry/new-york/ui/chart"
21import {
22  Select,
23  SelectContent,
24  SelectItem,
25  SelectTrigger,
26  SelectValue,
27} from "@/registry/new-york/ui/select"
28const desktopData = [
29  { month: "january", desktop: 186, fill: "var(--color-january)" },
30  { month: "february", desktop: 305, fill: "var(--color-february)" },
31  { month: "march", desktop: 237, fill: "var(--color-march)" },
32  { month: "april", desktop: 173, fill: "var(--color-april)" },
33  { month: "may", desktop: 209, fill: "var(--color-may)" },
34]
35 
36const chartConfig = {
37  visitors: {
38    label: "Visitors",
39  },
40  desktop: {
41    label: "Desktop",
42  },
43  mobile: {
44    label: "Mobile",
45  },
46  january: {
47    label: "January",
48    color: "hsl(var(--chart-1))",
49  },
50  february: {
51    label: "February",
52    color: "hsl(var(--chart-2))",
53  },
54  march: {
55    label: "March",
56    color: "hsl(var(--chart-3))",
57  },
58  april: {
59    label: "April",
60    color: "hsl(var(--chart-4))",
61  },
62  may: {
63    label: "May",
64    color: "hsl(var(--chart-5))",
65  },
66} satisfies ChartConfig
67 
68export default function Component() {
69  const id = "pie-interactive"
70  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
71 
72  const activeIndex = React.useMemo(
73    () => desktopData.findIndex((item) => item.month === activeMonth),
74    [activeMonth]
75  )
76  const months = React.useMemo(() => desktopData.map((item) => item.month), [])
77 
78  return (
79    <Card data-chart={id} className="flex flex-col">
80      <ChartStyle id={id} config={chartConfig} />
81      <CardHeader className="flex-row items-start space-y-0 pb-0">
82        <div className="grid gap-1">
83          <CardTitle>Pie Chart - Interactive</CardTitle>
84          <CardDescription>January - June 2024</CardDescription>
85        </div>
86        <Select value={activeMonth} onValueChange={setActiveMonth}>
87          <SelectTrigger
88            className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
89            aria-label="Select a value"
90          >
91            <SelectValue placeholder="Select month" />
92          </SelectTrigger>
93          <SelectContent align="end" className="rounded-xl">
94// … truncated