xlibs-components/dist/components/charts/chart-radar-dots.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 { PolarAngleAxis, PolarGrid, Radar, RadarChart } 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 radar chart with dots";
const chartData = [
    { month: "January", desktop: 186 },
    { month: "February", desktop: 305 },
    { month: "March", desktop: 237 },
    { month: "April", desktop: 273 },
    { month: "May", desktop: 209 },
    { month: "June", desktop: 214 },
];
const chartConfig = {
    desktop: {
        label: "Desktop",
        color: "var(--chart-1)",
    },
};
export function ChartRadarDots() {
    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "items-center", children: [_jsx(CardTitle, { children: "Radar Chart - Dots" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { className: "pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px]", children: _jsxs(RadarChart, { data: chartData, children: [_jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx(PolarAngleAxis, { dataKey: "month" }), _jsx(PolarGrid, {}), _jsx(Radar, { dataKey: "desktop", fill: "var(--color-desktop)", fillOpacity: 0.6, dot: {
                                    r: 4,
                                    fillOpacity: 1,
                                } })] }) }) }), _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 flex items-center gap-2 leading-none", children: "January - June 2024" })] })] }));
}