38:I[58715,["/_next/static/immutable/chunks/0m-ud6d21nrwp.js","/_next/static/immutable/chunks/1h-b4l27lciz8.js","/_next/static/immutable/chunks/3y8cybr61yxvv.js","/_next/static/immutable/chunks/3z09e37y-pq2e.js","/_next/static/immutable/chunks/18osjo27s7nr6.js","/_next/static/immutable/chunks/30ak-g_h974fl.js","/_next/static/immutable/chunks/13faqfdblyus9.js","/_next/static/immutable/chunks/3zi-9vbl5dj8-.js","/_next/static/immutable/chunks/3eg8r_f-w3d55.js","/_next/static/immutable/chunks/00h5s_mfz_z0a.js","/_next/static/immutable/chunks/2mxj9ce8hnzxh.js","/_next/static/immutable/chunks/1z8d0-gq--ywx.js","/_next/static/immutable/chunks/1q0rzjij447sg.js","/_next/static/immutable/chunks/1ttnh9n-90xfo.js","/_next/static/immutable/chunks/1p8-tjdoxq_qp.js","/_next/static/immutable/chunks/2g3rkxj5q1792.js","/_next/static/immutable/chunks/2g_6jpjm9d1wy.js","/_next/static/immutable/chunks/0qlv5u6wqxxzu.js","/_next/static/immutable/chunks/1kdw4f9rs02un.js","/_next/static/immutable/chunks/0_o9-rxkbht7h.js","/_next/static/immutable/chunks/0pdq7om71x-ac.js","/_next/static/immutable/chunks/2q1bk6mdo1u5v.js","/_next/static/immutable/chunks/2wqm9b65qyei4.js","/_next/static/immutable/chunks/29f-fic049470.js"],"PreviewTabs"] 39:I[66896,["/_next/static/immutable/chunks/0m-ud6d21nrwp.js","/_next/static/immutable/chunks/1h-b4l27lciz8.js","/_next/static/immutable/chunks/3y8cybr61yxvv.js","/_next/static/immutable/chunks/3z09e37y-pq2e.js","/_next/static/immutable/chunks/18osjo27s7nr6.js","/_next/static/immutable/chunks/30ak-g_h974fl.js","/_next/static/immutable/chunks/13faqfdblyus9.js","/_next/static/immutable/chunks/3zi-9vbl5dj8-.js","/_next/static/immutable/chunks/3eg8r_f-w3d55.js","/_next/static/immutable/chunks/00h5s_mfz_z0a.js","/_next/static/immutable/chunks/2mxj9ce8hnzxh.js","/_next/static/immutable/chunks/1z8d0-gq--ywx.js","/_next/static/immutable/chunks/1q0rzjij447sg.js","/_next/static/immutable/chunks/1ttnh9n-90xfo.js","/_next/static/immutable/chunks/1p8-tjdoxq_qp.js","/_next/static/immutable/chunks/2g3rkxj5q1792.js","/_next/static/immutable/chunks/2g_6jpjm9d1wy.js","/_next/static/immutable/chunks/0qlv5u6wqxxzu.js","/_next/static/immutable/chunks/1kdw4f9rs02un.js","/_next/static/immutable/chunks/0_o9-rxkbht7h.js","/_next/static/immutable/chunks/0pdq7om71x-ac.js","/_next/static/immutable/chunks/2q1bk6mdo1u5v.js","/_next/static/immutable/chunks/2wqm9b65qyei4.js","/_next/static/immutable/chunks/29f-fic049470.js"],"default"] 36:T1656b,

"use client"

import { createContext, useContext, useId, useMemo } from "react"
import * as RechartsPrimitive from "recharts"
import type { TooltipValueType } from "recharts"

import { cn } from "@/lib/utils"

const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = Record<
  string,
  { label?: React.ReactNode; icon?: React.ComponentType } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
>

const ChartContext = createContext<{ config: ChartConfig } | null>(null)

const useChart = () => {
  const context = useContext(ChartContext)
  if (!context)
    throw new Error("useChart must be used within a <ChartContainer />")
  return context
}

