@dhis2/d2-ui-analytics 是一个为 DHIS2 系统设计的分析工具库，它提供了可视化和可操作的分析工具，方便用户快速地生成和定制他们所需的分析报告。本文将介绍如何使用 @dhis2/d2-ui-analytics，包括：安装、引用、分析组件、数据源、过滤器以及分析报告的生成。
安装
我们可以通过以下命令，在本地安装 @dhis2/d2-ui-analytics：
npm install @dhis2/d2-ui-analytics
引用
在使用 @dhis2/d2-ui-analytics 前，我们需要引入一个名为 d2 的 DHIS2 SDK 的实例。在本示例中，我们将实例化 d2 并保存在变量中。
import { getInstance } from "d2";
const d2 = await getInstance();然后，我们可以使用 desctructuring assignment 语法，将 @dhis2/d2-ui-analytics 引入到变量中：
import { Visualization, Chart } from "@dhis2/d2-ui-analytics";分析组件
@dhis2/d2-ui-analytics 提供了多个可视化组件，我们可以直接在我们的应用程序中使用这些组件来快速构建视觉分析。
首先，让我们看下 Visualization 组件的使用。该组件可通过 source 和 type 属性指定数据来源和类型。例如：
<Visualization
source={{
id: "ouId",
path: "/organisationUnits",
}}
type="PIVOT_TABLE"
/>上述代码将渲染一个名为「ouId」的组织单位的饼图，数据源为 "/organisationUnits"。
可以通过 DHIS2 API 文档 中的 resource 的指定属性，构造数据源的对象。
其次，让我们来看 Chart 组件。该组件提供了更多的图表类型和配置选项，并与 Visualization 组件类似，需要我们指定数据源和类型。例如：
-- -------------------- ---- -------
------
---------
--- -------
----- ---------------------
--
-----------
------------
-----------
--上述代码将渲染一个名为「ouId」的组织单位的折线图，宽度为 600，高度为300。
数据源
我们可以使用 @dhis2/d2-ui-analytics 来快速读取和展示 DHIS2 系统中的任何数据。可以通过 D2 API 从 DHIS2 系统中加载数据源。
例如，我们可以使用 PIVOT_TABLES API 来获取一张折线图的数据源：
-- -------------------- ---- -------
----- ---------- - ----- ------------
-------------
-----------------------
-----------------------
----------------------
-------------------
---------- -----
------ -
-- ---- -- --- -----
--
--
-----------------------
-------------
-
---------- -----
------ -
-- ---- -- ---- --------
--
--
--
------上述代码将获取一个 DHIS2 系统中的折线图的数据源，并指定数据元素 ID（dxId）、时间段（peId）和组织单位 ID（ouId）作为查询条件。
过滤器
我们可以使用 @dhis2/d2-ui-analytics 提供的过滤器来帮助我们筛选、组合和排序数据。
其中最基本的 filter 是 「数据元素」（data element）过滤器。它可以指定一个或多个数据元素 ID，然后可以使用 DataFilters.filter() 方法筛选指定的数据元素。
例如，以下代码将创建一个数据元素 ID 的列表：
const dataElementIds = ["oTdyT2M1mBV", "dKjvTkzOf1G", "X9PVfKjyAhn"];
现在我们可以使用 DataFilters.filter() 方法，从之前定义的数据源中筛选出仅包含指定数据元素的数据集：
const filteredDataSet = DataFilters.filter(pivotTable, dataElementIds);
分析报告
最后，我们将想 DHIS2 的系统中生成一个新的分析报告。@dhis2/d2-ui-analytics 提供了向 DHIS2 系统中创建和发布分析报告的 API，我们可以使用这些 API 来自动化生成分析报告。
以下是生成分析报告的示例：
-- -------------------- ---- -------
----- -------------- - -------------------------
----- --- -------- --------
---
--------------------------
----- --------------
------------ ----
--------------- ---------- - ------- --- -- --------------
--------------------- -----
-------------------- -----
------- -
-
--- -------
---------- -----
----- -
-
---------- -----
------ -
-- ---- -- --- -----
--
--
--
-------- -
-
---------- -----
------ -------------------
--
--
--
--
---
------------------------------------- -- -
--------------------- ------ ------- --- -------------
---上述代码将创建一个名为「My Analysis Report」的分析报告，其中包含来自我们之前创建的数据源的一个折线图，折线图按时间段和组织单位进行分组排列。
总结
@dhis2/d2-ui-analytics 为 DHIS2 系统的分析报告提供了一个非常强大的工具集。通过本文介绍的安装、引用、分析组件、数据源、过滤器和分析报告的生成，你可以开始为你的 DHIS2 系统构建定制化的分析报告了。总之，使用 @dhis2/d2-ui-analytics 可以帮助我们快速构建灵活的、可视化的数据报告，从而更好地完成任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116284