Vandoko Data Atoms

A composable system of 9 data display atoms extracted from the Vandoko AI dashboard. Each atom follows consistent sizing (sm/md/lg), supports the oklch brand palette, and integrates with the shared scoring and delta utilities.

Installation

Atoms Reference

DeltaIndicator

Displays change direction with trend icons and percentage. Polarity-aware — "higher_is_better" or "lower_is_better" determines whether an increase shows as improving or declining.

import { DeltaIndicator } from "@/components/vdk-atoms/delta-indicator";

<DeltaIndicator current={128} previous={115} polarity="higher_is_better" />;

KpiStat

Formatted metric display with label, sublabel, and optional delta indicator.

import { KpiStat } from "@/components/vdk-atoms/kpi-stat";

<KpiStat
  value="$32,100"
  label="Revenue"
  delta={{ current: 32100, previous: 28400, polarity: "higher_is_better" }}
/>;

RingGauge

Animated triple-ring gauge with gradient or threshold-based coloring.

import { RingGauge } from "@/components/vdk-atoms/ring-gauge";

<RingGauge value={78} label="ICP Score" centerValue="78" />;

SparkBar

Horizontal progress bar with optional ghost bar (previous value) and threshold coloring.

import { SparkBar } from "@/components/vdk-atoms/spark-bar";

<SparkBar
  value={72}
  label="Engagement"
  threshold={{ strong: 80, moderate: 50 }}
/>;

TrendLine

SVG sparkline with auto-detected slope coloring and optional gradient fill.

import { TrendLine } from "@/registry/new-york/ui/vdk-atoms/trend-line";

<TrendLine data={[12, 15, 13, 18, 22, 20, 25]} showGradientFill />;

ScoreBadge

Score-colored badge with filled, outlined, and dot variants.

import { ScoreBadge } from "@/components/vdk-atoms/score-badge";

<ScoreBadge
  label="Strong"
  score={85}
  threshold={{ strong: 80, moderate: 50 }}
/>;

AlertPulse

Severity-colored pulsing dot indicator for status displays.

import { AlertPulse } from "@/components/vdk-atoms/alert-pulse";

<AlertPulse severity="warning" label="High Latency" />;

ComparisonPair

Side-by-side bar comparison with animated bars and delta bridge.

import { ComparisonPair } from "@/components/vdk-atoms/comparison-pair";

<ComparisonPair
  metric="Leads"
  you={{ label: "You", value: 342, displayValue: "342" }}
  them={{ label: "Avg", value: 215, displayValue: "215" }}
/>;

TimelineStrip

13-week activity strip in bars or heatmap variant.

import { TimelineStrip } from "@/components/vdk-atoms/timeline-strip";

<TimelineStrip data={weeklyData} variant="bars" label="13-Week Activity" />;

Shared Utilities

The atoms bundle includes three shared utility files:

• atom-types.ts — AtomSize type (sm | md | lg), DeltaProps interface, size presets
• score-utils.ts — scoreColor() function, threshold config, oklch color constants
• chart-colors.ts — Hex color constants for Recharts/SVG components

Lineage

Modifications

• Extracted from vandoko-ai-site atom system
• oklch color token alignment with registry globals
• Bundled utilities with relative imports for registry compatibility
• Flat directory structure for single-install