@ devicechain/ 部件
DeviceChain的反光仪表板部件 加上铺出一个板子的渲染器.
32个部件——图表、仪表、表格、机队表、警报视图、,
命令控件、一个实体选择器和一个地图——所有数据都通过
@devicechain/dashboards。 。 。 .
完全带有 CSS 自定义属性。 没有尾风,没有全球风格,没有 关于你的应用程序外壳的意见 —— 这些是内置的.
npm install @devicechain/widgets @devicechain/dashboards @devicechain/client graphql react react-dom
铺设一板
import { DashboardRenderer } from '@devicechain/widgets';
import { DashboardHub, parseDashboardDefinition } from '@devicechain/dashboards';
const hub = new DashboardHub({ resolver, authorities: user.scopes });
const definition = parseDashboardDefinition(json);
<DashboardRenderer definition={definition} hub={hub} actions={hub} />;
奥米 actions 对于严格只读的挂载和动作部件——提醒
确认,命令发送——在没有控制的情况下进行。 这就是整个
选入:从未通过的取景器 actions 无法写入, 不管是什么
内有板.
模板板将其槽装入渲染器上,而不是中枢上:
<DashboardRenderer bindings={bindings} … />为董事会保留一个枢纽
(单位:千美元)useDashboardHub(resolver, authorities) 建造和处置; 一个新的
bindings 映射只重新订阅槽移动的部件 .
有几个内置的装入他们的组件代码 在第一个挂载,所以一个板没有
他们从不下载 在代码到达之前,部件的盒子是空的。 改为:
画整个板在它的第一帧,等待 preloadWidgets 与董事会
渲染前的部件类型 :
import { createBuiltinWidgetRegistry, preloadWidgets } from '@devicechain/widgets';
const registry = createBuiltinWidgetRegistry();
await preloadWidgets(registry, definition.widgets.map((w) => w.type));
它从不拒绝:一个无法加载的块仍然在部件本身中失败, 它的出错边界显示它.
或者自己驾驶一个部件 ConnectedWidget;它解决了部件
通过一个登记册(默认内置,
或者你通过的那个 registry; 见 createBuiltinWidgetRegistry 财务报告和审定财务报表
builtinWidgetDefinitions,以及 @devicechain/widget-sdk (以添加自己的内容). 一个部件
绑入一个槽需要先解决其数据源(resolveWidgets 或者说
resolveWidgetDatasource) (中文(简体) ).
部件
| 频道 | 部件 |
|---|---|
| 计量 | timeseries-chart, (中文(简体) ), latest-card, (中文(简体) ), gauge, (中文(简体) ), linear-gauge, (中文(简体) ), level-gauge, (中文(简体) ), battery, (中文(简体) ), status-light, (中文(简体) ), signal-bars, (中文(简体) ), compass, (中文(简体) ), progress-ring, (中文(简体) ), table, (中文(简体) ), bar-chart, (中文(简体) ), pie-chart, (中文(简体) ), fleet-table, (中文(简体) ), fleet-count, (中文(简体) ), device-status, (中文(简体) ), online-doughnut, (中文(简体) ), history-table, (中文(简体) ), status-grid, (中文(简体) ), state-timeline, (中文(简体) ), scada-symbol |
| 合计 | stat-card |
| 无(静态) | label, (中文(简体) ), image |
| 提醒 | alarm-table, (中文(简体) ), alarm-count, (中文(简体) ), alarm-severity |
| 控制 | command-button, (中文(简体) ), command-slider, (中文(简体) ), command-toggle |
| 选择 | entity-selector |
| 地点 | map |
fleet-table, (中文(简体) ), fleet-count,以及 bar-chart 在其单行设备模式中,读取设备
团体成员按成员。 其他测量部件,以及 stat-card显示一个
设备并拒绝组合. stat-card 显示一个数字(平均、最小、最大、总和、计数或
时间范围内.
device-status 财务报告和审定财务报表 online-doughnut 读取设备的连接(在线或离线,以及何时)
从设备状态,而不是他们的读取。 他们骑着测量通道
成员种子( e)data.members[].presence),所以频道集不变. device-status 显示一个
设备; online-doughnut 带一组人.
history-table 列出一个设备的存储历史为行, 每一桶存储在棋盘上
横跨,每个单元格桶的平均值(表格表示"每5米avg"). 它读商店的桶
(单位:千美元)binding.history而不是现场直播 拒绝一个团体.
当部件选择在 : timeseries-chart, (中文(简体) ),
fleet-table 财务报告和审定财务报表 history-table 把一张桌子(CSV) 和画布上的图表
(单位:千美元)timeseries-chart, (中文(简体) ), gauge, (中文(简体) ), compassa 巴布亚新几内亚。 文件包含了部件显示的内容,用于
屏幕上横跨并放出一桶 名字也这么说 由您自己选择的部件
选项 exportRows 参考文献 WidgetFrame (参见部件 SDK).
时间序列图、拨号仪表和指南针均用 Apache ECharts (英语); 其他部件为普通 DOM 还有SVG 地图是 地图Libre GL如此懒惰地装满了板子 上面没有地图 也没有下载.
WIDGET_OPTIONS 是每个部件选项包的打入方案
validateWidgetOptions 准确报告存放的袋子与
渲染器预期, 让作者UI 显示一个问题而不是
做错事了.
绘制地图:一个所需的主机接线
MapLibre在网络工人中解析出瓷砖,它得出工人的URL在
运行时间 从它自己的模块 URL — 一个没有捆绑器可以追踪的计算字符串。 这么说吧
没有捆绑者发布文件,浏览器404s它, new Worker() 不掷出,和
地图会变成一个空盒子,在控制台里什么都没有。 这是一个出名的
静静的失败,这不是什么 这个包可以纸面: 只有你
捆绑者可以发送文件.
因此,工人URL来自你,通过一个供应商. 在Vite上,这是一个 导入 :
import { MapRuntimeProvider } from '@devicechain/widgets';
import { viteMapRuntime } from '@devicechain/widgets/vite';
<MapRuntimeProvider runtime={viteMapRuntime}>
<DashboardRenderer definition={definition} hub={hub} />
</MapRuntimeProvider>;
在任何其他捆绑者上,您自己提供URL. 有一项要求
这是整个难度: MapLibre 载入 URL 是一个 模块工人, (中文(简体) ),
因此,无论您服务什么,都必须有一个模块,没有未解决的进口
这个. maplibre-gl/dist/maplibre-gl-worker.mjs 单靠自己并不是一个——第一个
线条导入兄弟姐妹, maplibre-gl-shared.mjs。 。 。 .
所以不要指着工人档案的单行本,特别是不
访问范围 new URL('maplibre-gl/dist/maplibre-gl-worker.mjs', import.meta.url)。 。 。 .
它看起来是正确的,它不是: 网页包装复制文件 作为一个资产,兄弟是
工人死在自己的第一线上
工人 URL,屏幕上的画布, 标记的设置, 建筑退出 0 并且没有输入
操纵台 地图上没有地图.
两个配方有效。 在网络包装上,给工人自己的入口,所以网络包装 将进口品装入:
entry: {
main: './src/index.tsx',
'maplibre-worker': 'maplibre-gl/dist/maplibre-gl-worker.mjs',
},
output: {
filename: (data) =>
data.chunk.name === 'maplibre-worker' ? 'maplibre-worker.js' : '[name].[contenthash].js',
},
...指向您选择的文件名:
const runtime = { workerUrl: '/maplibre-worker.js' };
或者,在任何捆绑, 复制两个文件自己:
// BOTH, under their own names, into one served directory:
// maplibre-gl/dist/maplibre-gl-worker.mjs -> public/vendor/
// maplibre-gl/dist/maplibre-gl-shared.mjs -> public/vendor/
const runtime = {
workerUrl: '/vendor/maplibre-gl-worker.mjs',
loadStyles: () => import('maplibre-gl/dist/maplibre-gl.css'),
};
loadStyles 是可选的 —— 如果您愿意, 自行导入 MapLibre 样式表
宁可热衷于 在这里供应它 保持83 KB(10.7 KB gzipped)
地图的懒散块,所以一个不打开地图下载的取景者,没有下载.
上方没有提供者的地图部件可以显示通知,而不是空白 画布. 这是有意的:没有线的东道主应该能够看到什么是 失踪.
maplibre-gl 是一个对等依赖,所以你的应用程序和这个软件包完全共享一个
copy. 一个工人从一个版本 驱动一个主线 在另一个是相同的
用不同的路线绘制空白地图.
基底图牌
TenantBasemapProvider 供应瓦片源。 它确实是可选的——与
没有提供者 地图回到平面上 分辨率级联存在
内 @devicechain/client 所以每个设备Chan表面都会解决一个覆盖
租户同样违约.
他们
每个颜色,半径和字体都来自 CSS 自定义属性,所以主机重排
通过在任何祖先上设置变量来设置部件 。 DeviceChain 将船值为
@devicechain/brand无; 无
这里需要他们.
从0.21升级
severityColor(severity)现在severityColor(colors, severity); 数据 颜色来自useSeverityColors()内@devicechain/widget-sdk。 。 。 .- 这个
timeseries-chart选项window(样本数)改为:windowSeconds(时间跨度),图表的选项版本从 1 移动到 2. 存盘被解析后转换:取出样本数 图表遵循董事会的时间范围. - 十三个部件是新的,所以
WidgetChannel和获得的元件 id 工会 成员switch他们需要新的病例.
见 如果您在 npm 包上构建 在发行的升级指南.
兼容性
反应19:无害环境管理,仅供捆绑者溶解(Vite、webpack、Rollup、esbuilt)使用.
所公布的申报使用无延伸规格,按
类型脚本 bundler 模块分辨率和 没有 下级 node16编号 :nodenext。 。 。 .
许可证
阿帕奇2.0 (英语). 见 自由主义。 。 。 .