{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "type": "registry:ui",
  "title": "Chart",
  "description": "Shared chart primitives: config, container, tooltip, legend, grid, and theme tokens.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://livedocs.xyz/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/chart.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType<{ className?: string }>;\n    color?: string;\n    colors?: {\n      light?: string[];\n      dark?: string[];\n    };\n  }\n>;\n\ntype ChartContextValue = {\n  id: string;\n  config: ChartConfig;\n  data: Record<string, unknown>[];\n  selected?: string;\n  setSelected: (key?: string) => void;\n};\n\nconst ChartContext = React.createContext<ChartContextValue | null>(null);\n\nexport function useChart() {\n  const context = React.useContext(ChartContext);\n  if (!context) {\n    throw new Error(\"useChart must be used inside a chart\");\n  }\n  return context;\n}\n\nexport function colorVar(key: string, stop = 0) {\n  return stop === 0\n    ? `var(--color-${key})`\n    : `var(--color-${key}-${stop})`;\n}\n\nexport function ChartContainer({\n  id,\n  config,\n  data,\n  className,\n  children,\n  defaultSelectedDataKey,\n  onSelectionChange,\n  variant = \"panel\",\n}: {\n  id?: string;\n  config: ChartConfig;\n  data: Record<string, unknown>[];\n  className?: string;\n  children: React.ReactNode;\n  defaultSelectedDataKey?: string;\n  onSelectionChange?: (key?: string) => void;\n  variant?: \"panel\" | \"plain\";\n}) {\n  const generatedId = React.useId().replace(/:/g, \"\");\n  const chartId = id ?? generatedId;\n  const [selected, setSelectedState] = React.useState<string | undefined>(\n    defaultSelectedDataKey\n  );\n\n  const setSelected = React.useCallback(\n    (key?: string) => {\n      setSelectedState((current) => {\n        const next = current === key ? undefined : key;\n        onSelectionChange?.(next);\n        return next;\n      });\n    },\n    [onSelectionChange]\n  );\n\n  return (\n    <ChartContext.Provider\n      value={{ id: chartId, config, data, selected, setSelected }}\n    >\n      <div\n        data-chart={chartId}\n        className={cn(\n          \"relative flex aspect-auto w-full flex-col justify-end text-xs\",\n          \"[&_svg]:[shape-rendering:crispEdges] [&_svg]:[image-rendering:pixelated]\",\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:font-mono\",\n          \"[&_.recharts-cartesian-grid-horizontal_line]:stroke-border [&_.recharts-cartesian-grid-vertical_line]:stroke-border\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-foreground/15 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-foreground\",\n          \"[&_.recharts-dot]:stroke-background [&_.recharts-area-curve]:[stroke-linejoin:miter] [&_.recharts-line-curve]:[stroke-linejoin:miter]\",\n          \"[&_.recharts-tooltip-wrapper]:z-10\",\n          variant === \"panel\" &&\n            \"rounded-none border-2 border-border bg-background shadow-[4px_4px_0_0_var(--border)]\",\n          variant === \"plain\" && \"rounded-none border-0 bg-transparent shadow-none\",\n          className\n        )}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <PixelScreen id={chartId} />\n        <div className=\"relative z-[1] flex h-full min-h-0 w-full flex-1 flex-col justify-end\">\n          {children}\n        </div>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const rules = Object.entries(config)\n    .map(([key, item]) => {\n      const dark = item.colors?.dark ?? (item.color ? [item.color] : [\"var(--chart-1)\"]);\n      const light =\n        item.colors?.light ?? (item.color ? [item.color] : [\"var(--chart-1)\"]);\n      const darkStops = dark\n        .map((color, index) =>\n          index === 0\n            ? `--color-${key}: ${color}; --color-${key}-0: ${color};`\n            : `--color-${key}-${index}: ${color};`\n        )\n        .join(\" \");\n      const lightStops = light\n        .map((color, index) =>\n          index === 0\n            ? `--color-${key}: ${color}; --color-${key}-0: ${color};`\n            : `--color-${key}-${index}: ${color};`\n        )\n        .join(\" \");\n      return `[data-chart=\"${id}\"]{${darkStops}}.light [data-chart=\"${id}\"]{${lightStops}}`;\n    })\n    .join(\"\\n\");\n\n  return <style dangerouslySetInnerHTML={{ __html: rules }} />;\n}\n\nfunction seriesKey(\n  item: { dataKey?: string | number; name?: string; value?: string | number },\n  config: ChartConfig\n) {\n  const fromDataKey = String(item.dataKey ?? \"\");\n  const fromName = String(item.name ?? \"\");\n  const fromValue = String(item.value ?? \"\");\n  if (config[fromDataKey]) return fromDataKey;\n  if (config[fromName]) return fromName;\n  if (config[fromValue]) return fromValue;\n  return fromDataKey || fromName || fromValue;\n}\n\nfunction uniquePayload<T extends { dataKey?: string | number; name?: string; value?: string | number }>(\n  payload: T[] | undefined,\n  config: ChartConfig\n) {\n  if (!payload?.length) return [];\n  const seen = new Set<string>();\n  const rows: Array<{ item: T; key: string; index: number }> = [];\n  payload.forEach((item, index) => {\n    const key = seriesKey(item, config);\n    if (!key || seen.has(key)) return;\n    seen.add(key);\n    rows.push({ item, key, index });\n  });\n  return rows;\n}\n\nfunction formatChartNumber(value: number | string | undefined) {\n  if (typeof value === \"number\") return value.toLocaleString(\"en-US\");\n  return value ?? \"\";\n}\n\nexport function ChartTooltipContent({\n  active,\n  payload,\n  label,\n  roundness = \"lg\",\n}: {\n  active?: boolean;\n  payload?: Array<{\n    dataKey?: string | number;\n    name?: string;\n    value?: number | string;\n    color?: string;\n    payload?: Record<string, unknown>;\n  }>;\n  label?: string;\n  roundness?: \"sm\" | \"md\" | \"lg\" | \"full\";\n}) {\n  const { config, selected } = useChart();\n  if (!active || !payload?.length) return null;\n\n  void roundness;\n\n  const rows = uniquePayload(payload, config).filter(\n    ({ key, item }) =>\n      !selected ||\n      selected === key ||\n      selected === String(item.dataKey ?? \"\") ||\n      selected === String(item.name ?? \"\")\n  );\n\n  if (!rows.length) return null;\n\n  return (\n    <div className=\"relative min-w-40 overflow-hidden rounded-none border-2 border-border bg-background px-3 py-2 font-mono text-[11px] shadow-[3px_3px_0_0_var(--border)]\">\n      {label ? (\n        <p className=\"mb-1.5 font-medium uppercase tracking-wide text-foreground\">{label}</p>\n      ) : null}\n      <div className=\"space-y-1\">\n        {rows.map(({ item, key, index }) => {\n          const series = config[key];\n          const Icon = series?.icon;\n          return (\n            <div\n              key={`${key}-${index}`}\n              className=\"flex items-center justify-between gap-6\"\n            >\n              <span className=\"flex items-center gap-2 text-muted-foreground\">\n                {Icon ? (\n                  <Icon className=\"size-2.5\" />\n                ) : (\n                  <PixelSwatch color={colorVar(key)} />\n                )}\n                {series?.label ?? key}\n              </span>\n              <span className=\"font-mono text-foreground\">\n                {formatChartNumber(item.value)}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport function ChartTooltip(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip>) {\n  return (\n    <RechartsPrimitive.Tooltip\n      cursor={{\n        stroke: \"var(--foreground)\",\n        strokeDasharray: \"4 4\",\n        strokeWidth: 2,\n      }}\n      content={<ChartTooltipContent />}\n      {...props}\n    />\n  );\n}\nChartTooltip.displayName = \"Tooltip\";\n\nexport function ChartLegendContent({\n  payload,\n  isClickable,\n}: {\n  payload?: Array<{ dataKey?: string | number; value?: string; color?: string }>;\n  isClickable?: boolean;\n}) {\n  const { config, selected, setSelected } = useChart();\n  if (!payload?.length) return null;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-1.5 pt-2\">\n      {uniquePayload(payload, config).map(({ item, key, index }) => {\n        const series = config[key];\n        const Icon = series?.icon;\n        const active = !selected || selected === key;\n        return (\n          <button\n            key={`${key}-${index}`}\n            type=\"button\"\n            disabled={!isClickable}\n            onClick={() => isClickable && setSelected(key)}\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-none border-2 border-border bg-background px-2 py-0.5 font-mono text-[10px] uppercase tracking-wide text-muted-foreground\",\n              isClickable &&\n                \"cursor-pointer hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              !active && \"opacity-40\"\n            )}\n          >\n            {Icon ? (\n              <Icon className=\"size-3\" />\n            ) : (\n              <PixelSwatch color={colorVar(key)} />\n            )}\n            {series?.label ?? key}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ChartLegend({\n  isClickable,\n  ...props\n}: React.ComponentProps<typeof RechartsPrimitive.Legend> & {\n  isClickable?: boolean;\n}) {\n  return (\n    <RechartsPrimitive.Legend\n      content={<ChartLegendContent isClickable={isClickable} />}\n      {...props}\n    />\n  );\n}\nChartLegend.displayName = \"Legend\";\n\nexport function ChartGrid(props: React.ComponentProps<typeof RechartsPrimitive.CartesianGrid>) {\n  return (\n    <RechartsPrimitive.CartesianGrid\n      vertical={false}\n      stroke=\"var(--border)\"\n      strokeDasharray=\"4 4\"\n      {...props}\n    />\n  );\n}\nChartGrid.displayName = \"CartesianGrid\";\n\nexport function pixelPatternId(scope: string, key: string) {\n  return `${scope}-${String(key).replace(/[^a-zA-Z0-9_-]/g, \"_\")}-px`;\n}\n\nexport function pixelPatternUrl(scope: string, key: string) {\n  return `url(#${pixelPatternId(scope, key)})`;\n}\n\nexport function pixelFillStyle(color: string): React.CSSProperties {\n  return {\n    backgroundColor: `color-mix(in oklab, ${color} 28%, transparent)`,\n    backgroundImage: `linear-gradient(90deg, ${color} 50%, transparent 50%), linear-gradient(${color} 50%, transparent 50%)`,\n    backgroundSize: \"4px 4px\",\n    backgroundPosition: \"0 0, 2px 2px\",\n  };\n}\n\nexport function PixelSwatch({ color }: { color: string }) {\n  return (\n    <span\n      className=\"size-2.5 shrink-0 rounded-none border border-border\"\n      style={pixelFillStyle(color)}\n    />\n  );\n}\n\nfunction PixelScreen({ id }: { id: string }) {\n  return (\n    <svg\n      className=\"pointer-events-none absolute inset-0 size-full text-border\"\n      aria-hidden\n    >\n      <defs>\n        <pattern\n          id={`${id}-screen`}\n          width=\"8\"\n          height=\"8\"\n          patternUnits=\"userSpaceOnUse\"\n        >\n          <path\n            d=\"M8 0H0V8\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-screen)`} />\n    </svg>\n  );\n}\n\nexport function HatchPattern({\n  id,\n  color,\n}: {\n  id: string;\n  color: string;\n}) {\n  return (\n    <pattern id={id} width=\"8\" height=\"8\" patternUnits=\"userSpaceOnUse\">\n      <rect width=\"4\" height=\"4\" fill={color} fillOpacity={0.7} />\n      <rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" fill={color} fillOpacity={0.7} />\n    </pattern>\n  );\n}\n\nexport function GradientFill({\n  id,\n  color,\n}: {\n  id: string;\n  color: string;\n}) {\n  return (\n    <pattern id={id} width=\"8\" height=\"8\" patternUnits=\"userSpaceOnUse\">\n      <rect width=\"8\" height=\"8\" fill={color} fillOpacity={0.16} />\n      <rect width=\"4\" height=\"4\" fill={color} />\n      <rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" fill={color} fillOpacity={0.72} />\n    </pattern>\n  );\n}\n\nexport const monthlyData = [\n  { month: \"January\", desktop: 342, mobile: 184, tablet: 98 },\n  { month: \"February\", desktop: 876, mobile: 491, tablet: 210 },\n  { month: \"March\", desktop: 512, mobile: 290, tablet: 140 },\n  { month: \"April\", desktop: 629, mobile: 391, tablet: 168 },\n  { month: \"May\", desktop: 458, mobile: 309, tablet: 132 },\n  { month: \"June\", desktop: 781, mobile: 449, tablet: 190 },\n  { month: \"July\", desktop: 394, mobile: 234, tablet: 110 },\n  { month: \"August\", desktop: 925, mobile: 557, tablet: 240 },\n  { month: \"September\", desktop: 647, mobile: 367, tablet: 155 },\n  { month: \"October\", desktop: 532, mobile: 357, tablet: 148 },\n  { month: \"November\", desktop: 803, mobile: 515, tablet: 205 },\n  { month: \"December\", desktop: 271, mobile: 149, tablet: 88 },\n];\n\nexport const trafficConfig = {\n  desktop: {\n    label: \"Desktop\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  mobile: {\n    label: \"Mobile\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n  tablet: {\n    label: \"Tablet\",\n    colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const shareData = [\n  { browser: \"chrome\", visitors: 275 },\n  { browser: \"safari\", visitors: 200 },\n  { browser: \"firefox\", visitors: 187 },\n  { browser: \"edge\", visitors: 173 },\n  { browser: \"other\", visitors: 90 },\n];\n\nexport const shareConfig = {\n  chrome: {\n    label: \"Chrome\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  safari: {\n    label: \"Safari\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n  firefox: {\n    label: \"Firefox\",\n    colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] },\n  },\n  edge: {\n    label: \"Edge\",\n    colors: { dark: [\"var(--chart-4)\"], light: [\"var(--chart-4)\"] },\n  },\n  other: {\n    label: \"Other\",\n    colors: { dark: [\"var(--chart-5)\"], light: [\"var(--chart-5)\"] },\n  },\n  visitors: {\n    label: \"Visitors\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const radarData = [\n  { metric: \"Design\", current: 120, previous: 110 },\n  { metric: \"Code\", current: 98, previous: 130 },\n  { metric: \"Speed\", current: 86, previous: 90 },\n  { metric: \"Docs\", current: 99, previous: 85 },\n  { metric: \"Support\", current: 85, previous: 90 },\n  { metric: \"Sales\", current: 65, previous: 74 },\n];\n\nexport const radarConfig = {\n  current: {\n    label: \"This quarter\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  previous: {\n    label: \"Last quarter\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const radialData = [\n  { browser: \"chrome\", visitors: 90 },\n  { browser: \"safari\", visitors: 72 },\n  { browser: \"firefox\", visitors: 64 },\n  { browser: \"edge\", visitors: 48 },\n];\n\nexport const sankeyNodes = [\n  { name: \"Visit\" },\n  { name: \"Signup\" },\n  { name: \"Activate\" },\n  { name: \"Paid\" },\n  { name: \"Churn\" },\n];\n\nexport const sankeyLinks = [\n  { source: 0, target: 1, value: 180 },\n  { source: 0, target: 4, value: 40 },\n  { source: 1, target: 2, value: 140 },\n  { source: 1, target: 4, value: 40 },\n  { source: 2, target: 3, value: 110 },\n  { source: 2, target: 4, value: 30 },\n];\n\nexport const sankeyConfig = {\n  Visit: {\n    label: \"Visit\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  Signup: {\n    label: \"Signup\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n  Activate: {\n    label: \"Activate\",\n    colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] },\n  },\n  Paid: {\n    label: \"Paid\",\n    colors: { dark: [\"var(--chart-4)\"], light: [\"var(--chart-4)\"] },\n  },\n  Churn: {\n    label: \"Churn\",\n    colors: { dark: [\"var(--chart-5)\"], light: [\"var(--chart-5)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const dailyOverlay = [\n  { day: \"Mon\", current: 42, previous: 38 },\n  { day: \"Tue\", current: 68, previous: 51 },\n  { day: \"Wed\", current: 51, previous: 47 },\n  { day: \"Thu\", current: 44, previous: 62 },\n  { day: \"Fri\", current: 71, previous: 58 },\n  { day: \"Sat\", current: 63, previous: 49 },\n  { day: \"Sun\", current: 28, previous: 41 },\n];\n\nexport const overlayConfig = {\n  current: {\n    label: \"This period\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  previous: {\n    label: \"Last period\",\n    colors: { dark: [\"var(--muted-foreground)\"], light: [\"var(--muted-foreground)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const metricSeries = [\n  { month: \"Jan\", period: 82, today: 40 },\n  { month: \"Feb\", period: 118, today: 52 },\n  { month: \"Mar\", period: 168, today: 71 },\n  { month: \"Apr\", period: 214, today: 88 },\n  { month: \"May\", period: 236, today: 104 },\n  { month: \"Jun\", period: 248, today: 121 },\n  { month: \"Jul\", period: 258, today: 136 },\n  { month: \"Aug\", period: 264, today: 148 },\n  { month: \"Sep\", period: 272, today: 168 },\n];\n\nexport const metricConfig = {\n  period: {\n    label: \"Current period\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  today: {\n    label: \"Today\",\n    colors: { dark: [\"var(--muted-foreground)\"], light: [\"var(--muted-foreground)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const yearCompare = [\n  { month: \"Nov 3\", thisYear: 48, lastYear: 36 },\n  { month: \"Nov 6\", thisYear: 62, lastYear: 44 },\n  { month: \"Nov 9\", thisYear: 91, lastYear: 58 },\n  { month: \"Nov 12\", thisYear: 54, lastYear: 61 },\n  { month: \"Nov 15\", thisYear: 73, lastYear: 49 },\n  { month: \"Nov 18\", thisYear: 41, lastYear: 38 },\n];\n\nexport const yearCompareConfig = {\n  thisYear: {\n    label: \"This year\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  lastYear: {\n    label: \"Last year\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const rangeBand = [\n  { month: \"Jan\", low: 18, high: 46, value: 32 },\n  { month: \"Feb\", low: 22, high: 58, value: 41 },\n  { month: \"Mar\", low: 19, high: 51, value: 28 },\n  { month: \"Apr\", low: 26, high: 64, value: 49 },\n  { month: \"May\", low: 24, high: 61, value: 44 },\n  { month: \"Jun\", low: 31, high: 72, value: 58 },\n];\n\nexport const rangeConfig = {\n  high: {\n    label: \"Upper\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  low: {\n    label: \"Lower\",\n    colors: { dark: [\"var(--muted)\"], light: [\"var(--muted)\"] },\n  },\n  value: {\n    label: \"Actual\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const paymentMix = [\n  { key: \"paid\", label: \"Settled\", value: 48210, percent: 64.2 },\n  { key: \"open\", label: \"Open\", value: 12840, percent: 17.1 },\n  { key: \"retry\", label: \"Retrying\", value: 7620, percent: 10.2 },\n  { key: \"void\", label: \"Voided\", value: 4310, percent: 5.7 },\n  { key: \"back\", label: \"Chargeback\", value: 2110, percent: 2.8 },\n];\n\nexport const cohortMix = [\n  { key: \"renew\", label: \"Renewing\", value: 4120, percent: 46.1 },\n  { key: \"join\", label: \"Joined\", value: 2680, percent: 30.0 },\n  { key: \"pause\", label: \"Paused\", value: 980, percent: 11.0 },\n  { key: \"once\", label: \"One-time\", value: 710, percent: 7.9 },\n  { key: \"trial\", label: \"Trial\", value: 450, percent: 5.0 },\n];\n\nexport const mixConfig = {\n  paid: { label: \"Settled\", colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] } },\n  open: { label: \"Open\", colors: { dark: [\"var(--chart-4)\"], light: [\"var(--chart-4)\"] } },\n  retry: { label: \"Retrying\", colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] } },\n  void: { label: \"Voided\", colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] } },\n  back: { label: \"Chargeback\", colors: { dark: [\"var(--chart-5)\"], light: [\"var(--chart-5)\"] } },\n  renew: { label: \"Renewing\", colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] } },\n  join: { label: \"Joined\", colors: { dark: [\"var(--chart-4)\"], light: [\"var(--chart-4)\"] } },\n  pause: { label: \"Paused\", colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] } },\n  once: { label: \"One-time\", colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] } },\n  trial: { label: \"Trial\", colors: { dark: [\"var(--chart-5)\"], light: [\"var(--chart-5)\"] } },\n} satisfies ChartConfig;\n\nexport const marketRank = [\n  { region: \"United States\", code: \"US\", current: 58200, previous: 49400 },\n  { region: \"India\", code: \"IN\", current: 14500, previous: 16200 },\n  { region: \"United Kingdom\", code: \"GB\", current: 9800, previous: 9100 },\n  { region: \"Germany\", code: \"DE\", current: 7200, previous: 7800 },\n  { region: \"Canada\", code: \"CA\", current: 5100, previous: 4300 },\n  { region: \"Australia\", code: \"AU\", current: 3600, previous: 3900 },\n];\n\nexport const marketConfig = {\n  current: {\n    label: \"This period\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  previous: {\n    label: \"Last period\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const ringMembers = [\n  { key: \"new\", label: \"New\", value: 6123 },\n  { key: \"existing\", label: \"Existing\", value: 6000 },\n];\n\nexport const ringPayments = [\n  { key: \"captured\", label: \"Captured\", value: 1000 },\n  { key: \"refunded\", label: \"Refunded\", value: 900 },\n  { key: \"charged\", label: \"Chargebacks\", value: 42 },\n];\n\nexport const ringConfig = {\n  new: { label: \"New\", colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] } },\n  existing: { label: \"Existing\", colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] } },\n  captured: { label: \"Captured\", colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] } },\n  refunded: { label: \"Refunded\", colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] } },\n  charged: { label: \"Chargebacks\", colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] } },\n} satisfies ChartConfig;\n\nexport const cashflowMonths = [\n  { month: \"Feb\", inflow: 78, outflow: -32 },\n  { month: \"Mar\", inflow: 61, outflow: -41 },\n  { month: \"Apr\", inflow: 112, outflow: -18 },\n  { month: \"May\", inflow: 58, outflow: -44 },\n  { month: \"Jun\", inflow: 134, outflow: -52 },\n  { month: \"Jul\", inflow: 141, outflow: -38 },\n  { month: \"Aug\", inflow: 99, outflow: -29 },\n  { month: \"Sep\", inflow: 118, outflow: -47 },\n  { month: \"Oct\", inflow: 64, outflow: -36 },\n  { month: \"Nov\", inflow: 31, outflow: -22 },\n  { month: \"Dec\", inflow: 88, outflow: -40 },\n  { month: \"Jan\", inflow: 42, outflow: -19 },\n];\n\nexport const cashflowConfig = {\n  inflow: {\n    label: \"Inflow\",\n    colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] },\n  },\n  outflow: {\n    label: \"Outflow\",\n    colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const spotlightSeries = Array.from({ length: 24 }, (_, index) => {\n  const wave = Math.sin(index / 2.4) * 18 + 42;\n  const spike = index === 16 ? 28 : index === 7 ? 14 : 0;\n  return {\n    day: `Jun ${index + 1}`,\n    current: Math.round(wave + spike + index * 1.4),\n    previous: Math.round(wave * 0.72 + 8),\n  };\n});\n\nexport const spotlightConfig = {\n  current: {\n    label: \"This month\",\n    colors: { dark: [\"var(--chart-1)\"], light: [\"var(--chart-1)\"] },\n  },\n  previous: {\n    label: \"Last month\",\n    colors: { dark: [\"var(--muted-foreground)\"], light: [\"var(--muted-foreground)\"] },\n  },\n} satisfies ChartConfig;\n\nexport const laneRows = [\n  { key: \"total\", label: \"Total\", value: 640 },\n  { key: \"ok\", label: \"Succeeded\", value: 418 },\n  { key: \"issuer\", label: \"Issuer decline\", value: 36 },\n  { key: \"buyer\", label: \"Buyer decline\", value: 22 },\n  { key: \"idle\", label: \"Not started\", value: 164 },\n];\n\nexport const laneConfig = {\n  total: { label: \"Total\", colors: { dark: [\"var(--chart-4)\"], light: [\"var(--chart-4)\"] } },\n  ok: { label: \"Succeeded\", colors: { dark: [\"var(--chart-2)\"], light: [\"var(--chart-2)\"] } },\n  issuer: { label: \"Issuer decline\", colors: { dark: [\"var(--destructive)\"], light: [\"var(--destructive)\"] } },\n  buyer: { label: \"Buyer decline\", colors: { dark: [\"var(--chart-3)\"], light: [\"var(--chart-3)\"] } },\n  idle: { label: \"Not started\", colors: { dark: [\"var(--muted-foreground)\"], light: [\"var(--muted-foreground)\"] } },\n} satisfies ChartConfig;\n\nexport { RechartsPrimitive };\n"
    }
  ]
}