# @cumul\.io/react-cumulio-dashboard 中文文档 规范地址：https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/ 版本：4\.0\.2 npm 元数据更新时间：2025-12-04T09:35:52.684Z 中文译文更新时间：2026-11-11T04:55:52.860Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cumul.io/react-cumulio-dashboard 原文对照：https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/?lang=original 弃用说明：Deprecated in favor of @luzmo/react-embed ## 关键信息（来自 npm 元数据） - 包体积（解压后）：15.1 kB，6 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：react ^16 \|\| ^17 \|\| ^18，react-dom ^16 \|\| ^17 \|\| ^18，@cumul\.io/cumulio-dashboard 4\.0\.0 - 首次发布：2021-10-19T09:46:33.209Z - 最新版本发布：2024-01-23T08:33:12.092Z - 近 30 天下载量：3158（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：38（近 12 个月 0 个） ## 中文简介 # 反应-积分-dashboard ## 安装 ```sh npm install @cumul.io/react-cumulio-dashboard ``` 也可以使用：`pnpm add @cumul.io/react-cumulio-dashboard`、`yarn add @cumul.io/react-cumulio-dashboard`、`bun add @cumul.io/react-cumulio-dashboard` ## README # 折旧 # 这个套件已经贬值,有利于 [@luzmo/反应-嵌入](https://www.npmjs.com/package/@luzmo/react-embed) # 反应-积分-dashboard 这是用于嵌入的 React 库 [卡穆尔.io](https://cumul.io/main) 反应应用程序中的仪表板. ## 目录 1. [安装指令](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-installation-instructions) 2. [使用量](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-usage) 3. [活动](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-events) 4. [公共方法](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-public-methods) 5. [更改日志](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-changelog) 6. [移徙](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-migration) 7. [快速链接](https://npmcn.com/package/%40cumul.io/react-cumulio-dashboard/#readme-quick-links) ## 安装指令 ```bash npm i @cumul.io/react-cumulio-dashboard ``` ## 使用量 ```ts import { CumulioDashboardComponent, CumulioDashboard } from '@cumul.io/react-cumulio-dashboard'; import { useRef } from 'react'; ... function CumulioWrapper() { const ref = useRef(null); return (
console.log('itemsRendered', e)}>
); } ... ``` **属性** 以下列出仪表板上可用的属性 | 财产 | 类型 | 说明 | | --- | --- | --- | | `dashboardId` | 字符串 | 您想要嵌入的 Cumul.io 仪表板的标识 | | `dashboardSlug` | 字符串 | 您想要嵌入的 Cumul.io 仪表板的弹片( 如果提供仪表板Id, 将使用) | | `itemId` | 字符串 | 您想要嵌入的 Cumul.io 项的 ID | | `itemDimensions` | {宽:数/弦;高:数/弦;} | 只有在提供了项目ID时才适用项目的宽度和高度。 接受 JSON 字符串. | | `authKey` | 字符串 | 通过 Cumul.io API 生成的授权密钥 | | `authToken` | 字符串 | 通过 Cumul.io API 生成的授权令牌 | | `language` | 字符串 | 仪表板语言: 如"en"(默认:"auto") | | `screenMode` | 字符串 | 您的仪表板的屏幕模式 : “ 移动 ” 、 “ 平板 ” 、 “ 桌面 ” 、 “ 大屏幕 ” 、 “ 固定 ” 或 “ 自动 ” (默认 : “ 自动 ” ) | | `switchScreenModeOnResize` | 布尔 | 真:嵌入式仪表板可以在改变容器大小时切换屏幕Modes,假:Dashboard会保留同一种屏幕Mode(默认:真实) | | `loaderBackground` | 字符串 | 加载器元素的背景颜色( 默认 : '# f9f9f9' ) | | `loaderFontColor` | 字符串 | 装入器文字的字体颜色( 默认 : '# 5a5a5a5a' ) | | `loaderSpinnerColor` | 字符串 | 装入器的自旋颜色( 默认 : “ rgba( 255, 165, 0, 0. 7) ”) | | `loaderSpinnerBackground` | 字符串 | 旋转器的背景颜色( 默认 : “ rgba( 169, 169, 169, 0. 14) ”) | | `appServer` | 字符串 | Cumul.io 连接的租借(默认:"https://app.cumul.io/" 美国设置的应用程序Server 到"https://app.us.cumul.io/") | | `timezoneId` | 字符串 | 你想在仪表板上使用的时区 这个时区 id 需要是一个有效的 id , 可以在 [IANA 时区数据库](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)例如:欧洲/布鲁塞尔或美洲/纽约. | | `apiHost` | 字符串 | 要连接的 API 服务器 (default: 'https://api. cumul.io/' for USs set apiHost to 'https://api.us.cumul.io/') | | `editMode` | 字符串 | 指定嵌入式仪表板是否可编辑。 接受值:"视图","编辑Limited","编辑Full". 不希望嵌入式仪表板可编辑时使用"视图". (过失:"观" | | `mainColor` | 字符串 | 对嵌入式仪表板编辑器白标签中使用的主色调可选更改. 如果不提供,则使用组织上所设置的白色标签颜色的主要颜色。 应当指定为 rgb 值的字符串(即 “ rgb( 50, 50, 50) ”) . | | `accentColor` | 字符串 | 嵌入式仪表板编辑器的白标签中使用的口音颜色的可选覆盖. 如果不提供,则使用组织上所设置的白标签颜色的口音颜色。 应当指定为 rgb 值的字符串(即 “ rgb( 50, 50, 50) ”) . | ## 活动 | 名称 | 说明 | 事件参数 | | --- | --- | --- | | 已更改 过滤器 | 过滤器被更改时退出 | `ChangedFiltersEvent` | | 自定义事件 | 解除自定义事件时退出 | `CustomEvent` | | 导出 | 导出完成或失败时发出 | `ExportedEvent` | | 已招标的项目 | 当所有物品都提供时, 才被放出 | `ItemsRenderedEvent` | | 装入 | 装入仪表板时放出 | `LoadEvent` | ## 公共方法 ```typescript getDashboards(): Promise // Returns an instantly resolved promise with an array of all the visible dashboards on a page with their information. getData(itemId: string): Promise // Promise that returns an array with the data of a item. getFilters(): Promise // Promise that returns an array of filters. setAuthorization(key: string, token: string): Promise // Sets a new pair of authKey & authToken for the dashboard refreshData(itemId?: string): Promise // Refreshes the data of a specific item/chart when the id of that item is supplied. Without a itemId this refreshes the data in all items. reloadDashboard(): Promise // Reloads the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded) exportDashboard(type?: ExportType): Promise // Exports the current dashboard as either pdf or png. getAccessibleDashboards(): Promise // Retrieves a list of all dashboards an integration has access to. authKey and authToken needs to be set for this function to work. setEditMode(editMode: string): Promise // Sets the editMode of the current dashboard. Accepted parameters: view , editLimited , editFull . ``` ## 更改日志 - [更改日志](https://cumulio-internal.github.io/embed-libraries/changelogs/react-cumulio-dashboard/) ## 移徙 ### 从 3.x.x 迁移到 4.x.x - 过滤器显示为 `FilterGroup` 数组代替一个 `Filter` 阵列. `FilterGroup` 是一个包含过滤器列表和(或)描述其关系的条件的对象. `FilterGroup` 也可以有儿童组支持复杂的过滤逻辑 ```typescript // FilterGroup { id: string; condition: 'and' | 'or'; filters: Filter[]; subGroups: FilterGroup[]; origin: string; datasetId?: string; // dataset id in case of dahsboard level filters itemId?: string; // chart id in case of chart level filters } // Filter { expression: string; parameters: []; properties: { id: string; origin: string; type: string; itemId: string; ignore?: string[]; } } ``` - `getFilters()` 方法响应和 `changedFilters` 事件数据现在包含过滤器,作为 `FilterGroup` 对象代替 `Filter` 对象 ```typescript getFilters(): Promise ``` ```typescript // changedFilters event data { changed: FilterGroup[]; // changed filters filters: FilterGroup[]; // all filters // ... other event properties } ``` ### 从 2.x.x 迁移到 3.x.x - 无更改 ### 从 1.x.x 迁移到 2.x.x - 所有被调用用于储存的方法现在应调用组件参考(可用 `useRef to obtain a ref`) (中文(简体) ). - `chartId` 现在叫做 `itemId`, (中文(简体) ), `charts-rendered` 现在叫做 `items-rendered` - 所有事件现在都属于格式 `{ data: { ...eventData } }`, (中文(简体) ), `eventData` 属于格式 ```ts { dashboardId?: string; dashboardSlug?: string; itemId?: string; language: string; name: string; screenMode: string; type: string; dimensions?: object; // populated depending on the event changed?: []; // populated depending on the event filters?: []; // populated depending on the event item?: string; // populated depending on the event origin?: string; // populated depending on the event object?: string; // populated depending on the event data?: object; // populated depending on the event } ``` - getFilters 现在返回一系列过滤器. `[...objectOfFilters]`, (中文(简体) ), `objectOfFilters` 属于格式 ```ts [{ expression: string; parameters: []; properties: { id: string; ignore?: string[]; origin: string; type: string; viz: string; } }] ``` 为了更多 [迁移请点击此处](https://cumulio-internal.github.io/embed-libraries/migrations/react-cumulio-dashboard/)。 。 。 . ## 快速链接 [卡穆尔.io](https://cumul.io/) | [代码框示例](https://codesandbox.io/s/react-cumulio-dashboard-jh91i) | [移徙](https://cumulio-internal.github.io/embed-libraries/migrations/react-cumulio-dashboard/) | [更改日志](https://cumulio-internal.github.io/embed-libraries/changelogs/react-cumulio-dashboard/) ## 常见问题 ### @cumul\.io/react-cumulio-dashboard 是什么？ 反应-积分-dashboard注意：该包已被作者标记为弃用——Deprecated in favor of @luzmo/react-embed ### 如何安装 @cumul\.io/react-cumulio-dashboard？ 在项目目录运行 npm install @cumul\.io/react-cumulio-dashboard，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16 \|\| ^17 \|\| ^18）、react-dom（^16 \|\| ^17 \|\| ^18）、@cumul\.io/cumulio-dashboard（4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cumul\.io/react-cumulio-dashboard 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cumul\.io/react-cumulio-dashboard 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @cumul\.io/react-cumulio-dashboard 可以商用吗？ @cumul\.io/react-cumulio-dashboard 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @cumul\.io/react-cumulio-dashboard 的下载量有多少？ 根据 npm 官方下载统计，@cumul\.io/react-cumulio-dashboard 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,158 次，日均约 105 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cumul\.io/react-cumulio-dashboard 还在维护吗？ 最新版本 4\.0\.2 发布于 2024/01/23（2 年前）；至今共发布 38 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/19。作者已将其标记为弃用，新项目建议寻找替代方案。