# @devicechain/dashboards 中文文档

规范地址：https://npmcn.com/package/%40devicechain/dashboards/

版本：1\.4\.0
npm 元数据更新时间：2026-11-11T16:18:28.564Z
中文译文更新时间：2026-11-12T03:20:00.854Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devicechain/dashboards
原文对照：https://npmcn.com/package/%40devicechain/dashboards/?lang=original
项目主页：https://devicechain.io/
源码仓库：https://github.com/devicechain-io/devicechain

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.1 MB，50 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：graphql ^16\.0\.0 \|\| ^17\.0\.0，@devicechain/client 1\.4\.0
- 首次发布：2026-09-01T21:40:22.250Z
- 最新版本发布：2026-11-11T16:18:28.050Z
- 近 30 天下载量：4935（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：48（近 12 个月 48 个）

## 中文简介

设备Chain仪表盘运行时间——DashboardHub(在客户端线上进行远程订阅多功能,外加报警,命令和位置通道)和仪表盘定义,选择器,插槽,并装订-显示类型.

## 安装

```sh
npm install @devicechain/dashboards
```

也可以使用：`pnpm add @devicechain/dashboards`、`yarn add @devicechain/dashboards`、`bun add @devicechain/dashboards`

## README

# @devicechain/ dashboards (英语)

设备 Chain 仪表板运行时间: **电磁板**,该多轴活 用户线上的遥测、警报、命令和位置以及输入 **仪表板定义** 合同描述一个董事会.

没有反应,没有渲染。 这是部件集下的图层—— DeviceChain 控制台和独立的 `/dash` 观众都坐在上面,你们也一样. [`@devicechain/widgets`](https://www.npmjs.com/package/@devicechain/widgets) 实值 在这个软件包上构建的反相部件集.

```bash
npm install @devicechain/dashboards @devicechain/client graphql
```

`@devicechain/client` 财务报告和审定财务报表 `graphql` 是同伴的依赖关系。 同行而不是 普通依赖目的: 中枢将流错误分类为 `instanceof` 与 SDK 错误类型相对应,以及 `instanceof` 横跨两个 复制同一软件包的复制件 —— 复制件会变成“ 您可能不会看到 ” 设备"的读取 像一个停电.

## 枢纽

一个枢纽为整个董事会服务。 部件订阅;它进行分解.

```ts
import { DashboardHub, resolveWidgetDatasource } from '@devicechain/dashboards';

const hub = new DashboardHub({
  resolver,                 // how a selector becomes device tokens
  authorities: user.scopes, // what this viewer may do; drives hub.can(...)
});

// The hub holds no slot bindings: resolve a widget's `slot` selector through them
// first. A slot with no binding resolves to an explicit `unbound` selector, which the
// hub answers with no data; a raw `slot` selector is an error.
// It is undefined only for a widget that declares no datasource at all.
const datasource = resolveWidgetDatasource(widget.datasource, bindings);
const stop = datasource && hub.subscribeWidget(datasource, {
  next: (sample) => setLatest(sample),
});

// later
stop?.();
hub.disposeAll();
```

十个部件指向同一个设备打开 **一个** 上游订阅,不 十个。 每个部件都声明它所关心的测量名称(无一表示全部), 和枢机的粉丝 单流出到用户 谁要求每个名字.

每个信道都有自己的方法,每个订阅器返回其处置器:

| 方法 | 它携带着什么 |
| --- | --- |
| `subscribeWidget` | 数据源选择器的测量样本 |
| `subscribeMembers` | 一个舰队部件的成员, 然后每个成员的样本 标记在它的装置 |
| `bucketMeasurements` | 时间桶(计算、最小、最大、总和) |
| `subscribeAlarms` | 实时警报行,加 `acknowledgeAlarm` 编号 : `clearAlarm` |
| `subscribeCommands` | 命令行及其执行状态,加 `sendCommand` |
| `subscribeLocations` | 地图部件的位置序列 |

部件层取决于 `WidgetDataSource` 接口, 不在中枢上 班级,所以一个主机可以喂它 从枢纽,从 `SyntheticDataSource` 或从 记录运行( e)`RecordedDataSource`) (中文(简体) ). `subscribeMembers`, (中文(简体) ), `bucketMeasurements` 财务报告和审定财务报表 `readMemberSeeds` 在该界面上是可选的:没有它们的源会离开 需要他们这么说的部件,而不是显示一个数字.

`disposeAll()` 泪下每一个开放的频道——一个主机在板子上叫它 关闭,这就是保持 民意测验和插座 超过页面.

## 定义合同

一个仪表板是JSON。 服务器不透明地存储它; 这个软件包就是它得到的 一个形状.

