Pie Chart

import { PieChart } from "@araf-ds/core"

const data = [
  { name: "Direct", value: 45, color: "#0479CE" },
  { name: "Referral", value: 28, color: "#93C5FD" },
  { name: "Organic", value: 27, color: "#BFDBFE" },
]

export default function Example() {
  return (
    <PieChart
      data={data}
      variant="donut"
      height={280}
      centerLabel="Traffic"
      centerValue="100%"
    />
  )
}

<PieChart
  data={[
    { name: "Chrome", value: 63, color: "#0479CE" },
    { name: "Safari", value: 19, color: "#93C5FD" },
    { name: "Firefox", value: 10, color: "#BFDBFE" },
    { name: "Other", value: 8, color: "#E5E7EB" },
  ]}
  variant="pie"
  height={280}
  showLabels
/>

<PieChart
  data={trafficSources}
  variant="donut"
  height={280}
  centerLabel="Total visits"
  centerValue="48,295"
/>

<PieChart
  data={[
    { name: "Q1", value: 78, color: "#0479CE" },
    { name: "Q2", value: 56, color: "#93C5FD" },
    { name: "Q3", value: 91, color: "#16A34A" },
    { name: "Q4", value: 44, color: "#F59E0B" },
  ]}
  variant="radial"
  height={280}
  showLegend
/>