Web Components for data screens

DataV Kit

Precision visual primitives for data dashboard surfaces.

datav-kit ships SSR-safe Custom Elements for large-screen dashboard decoration. Components live under Components; Guide pages stay focused on setup, themes, and authoring.

Install Components Themes

LIVE ELEMENTdvk-border-box-11

Command Center

Operations Surface

Throughput

Nodes

Latency

Decorative Containers

Numbered border boxes and HUD rails that adapt to real host sizes.

Motion Metrics

Animated numeric display with formatting, slots, and reduced-motion support.

Theme Tokens

Optional CSS variable presets for cyber blue, ice white, neon, matrix, and solar palettes.

html

<dvk-border-box-11 colors="#3d7fb8,#6ed7e8,#52f0b5">
  <section>Command Center</section>
</dvk-border-box-11>

Product Scenarios

Multi-case large-screen demos

Two complete business scenes show how DataV Kit borders, decorations, counters, and fit-screen containers compose into product-ready data screens.

Product Scenario

航空运行数据中台完整大屏

以航空 AOC 为业务场景，使用少量 DataV Kit 组件搭建 1920 x 1280 固定设计画布，展示企业级数据中台的整体表达能力。

运行日 D20260630华东主控 / AOC 联席

AERO OPERATIONS COMMAND CENTER

航空运行数据中台

北京时间 14:28:36全域协同状态 NORMAL

今日计划航班已执行 1,426

放行正常率同比 +1.6%

在途航班高密度航路 18

重点保障VIP / 中转 / 医疗

旅客流量值机完成 91.4%

Airspace Situation

全国空域态势总览

航路 286扇区 74流控 12

PEK北京

PVG上海

CAN广州

CTU成都

URC乌鲁木齐

MU583

CA981

CZ327

HO1295

WX-17绕飞评估

Operational Timeline

未来四小时运行节奏

12:00 - 16:00

12:00

离港波峰

13:00

航路放行

14:00

天气绕飞

15:00

到港压降

16:00

机位回收

Product Scenario

景区运营数据大屏

以中央景区沙盘作为第一视觉，左右两侧承载关键状态和处置队列，配色收敛为深墨蓝、湖青、暖金与少量告警红。

SCENIC OPERATIONS山海云谷景区 / 指挥调度

SMART SCENIC COMMAND

山海云谷智慧景区运营总览

运行日 D2026070514:08:19综合承载 MODERATE

Crowd Distribution景区沙盘与分流路线

主路径：北游客中心 -> 湖畔栈道 -> 峡谷营地

A1北游客中心7.8k

B4云顶索道8.4k

C2湖畔栈道5.1k

D6古镇街区12.3k

E3峡谷营地3.7k

分流建议古镇街区向峡谷营地导流

预计 28 分钟内压降 11%，保持索道排队不超过 20 分钟。