```ts
import { parseDashboardDefinition, serializeDefinition } from '@devicechain/dashboards';

const board = parseDashboardDefinition(json); // throws DashboardDefinitionError
```

较此软件包的新版本保存的棋盘被拒绝而非读取为 当前格式: `DashboardDefinitionError` 携带 `code: 'schemaTooNew'` 及其发现的版本 `found`测试 `code`没有 `instanceof`,所以检查 当一个应用程序最后有两份软件包时,仍然保留.

解析是验证: 错误的棋盘在您的代码中失败, 而不是 半还后. 旧格式存储的棋盘按原样转换 分析,结果包含 `convertedFrom` 标记直到它再次被保存 (单位:千美元)`withoutConversionMark` 丢掉它. `isDirty` 将工作副本与其 保存原创.

### 版式

一块板子铺在方格细胞上 每个部件都有一个 `WidgetLayout`(单位:千美元) `Placement` 每个断点 `base` 所需经费。 安置要么是一个网格 脚印( e)`GridPlacement`或相对于另一个单元格的位置 部件( r)`RelativePlacement`) (中文(简体) ). 列数跟随容器,所以相同 板子在电话和墙上显示.

| 需求 | 出口 |
| --- | --- |
| 显示宽度的部件 | `activeBreakpoint`, (中文(简体) ), `resolvePlacement` |
| 制造器画的容器宽度 | `effectiveLayout`, (中文(简体) ), `layoutShape`, (中文(简体) ), `liveColumns` |
| 每个部件的像素框 | `layoutRects`, (中文(简体) ), `gridRect`, (中文(简体) ), `relativeRect`, (中文(简体) ), `cellSizeAt` |
| 网格长度和部件框架 | `gridLengthPx`, (中文(简体) ), `gutterPx`, (中文(简体) ), `paddingPx`, (中文(简体) ), `resolveFrame` |
| 按每个部件可以显示的内容放置 | `lintLayout`, (中文(简体) ), `blockingLayoutFindings` |

这个 `editor-model` 变换是纯函数 一个作者的 UI 可以被电线拖动 并调整大小 : `addWidget`, (中文(简体) ), `moveWidget`, (中文(简体) ), `resizeWidget`, (中文(简体) ), `setWidgetPlacement`, (中文(简体) ), `placeOnGrid`, (中文(简体) ), `placeRelative`, (中文(简体) ), `deleteWidget`, (中文(简体) ), `setTitle`, (中文(简体) ), `setCanvasGrid`, (中文(简体) ), `setCanvasDensity` 财务报告和审定财务报表 `updateWidget`,与 `gridPlacementToPx` 财务报告和审定财务报表 `pxToGridPlacement` 在单元格和像素之间转换。 移动或调整大小 a 网格部件将它现在覆盖的所有东西推出它的方式。 网格部件永远不会 重叠, 因此没有要管理的堆叠顺序 .

### 时间范围和密度

董事会有时间范围: `TIME_RANGE_PRESETS` (15分钟至7天), `initialTimeRange`, (中文(简体) ), `pauseRange` 编号 : `resumeRange` 财务报告和审定财务报表 `rangeWindow` 管理它,和 `timeRangeLinkFromSearch` 读取 `range`, (中文(简体) ), `paused` 财务报告和审定财务报表 `from` 编号 : `to` URL 参数 (单位:千美元)`timeRangeFromSearch` 只读 `range` 财务报告和审定财务报表 `paused`,对于一个不知道固定窗口的主机。 一个固定 从窗口到窗口是同一种状态的添加剂变体: `absoluteRange` 盖起它 `TimeRangeState.absolute` 标记它,同时 `paused`, (中文(简体) ), `pausedAt` 财务报告和审定财务报表 `spanSeconds` 仍在描述 窗口作为被冻结的滚动范围,所以只有知道滚动范围的代码继续工作。 密度 (单位:千美元)`CANVAS_DENSITIES`数字 : `compact`, (中文(简体) ), `comfortable`, (中文(简体) ), `wall`缩放每个文本和 间距大小 `DENSITY_SCALE`; 主机可能会在 视图时间.

## 槽数

一个董事会可以写一次,指向许多实体. 一个部件的数据源 名称 **插槽** 而不是一个设备, 并且主机提供一个绑定 查看时间的插槽 - `effectiveBindings`, (中文(简体) ), `resolveContextBindings`, (中文(简体) ), `applySelection` 财务报告和审定财务报表 `resolveSlotCandidates` 机器就是这个.

