Chart Card图表卡片

import * as React from "react"

import { cn } from "@/lib/utils"
import {
  conventionClass,
  toneColor,
  type DataConvention,
  type DataTone,
} from "@/lib/data-display"

import { ChartGauge, type ChartGaugeProps } from "./chart-gauge"
import {
  ChartLegendGrid,
  ChartLegendList,
  type ChartLegendGridProps,
  type ChartLegendItem,
  type ChartLegendListProps,
} from "./chart-legend"
import {
  ChartRanking,
  type ChartRankingItem,
  type ChartRankingProps,
} from "./chart-ranking"
import {
  ChartSeries,
  type ChartSeriesItem,
  type ChartSeriesProps,
} from "./chart-series"

type ChartCardProps = React.ComponentProps<"div"> & {
  /** 涨跌配色约定，里面的图表与指标共用；不设置时沿用外层 */
  convention?: DataConvention
}

/** 图表卡片的外壳：细边框、无阴影；用下面的 Header / Content / Footer 分区，分区之间用细线隔开。 */
function ChartCard({ className, convention, ...props }: ChartCardProps) {
  return (
    <div
      data-slot="chart-card"
      data-convention={convention}
      className={cn(
        "flex min-w-0 flex-col overflow-hidden rounded-lg border border-edge bg-card text-sm text-card-foreground",
        conventionClass(convention),
        className,
      )}
      {...props}
    />
  )
}

/** 卡片头部：左边标题与说明，右边放 `ChartCardAction`；窄屏上下堆叠。 */
function ChartCardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="chart-card-header"
      className={cn(
        "flex flex-col gap-3 border-b border-edge p-4 sm:flex-row sm:items-start sm:justify-between",
        className,
      )}
      {...props}
    />
  )
}

// 用 div 而不是 h3：标题层级由所在页面决定，需要时自己加 role="heading" 与 aria-level
function ChartCardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="chart-card-title"
      className={cn("text-sm leading-5 font-medium", className)}
      {...props}
    />
  )
}

function ChartCardDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="chart-card-description"
      className={cn("text-[13px] leading-5 text-muted-foreground", className)}
      {...props}
    />
  )
}

/** 头部右侧的操作区：按钮、选择器、图例等。 */
function ChartCardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="chart-card-action"
      className={cn("flex shrink-0 items-center gap-2", className)}
      {...props}
    />
  )
}

function ChartCardContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="chart-card-content"
      className={cn("min-w-0 p-4", className)}
      {...props}
    />
  )
}

function ChartCardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="chart-card-footer"
      className={cn(
        "flex items-center gap-3 border-t border-edge p-4 text-xs text-muted-foreground",
        className,
      )}
      {...props}
    />
  )
}

/** 指标行：几个并排的小指标，之间用竖线隔开，放在头部或图表上方。 */
function ChartMetrics({ className, ...props }: React.ComponentProps<"dl">) {
  return (
    <dl
      data-slot="chart-metrics"
      className={cn(
        "flex flex-wrap items-center gap-y-2 divide-x divide-edge",
        className,
      )}
      {...props}
    />
  )
}

type ChartMetricProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** 指标名 */
  label: React.ReactNode
  /** 指标值 */
  value: React.ReactNode
  /** 数值前的色标，用来对应图表里的某条序列 */
  tone?: DataTone
}

function ChartMetric({
  className,
  label,
  value,
  tone,
  ...props
}: ChartMetricProps) {
  return (
    <div
      data-slot="chart-metric"
      className={cn(
        "flex flex-col gap-1 px-4 first:pl-0 last:pr-0 max-sm:px-3",
        className,
      )}
      {...props}
    >
      <dt className="flex items-center gap-1.5 text-xs text-muted-foreground">
        {tone ? (
          <span
            aria-hidden="true"
            className="size-1.5 rounded-full"
            style={{ backgroundColor: toneColor(tone) }}
          />
        ) : null}
        {label}
      </dt>
      <dd className="text-sm leading-none font-medium tabular-nums">{value}</dd>
    </div>
  )
}

type ChartTableColumn = {
  /** 对应行数据里的字段名 */
  key: string
  /** 表头 */
  header: React.ReactNode
  /**
   * 对齐方式；数字列用 `end`
   * @default "start"
   */
  align?: "start" | "center" | "end"
}

