前言
Dashboards-Helpscout 是一款基于 React 和 Help Scout API 开发的仪表板应用程序。它可以让 Help Scout 用户更好地理解和分析他们的 Help Scout 数据。在本文中，我们将详细介绍如何使用这个 npm 包，并且提供一些示例代码和指导。
安装
安装 npm 包的命令如下：
npm i dashboards-helpscout --save
也可以使用 yarn：
yarn add dashboards-helpscout
使用
使用 npm 包非常简单，首先，我们需要将 <dashboard> 组件添加到我们的应用程序中，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -----------------------
----- ---- -------- - -- -- -
-----
---------- --
------
--
------ ------- ----接下来，我们需要设置一些配置参数，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -----------------------
----- ------ - -
-------------- --------------
--------- -----------------
------------- ---------------------
--
----- ---- -------- - -- -- -
-----
---------- --------------- --
------
--
------ ------- ----以上代码中的 YOUR_APP_ID、YOUR_CLIENT_ID、YOUR_CLIENT_SECRET 需要用户自行替换为自己的 Help Scout API 配置。
组件
Dashboard 组件
Dashboard 组件是整个库的核心组件。它是一个高度可定制的仪表板，可以根据用户需要展示 Help Scout API 数据。在 <Dashboard /> 标签中添加属性，Dashboard 组件就可以配置。
以下是 Dashboard 组件支持的属性列表：
- config: Help Scout API 的配置信息。
-- -------------------- ---- ------- ------ - --------- - ---- ----------------------- ----- ------ - - -------------- -------------- --------- ----------------- ------------- --------------------- -- ---------- --------------- ---
- filters: Dashboard 需要使用的过滤器列表。
-- -------------------- ---- -------
------ - --------- - ---- -----------------------
----- ------- - -
-
------ ----------
--------- ----------
------ -------------
------- -- ------ -------- ------ ------- -- - ------ -------- ------ ------- ---
--
-
------ ---------
--------- ----------
------ ---------
------- -
- ------ ------- ------ ------ --
- ------ ---------- ------ --------- --
- ------ --------- ------ -------- --
--
--
--
---------- ----------------- ---- dataSets: Dashboard 需要展示的数据集合。
-- -------------------- ---- -------
------ - --------- - ---- -----------------------
----- -------- - -
-
------ -------- -- --------
--------- ----------------------------------
----- ------
--
-
------ -------- -- ---------
--------- --------------------------------------
----- ------
--
--
---------- ------------------- ---- onFilterSelect: Dashboard 选择过滤器时的回调函数。
import { Dashboard } from 'dashboards-helpscout';
const handleFilterSelect = (filter) => {
console.log('Selected filter', filter);
};
<Dashboard onFilterSelect={handleFilterSelect} />;DataSet 组件
DataSet 组件用于展示 Help Scout API 返回的数据。以下是 DataSet 组件支持的属性列表：
- label: 数据集的标签。
import { DataSet } from 'dashboards-helpscout';
<DataSet label='Tickets by Status' />;- endpoint: API 端点，用于请求 Help Scout 数据。
import { DataSet } from 'dashboards-helpscout';
<DataSet endpoint='/reports/tickets?groupBy=status' />;- type: 数据集类型。
import { DataSet } from 'dashboards-helpscout';
<DataSet type='bar' />;- config: API 配置信息。
-- -------------------- ---- ------- ------ - ------- - ---- ----------------------- ----- ------ - - -------------- -------------- --------- ----------------- ------------- --------------------- -- -------- --------------- ---
示例代码
下面展示如何在现有 React 应用程序中使用 Dashboard 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -----------------------
----- ------ - -
-------------- --------------
--------- -----------------
------------- ---------------------
--
----- ------- - -
-
------ ----------
--------- ----------
------ -------------
------- -- ------ -------- ------ ------- -- - ------ -------- ------ ------- ---
--
-
------ ---------
--------- ----------
------ ---------
------- -
- ------ ------- ------ ------ --
- ------ ---------- ------ --------- --
- ------ --------- ------ -------- --
--
--
--
----- -------- - -
-
------ -------- -- --------
--------- ----------------------------------
----- ------
--
-
------ -------- -- ---------
--------- --------------------------------------
----- ------
--
--
----- ------------------ - -------- -- -
--------------------- -------- --------
--
----- ---- -------- - -- -- -
-----
----------
---------------
-----------------
-------------------
-----------------------------------
--
------
--
------ ------- ----结论
Dashboards-Helpscout 是一个非常实用的 npm 包，可以帮助 Help Scout 用户更好地分析和理解他们的 Help Scout 数据。在本文中，我们详细讲解了如何安装和使用这个 npm 包，并提供了示例代码和指导。希望这篇文章能够对 Help Scout 用户提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/101949