@orbit-work/ui 0.1.0

package/src/components/composite/Charts/ChartsSource.test.mjs

@@ -0,0 +1,111 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const stories = await readFile(new URL("./Charts.stories.tsx", import.meta.url), "utf8")
+
+test("两型规范：BarChart（分类量）+ SeriesChart（时序）", () => {
+  assert.match(source, /export function BarChart/)
+  assert.match(source, /export function SeriesChart/)
+  assert.match(source, /orientation = "vertical"/)
+  assert.match(source, /orientation === "horizontal"/)
+})
+
+test("系列色只取 --ow-data-1..6，按槽位轮转", () => {
+  assert.match(source, /const DATA_SERIES_COUNT = 6/)
+  assert.match(source, /`var\(--ow-data-\$\{slot \+ 1\}\)`/)
+})
+
+test("坐标/刻度 text-3 且读数 mono + tabular-nums；网格线 --ow-border", () => {
+  assert.match(
+    source,
+    /text-\[color:var\(--ow-text-3\)\] font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]/,
+  )
+  assert.match(source, /bg-\[var\(--ow-border\)\]/)
+})
+
+test("≥10000 读数缩写为「万」，title 语境保留全值口径（§7）", () => {
+  assert.match(source, /Math\.abs\(value\) >= 10000/)
+})
+
+test("R3/R2：荧黄只出现在 --ow-data-today 今日点，且为可选参数默认关（状态极旁注在文件头）", () => {
+  assert.doesNotMatch(source, /var\(\s*--ow-(?:yellow|yellow-deep|beacon|accent-dot)\s*[),]/)
+  assert.match(source, /const TODAY_COLOR = "var\(--ow-data-today\)"/)
+  assert.match(source, /todayIndex\?: number/)
+  assert.doesNotMatch(source, /todayIndex = \d/)
+  assert.match(source, /【荧黄旁注】/)
+})
+
+test("R1 双编码：今日点靠形差（多一颗点 / 折线上实心加环）而不只是色", () => {
+  // 条形图：条身留在系列色，今日只多一颗 6px 点（竖列在条顶、横条在条尾）
+  assert.match(
+    source,
+    /const TODAY_DOT_CLASS = "h-1\.5 w-1\.5 \[border-radius:var\(--ow-radius-pill\)\] bg-\[var\(--ow-data-today\)\]"/,
+  )
+  assert.match(
+    source,
+    /const colorOf = \(item: BarChartDatum, index: number\) => dataSeriesColor\(item\.series \?\? index\)/,
+  )
+  // 整条染荧黄 / 整条描边（V1 放大写法）不得回流
+  assert.doesNotMatch(source, /outline-\[var\(--ow-data-today\)\]/)
+  assert.doesNotMatch(source, /index === todayIndex \? TODAY_COLOR/)
+  // 折线图今日点：实心 + 双环描边
+  assert.match(source, /data-ow-part="today-marker"/)
+  // 环随宿主：outline + 2px 透明缝（不得回到写死 --ow-surface 的 box-shadow 内环）
+  assert.match(source, /\[outline:1\.5px_solid_var\(--ow-data-today\)\] \[outline-offset:2px\]/)
+  assert.doesNotMatch(source, /box-shadow:0_0_0_2px_var\(--ow-surface\)/)
+})
+
+test("容器三态：加载走 Skeleton、空态走 EmptyState 原语", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /<Skeleton variant="block"/)
+  assert.match(source, /data-ow-state="empty"/)
+})
+
+test("贴地：图表自身不画影、不发光、不用渐变", () => {
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow|gradient/)
+})
+
+test("动效只用 ease-beacon + 120/200/320 档", () => {
+  assert.match(source, /ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /duration-\[(?!var\(--ow-dur-[123]\))/)
+})
+
+test("SVG 说明入 <desc>，且 XML 注释中无双连字符", () => {
+  assert.match(source, /<desc>/)
+  assert.doesNotMatch(source, /<!--[\s\S]*--[\s\S]*-->/)
+})
+
+test("图表有可访问名（ariaLabel 必填 + role=img）", () => {
+  assert.match(source, /ariaLabel: string/)
+  assert.match(source, /role="img"/)
+})
+
+test("Tailwind 任意值 var() 全部带类型标注（ambiguous-arbitrary 铁律）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("stories 覆盖两型全部状态 + 双主题、不写死主题", () => {
+  for (const name of [
+    "Bar",
+    "BarNoGrid",
+    "BarHorizontal",
+    "BarToday",
+    "BarLoading",
+    "BarEmpty",
+    "Series",
+    "SeriesArea",
+    "SeriesToday",
+    "SeriesSixLines",
+    "SeriesLoading",
+    "SeriesEmpty",
+    "ThemePair",
+  ]) {
+    assert.match(stories, new RegExp(`export const ${name}\\b`))
+  }
+  assert.match(stories, /data-theme="light"/)
+  assert.match(stories, /data-theme="dark"/)
+  assert.match(stories, /荧黄旁注/)
+})

