@orbit-work/ui 0.1.1 → 0.1.2

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

@@ -1,111 +0,0 @@
-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

@@ -1,385 +0,0 @@
-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>
-  )
-}