PieChart

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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 BasicPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          outerRadius={120}
        />
      </PieChart>
    </ChartContainer>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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 LabelPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          outerRadius={120}
          label
        />
      </PieChart>
    </ChartContainer>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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)" },
}

const renderCustomLabel = ({ name, percent }: any) => {
  return `${name} ${(percent * 100).toFixed(0)}%`
}

export function CustomLabelPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          outerRadius={120}
          label={renderCustomLabel}
        />
      </PieChart>
    </ChartContainer>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'
import { Chrome, Globe, Flame, Box } from "lucide-react";

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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)" },
}
  const iconMap: Record<string, any> = {
  Chrome: Chrome,
  Safari: Globe,
  Firefox: Flame,
  Edge: Box,
  Other: Globe,
};

const CustomLegend = () => {
  return (
    <div className="flex justify-center gap-6 flex-wrap mt-4">
      {data.map((entry) => (
        <div key={entry.name} className="flex items-center gap-2">
          <div className="w-3 h-3 rounded" style={{ backgroundColor: entry.fill }} />
          <span className="text-sm text-muted-foreground">{entry.name}</span>
        </div>
      ))}
    </div>
  )
}

export function LegendPieChart() {
  return (
    <div>
      <ChartContainer config={config} className="h-[300px]">
        <PieChart>
          <ChartTooltip content={ChartTooltipContent} />
          <Pie
            data={data}
            dataKey="value"
            nameKey="name"
            cx="50%"
            cy="50%"
            outerRadius={100}
          />
        </PieChart>
      </ChartContainer>
      <CustomLegend />
    </div>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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 DonutPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          innerRadius={60}
          outerRadius={120}
        />
      </PieChart>
    </ChartContainer>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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 StackedPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          innerRadius={80}
          outerRadius={120}
          strokeWidth={4}
        />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          innerRadius={0}
          outerRadius={60}
          strokeWidth={4}
        />
      </PieChart>
    </ChartContainer>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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)" },
}

const totalValue = data.reduce((acc, item) => acc + item.value, 0)

export function DonutTextPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          innerRadius={60}
          outerRadius={120}
        />
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="middle"
          className="fill-foreground text-3xl font-bold"
        >
          {totalValue}
        </text>
      </PieChart>
    </ChartContainer>
  )
}

import { 
  PieChart, 
  Pie,
  ChartContainer, 
  ChartTooltip, 
  ChartTooltipContent,
  type ChartConfig 
} from '@/components/ui/PieChart'

const data = [
  { name: "Chrome", value: 275, fill: "var(--color-chrome)" },
  { name: "Safari", value: 200, fill: "var(--color-safari)" },
  { name: "Firefox", value: 187, fill: "var(--color-firefox)" },
  { name: "Edge", value: 173, fill: "var(--color-edge)" },
  { name: "Other", value: 90, fill: "var(--color-other)" },
]

const config: ChartConfig = {
  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 SeparatorPieChart() {
  return (
    <ChartContainer config={config} className="h-[350px]">
      <PieChart>
        <ChartTooltip content={ChartTooltipContent} />
        <Pie
          data={data}
          dataKey="value"
          nameKey="name"
          cx="50%"
          cy="50%"
          outerRadius={120}
          paddingAngle={5}
        />
      </PieChart>
    </ChartContainer>
  )
}