Radial Chart

"use client";

import { PeriodButton } from "@/components/miyuki-ui/lib/chart";
import { RadialChart } from "@/components/miyuki-ui/radial-chart";

export default function RadialChartDemo() {
  return (
    <RadialChart
      className="w-full max-w-[440px]"
      variant="stacked"
      label="Visitors"
      value="925"
      delta={0.052}
      action={<PeriodButton>This week</PeriodButton>}
      centerLabel="All sources"
      data={[
        { name: "Search", value: 368 },
        { name: "App", value: 241 },
        { name: "Direct", value: 162 },
        { name: "Social", value: 97 },
        { name: "Email", value: 57 },
      ]}
    />
  );
}

"use client";

import { RadialChart } from "@/components/miyuki-ui/radial-chart";

export default function RadialChartRingsDemo() {
  return (
    <RadialChart
      className="w-full max-w-[440px]"
      variant="rings"
      name="Visitors"
      label="Visitors by resort"
      value="925"
      delta={0.052}
      data={[
        { name: "Hakuba", value: 342 },
        { name: "Niseko", value: 268 },
        { name: "Nozawa", value: 186 },
        { name: "Otaru", value: 129 },
      ]}
    />
  );
}

"use client";

import { RadialChart } from "@/components/miyuki-ui/radial-chart";

export default function RadialChartGaugeDemo() {
  return (
    <RadialChart
      className="w-full max-w-[440px]"
      variant="gauge"
      label="Visitors"
      value="925"
      delta={0.052}
      caption="this month"
      data={[{ name: "Visitors", value: 925 }]}
      max={1200}
      centerLabel="of the 1,200 goal"
    />
  );
}