xlibs-components/dist/components/charts/chart-pie-label-list.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TrendingUp } from "lucide-react";
import { LabelList, Pie, PieChart } from "recharts";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
import { ChartContainer, ChartTooltip, ChartTooltipContent, } from '../../components/ui/chart.js';
export const description = "A pie chart with a label list";
const chartData = [
    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
    { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
    { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
    { browser: "other", visitors: 90, fill: "var(--color-other)" },
];
const chartConfig = {
    visitors: {
        label: "Visitors",
    },
    chrome: {
        label: "Chrome",
        color: "var(--chart-1)",
    },
    safari: {
        label: "Safari",
        color: "var(--chart-2)",
    },
    firefox: {
        label: "Firefox",
        color: "var(--chart-3)",
    },
    edge: {
        label: "Edge",
        color: "var(--chart-4)",
    },
    other: {
        label: "Other",
        color: "var(--chart-5)",
    },
};
export function ChartPieLabelList() {
    return (_jsxs(Card, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Label List" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { nameKey: "visitors", hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", children: _jsx(LabelList, { dataKey: "browser", className: "fill-background", stroke: "none", fontSize: 12, formatter: (value) => {
                                        if (typeof value === 'string' && value in chartConfig) {
                                            return chartConfig[value]?.label;
                                        }
                                        return value;
                                    } }) })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 leading-none font-medium", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "text-muted-foreground leading-none", children: "Showing total visitors for the last 6 months" })] })] }));
}