banhaten 0.3.0 → 0.5.0

package/registry/components/chart-options.types.ts

@@ -0,0 +1,67 @@
+import type { EChartTheme } from "./echart-theme"
+
+export type ChartFamily = "area" | "line" | "bar" | "composed" | "radar" | "pie" | "radial" | "sankey"
+export type ChartDatum = Record<string, string | number | null>
+export type ChartVariant = "default" | "gradient" | "gradient-reverse" | "solid" | "dotted" | "lines" | "hatched" | "duotone" | "duotone-reverse" | "stripped" | "blocks" | "expandable" | "filled" | "donut" | "padded" | "petal" | "full" | "semi" | "source" | "target"
+export type ChartCurve = "linear" | "smooth" | "bump" | "monotone" | "monotoneX" | "monotoneY" | "natural" | "step"
+export type ChartStroke = "solid" | "dashed" | "animated-dashed"
+export type ChartDotStyle = "default" | "border" | "colored-border"
+export type ChartLegendIndicator = "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"
+
+/** Series colors are palette indices: application data cannot introduce off-brand colors. */
+export interface ChartSeries {
+  key: string
+  label?: string
+  type?: "line" | "bar" | "area"
+  colorIndex?: number
+  colorIndices?: number[]
+  variant?: ChartVariant
+  stroke?: ChartStroke
+  curve?: ChartCurve
+  buffer?: boolean
+  dots?: boolean
+  dotStyle?: ChartDotStyle
+  activeDotStyle?: ChartDotStyle
+}
+
+export interface ChartSpec {
+  family: ChartFamily
+  data: ChartDatum[]
+  series?: ChartSeries[]
+  categoryKey?: string
+  variant?: ChartVariant
+  stack?: "default" | "stacked" | "percent" | "expanded"
+  curve?: ChartCurve
+  horizontal?: boolean
+  legend?: boolean
+  brush?: boolean
+  labels?: "none" | "inside" | "outside"
+  max?: number
+  grid?: "polygon" | "circle"
+  nodes?: { name: string; colorIndex?: number }[]
+  links?: { source: string | number; target: string | number; value: number }[]
+  highlightMax?: boolean
+  hoverHighlight?: boolean
+  hoverReveal?: boolean
+  legendIndicator?: ChartLegendIndicator
+  tooltipSurface?: "default" | "translucent"
+  tooltipRadius?: "sm" | "md" | "lg" | "xl"
+  tooltipCursor?: boolean
+  tooltipPosition?: "variable" | "fixed"
+}
+
+export function chartSeries(spec: ChartSpec): ChartSeries[] {
+  if (spec.series?.length) return spec.series
+  const key = Object.keys(spec.data[0] ?? {}).find((entry) =>
+    entry !== (spec.categoryKey ?? "name") && spec.data.some((row) => typeof row[entry] === "number"))
+  return [{ key: key ?? "value" }]
+}
+
+/** Missing values remain gaps; they never become a fabricated zero or infinity. */
+export function chartNumber(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null
+}
+
+export function chartColor(theme: EChartTheme, index: number): string {
+  return theme.palette[((Math.trunc(index) % theme.palette.length) + theme.palette.length) % theme.palette.length] ?? theme.foreground
+}

package/registry/components/chart.tsx

