レーダーチャートRadarChartExperimental

import { RadarChart } from "@gunjo/ui";

const data = [
    { label: "到達", value: 72 },
    { label: "品質", value: 84 },
    { label: "売上", value: 58 },
    { label: "継続", value: 76 },
    { label: "速度", value: 64 },
    { label: "リスク", value: 42 },
];

const currentData = [
    { label: "STR", value: 42 },
    { label: "DEX", value: 58 },
    { label: "INT", value: 36 },
    { label: "VIT", value: 50 },
    { label: "AGI", value: 62 },
    { label: "LUK", value: 28 },
];

const targetData = [
    { label: "STR", value: 76 },
    { label: "DEX", value: 70 },
    { label: "INT", value: 54 },
    { label: "VIT", value: 68 },
    { label: "AGI", value: 82 },
    { label: "LUK", value: 46 },
];

const series = [
    { label: "現在", data: currentData, color: "muted", fillOpacity: 0.08 },
    { label: "成長後", data: targetData, color: "success", fillOpacity: 0.14 },
];

export function ScoreRadarVariants() {
    return (
        <div className="grid gap-6">
            <RadarChart data={data} max={100} />
            <RadarChart data={data} variant="compact" showLabels={false} />
            <RadarChart data={data} color="success" fillOpacity={0.12} />
            <RadarChart data={currentData} series={series} max={100} />
        </div>
    );
}