中枢没有束缚 在它之前,一个槽会解决给一个混凝土选择者 已订阅.. `resolveWidgetDatasource(datasource, bindings)`,该 `DashboardRenderer` 内 `@devicechain/widgets` 呼叫每个部件, 所以一个 中枢一生为一板服务,重新指定一个档次只能重新订阅 与它相连的部件。 无约束性决定的空格 `{ kind: 'unbound' }`, (中文(简体) ), 每个信道都视同零设备;它永远不会变成一个缺席 数据源,警报频道读作全租户. 一个生的 `slot` 选择器 直接交给枢纽是一个错误.

## 合成数据

`SyntheticDataSource` 执行与枢纽相同的接口并生成 合理的测量,这样可以预览、截图或 毫无证据的展示.

## 命令状态

`isTerminalCommandStatus` 财务报告和审定财务报表 `isCancellableCommandStatus` 是两个问题 值得问一个命令,它们是不同的问题——a `SENT` 命令 仍然在飞行中,但已经无法联系。 基础是 故意不导出: 每个表面都询问上游, 所以有新的状态 一些呼叫网站无法学习,其他网站则无法学习.

## 从0.21升级

0.22取代了布局模式,因此以0.21为单位所写的代码需要更改:

| 0.21 (简体中文) | 0.22 (简体中文) |
| --- | --- |
| `WidgetBox` | `Placement` (单位:千美元)`GridPlacement` 或者说 `RelativePlacement`(中文(简体) ) |
| `resolveWidgetBox` | `resolvePlacement` |
| `baseBox` | `basePlacement` |
| `setWidgetBox` | `setWidgetPlacement`,或 `moveWidget` 编号 : `resizeWidget` |
| `gridBoxToPx` 编号 : `pxToGridBox` | `gridPlacementToPx` 编号 : `pxToGridPlacement` |
| `bringToFront` | 删除: 网格部件无法重叠, 因此没有堆叠顺序 |

这些保留它们的名字,但更改类型 :

-   `WidgetLayout` 将断点映射为 a `Placement`,以及 `Breakpoints` 地图a 名称为 a `BreakpointSpec`。 。 。 .
-   `CanvasGrid` 替换 `gap` 财务报告和审定财务报表 `rowHeight` 与 `minCellSize`, (中文(简体) ), `gutter` 财务报告和审定财务报表 `padding`· ; `GridGeometry` 将其列和行大小替换为 `cell` 财务报告和审定财务报表 `gutter`。 。 。 .
-   `SYNTHETIC_GENERATORS` 是生成器 id 的列表 (`'sine'`, (中文(简体) ), `'ramp'`, (中文(简体) ), `'random-walk'`改为 `{ value, label }` 双人 提供自己的标签; 存储的id没有变化.
-   `parseDashboardDefinition` 拒绝一个网格部件重叠的定义。 A 类 在检查前转换旧格式的定义.

一些工会获得了会员,这打破了详尽无遗的 `switch` 在他们面前 `WidgetChannel` 已经 `'aggregate'` (统计卡), `OptionSpec` 已经 `ListOptionSpec`,以及 `WidgetType`, (中文(简体) ), `WidgetId` 财务报告和审定财务报表 `BuiltinWidgetId` 拥有新的 内建部件.

该版的升级指南涵盖了存储板和存储板的变动 其他软件包 : [如果您在 npm 包上构建](https://docs.devicechain.io/deployment/releases-and-upgrades#v0220-packages)。 。 。 .

## 兼容性

无害环境管理,仅供捆绑者溶液使用(网络、网络包装、滚动、建设)。 这个 所公布的申报使用无延展说明,在 类型脚本 `bundler` 模块分辨率和 **没有** 下级 `node16`编号 :`nodenext`。 。 。 .

## 许可证

阿帕奇2.0 (英语). 见 [自由主义](https://npmcn.com/package/%40devicechain/dashboards/LICENSE)。 。 。 .

## 常见问题

### @devicechain/dashboards 是什么？

设备Chain仪表盘运行时间——DashboardHub\(在客户端线上进行远程订阅多功能,外加报警,命令和位置通道\)和仪表盘定义,选择器,插槽,并装订-显示类型\.

### 如何安装 @devicechain/dashboards？

在项目目录运行 npm install @devicechain/dashboards，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：graphql（^16\.0\.0 \|\| ^17\.0\.0）、@devicechain/client（1\.4\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @devicechain/dashboards 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devicechain/dashboards 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @devicechain/dashboards 可以商用吗？

@devicechain/dashboards 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @devicechain/dashboards 的下载量有多少？

根据 npm 官方下载统计，@devicechain/dashboards 在 2026/10/12 – 2026/11/10 这 30 天内被下载 4,935 次，日均约 165 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devicechain/dashboards 还在维护吗？

最新版本 1\.4\.0 发布于 2026/11/12（今天）；至今共发布 48 个版本，其中过去 12 个月发布了 48 个；首次发布于 2026/09/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。