@@ -1,203 +1,203 @@
-"use client"
-
-import * as React from "react"
-import {
-  Legend as RechartsLegend,
-  ResponsiveContainer,
-  Tooltip as RechartsTooltip,
-} from "recharts"
-
-import { cn } from "@/lib/utils"
-
-type ChartConfig = Record<
-  string,
-  {
-    color?: string
-    label?: React.ReactNode
-  }
->
-type ChartContainerProps = React.ComponentProps<"div"> & {
-  config?: ChartConfig
-}
-type ChartTooltipProps = React.ComponentProps<typeof RechartsTooltip>
-type ChartLegendProps = React.ComponentProps<typeof RechartsLegend>
-type ChartPayloadItem = {
-  color?: string
-  dataKey?: string | number
-  name?: React.ReactNode
-  value?: React.ReactNode
-}
-type ChartTooltipContentProps = React.ComponentProps<"div"> & {
-  active?: boolean
-  hideLabel?: boolean
-  label?: React.ReactNode
-  payload?: ChartPayloadItem[]
-}
-type ChartLegendContentProps = React.ComponentProps<"div"> & {
-  payload?: ChartPayloadItem[]
-}
-
-const chartCategoricalTokens = [
-  "--bh-chart-categorical-brand",
-  "--bh-chart-categorical-success",
-  "--bh-chart-categorical-warning",
-  "--bh-chart-categorical-danger",
-  "--bh-chart-categorical-information",
-  "--bh-chart-categorical-purple",
-  "--bh-chart-categorical-aqua",
-  "--bh-chart-categorical-fuchsia",
-] as const
-
-function ChartContainer({
-  children,
-  className,
-  config,
-  style,
-  ...props
-}: ChartContainerProps) {
-  return (
-    <div
-      data-slot="chart"
-      style={{ ...getChartStyle(config), ...style }}
-      className={cn(
-        "h-[var(--bh-space-19xl-384)] w-full text-[length:var(--bh-text-body-xs-regular-font-size)] text-[var(--bh-content-subtle)] [&_.recharts-cartesian-axis-tick_text]:fill-[var(--bh-content-muted)] [&_.recharts-cartesian-grid_line]:stroke-[var(--bh-border-subtle)] [&_.recharts-tooltip-cursor]:fill-[var(--bh-bg-neutral-subtle)]",
-        className
-      )}
-      {...props}
-    >
-      <ResponsiveContainer>{children}</ResponsiveContainer>
-    </div>
-  )
-}
-
-const ChartTooltip = RechartsTooltip
-const ChartLegend = RechartsLegend
-
-/**
- * Recharts clones the element passed as `content` and injects its own internal
- * props (`iconSize`, `verticalAlign`, `chartWidth`, `itemSorter`, …). Those are
- * not valid DOM attributes, so forward only what a presentational element can
- * legitimately receive.
- */
-function forwardableDomProps(props: Record<string, unknown>) {
-  return Object.fromEntries(
-    Object.entries(props).filter(
-      ([key]) =>
-        key === "id" ||
-        key === "role" ||
-        key === "style" ||
-        key === "tabIndex" ||
-        key.startsWith("aria-") ||
-        key.startsWith("data-")
-    )
-  )
-}
-
-function ChartTooltipContent({
-  active,
-  className,
-  hideLabel = false,
-  label,
-  payload,
-  ...props
-}: ChartTooltipContentProps) {
-  if (!active || !payload?.length) return null
-
-  return (
-    <div
-      data-slot="chart-tooltip"
-      className={cn(
-        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--shadow-popover)]",
-        className
-      )}
-      {...forwardableDomProps(props)}
-    >
-      {!hideLabel && label ? (
-        <div className="font-[var(--bh-text-body-xs-medium-font-weight)]">
-          {label}
-        </div>
-      ) : null}
-      <div className="grid gap-[var(--bh-space-xs-4)]">
-        {payload.map((item, index) => (
-          <div
-            key={`${String(item.dataKey ?? item.name)}-${index}`}
-            className="flex items-center gap-[var(--bh-space-md-8)]"
-          >
-            <span
-              aria-hidden="true"
-              className="size-[var(--bh-space-md-8)] shrink-0 rounded-[var(--bh-radius-full)]"
-              style={{ backgroundColor: item.color }}
-            />
-            <span className="min-w-0 flex-1 text-[var(--bh-content-subtle)]">
-              {item.name}
-            </span>
-            <span className="font-[var(--bh-text-body-xs-medium-font-weight)]">
-              {item.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function ChartLegendContent({
-  className,
-  payload,
-  ...props
-}: ChartLegendContentProps) {
-  if (!payload?.length) return null
-
-  return (
-    <div
-      data-slot="chart-legend"
-      className={cn("flex flex-wrap items-center justify-center gap-[var(--bh-space-3xl-16)]", className)}
-      {...forwardableDomProps(props)}
-    >
-      {payload.map((item, index) => (
-        <div
-          key={`${String(item.dataKey ?? item.name)}-${index}`}
-          className="inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-subtle)]"
-        >
-          <span
-            aria-hidden="true"
-            className="size-[var(--bh-space-md-8)] rounded-[var(--bh-radius-full)]"
-            style={{ backgroundColor: item.color }}
-          />
-          {item.value ?? item.name}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function getChartStyle(config?: ChartConfig): React.CSSProperties {
-  if (!config) return {}
-
-  return Object.entries(config).reduce<React.CSSProperties>(
-    (style, [key, value], index) => ({
-      ...style,
-      [`--color-${key}`]:
-        value.color ??
-        `var(${chartCategoricalTokens[index % chartCategoricalTokens.length]})`,
-    }),
-    {}
-  )
-}
-
-export {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-}
-export type {
-  ChartConfig,
-  ChartContainerProps,
-  ChartLegendContentProps,
-  ChartLegendProps,
-  ChartPayloadItem,
-  ChartTooltipContentProps,
-  ChartTooltipProps,
-}
+"use client"
+
+import * as React from "react"
+import {
+  Legend as RechartsLegend,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+} from "recharts"
+
+import { cn } from "@/lib/utils"
+
+type ChartConfig = Record<
+  string,
+  {
+    color?: string
+    label?: React.ReactNode
+  }
+>
+type ChartContainerProps = React.ComponentProps<"div"> & {
+  config?: ChartConfig
+}
+type ChartTooltipProps = React.ComponentProps<typeof RechartsTooltip>
+type ChartLegendProps = React.ComponentProps<typeof RechartsLegend>
+type ChartPayloadItem = {
+  color?: string
+  dataKey?: string | number
+  name?: React.ReactNode
+  value?: React.ReactNode
+}
+type ChartTooltipContentProps = React.ComponentProps<"div"> & {
+  active?: boolean
+  hideLabel?: boolean
+  label?: React.ReactNode
+  payload?: ChartPayloadItem[]
+}
+type ChartLegendContentProps = React.ComponentProps<"div"> & {
+  payload?: ChartPayloadItem[]
+}
+
+const chartCategoricalTokens = [
+  "--bh-chart-categorical-brand",
+  "--bh-chart-categorical-success",
+  "--bh-chart-categorical-warning",
+  "--bh-chart-categorical-danger",
+  "--bh-chart-categorical-information",
+  "--bh-chart-categorical-purple",
+  "--bh-chart-categorical-aqua",
+  "--bh-chart-categorical-fuchsia",
+] as const
+
+function ChartContainer({
+  children,
+  className,
+  config,
+  style,
+  ...props
+}: ChartContainerProps) {
+  return (
+    <div
+      data-slot="chart"
+      style={{ ...getChartStyle(config), ...style }}
+      className={cn(
+        "h-[var(--bh-space-19xl-384)] w-full text-[length:var(--bh-text-body-xs-regular-font-size)] text-[var(--bh-content-subtle)] [&_.recharts-cartesian-axis-tick_text]:fill-[var(--bh-content-muted)] [&_.recharts-cartesian-grid_line]:stroke-[var(--bh-border-subtle)] [&_.recharts-tooltip-cursor]:fill-[var(--bh-bg-neutral-subtle)]",
+        className
+      )}
+      {...props}
+    >
+      <ResponsiveContainer>{children}</ResponsiveContainer>
+    </div>
+  )
+}
+
+const ChartTooltip = RechartsTooltip
+const ChartLegend = RechartsLegend
+
+/**
+ * Recharts clones the element passed as `content` and injects its own internal
+ * props (`iconSize`, `verticalAlign`, `chartWidth`, `itemSorter`, …). Those are
+ * not valid DOM attributes, so forward only what a presentational element can
+ * legitimately receive.
+ */
+function forwardableDomProps(props: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(props).filter(
+      ([key]) =>
+        key === "id" ||
+        key === "role" ||
+        key === "style" ||
+        key === "tabIndex" ||
+        key.startsWith("aria-") ||
+        key.startsWith("data-")
+    )
+  )
+}
+
+function ChartTooltipContent({
+  active,
+  className,
+  hideLabel = false,
+  label,
+  payload,
+  ...props
+}: ChartTooltipContentProps) {
+  if (!active || !payload?.length) return null
+
+  return (
+    <div
+      data-slot="chart-tooltip"
+      className={cn(
+        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--elevation-popover)]",
+        className
+      )}
+      {...forwardableDomProps(props)}
+    >
+      {!hideLabel && label ? (
+        <div className="font-[var(--bh-text-body-xs-medium-font-weight)]">
+          {label}
+        </div>
+      ) : null}
+      <div className="grid gap-[var(--bh-space-xs-4)]">
+        {payload.map((item, index) => (
+          <div
+            key={`${String(item.dataKey ?? item.name)}-${index}`}
+            className="flex items-center gap-[var(--bh-space-md-8)]"
+          >
+            <span
+              aria-hidden="true"
+              className="size-[var(--bh-space-md-8)] shrink-0 rounded-[var(--bh-radius-full)]"
+              style={{ backgroundColor: item.color }}
+            />
+            <span className="min-w-0 flex-1 text-[var(--bh-content-subtle)]">
+              {item.name}
+            </span>
+            <span className="font-[var(--bh-text-body-xs-medium-font-weight)]">
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ChartLegendContent({
+  className,
+  payload,
+  ...props
+}: ChartLegendContentProps) {
+  if (!payload?.length) return null
+
+  return (
+    <div
+      data-slot="chart-legend"
+      className={cn("flex flex-wrap items-center justify-center gap-[var(--bh-space-3xl-16)]", className)}
+      {...forwardableDomProps(props)}
+    >
+      {payload.map((item, index) => (
+        <div
+          key={`${String(item.dataKey ?? item.name)}-${index}`}
+          className="inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-subtle)]"
+        >
+          <span
+            aria-hidden="true"
+            className="size-[var(--bh-space-md-8)] rounded-[var(--bh-radius-full)]"
+            style={{ backgroundColor: item.color }}
+          />
+          {item.value ?? item.name}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function getChartStyle(config?: ChartConfig): React.CSSProperties {
+  if (!config) return {}
+
+  return Object.entries(config).reduce<React.CSSProperties>(
+    (style, [key, value], index) => ({
+      ...style,
+      [`--color-${key}`]:
+        value.color ??
+        `var(${chartCategoricalTokens[index % chartCategoricalTokens.length]})`,
+    }),
+    {}
+  )
+}
+
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+}
+export type {
+  ChartConfig,
+  ChartContainerProps,
+  ChartLegendContentProps,
+  ChartLegendProps,
+  ChartPayloadItem,
+  ChartTooltipContentProps,
+  ChartTooltipProps,
+}