type ChartTableRow = {
  /** 行首的色标，对应图表里的序列 */
  tone?: DataTone
  /** 各列的内容，字段名与 `columns[].key` 对应 */
  [column: string]: React.ReactNode
}

type ChartTableProps = Omit<React.ComponentProps<"table">, "children"> & {
  columns: ChartTableColumn[]
  rows: ChartTableRow[]
}

const ALIGN = {
  start: "text-left",
  center: "text-center",
  end: "text-right",
} as const

/** 图表下方的明细表：第一列前带一根与序列同色的竖条，数字列右对齐、等宽。 */
function ChartTable({ className, columns, rows, ...props }: ChartTableProps) {
  return (
    <div data-slot="chart-table" className="w-full overflow-x-auto">
      <table
        data-slot="chart-table-element"
        className={cn("w-full min-w-max border-collapse text-sm", className)}
        {...props}
      >
        <thead>
          <tr className="border-b border-edge text-xs text-muted-foreground">
            {columns.map((column) => (
              <th
                key={column.key}
                scope="col"
                className={cn(
                  "px-3 py-2 font-normal first:pl-0 last:pr-0",
                  ALIGN[column.align ?? "start"],
                )}
              >
                {column.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-edge">
          {rows.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {columns.map((column, columnIndex) => (
                <td
                  key={column.key}
                  className={cn(
                    "px-3 py-2.5 tabular-nums first:pl-0 last:pr-0",
                    ALIGN[column.align ?? "start"],
                  )}
                >
                  {columnIndex === 0 && row.tone ? (
                    <span className="flex items-center gap-2">
                      <span
                        aria-hidden="true"
                        className="h-5 w-1 shrink-0 rounded-full"
                        style={{ backgroundColor: toneColor(row.tone) }}
                      />
                      {row[column.key]}
                    </span>
                  ) : (
                    row[column.key]
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export {
  ChartCard,
  ChartCardAction,
  ChartCardContent,
  ChartCardDescription,
  ChartCardFooter,
  ChartCardHeader,
  ChartCardTitle,
  ChartGauge,
  ChartLegendGrid,
  ChartLegendList,
  ChartMetric,
  ChartMetrics,
  ChartRanking,
  ChartSeries,
  ChartTable,
}
export type {
  ChartCardProps,
  ChartGaugeProps,
  ChartLegendGridProps,
  ChartLegendItem,
  ChartLegendListProps,
  ChartMetricProps,
  ChartRankingItem,
  ChartRankingProps,
  ChartSeriesItem,
  ChartSeriesProps,
  ChartTableColumn,
  ChartTableProps,
  ChartTableRow,
}

import * as React from "react"

import { cn } from "@/lib/utils"
import {
  formatStat,
  motionStyles,
  toneColor,
  type DataTone,
  type StatFormatOptions,
} from "@/lib/data-display"

type ChartGaugeProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** 当前值 */
  value: number
  /**
   * 满值
   * @default 100
   */
  max?: number
  /**
   * 刻度数量；刻度越多越像一圈连续的光带
   * @default 60
   */
  ticks?: number
  /**
   * 刻度环的总角度：360 是整圆，270 是下方留口的仪表
   * @default 270
   */
  arc?: number
  /**
   * 点亮刻度的色调
   * @default "primary"
   */
  tone?: DataTone
  /**
   * 点亮的刻度由淡到浓渐变，最后一格最亮最长，像指针停在当前值上
   * @default true
   */
  fade?: boolean
  /** 中央大数字的格式，默认取整后的百分比 */
  format?: StatFormatOptions
  /** 中央数字下方的小字，如「达成率」 */
  caption?: React.ReactNode
  /** 中央内容，传入后替代默认的数字与小字 */
  children?: React.ReactNode
  /** 读屏名称 */
  label?: string
}

const CENTER = 100
const OUTER = 94
const TICK = 12

/**
 * 刻度式环形仪表：一圈细刻度，按值依次点亮。
 * 点亮的刻度从起点向当前值逐格淡入；服务端直接输出最终状态，淡入是纯 CSS，没有脚本也完整显示；系统开启「减少动态效果」时不播放。
 */
/** 三角函数在 Node 与浏览器里末位小数可能不同，取 3 位小数让服务端与客户端输出一致，避免水合告警。 */
function round(value: number) {
  return Math.round(value * 1000) / 1000
}

function ChartGauge({
  className,
  value,
  max = 100,
  ticks = 60,
  arc = 270,
  tone = "primary",
  fade = true,
  format,
  caption,
  children,
  label,
  ...props
}: ChartGaugeProps) {
  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0
  const lit = Math.round(ratio * ticks)
  const color = toneColor(tone)
  const sweep = Math.min(360, Math.max(30, arc))
  // 角度从 12 点钟顺时针量；开口仪表让缺口落在正下方，起点在左下
  const start = sweep === 360 ? 0 : 180 + (360 - sweep) / 2
  const step = sweep === 360 ? 360 / ticks : sweep / Math.max(1, ticks - 1)

  const marks = Array.from({ length: ticks }, (_, index) => {
    const angle = ((start + index * step) * Math.PI) / 180
    const sin = Math.sin(angle)
    const cos = Math.cos(angle)
    const head = lit > 0 && index === lit - 1
    // 最后一格点亮的刻度比其余长，作为「当前值」的标记
    const length = head ? TICK + 6 : TICK
    return {
      index,
      head,
      on: index < lit,
      x1: round(CENTER + (OUTER - length) * sin),
      y1: round(CENTER - (OUTER - length) * cos),
      x2: round(CENTER + OUTER * sin),
      y2: round(CENTER - OUTER * cos),
      opacity: head || !fade || lit < 2 ? 1 : 0.3 + 0.7 * (index / (lit - 1)),
    }
  })

  return (
    <div
      data-slot="chart-gauge"
      role="meter"
      aria-label={label}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      className={cn(
        "relative aspect-square size-44 max-w-full shrink-0",
        className,
      )}
      {...props}
    >
      {motionStyles()}
      <svg
        viewBox="0 0 200 200"
        aria-hidden="true"
        className="absolute inset-0 size-full"
      >
        {/* 稳定的淡色底环不依赖入场动画，慢网与无脚本时仍有完整轮廓。 */}
        <circle
          data-slot="chart-gauge-placeholder"
          cx={CENTER}
          cy={CENTER}
          r={OUTER - TICK / 2}
          fill="none"
          stroke="var(--muted)"
          strokeWidth={TICK}
          pathLength={1}
          strokeDasharray={`${sweep / 360} 1`}
          transform={`rotate(${start - 90} 100 100)`}
        />
        {marks.map((mark) =>
          mark.on ? (
            <line
              key={mark.index}
              data-dd-anim="fade"
              x1={mark.x1}
              y1={mark.y1}
              x2={mark.x2}
              y2={mark.y2}
              stroke={color}
              strokeWidth={mark.head ? 3.5 : 3}
              strokeLinecap="round"
              opacity={mark.opacity}
              style={{
                animationDelay: `${Math.round((mark.index / ticks) * 700)}ms`,
              }}
            />
          ) : (
            <line
              key={mark.index}
              x1={mark.x1}
              y1={mark.y1}
              x2={mark.x2}
              y2={mark.y2}
              stroke="var(--edge)"
              strokeWidth={3}
              strokeLinecap="round"
            />
          ),
        )}
      </svg>
      <div
        data-slot="chart-gauge-content"
        className="absolute inset-0 flex flex-col items-center justify-center gap-1 text-center tabular-nums"
      >
        {children ?? (
          <>
            <span className="text-3xl leading-none font-semibold tracking-tight">
              {formatStat(ratio * 100, {
                style: "percent",
                digits: 0,
                ...format,
              })}
            </span>
            {caption ? (
              <span className="text-xs text-muted-foreground">{caption}</span>
            ) : null}
          </>
        )}
      </div>
    </div>
  )
}

export { ChartGauge }
export type { ChartGaugeProps }

"use client"

import * as React from "react"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Line,
  LineChart,
  XAxis,
  YAxis,
} from "recharts"

import { cn } from "@/lib/utils"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"
import {
  SERIES_TONES,
  conventionClass,
  createAxisFormatter,
  formatStat,
  toneColor,
  type DataConvention,
  type DataTone,
  type StatFormatOptions,
} from "@/lib/data-display"

import { ChartLegendList } from "./chart-legend"
import { CHART_AXIS_TICK, CHART_GRID, useChartAnimation } from "./chart-parts"

type ChartSeriesItem = {
  /** 数据里这条序列的字段名 */
  key: string
  /** 图例与提示框里的名称 */
  label: string
  /** 色调，不设置时按顺序取默认色板（蓝、琥珀、绿、紫、玫红、青） */
  tone?: DataTone
}

type ChartSeriesProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** 数据行，每行一个横轴位置 */
  data: Record<string, string | number>[]
  /** 横轴对应的字段名 */
  xKey: string
  /** 要画的序列 */
  series: ChartSeriesItem[]
  /**
   * 图形：折线、柱、面积
   * @default "line"
   */
  type?: "line" | "bar" | "area"
  /**
   * 堆叠柱 / 面积；`"diverging"` 让正负值分别向上、向下堆叠，用来对比两组相反方向的数据
   * @default false
   */
  stacked?: boolean | "diverging"
  /**
   * 折线与面积的插值：平滑、折线、阶梯
   * @default "monotone"
   */
  curve?: "monotone" | "linear" | "step"
  /** 横轴刻度文字的格式化，如把 `"2026-02-14"` 变成 `"2月14日"` */
  xTickFormatter?: (value: string, index: number) => string
  /** 提示框标题的格式化，默认同横轴刻度 */
  labelFormatter?: (value: string) => string
  /** 提示框里数值的格式，默认 `zh-CN` 压缩；纵轴取其中的 `style`、`locale`、`currency`、`digits`，并按整条轴统一单位（万 / 亿或 K / M / B） */
  format?: StatFormatOptions
  /** 纵轴范围，不设置时自动 */
  yDomain?: [number, number]
  /** 纵轴刻度位置 */
  yTicks?: number[]
  /**
   * 显示纵轴
   * @default true
   */
  showYAxis?: boolean
  /**
   * 显示水平虚线网格
   * @default true
   */
  showGrid?: boolean
  /**
   * 在图表上方显示图例；默认序列多于一条时显示
   */
  showLegend?: boolean
  /** 柱宽上限（像素） */
  barSize?: number
  /** 涨跌配色约定，仅序列使用 `up` / `down` 色调时有用；不设置时沿用外层 */
  convention?: DataConvention
  /** 读屏名称，描述这张图表示什么 */
  label?: string
}

/** 多序列图表：折线、柱、面积三合一，支持堆叠与正负对比。高度用 `className` 控制（默认 `h-64`）。 */
function ChartSeries({
  className,
  data,
  xKey,
  series,
  type = "line",
  stacked = false,
  curve = "monotone",
  xTickFormatter,
  labelFormatter,
  format,
  yDomain,
  yTicks,
  showYAxis = true,
  showGrid = true,
  showLegend = series.length > 1,
  barSize,
  convention,
  label,
  ...props
}: ChartSeriesProps) {
  const ready = React.useSyncExternalStore(
    subscribe,
    () => true,
    () => false,
  )
  const animation = useChartAnimation()
  const gradientBase = React.useId().replaceAll(":", "")
  const resolved = series.map((item, index) => ({
    ...item,
    color: toneColor(item.tone ?? SERIES_TONES[index % SERIES_TONES.length]),
  }))
  const config: ChartConfig = {}
  for (const item of resolved)
    config[item.key] = { label: item.label, color: item.color }

  // 纵轴整条轴共用一个单位：先找出数据（堆叠时是每列的合计）的最大绝对值，再选「万 / 亿」或 K / M
  const keys = series.map((item) => item.key)
  const peak =
    yDomain && yDomain.length === 2
      ? Math.max(Math.abs(yDomain[0]), Math.abs(yDomain[1]))
      : Math.max(
          0,
          ...data.map((row) => {
            const values = keys.map((key) => Number(row[key]) || 0)
            return stacked
              ? Math.max(
                  values.filter((v) => v > 0).reduce((a, b) => a + b, 0),
                  -values.filter((v) => v < 0).reduce((a, b) => a + b, 0),
                )
              : Math.max(...values.map(Math.abs))
          }),
        )
  const formatTick = createAxisFormatter(peak, format)
  const margin = { top: 8, right: 8, bottom: 0, left: 0 }
  const grid = showGrid ? <CartesianGrid {...CHART_GRID} /> : null
  const xAxis = (
    <XAxis
      dataKey={xKey}
      tickLine={false}
      axisLine={false}
      tickMargin={8}
      minTickGap={16}
      tick={CHART_AXIS_TICK}
      tickFormatter={xTickFormatter}
    />
  )
  const yAxis = (
    <YAxis
      hide={!showYAxis}
      width="auto"
      tickLine={false}
      axisLine={false}
      tickMargin={8}
      tick={CHART_AXIS_TICK}
      domain={yDomain}
      ticks={yTicks}
      tickFormatter={formatTick}
    />
  )
  const tooltip = (
    <ChartTooltip
      cursor={type === "bar" ? false : { stroke: "var(--edge)" }}
      content={
        <ChartTooltipContent
          className="min-w-36 shadow-sm"
          labelFormatter={
            labelFormatter
              ? (value) => labelFormatter(String(value))
              : undefined
          }
          formatter={(value, name, item) => (
            <>
              <span
                aria-hidden="true"
                className="size-2 shrink-0 rounded-[2px]"
                style={{ backgroundColor: item.color }}
              />
              <span className="text-muted-foreground">{name}</span>
              <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                {formatStat(Number(value), format)}
              </span>
            </>
          )}
        />
      }
    />
  )
  const stackId = stacked ? "stack" : undefined

  return (
    <div
      data-slot="chart-series"
      data-ready={ready}
      data-type={type}
      className={cn(
        "relative flex h-64 min-w-0 flex-col gap-3",
        conventionClass(convention),
        className,
      )}
      {...props}
    >
      {showLegend ? (
        <ChartLegendList
          marker={type === "line" ? "line" : "dot"}
          items={resolved.map((item) => ({
            label: item.label,
            tone: item.color,
          }))}
        />
      ) : null}
      <ChartContainer
        data-slot="chart-series-plot"
        data-ready={ready}
        config={config}
        role="img"
        aria-label={label}
        initialDimension={{ width: 320, height: 200 }}
        className="aspect-auto min-h-0 w-full flex-1 justify-start opacity-0 transition-opacity duration-200 data-[ready=true]:opacity-100 motion-reduce:transition-none"
      >
        {type === "bar" ? (
          <BarChart
            data={data}
            margin={margin}
            barCategoryGap="28%"
            stackOffset={stacked === "diverging" ? "sign" : undefined}
          >
            {grid}
            {xAxis}
            {yAxis}
            {tooltip}
            {resolved.map((item, index) => (
              <Bar
                key={item.key}
                dataKey={item.key}
                name={item.label}
                fill={`var(--color-${item.key})`}
                stackId={stackId}
                maxBarSize={barSize ?? 24}
                radius={
                  stacked &&
                  stacked !== "diverging" &&
                  index < resolved.length - 1
                    ? 0
                    : [3, 3, 0, 0]
                }
                {...animation}
              />
            ))}
          </BarChart>
        ) : type === "area" ? (
          <AreaChart data={data} margin={margin}>
            <defs>
              {resolved.map((item) => (
                <linearGradient
                  key={item.key}
                  id={`${gradientBase}-${item.key}`}
                  x1="0"
                  y1="0"
                  x2="0"
                  y2="1"
                >
                  <stop
                    offset="0%"
                    stopColor={`var(--color-${item.key})`}
                    stopOpacity={0.28}
                  />
                  <stop
                    offset="100%"
                    stopColor={`var(--color-${item.key})`}
                    stopOpacity={0}
                  />
                </linearGradient>
              ))}
            </defs>
            {grid}
            {xAxis}
            {yAxis}
            {tooltip}
            {resolved.map((item) => (
              <Area
                key={item.key}
                dataKey={item.key}
                name={item.label}
                type={curve === "step" ? "stepAfter" : curve}
                stroke={`var(--color-${item.key})`}
                strokeWidth={2}
                fill={`url(#${gradientBase}-${item.key})`}
                stackId={stackId}
                activeDot={{ r: 3, strokeWidth: 0 }}
                {...animation}
              />
            ))}
          </AreaChart>
        ) : (
          <LineChart data={data} margin={margin}>
            {grid}
            {xAxis}
            {yAxis}
            {tooltip}
            {resolved.map((item) => (
              <Line
                key={item.key}
                dataKey={item.key}
                name={item.label}
                type={curve === "step" ? "stepAfter" : curve}
                stroke={`var(--color-${item.key})`}
                strokeWidth={2}
                dot={false}
                activeDot={{ r: 3, strokeWidth: 0 }}
                {...animation}
              />
            ))}
          </LineChart>
        )}
      </ChartContainer>
      <div
        data-slot="chart-series-placeholder"
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute inset-0 z-10 min-h-0 bg-muted/30 transition-opacity duration-200 motion-reduce:transition-none",
          ready && "opacity-0",
        )}
      >
        <svg
          className="absolute inset-0 size-full text-muted-foreground/20"
          preserveAspectRatio="none"
          viewBox="0 0 100 100"
        >
          <path
            d="M0 25H100 M0 50H100 M0 75H100"
            fill="none"
            stroke="currentColor"
            strokeDasharray="3 3"
          />
        </svg>
      </div>
    </div>
  )
}

const subscribe = () => () => {}

export { ChartSeries }
export type { ChartSeriesItem, ChartSeriesProps }

"use client"

import * as React from "react"
import { Bar, BarChart, Cell, LabelList, XAxis, YAxis } from "recharts"

import { cn } from "@/lib/utils"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
import {
  SERIES_TONES,
  formatStat,
  toneColor,
  type DataTone,
  type StatFormatOptions,
} from "@/lib/data-display"

import { ChartLegendGrid } from "./chart-legend"
import { CHART_AXIS_TICK, useChartAnimation } from "./chart-parts"

type ChartRankingItem = {
  /** 条目名称，图例里显示 */
  label: string
  /** 数值，单位由 `format` 决定（默认按百分比显示） */
  value: number
  /** 色调，不设置时按顺序取默认色板 */
  tone?: DataTone
}

type ChartRankingProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** 排名条目，按从高到低排列 */
  items: ChartRankingItem[]
  /**
   * 横轴满值；百分比数据用 100，其余数据默认取最大值
   */
  max?: number
  /**
   * 数值格式，默认是不压缩的百分比
   * @default { style: "percent", digits: 0 }
   */
  format?: StatFormatOptions
  /**
   * 在图表旁显示图例格（名称 + 数值）；窄屏落到图表下方
   * @default true
   */
  showLegend?: boolean
  /** 读屏名称，描述这张图表示什么 */
  label?: string
}

const ROW_HEIGHT = 36

/**
 * 横向排名条：左侧是名次，条末标出数值，右侧（窄屏在下方）是带名称的图例格。
 * 名次对应图例的顺序，所以图例同样按名次排列。
 */
function ChartRanking({
  className,
  items,
  max,
  format = { style: "percent", digits: 0 },
  showLegend = true,
  label,
  ...props
}: ChartRankingProps) {
  const ready = React.useSyncExternalStore(
    subscribe,
    () => true,
    () => false,
  )
  const animation = useChartAnimation()
  const data = items.map((item, index) => ({
    rank: String(index + 1),
    label: item.label,
    value: item.value,
    fill: toneColor(item.tone ?? SERIES_TONES[index % SERIES_TONES.length]),
  }))
  const config: ChartConfig = { value: { label: "数值" } }
  const ceiling = max ?? Math.max(...items.map((item) => item.value), 1)

  return (
    <div
      data-slot="chart-ranking"
      data-ready={ready}
      className={cn(
        "relative grid min-w-0 items-center gap-6",
        showLegend && "lg:grid-cols-2",
        className,
      )}
      {...props}
    >
      <ChartContainer
        data-slot="chart-ranking-plot"
        data-ready={ready}
        config={config}
        role="img"
        aria-label={label}
        initialDimension={{ width: 320, height: items.length * ROW_HEIGHT }}
        className="aspect-auto w-full justify-start opacity-0 transition-opacity duration-200 data-[ready=true]:opacity-100 motion-reduce:transition-none"
        style={{ height: items.length * ROW_HEIGHT + 24 }}
      >
        <BarChart
          data={data}
          layout="vertical"
          barCategoryGap="30%"
          margin={{ top: 0, right: 40, bottom: 0, left: 0 }}
        >
          <XAxis type="number" domain={[0, ceiling]} hide />
          <YAxis
            dataKey="rank"
            type="category"
            width={20}
            tickLine={false}
            axisLine={false}
            tick={CHART_AXIS_TICK}
          />
          <Bar
            dataKey="value"
            radius={[0, 4, 4, 0]}
            background={{ fill: "var(--muted)", radius: 4 }}
            {...animation}
          >
            {data.map((entry) => (
              <Cell key={entry.label} fill={entry.fill} />
            ))}
            <LabelList
              dataKey="value"
              position="right"
              offset={8}
              className="fill-foreground text-xs tabular-nums"
              formatter={(value: unknown) => formatStat(Number(value), format)}
            />
          </Bar>
        </BarChart>
      </ChartContainer>
      {showLegend ? (
        <ChartLegendGrid
          items={items.map((item, index) => ({
            label: `${index + 1}. ${item.label}`,
            tone: item.tone ?? SERIES_TONES[index % SERIES_TONES.length],
            value: formatStat(item.value, format),
          }))}
        />
      ) : null}
      <div
        data-slot="chart-ranking-placeholder"
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute inset-0 z-10 min-h-0 bg-muted/30 transition-opacity duration-200 motion-reduce:transition-none",
          ready && "opacity-0",
        )}
      >
        <div className="absolute inset-0 flex flex-col justify-around gap-2 p-3">
          {items.map((item, index) => (
            <div
              key={index}
              className="h-3 shrink rounded-sm bg-muted-foreground/15"
              style={{
                width: `${Math.max(12, Math.min(90, (item.value / ceiling) * 90))}%`,
              }}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

const subscribe = () => () => {}

export { ChartRanking }
export type { ChartRankingItem, ChartRankingProps }

import * as React from "react"

import { cn } from "@/lib/utils"
import { toneColor, type DataTone } from "@/lib/data-display"

type ChartLegendItem = {
  label: string
  tone: DataTone
  /** 图例项右侧的数值，已格式化的文字 */
  value?: React.ReactNode
}

type ChartLegendListProps = Omit<React.ComponentProps<"ul">, "children"> & {
  items: ChartLegendItem[]
  /**
   * 色标形状：`dot` 圆点（柱、面积），`line` 短横线（折线）
   * @default "dot"
   */
  marker?: "dot" | "line"
}

/** 行内图例：色标 + 名称，放在图表上方，窄屏自动换行。 */
function ChartLegendList({
  className,
  items,
  marker = "dot",
  ...props
}: ChartLegendListProps) {
  return (
    <ul
      data-slot="chart-legend-list"
      className={cn("flex flex-wrap items-center gap-x-4 gap-y-1", className)}
      {...props}
    >
      {items.map((item) => (
        <li
          key={item.label}
          className="flex items-center gap-1.5 text-xs text-muted-foreground"
        >
          <span
            aria-hidden="true"
            className={cn(
              "shrink-0",
              marker === "dot"
                ? "size-2 rounded-full"
                : "h-0.5 w-3 rounded-full",
            )}
            style={{ backgroundColor: toneColor(item.tone) }}
          />
          {item.label}
        </li>
      ))}
    </ul>
  )
}

type ChartLegendGridProps = Omit<React.ComponentProps<"ul">, "children"> & {
  items: ChartLegendItem[]
}

/** 图例格：两列，每项是圆点、名称和下面一行大号数值（通常是百分比）。 */
function ChartLegendGrid({ className, items, ...props }: ChartLegendGridProps) {
  return (
    <ul
      data-slot="chart-legend-grid"
      className={cn("grid grid-cols-2 gap-x-6 gap-y-4", className)}
      {...props}
    >
      {items.map((item) => (
        <li key={item.label} className="flex min-w-0 items-start gap-2.5">
          <span
            aria-hidden="true"
            className="mt-1.5 size-2 shrink-0 rounded-full"
            style={{ backgroundColor: toneColor(item.tone) }}
          />
          <span className="flex min-w-0 flex-col gap-1">
            <span className="line-clamp-2 text-[13px] text-muted-foreground">
              {item.label}
            </span>
            <span className="text-lg leading-none font-semibold tabular-nums">
              {item.value}
            </span>
          </span>
        </li>
      ))}
    </ul>
  )
}

export { ChartLegendGrid, ChartLegendList }
export type { ChartLegendGridProps, ChartLegendItem, ChartLegendListProps }