简介
@cubejs-client/react 是一个用于构建分析应用的 JavaScript 库。该库提供了一些组件和钩子函数,可以轻松地在 React 应用中使用 Cube.js 进行数据分析。
本文将介绍如何使用 npm 包 @cubejs-client/react 来构建基于 Cube.js 的分析应用,并提供示例代码方便读者学习和参考。
安装
@cubejs-client/react 是一个通过 npm 发布的包,可以使用以下命令进行安装:
--- ------- --------------------
快速开始
初始化 Cube.js 应用
首先需要创建一个 Cube.js 应用。可以使用 Cube.js CLI 工具来创建应用:
--- --------------- ------ -- --------
在这里使用 -d postgres 参数来指定使用 PostgreSQL 数据库存储数据。执行完以上命令后,将会在当前目录下创建一个名为 my-app 的应用。
Cube.js 应用是一个基于 Node.js 编写的 Web 应用,其中包含 Cube.js 的代码和配置文件。可以使用以下命令启动 Cube.js 应用:
-- ------ --- -----
启动成功后,访问 http://localhost:4000 即可访问 Cube.js 应用的 Web 界面。
使用 @cubejs-client/react
在 React 应用中使用 @cubejs-client/react,需要先引入该包:
------ - ------------ - ---- -----------------------
然后创建一个 CubeProvider 组件,指定 Cube.js 应用的 API URL:
-------- ----- - ------ - ------------- ------------------------------- --- ---- --- --------------- -- -
在 CubeProvider 中包含的组件可以使用 Cube.js 的 API 来获取数据,和 React 无缝衔接。
基本组件
@cubejs-client/react 提供了以下几个用于数据分析的基本组件:
QueryRenderer
QueryRenderer 组件用于发送查询请求并渲染结果。它接收以下三个属性:
query
:用于查询的 MDX 语句。render
:用于渲染查询结果的组件。cubejsApi
:一个用于自定义 Cube.js API 地址的对象,可选。
------ - ------------- - ---- ----------------------- ------ - --------- - ---- ------------------ ------ ----------- -------- ------------ - ------ - -------------- -------- --------- ----------------- ----------- --------------------------- --------------- - - ---------- ------------------- ---------- ------ -- -------- --------- -- -- -- ---------- --------- -- -- - -- ------------ - ------ ---------------------- - ------ ---------- ----------------------------- --- -- -- -- -
上述示例代码中使用了 Chart.js 来渲染折线图。QueryRenderer 渲染 resultSet.chartPivot(),将查询结果转换成 Chart.js 的数据格式。
CubeProvider
CubeProvider 组件在使用中已介绍,用于设置 Cube.js 应用的 API URL,并提供可查询数据的上下文。
------ - ------------ - ---- ----------------------- -------- ----- - ------ - ------------- ------------------------------- --- ---- --- --------------- -- -
QueryBuilder
QueryBuilder 组件用于根据用户选择的维度和指标,生成 MDX 查询。
------ - ------------ - ---- ----------------------- -------- -------------- - ------ - ------------- -------- --------- ----------------- --------------- - - ---------- ------------------- ---------- ------ -- -------- --------- -- -- -- -- -- -
SQLRender
SQLRender 组件用于渲染查询生成的 SQL 语句。
------ - --------- - ---- ----------------------- ------ --------------------- -------- -------------- - ------ ---------- ------------- - ---- ------- --- -
上述代码中使用了 Ant Design 样式库。SQLRender 渲染的结果是可编辑的,可以对生成的 SQL 语句进行调整。
总结
本文介绍了如何使用 npm 包 @cubejs-client/react 来进行数据分析,并提供了几个基本组件的示例代码。读者可以根据这些示例代码来学习使用 @cubejs-client/react,轻松构建自己的数据分析应用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/cubejs-client-react