package/src/components/composite/Charts/index.tsx

@@ -0,0 +1,385 @@
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { EmptyState } from "../../primitives/EmptyState"
+import { Skeleton } from "../Skeleton"
+
+/**
+ * Charts 基础 — DS 2.0 两型图表规范（蓝图批次② · 归口 UsageQuota / UsageSeries）。
+ *
+ * 两型：`BarChart`（分类量 · 竖列或横条用量形态）与 `SeriesChart`（时序 · 折线/面积）。
+ * 系列色只取 `--ow-data-1..6`（皮肤白名单内可覆盖）；坐标与刻度 `--ow-text-3`；
+ * 网格线 1px `--ow-border`；读数一律 mono + tabular-nums（§7）。
+ * 立面：贴地 0 影，容器边框由调用方（卡）承担，图表自身不画影不发光。
+ * R1 双编码：系列靠图例文字 + 色，今日点靠形差（条上方/条尾多一颗点、折线上是实心加环——
+ * 环用 outline + 2px 透明缝，缝透出宿主底色，图表不假设自己坐在哪一档面上）+ 色，
+ * 颜色永远是第二编码。
+ *
+ * 【荧黄旁注】`todayIndex` 打开时今日点取 `--ow-data-today`（= 状态极「图表今日」，§4）。
+ * 默认关闭，组件默认样式里不出现荧黄（R2）；同屏状态极只许一处，调用方自行保证。
+ */
+
+const DATA_SERIES_COUNT = 6
+
+/** 系列序号 → data token；越界按 1..6 轮转。 */
+export function dataSeriesColor(index: number): string {
+  const slot = ((index % DATA_SERIES_COUNT) + DATA_SERIES_COUNT) % DATA_SERIES_COUNT
+  return `var(--ow-data-${slot + 1})`
+}
+
+const TODAY_COLOR = "var(--ow-data-today)"
+
+/**
+ * 今日点（状态极·图表今日，§4）：6px 圆点，色 --ow-data-today。
+ * 屏级表写的是「今日**点**」——条形图不把整根条染成荧黄（那是全图最大色块，越 §4 面积口径），
+ * 只在条顶（竖列）/条尾（横条）点一颗。形差＝点形＋位置，色永远是第二编码（R1）。
+ */
+const TODAY_DOT_CLASS = "h-1.5 w-1.5 [border-radius:var(--ow-radius-pill)] bg-[var(--ow-data-today)]"
+
+const axisTextClass =
+  "text-ow-fs-mark-md leading-none text-[color:var(--ow-text-3)] font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]"
+
+function defaultFormat(value: number): string {
+  return Math.abs(value) >= 10000 ? `${(value / 10000).toFixed(1)}万` : value.toLocaleString("zh-CN")
+}
+
+/** 等分网格线：横向 n 条，色 --ow-border，纯装饰不入无障碍树。 */
+function GridLines({ count }: { count: number }) {
+  if (count <= 0) return null
+  return (
+    <div aria-hidden="true" className="absolute inset-0 flex flex-col justify-between pointer-events-none">
+      {Array.from({ length: count + 1 }, (_, index) => (
+        <div key={index} className="h-px w-full bg-[var(--ow-border)]" />
+      ))}
+    </div>
+  )
+}
+
+/* ------------------------------------------------------------------ BarChart */
+
+export interface BarChartDatum {
+  label: string
+  value: number
+  /** 系列槽位 0..5 → --ow-data-1..6；缺省按下标轮转 */
+  series?: number
+}
+
+export interface BarChartProps {
+  data: BarChartDatum[]
+  /** vertical=竖列（默认）· horizontal=横条（用量条形态） */
+  orientation?: "vertical" | "horizontal"
+  /** 满格值；缺省取数据最大值 */
+  max?: number
+  /** 读数格式化；缺省 ≥10000 缩写为「x.x万」（§7） */
+  formatValue?: (value: number) => string
+  /** 显示数值读数（mono + tabular-nums） */
+  showValues?: boolean
+  /** 横向网格线条数，默认 4；0 = 关。horizontal 形态忽略 */
+  gridLines?: number
+  /** 绘图区高度 px（vertical 形态），默认 160 */
+  height?: number
+  /**
+   * 状态极·图表今日：该下标的条身仍走系列色，另点一颗 `--ow-data-today` 今日点
+   * （竖列在条顶、横条在条尾；形差 + 色，R1）。默认关；同屏状态极限一处（§4）。
+   */
+  todayIndex?: number
+  loading?: boolean
+  emptyMessage?: ReactNode
+  /** 图表的可访问名（必填，屏读靠它） */
+  ariaLabel: string
+  className?: string
+}
+
+export function BarChart({
+  data,
+  orientation = "vertical",
+  max,
+  formatValue = defaultFormat,
+  showValues = false,
+  gridLines = 4,
+  height = 160,
+  todayIndex,
+  loading = false,
+  emptyMessage = "还没有数据",
+  ariaLabel,
+  className,
+}: BarChartProps) {
+  if (loading) {
+    return (
+      <div data-slot="bar-chart" data-ow-state="loading" className={className} aria-busy="true">
+        <Skeleton variant="block" height={height} />
+      </div>
+    )
+  }
+  if (data.length === 0) {
+    return (
+      <div data-slot="bar-chart" data-ow-state="empty" className={className}>
+        <EmptyState message={emptyMessage} />
+      </div>
+    )
+  }
+
+  const ceiling = max ?? (Math.max(...data.map((item) => item.value), 0) || 1)
+  const ratio = (value: number) => Math.max(0, Math.min(1, value / ceiling))
+  // 条身一律系列色；今日只多一颗点，不整条换色（见 TODAY_DOT_CLASS）。
+  const colorOf = (item: BarChartDatum, index: number) => dataSeriesColor(item.series ?? index)
+
+  if (orientation === "horizontal") {
+    return (
+      <div
+        data-slot="bar-chart"
+        data-ow-orientation="horizontal"
+        role="img"
+        aria-label={ariaLabel}
+        className={cn("flex flex-col gap-2.5 w-full", className)}
+      >
+        {data.map((item, index) => (
+          <div key={item.label} data-ow-part="bar-row" className="flex flex-col gap-1">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="text-ow-fs-ui text-[color:var(--ow-text-2)] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+                {item.label}
+              </span>
+              {showValues && <span className={axisTextClass}>{formatValue(item.value)}</span>}
+            </div>
+            <div
+              data-ow-part="track"
+              className="relative h-1.5 w-full overflow-hidden bg-[var(--ow-progress-track)] [border-radius:var(--ow-radius-pill)]"
+            >
+              <div
+                data-ow-part="fill"
+                data-ow-role={index === todayIndex ? "today" : undefined}
+                className="relative h-full [border-radius:var(--ow-radius-pill)] transition-[width] duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)]"
+                style={{ width: `${ratio(item.value) * 100}%`, background: colorOf(item, index) }}
+              >
+                {index === todayIndex && (
+                  <span
+                    aria-hidden="true"
+                    data-ow-part="today-marker"
+                    className={cn(TODAY_DOT_CLASS, "absolute right-0 top-0 h-full w-1.5")}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="bar-chart"
+      data-ow-orientation="vertical"
+      role="img"
+      aria-label={ariaLabel}
+      className={cn("flex flex-col gap-2 w-full", className)}
+    >
+      <div className="relative w-full" style={{ height }}>
+        <GridLines count={gridLines} />
+        <div className="relative flex h-full w-full items-end gap-2">
+          {data.map((item, index) => (
+            <div
+              key={item.label}
+              data-ow-part="bar-col"
+              className="flex flex-1 min-w-0 flex-col items-center gap-1 h-full justify-end"
+            >
+              {showValues && <span className={axisTextClass}>{formatValue(item.value)}</span>}
+              {index === todayIndex && (
+                <span aria-hidden="true" data-ow-part="today-marker" className={TODAY_DOT_CLASS} />
+              )}
+              <div
+                data-ow-part="bar"
+                data-ow-role={index === todayIndex ? "today" : undefined}
+                className="w-full max-w-10 [border-radius:var(--ow-radius-2xs)] transition-[height] duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)]"
+                style={{
+                  height: `${ratio(item.value) * 100}%`,
+                  minHeight: item.value > 0 ? 2 : 0,
+                  background: colorOf(item, index),
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex w-full gap-2">
+        {data.map((item) => (
+          <span
+            key={item.label}
+            className={cn(axisTextClass, "flex-1 min-w-0 text-center overflow-hidden text-ellipsis whitespace-nowrap")}
+          >
+            {item.label}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/* --------------------------------------------------------------- SeriesChart */
+
+export interface ChartSeries {
+  name: string
+  points: number[]
+  /** 系列槽位 0..5 → --ow-data-1..6；缺省按下标轮转 */
+  series?: number
+}
+
+export interface SeriesChartProps {
+  /** x 轴刻度文案，长度应与各系列点数一致 */
+  labels: string[]
+  series: ChartSeries[]
+  /** 折线下加半透明面积 */
+  area?: boolean
+  /** 绘图区高度 px，默认 160 */
+  height?: number
+  /** 横向网格线条数，默认 4；0 = 关 */
+  gridLines?: number
+  min?: number
+  max?: number
+  formatValue?: (value: number) => string
+  /** 显示图例（色块 + 名称文字，R1 双编码） */
+  legend?: boolean
+  /**
+   * 状态极·图表今日：该下标的点画成 `--ow-data-today` 实心 + 外环（形差 + 色，R1）。
+   * 默认关；同屏状态极限一处（§4）。
+   */
+  todayIndex?: number
+  loading?: boolean
+  emptyMessage?: ReactNode
+  ariaLabel: string
+  className?: string
+}
+
+export function SeriesChart({
+  labels,
+  series,
+  area = false,
+  height = 160,
+  gridLines = 4,
+  min,
+  max,
+  formatValue = defaultFormat,
+  legend = false,
+  todayIndex,
+  loading = false,
+  emptyMessage = "还没有数据",
+  ariaLabel,
+  className,
+}: SeriesChartProps) {
+  if (loading) {
+    return (
+      <div data-slot="series-chart" data-ow-state="loading" className={className} aria-busy="true">
+        <Skeleton variant="block" height={height} />
+      </div>
+    )
+  }
+  const hasPoints = series.some((line) => line.points.length > 0)
+  if (!hasPoints) {
+    return (
+      <div data-slot="series-chart" data-ow-state="empty" className={className}>
+        <EmptyState message={emptyMessage} />
+      </div>
+    )
+  }
+
+  const all = series.flatMap((line) => line.points)
+  const lo = min ?? Math.min(...all, 0)
+  const hi = max ?? Math.max(...all, lo + 1)
+  const span = hi - lo || 1
+  const count = Math.max(...series.map((line) => line.points.length))
+  const xOf = (index: number) => (count <= 1 ? 50 : (index / (count - 1)) * 100)
+  const yOf = (value: number) => 100 - ((value - lo) / span) * 100
+
+  return (
+    <div
+      data-slot="series-chart"
+      role="img"
+      aria-label={ariaLabel}
+      className={cn("flex flex-col gap-2 w-full", className)}
+    >
+      <div className="relative w-full" style={{ height }}>
+        <GridLines count={gridLines} />
+        <svg
+          className="relative block h-full w-full overflow-visible"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+          aria-hidden="true"
+        >
+          <desc>时序折线图：各系列一条折线，纵轴按最小到最大值等比映射。</desc>
+          {series.map((line, lineIndex) => {
+            const color = dataSeriesColor(line.series ?? lineIndex)
+            const path = line.points.map((value, index) => `${xOf(index)},${yOf(value)}`).join(" ")
+            return (
+              <g key={line.name}>
+                {area && line.points.length > 1 && (
+                  <polygon
+                    points={`${xOf(0)},100 ${path} ${xOf(line.points.length - 1)},100`}
+                    fill={color}
+                    opacity="0.12"
+                  />
+                )}
+                <polyline
+                  points={path}
+                  fill="none"
+                  stroke={color}
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  vectorEffect="non-scaling-stroke"
+                />
+              </g>
+            )
+          })}
+        </svg>
+        {todayIndex !== undefined &&
+          series.map((line) => {
+            const value = line.points[todayIndex]
+            if (value === undefined) return null
+            return (
+              <span
+                key={`today-${line.name}`}
+                data-ow-part="today-marker"
+                aria-hidden="true"
+                /* 实心加环：环与点之间留一道 2px 透明缝（outline-offset），缝里透出宿主自己的底色。
+                   R2 终扫：原来用 box-shadow 的第一层写死 --ow-surface 描内环，图表坐在
+                   --ow-bg 地上或 --ow-surface-2 井里时那圈就是一道错色晕；改 outline 后随宿主走。 */
+                className="absolute w-2 h-2 -translate-x-1/2 -translate-y-1/2 [border-radius:var(--ow-radius-pill)] [outline:1.5px_solid_var(--ow-data-today)] [outline-offset:2px]"
+                style={{
+                  left: `${xOf(todayIndex)}%`,
+                  top: `${yOf(value)}%`,
+                  background: TODAY_COLOR,
+                }}
+              />
+            )
+          })}
+      </div>
+      <div className="flex w-full gap-2">
+        {labels.map((label) => (
+          <span
+            key={label}
+            className={cn(axisTextClass, "flex-1 min-w-0 text-center overflow-hidden text-ellipsis whitespace-nowrap")}
+          >
+            {label}
+          </span>
+        ))}
+      </div>
+      {legend && (
+        <div data-ow-part="legend" className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
+          {series.map((line, index) => (
+            <span
+              key={line.name}
+              className="inline-flex items-center gap-1.5 text-ow-fs-ui text-[color:var(--ow-text-2)]"
+            >
+              <span
+                aria-hidden="true"
+                className="w-2.5 h-0.5 shrink-0 [border-radius:var(--ow-radius-pill)]"
+                style={{ background: dataSeriesColor(line.series ?? index) }}
+              />
+              {line.name}
+              <span className={axisTextClass}>{formatValue(line.points[line.points.length - 1] ?? 0)}</span>
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}