const ChartContainer = ({
  id,
  className,
  children,
  config,
  initialDimension = { width: 320, height: 200 },
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
  initialDimension?: { width: number; height: number }
}) => {
  const uniqueId = useId()
  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
  return (
    <ChartContext value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "flex aspect-video justify-center text-caption text-text-tertiary [&_.recharts-cartesian-axis-tick_text]:fill-text-tertiary [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-divider [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border-tertiary [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-divider [&_.recharts-radial-bar-background-sector]:fill-background-tertiary [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-background-tertiary [&_.recharts-reference-line_[stroke='#ccc']]:stroke-divider [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer
          initialDimension={initialDimension}
        >
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, c]) => c.theme ?? c.color
  )
  if (!colorConfig.length) return null
  const css = Object.entries(THEMES)
    .map(
      ([theme, prefix]) =>
        `${prefix} [data-chart=${id}] {\n${colorConfig
          .map(([key, c]) => {
            const color = c.theme?.[theme as keyof typeof THEMES] ?? c.color
            return color ? `  --color-${key}: ${color};` : null
          })
          .filter(Boolean)
          .join("\n")}\n}`
    )
    .join("\n")
  return <style dangerouslySetInnerHTML={{ __html: css }} />
}

const ChartTooltip = RechartsPrimitive.Tooltip

const getPayloadConfig = (
  config: ChartConfig,
  payload: unknown,
  key: string
) => {
  if (typeof payload !== "object" || payload === null) return undefined
  const inner =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? (payload.payload as Record<string, unknown>)
      : undefined
  const outer = payload as Record<string, unknown>
  const labelKey =
    typeof outer[key] === "string"
      ? (outer[key] as string)
      : inner && typeof inner[key] === "string"
        ? (inner[key] as string)
        : key
  return config[labelKey] ?? config[key]
}

const ChartTooltipContent = ({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  } & Omit<
    RechartsPrimitive.DefaultTooltipContentProps<
      TooltipValueType,
      string | number
    >,
    "accessibilityLayer"
  >) => {
  const { config } = useChart()

  const tooltipLabel = useMemo(() => {
    if (hideLabel || !payload?.length) return null
    const [item] = payload
    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
    const itemConfig = getPayloadConfig(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? (config[label]?.label ?? label)
        : itemConfig?.label
    if (labelFormatter) {
      return (
        <div className={cn("text-caption-bold", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }
    return value ? (
      <div className={cn("text-caption-bold", labelClassName)}>{value}</div>
    ) : null
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) return null

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "grid min-w-128 items-start gap-6 rounded-12 bg-background-modal px-10 py-8 text-caption text-text-primary shadow-dropdown",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-6">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
            const itemConfig = getPayloadConfig(config, item, key)
            const indicatorColor = color ?? item.payload?.fill ?? item.color
            return (
              <div
                key={index}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-8 [&>svg]:size-10 [&>svg]:text-text-tertiary",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "size-10": indicator === "dot",
                              "w-4": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-2": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between gap-8 leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-6">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-text-tertiary">
                          {itemConfig?.label ?? item.name}
                        </span>
                      </div>
                      {item.value != null && (
                        <span className="text-caption-bold tabular-nums">
                          {typeof item.value === "number"
                            ? item.value.toLocaleString()
                            : String(item.value)}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = ({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> & {
  hideIcon?: boolean
  nameKey?: string
} & RechartsPrimitive.DefaultLegendContentProps) => {
  const { config } = useChart()
  if (!payload?.length) return null
  return (
    <div
      className={cn(
        "flex items-center justify-center gap-16",
        verticalAlign === "top" ? "pb-12" : "pt-12",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item, index) => {
          const key = `${nameKey ?? item.dataKey ?? "value"}`
          const itemConfig = getPayloadConfig(config, item, key)
          return (
            <div
              key={index}
              className="flex items-center gap-6 text-caption text-text-secondary [&>svg]:size-12 [&>svg]:text-text-tertiary"
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="size-8 shrink-0 rounded-[2px]"
                  style={{ backgroundColor: item.color }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

export {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
  ChartTooltip,
  ChartTooltipContent,
}

35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$36"}}],"$L37"]}] 25:["$","$L38",null,{"glass":false,"preview":["$","$L39",null,{}],"code":"$L3a"}]

Installation

Usage